Flex List Controls

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.

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.

{mospagebreak title=Creating an XML List}

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 the tag, 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 the tag. 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 new and <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.

{mospagebreak title=Adding an Item Renderer} 

The item render gives us the ability to create custom views of our list items. As per the Adobe documentation, there are several different methods of doing this:

  1. The Default Item Renderer – The default item renderer is exactly what you see in our application. It gives us a label showing the text of our list item. If no other rendered is specified, the default is used.
  2. A Drop-In Item Renderer - A Drop-In ItemRenderer is a control that has implemented the IDropInListItemRender interface. This interface aligns the component so that it can be used to display the list item with some customizability. An example of a control that does this is the Image control. Using the Image control as a drop-in item renderer would mean that our list items would be images instead of text.
  3. An In-Line Item Renderer – This item renderer essentially allows the user to build an MXML component which will act as the list item. Because this component is in-line, it cannot used in several places. If it is declared differently, we could reuse it. . .see #4.
  4. A Reusable In-Line Item Render – This item renderer is declared independently of any list base control. Because is it not attached to a control, it can be used in any control.

In this article we go straight for item number 3 – An In-Line Item Renderer. This method gives us enough flexibility to perform all the actions we need in a single file (item number 4 is also a good solution. I provide the code at the end of the article). You can further extend this method and create and/or use an external component to perform the same task. We’ll keep it simple for now.

Let’s talk for a minute about what we want this list to look like. For starters, let’s suppose that we will use this list for selection. Let’s say that users will be able to select which fruit they would like to see based on this list. That indicates that we will use checkboxes. Our item renderer, then, will be responsible for displaying a checkbox for each item in the list.

The first thing we will do is add an <mx:itemRenderer> tag followed by an <mx:Component> tag. The <itemRenderer> tag tells Flex that we will be overriding the default renderer and the nested <mx:Component> defines how we will be overriding it. Inside of our <mx:Component> tag, we will add our <mx:Checkbox> and any other control we require to appear per list item. In this case we also need a <mx:Label> to display the name of the fruit. Here is what the updated application looks like:

Here is the updated code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml
layout="absolute"> <mx:Panel title="My List" width="100%"> <mx:List labelField="@label" width="100%"> <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:itemRenderer> <mx:Component>
<mx:HBox> <mx:CheckBox/><mx:Label text="{data.@label}"/> </mx:HBox> </mx:Component>
</mx:itemRenderer>
</mx:List> </mx:Panel> </mx:Application>

That is all there is to making a basic item renderer, but there is one thing I should mention. You probably noticed a few warnings in your Flex Builder console. The ones I have look like this:

warning: unable to bind to property ‘label’ on class ‘XML’ (class is not an IEventDispatcher)

We are getting these warnings because we are trying to bind the @label of the XMLList with the mx:Label (in our component). The problem here is that the XMLList does not implement the IEventDispatcher Interface. So, when data in the XMLList changes, the List will not reflect the changes. Flex is warning us because this may be a problem in some applications.

There are a few ways to fix this, but a lesson on bindings is first in order. These warnings will not present a problem when the application is compiled and released. For more information on bindings see http://www.adobe.com/devnet/flex/quickstart/using_data_binding/#section3

{mospagebreak title=A Reusable Item Renderer}

 As stated earlier, here is the same application, but this code uses a reusable itemRenderer:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml 
layout="absolute">
<mx:Component id="myItemRenderer"> <mx:HBox> <mx:CheckBox/>
<mx:Label text="{data.@label}"/>
</mx:HBox> </mx:Component>
<mx:Panel title="My List" width="100%"> <mx:List labelField="@label" width="100%" itemRenderer="{myItemRenderer}"> <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>

Notice the declaration of the <mx:Component> tag outside of out <mx:List> tag. Now that this definition is not tied to the list control, and other data aware control can use it as an item renderer.

There you have it. A easy introduction into the List Control and Item Renderers. Enjoy.

[gp-comments width="770" linklove="off" ]

chat sex hikayeleri Ensest hikaye