Loading local XML file in flash builder

November 6th, 2009 |

There are a few ways to get a XML file as dataprovider within flash builder. Some people asked me how to do that in an easy way.

Well, in Flex Builder there actually was no easy way. You had to code it all yourself. But with the new Flash Builder you can do it pretty much automatically.

In this small manual I will tell you how.

Let’s assume you have the following .xml file in data/your_file.xml

<?xml version="1.0" encoding="UTF-8"?>
<colleagues>
 <colleague>
 <name>Jim</name>
 <age>32</age>
 </colleague>
 <colleague>
 <name>Sandra</name>
 <age>35</age>
 </colleague>
</colleagues>

Here are some methods you can use:

1. Simple mxml

<fx:Declarations>
 <fx:XML id="YourXml" source="data/your_file.xml" />
</fx:Declarations>

2. Use of the HTTPService, as seen in this video

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 initialize="myHttpService.send()">

 <fx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 import mx.rpc.events.ResultEvent;

 public var myData:ArrayCollection;

 protected function myHttpService_resultHandler(event:ResultEvent):void {
 myData = event.result.colleagues.colleague;
 }
 ]]>
 </fx:Script>
 <fx:Declarations>
 <s:HTTPService id="myHttpService"
 url="data/your_file.xml"
 result="myHttpService_resultHandler(event)"/>
 </fx:Declarations>
</s:Application>

3. Embedded in actionscript

<p><?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="<a href="http://ns.adobe.com/mxml/2009%22">http://ns.adobe.com/mxml/2009"</a>
 xmlns:s="library://ns.adobe.com/flex/spark"
 initialize="init()"></p>

<p><fx:Script>
 <![CDATA[
 [Embed(source=data/your_file.xml, mimeType=application/octet-stream)]
 public var MyXMLData:Class;
 public var  myData:XML;
 public function init():void {
 var byteArray:ByteArray = new MyXMLData() as ByteArray;
 myData = new XML(byteArray.readUTFBytes(byteArray.length));
 }</p>

<p>]]>
 </fx:Script></p>

<p></s:Application>[/</p>

4. Using data/services panel

Actually this is the best you can use. Off course you can do it like the methods above but if you really it easy, just use the data/services panel.

start with a new application and add your_file.xml as done previously
Data/Services >>>>>> connect to data/service
HTTP
Operation: getData |||||||| URL: data/your_file.xml
Service name: myLocalDataService
finish data/services
goto design view. add a dataGrid to the app
in properties panel click the 'bind to data'
select the service we created and configure the return type
auto-detect >>>>> sample xml (window should display our your_file.xml contents)
select root should be colleague (not colleagues).
And you're done!
if you want to bind the xml to a variable, you'll need to listen for a result event on the CallResponder

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/halo"
 xmlns:mylocaldataservice="services.mylocaldataservice.*">

 <fx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 import mx.controls.Alert;
 import mx.events.FlexEvent;
 import mx.rpc.events.ResultEvent;

 public var myData:ArrayCollection;

 protected function dataGrid_creationCompleteHandler(event:FlexEvent):void {
 getDataResult.token = myLocalDataService.getData();
 }

 protected function getDataResult_resultHandler(event:ResultEvent):void {
 myData = event.result as ArrayCollection;
 }

 ]]>
 </fx:Script>
 <fx:Declarations>
 <s:CallResponder id="getDataResult" result="getDataResult_resultHandler(event)"/>
 <mylocaldataservice:MyLocalDataService id="myLocalDataService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
 </fx:Declarations>
 <mx:DataGrid x="260" y="175" id="dataGrid" creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{getDataResult.lastResult}">
 <mx:columns>
 <mx:DataGridColumn headerText="name" dataField="name"/>
 <mx:DataGridColumn headerText="age" dataField="age"/>
 </mx:columns>
 </mx:DataGrid>

</s:Application>

That’s it !

With special thanks to :
http://forums.adobe.com/message/2303953
mewk