Using a custom item renderer function with the Spark List control in Flex 4

By Peter deHaan On March 19, 2009 · 8 Comments

The following example shows how you can create a custom item renderer function with the Spark List control in Flex 4 by setting the itemRendererFunction property.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/19/using-a-custom-item-renderer-function-with-the-fxlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_List_itemRendererFunction_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Script>
        <![CDATA[
            import renderers.*;
            import mx.core.ClassFactory;
            import spark.skins.spark.DefaultItemRenderer;
 
            private function list_itemRendererFunc(item:Object):ClassFactory {
                var cla:Class = DefaultItemRenderer;
                switch (item.type) {
                    case "employee":
                        cla = EmployeeItemRenderer;
                        break;
                    case "manager":
                        cla = ManagerItemRenderer;
                        break;
                    default:
                        break;
                }
                return new ClassFactory(cla);
            }
        ]]>
    </fx:Script>
 
    <s:List id="list"
            labelField="name"
            itemRendererFunction="list_itemRendererFunc"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object name="Employee 1" type="employee" />
                <fx:Object name="Employee 2" type="employee" />
                <fx:Object name="Employee 3" type="employee" />
                <fx:Object name="Employee 4" type="employee" />
                <fx:Object name="Manager 1" type="manager" />
                <fx:Object name="Manager 2" type="manager" />
                <fx:Object name="Employee 5" type="employee" />
                <fx:Object name="Manager 3" type="manager" />
                <fx:Object name="Consultant 1" type="consultant" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

The custom employee item renderer, renderers/EmployeeItemRenderer.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/19/using-a-custom-item-renderer-function-with-the-fxlist-control-in-flex-gumbo/ -->
<s:ItemRenderer name="EmployeeItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        autoDrawBackground="true">
 
    <s:Label id="labelDisplay"
             left="4" right="4" top="4" bottom="4" />
 
</s:ItemRenderer>

And the custom manager item renderer, renderers/ManagerItemRenderer.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/19/using-a-custom-item-renderer-function-with-the-fxlist-control-in-flex-gumbo/ -->
<s:ItemRenderer name="ManagerItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        autoDrawBackground="true">
 
    <s:Label id="labelDisplay"
            color="red"
            fontWeight="bold"
            left="4" right="4" top="4" bottom="4" />
 
</s:ItemRenderer>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

8 Responses to Using a custom item renderer function with the Spark List control in Flex 4

Alexander says:

March 23, 2009 at 3:26 pm

Hi Peter, thanks for examples! Please help! I’ve created FxList with custom item renderer based on ItemRenderer(just label and eye icon to set visible/invisible), but later FxList was replaced by Tree. Is it possible to reuse existent item renderer in Tree and what should I do for this. I was trying to assign this item renderer to Tree as is, but have noticed that some interfaces are not implemented by default. One more question about Tree, is there any information about Spark Tree (FxTree)? Thanks!

Reply
Jochen Szostek says:

November 17, 2009 at 2:46 am

To make it work with latest Flex 4 build change SimpleText elements to label elements and swap overridden methods with:
```
override public function set label(value:String):void {
    super.label = value;
    labelElement.text = label; 
}
```
Also import spark.skins.spark.DefaultItemRenderer; in the main.mxml … they changed the package structure of the class…

Maybe someone else would find this useful.

Greets

Greets

Reply
- Peter deHaan says:
  
  November 17, 2009 at 7:06 am
  
  @Jochen Szostek,
  
  Thanks! At some point I’ll have to come back and redo all these old Spark-based examples and update the code to match the latest API changes.
  
  Peter
  
  Reply
  - JabbyPanda says:
    
    February 4, 2010 at 6:20 am
    
    The update of this example is definitely needed, for example ItemRenderer class does not declare “selectionColor” and “rollOverColor” properties anymore, verified with Flex 4.0.13654 SDK build.
daniel says:

October 13, 2010 at 12:53 pm

How do you set css styles on a classfactory object?

Reply
Brad Manderscheid says:

November 12, 2010 at 9:07 am

Can you do an update on this?
thanks!

Reply
- Peter deHaan says:
  
  November 12, 2010 at 9:23 am
  
  @Brad,
  
  Done.
  
  Peter
  
  Reply
angela says:

June 2, 2011 at 8:00 pm

I really learn something new to me.
Thanks so much.

Reply