Creating an XML List - XML

For our test data, I've created a list of common fruit. We will use the <mx:XMLList> tag to create an XMLList Object to contain this data. Remember, an XMLList is similar to an XML Object, except an XMLList is not required to have a root node. There are other differences, but this one is an major distinction.

Here is our data:

 <mx:XMLList xmlns="">
<fruit label="Apple"/>
<fruit label="Orange"/>
<fruit label="Cherry"/>
<fruit label="Mango"/>
<fruit label="Peach"/>
<fruit label="Plum"/>
<fruit label="Banana"/>
</mx:XMLList>

To add this data to our list we will also need a <mx:dataProvider> tag as a child node of the <mx:List> tag. Inside of thetag, we can add the <mx:XMLList> tag shown above. Here is what the updated application looks like:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml 

layout="absolute">
<mx:Panel  title="My List">  <mx:List labelField="@label"> 

<mx:dataProvider> 

<mx:XMLList xmlns="">
<fruit label="Apple"/>
<fruit label="Orange"/>
<fruit label="Cherry"/>
<fruit label="Mango"/>
<fruit label="Peach"/>
<fruit label="Plum"/>
<fruit label="Banana"/>
</mx:XMLList> </mx:dataProvider> </mx:List>
</mx:Panel>
</mx:Application>

In addition to adding the <mx:dataProvider> and the <mx:XMLList> tags, you'll notice a new attribute to thetag. The '@labelField' (in green) attribute tells the List where in the data provider (the XMLList) it should pull the list items. In this case, @label refers to the attribute 'label'. The @label syntax is a part of the E4X or ECMAScript for XML programming language extension, which is available in ActionScript 3.0.

Here is what our list control looks like now:

Eureka! That looks like a populated list control to me. This is where you can see the potential of Flex. In 18 lines of code, we were able to produce a list of data that is easy on the eyes. Before we go on, let's give our <mx:Panel> and <mx:List> a width of 100%. This will make them expand to the width of the parent container and make it easier to read. Here are the newand <mx:Panel> tags:  

<mx:Panel  title="My List" width="100%">
<mx:List labelField="@label" width="100%">

From here we move away from the standard list control and customize the list to our own needs.