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

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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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.

8 thoughts on “Using a custom item renderer function with the Spark List control in Flex 4

  1. 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!

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

    1. @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

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

Comments are closed.