Loading external XML documents
You can use the URLLoader class to load external data from a URL. The URLLoader class downloads data from a URL as text or binary data. In this section, we will see how to use the URLLoader class for loading external XML data into your application. You can create a URLLoader class instance and call the load() method by passing URLRequest as a parameter and register for its complete event to handle loaded data. The following code snippet shows how exactly this works:
private var xmlUrl:String = "http://www.foo.com/rssdata.xml";
private var request:URLRequest = new URLRequest(xmlUrl);
private var loader:URLLoader = new URLLoader(;
private var rssData:XML;
loader.addEventListener(Event.COMPLETE, completeHandler);
loader.load(request);
private function completeHandler(event:Event):void {
rssData = XML(loader.data);
trace(rssData);
}
Let’s see one quick complete sample of loading RSS data from the Internet:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
creationComplete="loadData();">
<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
private var xmlUrl:String = "http://sessions.adobe.com/360FlexSJ2008/feed.xml";
private var request:URLRequest = new URLRequest(xmlUrl);
private var loader:URLLoader = new URLLoader(request);
[Bindable]
private var rssData:XML;
private function loadData():void {
loader.addEventListener(Event.COMPLETE, completeHandler);
loader.load(request);
}
private function completeHandler(event:Event):void {
rssData = new XML(loader.data);
}
]]>
</mx:Script>
<mx:Panel title="RSS Feed Reader" width="100%" height="100%">
<mx:DataGrid id="dgGrid" dataProvider="{rssData.channel.item}"
height="100%" width="100%">
<mx:columns>
<mx:DataGridColumn headerText="Title" dataField="title"/>
<mx:DataGridColumn headerText="Link" dataField="link"/>
<mx:DataGridColumn headerText="pubDate"
dataField="pubDate"/>
<mx:DataGridColumn headerText="Description"
dataField="description"/>
</mx:columns>
</mx:DataGrid>
<mx:TextArea width="100%" height="80"
text="{dgGrid.selectedItem.description}"/>
</mx:Panel>
</mx:Application>
In the code above, we are loading RSS feed from an external URL and displaying it in DataGrid by using data binding.
Output:
An example: Building a book explorer
In this section, we will build something more complicated and interesting by using many features, including custom components, events, data binding, E4X, loading external XML data, and so on. We will build a sample books explorer, which will load a books catalog from an external XML file and allow the users to explore and view details of books. We will also build a simple shopping cart component, which will list books that a user would add to cart by clicking on the Add to cart button.
Create a new Flex project using Flex Builder. Once the project is created, create an assetsimages folder under its src folder. This folder will be used to store images used in this application. Now start creating the following source files into its source folder.
Let’s start by creating a simple book catalog XML file as follows:
bookscatalog.xml:
<books>
<book ISBN="184719530X">
<title>Building Websites with Joomla! 1.5</title>
<author>
<lastName>Hagen</lastName>
<firstName>Graf</firstName>
</author>
<image>../assets/images/184719530X.png</image>
<pageCount>363</pageCount>
<price>Rs.1,247.40</price>
<description>The best-selling Joomla! tutorial guide updated for the latest 1.5 release </description>
</book>
<book ISBN="1847196160">
<title>Drupal 6 JavaScript and jQuery</title>
<author>
<lastName>Matt</lastName>
<firstName>Butcher</firstName>
</author>
<image>../assets/images/1847196160.png</image>
<pageCount>250</pageCount>
<price>Rs.1,108.80</price>
<description>Putting jQuery, AJAX, and JavaScript effects into your Drupal 6 modules and themes</description>
</book>
<book ISBN="184719494X">
<title>Expert Python Programming</title>
<author>
<lastName>Tarek</lastName>
<firstName>Ziadé</firstName>
</author>
<image>../assets/images/184719494X.png</image>
<pageCount>350</pageCount>
<price>Rs.1,247.4</price>
<description>Best practices for designing, coding, and distributing your Python software</description>
</book>
<book ISBN="1847194885">
<title>Joomla! Web Security</title>
<author>
<lastName>Tom</lastName>
<firstName>Canavan</firstName>
</author>
<image>../assets/images/1847194885.png</image>
<pageCount>248</pageCount>
<price>Rs.1,108.80</price>
<description>Secure your Joomla! website from common security threats with this easy-to-use guide</description>
</book>
</books>
The above XML file contains details of individual books in an XML form. You can also deploy this file on your web server and specify its URL into URLRequest while loading it.
Next, we will create a custom event which we will be dispatching from our custom component. Make sure you create an events package under your src folder in Flex Builder called events, and place this file in it.
AddToCartEvent.as:
package events
{
import flash.events.Event;
public class AddToCartEvent extends Event
{
public static const ADD_TO_CART:String = "addToCart";
public var book:Object;
public function AddToCartEvent(type:String, bubbles_Boolean=false, cancelable_Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}
This is a simple custom event created by inheriting the flash.events.Event class. This class defines the ADD_TO_CART string constant, which will be used as the name of the event in the addEventListener() method. You will see this in the BooksExplorer.mxml code. We have also defined an object to hold the reference of the book which the user can add into the shopping cart. In short, this object will hold the XML node of a selected book.
Next, we will create the MXML custom component called BookDetailItemRenderer.mxml. Make sure that you create a package under your src folder in Flex Builder called components, and place this file in it and copy the following code in it:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
cornerRadius="8" paddingBottom="2" paddingLeft="2"
paddingRight="2" paddingTop="2">
<mx:Metadata>
[Event(name="addToCart", type="flash.events.Event")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import events.AddToCartEvent;
import mx.controls.Alert;
[Bindable]
[Embed(source="../assets/images/cart.gif")]
public var cartImage:Class;
private function addToCardEventDispatcher():void {
var addToCartEvent:AddToCartEvent = new AddToCartEvent
("addToCart", true, true);
addtoCartEvent.book = data;
dispatchEvent(addtoCartEvent);
}
]]>
</mx:Script>
<mx:HBox width="100%" verticalAlign="middle" paddingBottom="2"
paddingLeft="2" paddingRight="2" paddingTop="2" height="100%"
borderStyle="solid" borderThickness="2" borderColor="#6E6B6B"
cornerRadius="4">
<mx:Image id="bookImage" source="{data.image}" height="109"
width="78" maintainAspectRatio="false"/>
<mx:VBox height="100%" width="100%" verticalGap="2"
paddingBottom="0" paddingLeft="0" paddingRight="0"
paddingTop="0" verticalAlign="middle">
<mx:Label id="bookTitle" text="{data.title}"
fontSize="12" fontWeight="bold"/>
<mx:Label id="bookAuthor" text="By: {data.author.
lastName},{data.author.firstName}" fontWeight="bold"/>
<mx:Label id="coverPrice" text="Price: {data.price}"
fontWeight="bold"/>
<mx:Label id="pageCount" text="Pages: {data.pageCount}"
fontWeight="bold"/>
<mx:HBox width="100%" backgroundColor="#3A478D"
horizontalAlign="right" paddingBottom="0" paddingLeft="0"
paddingRight="5" paddingTop="0" height="22"
verticalAlign="middle">
<mx:Label text="Add to cart " color="#FFFFFF"
fontWeight="bold"/>
<mx:Button icon="{cartImage}" height="20" width="20"
click="addToCardEventDispatcher();"/>
</mx:HBox>
</mx:VBox>
</mx:HBox>
</mx:HBox>
