Wednesday, June 29, 2011

XML in Flex: Part 3 - Loading XML at runtime

In the previous two tutorials we've learned how to use XML in your Flex application using Objects and XML, but in both cases we were embedding the data into the final Flex application. Today we will learn how to use XML that is loaded at runtime.

To load an XML model from an external source, we will use a class called HTTPService.

This HTTPService component allows your application to get data from a given URL and use it. You can choose the format in which you want to use the data, but by default it is set to be returned in an Object format (just like how it was when we had our data in fx:Model tags). We will learn how to use the returned data in the Object and XML formats.

To get infromation from an external file, we'll need to create a HTTPService, call the send() method of the object and then use the returned data.

Creating a HTTPService object is similar to creating any other MXML object. We will need to specify the id for this component, as well as the url to the external file (which can be located on an external server or locally) and tell it what to do when it receives the results. We'll later create a function called handleResults(), so we will call that. It also needs to be located in the Declarations tags.

In the end, our HTTPService object will look something like this:

<fx:Declarations>
<s:HTTPService id="myData" url="http://www.mysite.com/products.xml" result="handleResults(event)" />
</fx:Declarations>

You can also set the url to a local file, for example, "C:\Users\7 User\Documents\FlexExamples\products.xml".

The contents of my xml file are:

<?xml version="1.0" encoding="utf-8" ?>
<catalog>
  <product>
    <name>Chair</name>
    <description>Something to sit on</description>
    <price>$50</price>
  </product>
  <product>
    <name>Sofa</name>
    <description>Something soft to sit on</description>
    <price>$100</price>
  </product>
  <product>
    <name>Table</name>
    <description>Something to put stuff on</description>
    <price>$70</price>
  </product>
</catalog>

We have created a HTTPService object, it now knows the URL of the external file, but it has not started working yet - it will not retreive the data until we call the send() method.

Most of the time, we want to retreive the data as soon as the application is loaded. So, we use the creationComplete event listener of the s:Application block to add an event handler which is the send() method of our HTTPService object, which has an id of myData.

<?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/mx"
               creationComplete="myData.send();">

Now, let's create the event handler function. It receives an event object as a parameter, which has a type of ResultEvent, so we'll need to import that class as well.

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

private function handleResults(evt:ResultEvent):void {

}
]]>
</fx:Script>

There are two ways of getting access to the retreived data - using the lastResult and result properties.

We will learn about them in the next tutorial.

Thanks for reading!

Related:

XML in Flex: Part 1 - The fx:Model tag
XML in Flex: Part 2 - The fx:XML tag
XML in Flex: Part 4 - Using the XML loaded at runtime
XML in Flex: Part 5 - Using XMLListCollection

No comments:

Post a Comment