Home arrow XML arrow Page 2 - Flex List Controls

Creating an XML List - XML

The List Control is a fundamental control for use in Flex. It can be used in many different situations and can display all types of data. Anything from images to plain text and even basic HTML (supported by Flex) can be used. Keep reading for an introduction to this versatile control.

  1. Flex List Controls
  2. Creating an XML List
  3. Adding an Item Renderer
  4. A Reusable Item Renderer
By: Keith Lee
Rating: starstarstarstarstar / 15
July 07, 2009

print this article



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"/>

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

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