Home arrow XML arrow Page 2 - Working with Flex and Datagrids

Adding Data - XML

Flex 3.0 offers a strong foundation of user interface (UI) controls by which users can harness a great deal of power to create beautiful UIs without having to toil in the details of low level functionality. Of these controls, the DataGrid sets itself apart by offering characteristics similar to a list or tree control (which are also listBase controls), but going further to offer an easy way of displaying columnar data without a complicated interface. In this article, I focus on creating a basic DataGrid and populating it with XML data by using only MXML tags.

  1. Working with Flex and Datagrids
  2. Adding Data
  3. Customizing the Column Headers
  4. Hiding Columns
By: Keith Lee
Rating: starstarstarstarstar / 6
June 30, 2009

print this article



Now that our basic DataGrid is showing, let's add some data. The pure MXML way of doing this is to add a <mx:dataProvider> tag followed by an XML, XMLList, or Array Collection tag. Using a data provider is how Flex connects the UI control with the data being displayed in the UI control.

I liken it to having a television in your home. The television serves as the UI component, much like the DataGrid. However, it is useless unless there is a signal telling it what to display. The signal for television is a cable/broadcast signal, while the signal for our DataGrid is the data provider.

Having a DataGrid alone does us no good if we can't add data to it. Flex gives a few different options for how to use a data provider, but in this article I use the XMLList.

 <mx:XMLList id="people"> <person> 
<firstName>Joe</firstName> <lastName>Young</lastName>
</person> <person> <firstName>Joe</firstName>
<birthday>1/30/2000</birthday> </person> </mx:XMLList>

The above XMLList describes two people with first and last names and their birth dates. We will tell our DataGrid to display the name and birthday of each person found in XMLList. Listing x.x shows the addition of the XMLList in green, along with two new tags called <mx:DataGridColumn> and <mx:columns> listed in blue.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html"> <mx:DataGrid width="100%" height="100%" >
<mx:columns> <mx:DataGridColumn dataField="firstName"/> <mx:DataGridColumn dataField="lastName"/> <mx:DataGridColumn dataField="birthday"/> </mx:columns>
<mx:dataProvider> <mx:XMLList id="people"> <person> <firstName>Joe</firstName> <lastName>Young</lastName> <birthday>1/30/2000</birthday> </person> <person> <firstName>Joe</firstName> <lastName>Young</lastName> <birthday>1/30/2000</birthday> </person> </mx:XMLList> </mx:dataProvider>
</mx:DataGrid> </mx:Application>

Let's first take a look at the <mx:columns> tag and its children.

<mx:DataGridColumn dataField="firstName"/>
<mx:DataGridColumn dataField="lastName"/>
<mx:DataGridColumn dataField="birthday"/>

The DataGridColumn has the job of naming the columns of the DataGrid and telling it where in our XMLList to retrieve the data for its column. In our case, the dataField attribute is assigned 'firstName', 'lastName', and 'birthday' respectively. If the XML in the XMLList is properly built, the DataGrid will have no problem finding the data you wish to place in its column, based on the dataField. Note, the DataGridColumn tags are children of the the <mx:columns> tag.

If you compile and run this application, you'll get the following:

Well, that is all we need to produce a basic DataGrid with XML data. For the remainder of this article I'll mention some variations on the basic DataGrid that will help in your own programming.

>>> More XML Articles          >>> More By Keith Lee

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Google Docs and Xpath Data Functions
- Flex Array Collection Sort and Filtering
- The Flex Tree Control
- Flex List Controls
- Working with Flex and Datagrids
- How to Set Up Podcasting and Vodcasting
- Creating an RSS Reader Application
- Building an RSS File
- An Introduction to XUL Part 6
- An Introduction to XUL Part 5
- An Introduction to XUL Part 4
- An Introduction to XUL Part 3
- An Introduction to XUL Part 2
- An Introduction to XUL Part 1
- XML Matters: Practical XML Data Design and M...

Developer Shed Affiliates


Dev Shed Tutorial Topics: