Flex for Thick Gits #5 - Getting data from a remote source

OK lets get down and dirty and jump to the interesting bit.. how to get data into the app from an external source, like your domino server :-)

You do this using the HTTPService class. This inbuilt component allows your app to go to a URL and read the data that the URL returns. Usually (but not always) this will be XML. Once the data is returned you can use it in your app and that is what we will look at today.

1. The HTTPService Object

You create the object in MXML all you need to do this is the URL that will provide the data and function that will "deal" with the data. So it will look something like this

<mx:HTTPService
id="mydata" url=http://www.unseenuni.com/flexdata.nsf/getdata1?openagent
result="myResultHandler=(event)"/>

2. Getting Data

Simply creating the object doesn't actually go and get any data, you have to invoke the send() method. Now a word of caution here if you are going to use the data for a view or as list for say a combo box you app needs to be fully loaded so all the components are ready to receive the data. In MXML there is a useful even called creationComplete which is fired when your application has completely loaded and has reached a stable condition. This is the perfect time to go and get your data! This is analogous to the onLoad event in the traditional browser DOM.

3. Using the returned data

There are actually 2 ways to use the data that is returned. When the URL returns data it is stored in the lasResult property of the HTTPService object. So lets say your Domino agent returns the following data

<myXML>
<myItem>
<itemName&gtWidget 1</itemName>
<itemPrice&gt15.95</itemPrice>
</myItem>
<myItem>
<itemName&gtWidget 2</itemName>
<itemPrice&gt11.95</itemPrice>
</myItem>
<myItem>
<itemName&gtWidget 3</itemName>
<itemPrice&gt17.63</itemPrice>
</myItem>
</myXMLa>

All I need to do to access the myItem Collection is to query the HTTPService object (which if you remember had an id of mydata the code would look like this

mydata.lastResult.myXML.myItem

This can be useful when debugging but the one of most use is the event handler i set up in the HTTPService object myResultHandler(event) this event will be fired when the URL you specified has returned all the data it is going to return.

If you are familiar with LS or JS the way you code up the function is very similar it looks like this

private function myResultHandler(event:ResultEvent):void{ ...do something here... }

the returned data is available within this function as property of the event object. Using the XML returned in the example above i would access the myItem collection like this

event.result.myXML.myItem

Now all we need to do is make that data available to the other objects in your application and we do this by making a BINDING ArrayCollection. An ArrayCollection object is an extension to the flex ARRAY object.Now you can use a plain old simple ARRAY object in Flex for storing the data but if you intend to populate controls, filter or sort the data then the ARRAYCOLLECTION object is the one to go for because it comes will loads of extra functionality the ARRAY object does not posses. The most crucial of this is if the underlying data is refreshed (ie you go to the server and get a new set of data) if you use an ARRAYCOLLECTION all the bound objects that use that ARRAYCOLLECTION are automatically updated. If you use an ARRAY this does NOT happen!

This is really very very easy and in my next post I will show how to do this.