Loading external data with HTTPService
Requirements
User level
All
Loading external data in Flex is easy when you use the <mx:HTTPService> tag. You use the <mx:HTTPService> tag to make POST and GET requests on external data. (You can also carry out PUT and DELETE operations for REST services.) The HTTP calls made by using the <mx:HTTPService> tag do not support custom methods (e.g., PROPFIND, and so on, for WebDAV); there is no way to extract response headers, but you can distinguish successful calls from failed ones.
Note: Although you can load data into your application from other domains, these other domains must implement an open crossdomain.xml file or add the domain that your SWF file is loaded from to their crossdomain.xml file. For more information on crossdomain.xml files, see Loading assets.
The example in this Quick Start demonstrates how to consume an RSS feed by using HTTPService.
Consuming RSS by using HTTPService
The advanced, E4X-based XML handling capabilities of Flex make it easy to work with XML-based formats such as RSS feeds. RSS feeds are published by blogs and other websites. In the following example, you consume the Flickr RSS feed of the latest pictures submitted to Flickr.
To load the RSS, use the <mx:HTTPService> tag and set its id property to "photoService" and its url property to the URL of the Flickr RSS feed. To work with the loaded data as XML, set the resultFormat of the HTTPService to "e4x".
Define the result and fault event handlers that are called when the HTTPService succeeds or fails. In the following example, the resultHandler() method is called when the call returns successfully, and the faultHandler() method is called if the call fails.
In the creationComplete event handler for the Application container, you invoke the photoService HTTP service by calling its send() method. When the send() call returns successfully, you set the photoFeed XML property to the returned results.
The user interface components bind to the photoFeed property and get updated automatically when it is updated. To make sense of the bindings, look at the Flickr RSS feed's structure. E4X gives you object-style access to this XML structure.
Most of the bindings are self-explanatory. The only processing you perform on the results is to extract the URL of the images from the content property of the feed items. You use regular expressions to do this.
Tip: When working with XML, ensure that you open any namespaces that you want to use. The namespace for the Flickr RSS feed is http://www.w3.org/2005/Atom. You must define a namespace and set it to this unique URL and then include the use statement for that namespace. Otherwise, you do not have access to the contents of the loaded XML document.
<?xml version="1.0" encoding="utf-8"?>
<!-- HTTPServiceConsumingFlickrRSSFeed.mxml -->
<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/mx"
width="400" height="500"
creationComplete="photoService.send();">
<fx:Declarations>
<!-- Model -->
<!-- Define the HTTP service -->
<mx:HTTPService id="photoService"
url="http://api.flickr.com/services/feeds/photos_public.gne"
resultFormat="e4x"
result="photoResultHandler(event);"
fault="photoFaultHandler(event);"/>
<!-- Effects -->
<mx:Fade id="fadeIn" duration="3000" alphaFrom="0" alphaTo="1"/>
<mx:Fade id="fadeOut" duration="3000" alphaFrom="1" alphaTo="0"/>
</fx:Declarations>
<!-- Controller -->
<fx:Script>
<![CDATA[
import flash.net.navigateToURL;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
[Bindable]
private var photoFeed:XML;
// Define and use atom namespace
private namespace atom = "http://www.w3.org/2005/Atom";
use namespace atom;
// The darn image URL is in the HTML content (nice one)
// so we have to parse it out
private function parseImageUrl(fromHtml:XMLList):String {
var pattern:RegExp = /img src="(.+?)" /;
var results:Array = pattern.exec(fromHtml);
var imageURL:String = results[1]; // backreference 1 from pattern
return imageURL;
}
// Result handler - gets called once RSS is loaded in
private function photoResultHandler(event:ResultEvent):void {
photoFeed = event.result as XML;
}
// Fault handler - displays the error
private function photoFaultHandler(event:FaultEvent):void {
Alert.show(event.fault.message, "Could not load photo feed");
}
// Opens author's HTML page in external window
private function openAuthorPage(event:MouseEvent):void {
var dataIndex:uint = Number(event.target.instanceIndices.toString());
var urlRequest:URLRequest = new URLRequest(photoFeed.entry[dataIndex].author.uri)
navigateToURL(urlRequest, "_blank");
}
]]>
</fx:Script>
<!-- View -->
<!-- User Interface -->
<s:Panel title="Public photos" width="100%" height="100%">
<mx:Tile width="100%" height="100%">
<mx:Repeater id="photos" dataProvider="{photoFeed.entry}">
<mx:VBox>
<mx:Image id="myImage"
source="{parseImageUrl(photos.currentItem.content)}"
completeEffect="{fadeIn}"/>
<s:Label text="{photos.currentItem.title}"/>
<mx:LinkButton label="{photos.currentItem.author.name}"
click="openAuthorPage(event);" fontWeight="bold"/>
</mx:VBox>
</mx:Repeater>
</mx:Tile>
<s:controlBarContent>
<s:Button label="Update" click="photoService.send();"/>
</s:controlBarContent>
</s:Panel>
</s:Application>
Result
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
