Files

Share

Topics

Flex 3 Basics – Data Grids with XML

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.

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.

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.

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.

1

2

3

4

import mx.rpc.events.ResultEvent;

privatefunctioncontentHandler(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.

1

2

3

4

5

6

7

8

9

10

&lt;mx:VBox&gt;

&lt;mx:Label text="This Data Grid is loading the full XML file"/&gt;

&lt;mx:DataGrid width="600"dataProvider="{fullXML}"&gt;

&lt;mx:columns&gt;

&lt;mx:DataGridColumn dataField="title"headerText="Title"/&gt;

&lt;mx:DataGridColumn dataField="text"headerText="Body Text"/&gt;

&lt;mx:DataGridColumn dataField="@location"headerText="Location"/&gt;

&lt;/mx:columns&gt;

&lt;/mx:DataGrid&gt;

&lt;/mx:VBox&gt;

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!

Related Posts

15 Comments 1 Mentions

I’m a Flex 3 tyro, and I’m trying to teach myself the fundamentals. Your tutorials are quite helpful, and I adapted some of the code you provided to construct a dashboard application of my own. As in the example above, I’m populating a datagrid using an external xml file as my source data. However, I’m encountering issues when the field [being filtered by the first column in the datagrid] is empty. Basically, the dashboard crashes when it’s loading the data via the HTTPService call. This doesn’t happen if other fields are empty. It only occurs for the field being filtered by the FIRST column. When I remove those few records from the source file, the dashboard loads without incident. Does this seem like reasonable behavior? Is there a way to “handle” such occurrences so I don’t need to exclude those records?

I would like to be able to edit the list nodes in the XML file it’s communicating with. Basically, to be able to delete a node record. How difficult would it be to make this happen? Any help would be appreciated. Perhaps another tutorial will demonstrate doing a search and removal node.

Great stuff. Driving myself nuts trying to adapt code for an application I am working on. Two things are evident in the Flex Builder window…both my “creationComplete” and result=”contentHandler(event)” areas of the code are not colorized in the Flex tool as are all other code:value pairs. This may not be my issue, since I have no errors being thrown, but the data is not appearing in my grid. Question…is the location of the xml a subdirectory in your example or can it be any location on the same server?

If I’m understanding your question correctly, the XML file can be located anywhere. You will simply have to update the link to it. Also, Flex is unable to load files locally so you will need to put it into a testing server environment.

@polyGeek: Excellent. You realize, of crosue, that the bit about “by popular demand” meant “because polyGeek asked for it”…I’ll be curious to hear what you think, especially since you were following Flex 4 and effects development pretty closely throughout the release. Enjoy…

I am totally new to flex and i need to develop a GUI for viewing all the configuration files .For example, lets say we have a spring configuration file in which the bean and its dependancies are defined. so i need to display the beanId as well as all the dependant beans within a tree structure. pls help me on this as i got stuck since yesterday not knowing the approach to proceed.Thanks

Hi,
M making a small application in flex where m using php to get data from mysql in XML format i binded this data with a datagrid in one of my modules, previously it was working perfectly but later on m gettin some weird error as mention below:-

VerifyError: Error #1014: Class IWatcherSetupUtil could not be found.
at flash.display::MovieClip/nextFrame()
at mx.core::FlexModuleFactory/deferredNextFrame()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\FlexModuleFactory.as:467]
at mx.core::FlexModuleFactory/update()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\FlexModuleFactory.as:295]
at mx.core::FlexModuleFactory/moduleCompleteHandler()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\F

at flash.display::MovieClip/nextFrame()
at mx.core::FlexModuleFactory/deferredNextFrame()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\FlexModuleFactory.as:467]
at mx.core::FlexModuleFactory/update()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\FlexModuleFactory.as:295]
at mx.core::FlexModuleFactory/moduleCompleteHandler()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\FlexModuleFactory.as:542]