This tutorial will get you started in retrieving and binding data from an external XML. The useful thing about it, is that you can “feed” your application with data from external sources or your own XML.
So here is an approach on how to retrieve and display exchange rates provided by a Bank (Danmark Nationalbank) in Flex using a Datagrid and a label component.
1. Create a basic project or an mxml application and add an HTTPservice component, give it an id, and add the url to the XML file on the url property.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
 <mx:HTTPService id=”hsRPC” url=”http://www.nationalbanken.dk/dndk/valuta.nsf/valuta.xml”/>
</mx:Application>
2. Then you need to make a service request, usually on the creationComplete event, which will be dispatched after the Application has been initialized. You can also use another event to make the request, like for instance a click event on a button.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”hsRPC.send();”>
 <mx:HTTPService id=”hsRPC” url=”http://www.nationalbanken.dk/dndk/valuta.nsf/valuta.xml”/>
</mx:Application>
3. Now you need to handle the data coming from the XML, to do that you add a result handler inside the HTTPservice and just decide where to put the data. An ArrayCollection is the recommended class, among other things cause it provides you a lot of tools for data manipulation. So what you do know is, you create a new ArrayCollection (need to import the ArrayCollection class), and create a data handler function, inside a script tag.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”hsRPC.send();”>
<mx:Script>
 <![CDATA[
 Â
  import mx.collections.ArrayCollection;
  [Bindable]
  private var valuta:ArrayCollection;
   Â
 ]]>
</mx:Script>
 <mx:HTTPService id=”hsRPC” url=”http://www.nationalbanken.dk/dndk/valuta.nsf/valuta.xml”/>
</mx:Application>
4. The HTTPservice has a result event you can use to specify a function to be called when the data is succesfully returned. So you pass the event object as the parameter in the function and import the ResultEvent from the mx.rpc.events package. In our function here we drill our way inside the XML and put the data in the result object:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”hsRPC.send();”>
<mx:Script>
 <![CDATA[
 Â
  import mx.collections.ArrayCollection;
  import mx.rpc.events.ResultEvent;
  [Bindable]
  private var valuta:ArrayCollection;
 Â
  private function dataHandler(event:ResultEvent):void
 Â
  {
   valuta = event.result.exchangerates.dailyrates.currency;
   Â
  }
  Â
   Â
 ]]>
</mx:Script>
 <mx:HTTPService id=”hsRPC” url=”http://www.nationalbanken.dk/dndk/valuta.nsf/valuta.xml”
  result=”dataHandler(event)”/>
</mx:Application>
5. Now you just use a DataGrid component and specify its dataprovider as the ArrayCollection you created, and maybe a label to reference a single value. Hope the tutorial was useful, here is the final mxml:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”hsRPC.send();”>
<mx:Script>
 <![CDATA[
 Â
  import mx.collections.ArrayCollection;
  import mx.rpc.events.ResultEvent;
  [Bindable]
  private var valuta:ArrayCollection;
 Â
  private function dataHandler(event:ResultEvent):void
 Â
  {
   valuta = event.result.exchangerates.dailyrates.currency;
   Â
  }
  Â
   Â
 ]]>
</mx:Script>
 <mx:HTTPService id=”hsRPC” url=”http://www.nationalbanken.dk/dndk/valuta.nsf/valuta.xml”
  result=”dataHandler(event)”/>
 <mx:DataGrid id=”dGrid” dataProvider=”{valuta}”/>
</mx:Application>
August 29th, 2007 | Category: Flex ressources | Leave a comment
