XML basics into Flex
Posted by beThinker | Posted in Flex | Posted on 10-06-2009
In this tutorial will teach you the basic on how to load an external XML file into Flex Builder 3 and then filter each result into labels.
Set up your workspace by open up the Flex Builder 3 and start a new MXML application. I have named mine XMLbasics for this example. Set the layout to vertical and press the finish button.
Before we can load an XML file we’ll need to have one. I’ve made one for this tutorial, download here.Now right click within your “src” folder and then select new folder “assets” and save your content.xml file or import the downloaded XML file into this folder. Once you’re done that and we’re ready to link this file into the Flex document.
How to Load the XML?
MXML makes loading external files easy with the HTTPService tag. The HTTPService tag can have a single request tag under which the parameters can be specified. Insert the code below under the opening application tag.
1 | <mx:HTTPService url="assets/content.xml" id="siteData" resultFormat="e4x"/> |
Now 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 allow us to filter through the contents of the XML. In order for this url to be loaded, we must tell the application to send the request. Add the event “creationComplete” to the opening application tag.
1 | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="siteData.send()"> |
When the page loads the creationComplete is called. In the above code when the page is finished loading then the HTTPService named “siteData” should be sent. You can test you application now without errors if the XML is being loaded correctly.
Will need a storage variable for XML data to store itself while we work it. Insert a script tag below the opening application tag and declare the following variable.
1 2 3 4 5 | <mx:Script> <![CDATA[ private var siteContent:XMLList; ]]> </mx:Script> |
XMLList type allows us to load XML data in and access each node. Now creat a function that will load data from the XML file and display it in labels. Insert the code below in the script tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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; } |
Insert some components below the HTTPService tag for the results. Will add buttons to control navigation.
1 2 3 4 5 6 7 8 9 | <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 Us" click="showPage('contact')"/> </mx:HBox> </mx:VBox> |
Run your application. If everything is working as it should. When a button is pressed the data from the XML file is loaded up for each page. Try loading a url of an image from an XML file with Flex Builder 3. XML has a wide number of posibilities to explore.
See the live demo, click here.
