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.

TABLE OF CONTENTS:

By: Keith Lee

Poor Best

Rating:

/ 6

June 30, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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> 

<birthday>1/30/2000</birthday> 

</person> <person> <firstName>Joe</firstName> 

<lastName>Young</lastName> 

<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:columns> 

<mx:DataGridColumn dataField="firstName"/> 

 <mx:DataGridColumn dataField="lastName"/> 

<mx:DataGridColumn dataField="birthday"/> 

</mx:columns>

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.

Next: Customizing the Column Headers >>