Flex 3 Basics – Data Grids with XML

Zach Dunn on January 4th, 2009 Posted in Tutorials

Behind every good web application, there is content. How to get that content into the web application is up to you. We’ve already covered XML basics with labels and buttons, but today we’ll be looking at another way to display content loaded into Flex from an external file.

The Data Grid Component

The data grid component is one of the best examples how the Flex framework makes ActionScript more accessible. It is surprisingly simple to arrange large amounts of data without miles and miles of code.

It has plenty of usefulness in debugging projects which require extensive loaded data. The simplicity of inserting this component makes it a great way to display the raw information in most external files without having to go back and forth in debug mode.

To demonstrate this, we’ll use a slightly modified version of the XML file used in the original introduction to XML in Flex. You can download the updated file here, and then place it in a folder called assets under the src directory of your Flex project. Here’s a sample of the node structure:

<content>
   <page location="home">
      <title>Home Page</title>
      <text>Look at all this useful content.</text>
      <image>images/welcome.jpg</image>
   </page>
</content>

Make a new HTTP Service request that links to the XML file and sends the results to the contentHandler function in E4X format so it can be filtered. Give it an id of siteData so we can reference it directly elsewhere in the code.

<mx:HTTPService url="assets/content.xml" id="siteData" result="contentHandler(event)" resultFormat="e4x"/>

Remember that simply writing an HTTPService tag is not enough to load the data. We have to instruct the application to send the request once it loads. For this we’ll tell the HTTPService request to send from the ‘creationComplete’ event to the opening application tag.

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

Insert a script tag below the opening application tag and make a XML List object to process data in it. Make it bindable, because it will be directly linked to the data grid. This tutorial has more information on data binding basics if you aren’t familiar with the technique.

[Bindable] private var fullXML:XMLList;

Now add the following function in to assign the XML contents to our new XML List. Notice that the passed event is of the type ResultEvent. If you are using Flex 3 Builder the correct import statement should be inserted automatically. If you are coding from the SDK, make sure you include the import right below the opening script tag.

import mx.rpc.events.ResultEvent;
private function contentHandler(evt:ResultEvent):void{
   fullXML = evt.result.page;
}

Last thing we’ll do is add in the data grid component itself. Copy in the following code to your project first, and an explanation will follow.

<mx:VBox>
   <mx:Label text="This Data Grid is loading the full XML file"/>
   <mx:DataGrid width="600"  dataProvider="{fullXML}">
      <mx:columns>
         <mx:DataGridColumn dataField="title" headerText="Title"/>
         <mx:DataGridColumn dataField="text" headerText="Body Text"/>
         <mx:DataGridColumn dataField="@location" headerText="Location"/>
      </mx:columns>
   </mx:DataGrid>
</mx:VBox>

Here’s what’s happening within the data grid structure:

• The VBox control is simply for design purposes and encapsulates the label and grid components.
• The label displays a title for the grid.
• The data grid component opening tag sets a width of 600px and binds the data provider to the contents of the fullXML XML list object.
• The columns tag allows for individual data columns to be loaded and customized.
• Each data grid column filters a separate field in the XML file and then assign a label to the column header text.

Give it a test run. You should have a nice neat grid that loads the contents of the XML file and organizes it into labeled columns. Go ahead an add another node if you wish. The grid will automatically add it as long as the fields are consistent. Pretty cool!

See the grid in action.
Download the source code.