Skip to end of metadata
Go to start of metadata

WebDynpro ABAP FlashIsland and Flex

The new technology WebDynpro ABAP FlashIsland allows to develop fancy Flash applications or components in MVC using WebDynpro ABAP an data from the Netweaver. For further information please follwo this link: https://www.sdn.sap.com/irj/sdn/index?rid=/webcontent/uuid/104fc5f9-27cf-2b10-c0a3-a7ada50b3cd7

Special characteristics of FlashIsland using Flex

  • Unexpected Wrapper behaviour:For example: You want to have a Flexchart where you can switch between different dataproviders at runtime you would probably do it this way:

    //Wrapped internal table datas
    [
    Bindable] var chart1Data:ArrayCollection;
    [
    Bindable] var chart2Data:ArrayCollection;
    
    
    //Dataprovider refernce for the chart
    [
    Bindable] var myProvider:ArrayCollection;
    
    MyChart.dataProvider = myProvider
    
    
    public function DatasLoaded(event:Event){//FlashIsland.EVENT_END_UPDATE_DATASOURCES Handler
    myProvider = copyChartData(chart1Data);
    }
    
    public function OnButtonClick(event:Event){//Button event which should change the chart datas
    
    if(MyButton.label == "Chart1"){
    myProvider = copyChartData(chart1Data);
    MyButton.label =
    "Chart2";
    }
    else{
    myProvider = copyChartData(chart2Data);
    MyButton.label =
    "Chart1";
    }
    }
    
    At the end you may wondering why there are no data you can see in the chart (wink) . You may read the chapter deeper, and try to debug the problem. And will wondering again, because the debugger will show you the same data in the ArrayCollection you put the reference on and in you refernce you use as dataprovider for you chart. Both Objects will containing the memory address of the datas on client side. But thats the problem your myProvider ArrayCollection only made a copy (because the Source and Targer is Bindable) of the memory address as String and the FlashIsland library will not unwrappe the datas these memory address containing.Therefore we have to go a little bit deeper how Flex describe complex datas like internal tables from ABAP.a internal table mapped over the view context to the Flex application is represented by a ArrayCollection. The datas for each row in the table are represented in named fields of a 1 dimensional Array
    if you wont to implement the example below successfully you have to do it that way:
//Wrapped internal table datas in this example both tables have the same structure
[Bindable] var chart1Data:ArrayCollection;[
Bindable] var chart2Data:ArrayCollection;

//Wrapped values containing the name of the column
[
Bindable] var index1:String; //Column 1
[
Bindable] var index2:String; //Column 2
[
Bindable] var index3:String; //Column 3


//Dataprovider refernce for the chart
[Bindable] var myProvider:ArrayCollection;
MyChart.dataProvider = myProvider

public function copyChartData(chartData:ArrayCollection):ArrayCollection{
var myTable:ArrayCollection;
var myRow:Array;
for each(Row:Object in chartData){
myRow = new Array();myRow.push(Row[index1]);
//Get the column value into the MyRow Array
myRow.push(Row[index2]);
myRow.push(Row[index3]);
myTable.addItem(myRow));
}
}

public function DatasLoaded(event:Event){//FlashIsland.EVENT_END_UPDATE_DATASOURCES Handler
myProvider = copyChartData(chart1Data);
}

public function OnButtonClick(event:Event){//Button event which should change the chart datas
if(MyButton.label == "Chart1"){myProvider = copyChartData(chart1Data);
MyButton.label = "Chart2";}else{myProvider = copyChartData(chart2Data);
MyButton.label = "Chart1";}
}

As you can see in the copyChartData Method, I put every row entry into a new Array and put this into a ArrayCollection

Remote debugging of Flex components running on NetWeaver Application Server |

For many cases you can not verify and test your flex code without running the whole application on the NetWeaver, because of FlashIsland eventing or data which is to complex and would take to much effort to build testdatas on client side. But with FlexBuilder 3 there is a comfortable way to debug the Flex Code of the remote running application. Look at this.

http://www.chrisrebstock.com/blog/2007/07/live-remote-debugging-feature-built-right-into-flex/

If you have any questions to that felle free to ask me marco.hammel@sap.com

  • No labels