HTTPService with Flex 3, example code – mx:HTTPService
Posted on February 13, 2010 | No Comments
A quick and short example of loading data (in this case from a XML file) using the wonderfully simple HTTPService in Flex 3. Thanks to data binding nearly all of the work is done for us. In this simple example I load a very simple XML file into an array and that is displayed in a datagrid with a data source binding to the array of loaded data.
Hopefully the formatting stays intact and no characters go missing from the code..
1. buy viagra pill We need to create the HTTPService tag after the application tag in the MXML file.
<mx:HTTPService id="dataSource" url="data/sampledata.xml" result="resultHandler(event)" fault="faultHandler(event)"/>
2. Next we add a creationComplete event to the Application tag (normally the second line of code in the MXML file).
creationComplete="dataSource.send()"
3. Time for the ActionScript, normally I do not place my code in the MXML file but to keep things simple here it is, just below the HTTPService tag.
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var loadedData:ArrayCollection;
private function resultHandler(event:ResultEvent):void
{
this.loadedData = event.result.data.datanode;
}
private function faultHandler(event:FaultEvent):void
{
Alert.show("Error: " + event.fault.faultString, "Application Error");
}
]]/>;
</mx:Script>;
Of note here is the bindable variable ‘loadedData’ that the datagrid will be bound to. Also if an error should occur loading the data I have a popup appear warning us of the problem.
4. Finally we add a datagrid component to display the data.
<mx:DataGrid x="10" y="10" dataProvider="{loadedData}" width="304"/>
You can see the source code here
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="324" height="243" creationComplete="dataSource.send()">
<mx:HTTPService id="dataSource" url="data/sampledata.xml" result="resultHandler(event)" fault="faultHandler(event)"/>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import <a href="http://jtc-enterprises.com/images/">buy levitra vardenafil</a> mx.collections.ArrayCollection;
[Bindable]
private var loadedData:ArrayCollection;
private function resultHandler(event:ResultEvent):void
{
this.loadedData = event.result.data.datanode;
}
private function faultHandler(event:FaultEvent):void
{
Alert.show("Error: " + event.fault.faultString, "Application Error");
}
]]>
</mx:Script>
<mx:DataGrid x="10" y="10" dataProvider="{loadedData}" width="304"/>
</mx:Application>
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Comments
Leave a Reply
You must be logged in to post a comment.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.