Flex List Controls

Creating a Basic List with XML Data

Whether you're developing large scale applications or just quick tools, you'll more than likely need to use a list when developing your applications. In this article, I cover the creation of a basic List Control with data population via XMLList. In my next article we move into customizing the list control by adding our own itemRenderer.

We start the creation of our List control with the following MXML:

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

layout="absolute">
<mx:Panel label="My List">
<mx:List>
</mx:Panel>
</mx:Application>

Our ever-present <?xml> and <mx:Application> tags will wrap the entire application. The <mx:Panel> tag supplies our application with a nice container for our list. The 'title' attribute will become the title of the panel. Last but not least, we have the all-important <mx:List> tag. You should be able to copy and paste this code into Flex Builder and compile and run it. Here is our first stab at a list control:

Our List control is rather plain at this point. This is mainly because we don't have any data in this list. The way in which Flex will allow us to add data to this list is through something called the data provider. The data provider is used for all data aware controls (list, datagrids, trees, menu's, etc).

We have a few different options of what type of data provider we can use. A very common type is the XMLList or XML. In some applications, the server may be providing data that may be better typed with an array. Arrays are also valid data providers. For this discussion, we wont get into too much detail about the data provider. We will use an XML List.