[flexcoders] Passing data between JavaScript and Flex apps via FABridge (Question!)

[Private Romeo]

I am trying to build a simple sample which shows how (xml) data gets passed
via JavaScript to a Flex application where it is bound to a Flex Charting
control. However, I am stuck at the data passing part.

 

Here is the simple Flex Charting MXML Application:

 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute">

       <fab:FABridge xmlns:fab="bridge.*"/>

       <mx:Script>

             <![CDATA[

                    public function changeData(data:Object):void

                    {

                           myLabel.text="changeData()";

                           columnChart1.dataProvider = data;

                    }

             ]]>

       </mx:Script>

       <mx:Model id="sampleData">

             <items>

                    <item>

                           <Month>January</Month>

                           <Sales>1000</Sales>

                           <People>3</People>

                    </item>

                    <item>

                           <Month>February</Month>

                           <Sales>1200</Sales>

                           <People>5</People>

                    </item>

             </items>

       </mx:Model>

       <mx:VBox>

             <mx:Label id="myLabel" text="Pending..." />

             <mx:ColumnChart x="10" y="61" id="columnChart1"
dataProvider="{sampleData.item}">

                    <mx:series>

                           <mx:ColumnSeries displayName="Series 1"
yField="Sales" id="myColumns"/>

                    </mx:series>

             </mx:ColumnChart>

             <mx:Legend dataProvider="{columnChart1}"/>

       </mx:VBox>

</mx:Application>

 

Basically it draws a column chart and initially binds it to data delivered
by the mx:Model with id "sampleData".

The JavaScript function called on a click of an HTML Button looks something
like this:

             

function updateData() {

var flexApp = FABridge.flash.root();

       var newData =
"<items><item><Month>January</Month><Sales>1200</Sales><People>5</People></i
tem><item><Month>February</Month><Sales>1000</Sales><People>3</People></item
></items>";

       flexApp.changeData(newData);

}

 

Obviously I am trying to pass XML data to the Flex application where the
data binding is changed and the chart should update. The change of the data
provider does work. Once the HTML Button gets clicked, the chart clears, so
it does NOT show the new data.

 

I assume there is something wrong with the data types I am passing around.
Can anybody provide me with the final aha experience?!

 

Thanks.

R.

 

<<attachment: winmail.dat>>