Adding an Item Renderer - XML

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:

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