Different ways of assigning an item renderer in Flex 4

This post looks at a couple ways of defining a custom item renderer on a DataGroup, but it also applies the same way to a SkinnableDataContainer, spark List, and any other spark components that support item rendering.

Here is a very basic custom item renderer that simply shows the data item in a spark Label:

<s:ItemRenderer
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:Label text="{data}" color="red" />
 
</s:ItemRenderer>

Given this item renderer there are a few ways to assign it to a DataGroup.

External MXML File

If we put this code into a new file called “SimpleItemRenderer.mxml” then we can reference it like so:

<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:DataGroup 
        itemRenderer="SimpleItemRenderer">
 
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>item 0</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:DataGroup>
 
</s:Application>

Using an external MXML file is nice because you can easily reuse that renderer among other components in your project.

If you would rather not create an extra file just for an item renderer you can also define them inline. For example, when I file a bug report I prefer to have the entire application run with a single file rather than deal with packaging up multiple files.

Defining an Inline Item Renderer

This same item renderer can be defined inline using the Component tag:

<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:DataGroup>
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>item 0</fx:String>
            </s:ArrayList>
        </s:dataProvider>
 
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:Label text="{data}" color="red" />
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:DataGroup>
 
</s:Application>

This is possible because of the <fx:Component> tag which defines a new scope within an MXML file.

You can also define an item renderer in the same MXML document in the Declarations tag, defining a className value on the fx:Component, and then reference that class like this:

<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Declarations>
        <fx:Component className="MyInlineItemRenderer">
            <s:ItemRenderer>
                <s:Label text="{data}" color="red" />
            </s:ItemRenderer>
        </fx:Component>
    </fx:Declarations>
 
    <s:DataGroup itemRenderer="MyInlineItemRenderer">	
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>item 0</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:DataGroup>
 
</s:Application>

Assigning via ActionScript

If you want to change your renderer at runtime via ActionScript you need to instantiate a ClassFactory. Here is a sample:

<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Script>
        <![CDATA[
            public function changeItemRenderer():void {
                group1.itemRenderer = new ClassFactory(MyInlineItemRenderer);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:Component className="MyInlineItemRenderer">
            <s:ItemRenderer>
                <s:Label text="{data}" color="red" />
            </s:ItemRenderer>
        </fx:Component>
    </fx:Declarations>
 
    <s:DataGroup id="group1" itemRenderer="spark.skins.spark.DefaultItemRenderer">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>item 0</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:DataGroup>
 
    <s:Button x="100" click="changeItemRenderer()" label="change item renderer" />
 
</s:Application>

If your item renderer looks as simple as the sample in this post you probably want to be using the DataRenderer class instead of the ItemRenderer class since it is lighter weight.

Flex 4 introduced the concept of an “item renderer function” that provides the ability to define multiple item renderers within one DataGroup depending on the item. This is accomplished in DataGroup via the itemRendererFunction property. Read more about using the itemRendererFunction property.

Note: This sample requires Flex SDK 4.0.0.10957 or higher. You can get the latest SDK builds from opensource.adobe.com.

6 thoughts on “Different ways of assigning an item renderer in Flex 4”

  1. Your code does not work.
    ItemRenderer in Declarations section can’t be found by Compiler.
    does not exist.

  2. @MarcelS – Yes, this example is for spark components like DataGroup/List/DropDownList/etc. It likely won’t work with mx components like DataGrid, but be able to if you look into using MXItemRenderer instead of ItemRenderer.

  3. Hey, thanks. This solved my problem. I was trying to populate a list from sqlite db.
    Datagroup with itemrenderer did the job.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>