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