XML Basics with Flex 3

Zach Dunn on December 10th, 2008 Posted in Tutorials

If you’re still using arrays and text files to load content, it’s time to upgrade.

With XML, you can condense a whole mess of seemingly unrelated information into a well organized and easy to read file. Today we’ll be looking at how to take advantage of this with Flex 3. This tutorial will teach how to load an external XML file into Flex and then filter the results into labels.

Set Up the Workspace

Open up the Flex 3 Builder and start a new MXML application. I have named mine xmlSandbox for this example. Set the layout to vertical and press finish.

Before we can load an XML file we’ll need to have one. I’ve made one for this tutorial which you can download. Make a new folder within your ‘src’ folder by right clicking the icon and selecting New>Folder. Name this new folder “assets” and import the downloaded XML file into it. Once you’ve done that, we’re ready to link to it in the Flex document.

Load the XML

MXML makes loading external files easy with the HTTPService tag. Write the following code immediately under the opening application tag.

<mx:HTTPService url="assets/content.xml" id="siteData" resultFormat="e4x"/>

You just created an HTTP Service with an id of ‘siteData’ which links to the XML file in the assets folder. The results are formatted in e4x, which allows us to filter through the contents of the XML file. In order for this url to be loaded, we must tell the application to send the request. We do this by adding the event ‘creationComplete’ to the opening application tag.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="siteData.send()">

The creationComplete event is called when the page loads. In the above code we are saying then when the page is finished loading, the HTTPService named ‘siteData’ should be sent. Take a moment to test your application. It should run without errors if the XML is being loaded correctly.

Filter XML Data

The XML data will need a place to store itself while we work with it. Make a script tag immediately below the opening application tag and declare the following variable.

<mx:Script>
        <![CDATA[
                private var siteContent:XMLList;
]]>
</mx:Script>

The XMLList type allows us to load XML data in and work with it. To demonstrate this we’re going to build a function that will load data from the XML file and display it in labels. Add the following function to your script tag.

private function showPage(targetPage:String):void{
                //Search for title of target page
                siteContent = siteData.lastResult.page.(@location==targetPage).title;
                //Show result in label
                headerText.text=siteContent;

                //Search for body text of target page
                siteContent = siteData.lastResult.page.(@location==targetPage).text;
                //Show result in label
                bodyText.text=siteContent;
            }

Now below the HTTPService tag we’re going to insert some components for the results to load into. We are also adding buttons to control navigation.

<mx:VBox>
        <mx:Label fontSize="24" id="headerText" text="Click a Button"/>
        <mx:Label id="bodyText" text="The choice is yours!"/>

        <mx:HBox>
            <mx:Button label="Home Page" click="showPage('home')"/>
            <mx:Button label="About Page" click="showPage('about')"/>
            <mx:Button label="Contact Page" click="showPage('contact')"/>
        </mx:HBox>
    </mx:VBox>

So what exactly did we just do? Here’s an overview of what is happening:

1. When one of the buttons is pressed it passes a string to the showPage function.
2. showPage receives this parameter as a string called targetPage.
3. This targetPage will determine which XML node is to be displayed.
4. Each node of the XML file has an attribute called “location” which corresponds to the passed value of targetPage.
5. The siteContent XMLList matches a node to the targetPage and then loads the correct title and body text into their respective labels.

Conclusion

There you have it! Run your application. If everything is working as it should, the data from the XML file is loaded up for each page when a button is pressed. Not bad! You aren’t limited to just text. Try loading the url of an image from an XML file with Flex. XML has a wide number of possibilities to explore.

View the live demo

Download the source files