Creating an alternating item renderer in a Spark List control in Flex 4

The following example shows how you can create a custom item renderer in Flex 4 which repositions elements based on the current item renderer’s index in the data provider using the itemIndex 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/2010/04/08/creating-an-alternating-item-renderer-in-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_itemIndex_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">
 
    <s:List id="lst"
            itemRenderer="skins.CustomItemRenderer"
            textAlign="justify"
            alternatingItemColors="[white, haloSilver]"
            width="320" height="200"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="justify"
                    variableRowHeight="true" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object img="http://helpexamples.com/flash/images/image1.jpg"
                        label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt, risus at venenatis lobortis, enim justo imperdiet urna, et luctus metus nisl nec erat." />
                <fx:Object img="http://helpexamples.com/flash/images/image2.jpg"
                        label="Integer elementum felis at nulla elementum porta. Proin imperdiet sapien vitae turpis rutrum porta." />
                <fx:Object img="http://helpexamples.com/flash/images/image3.jpg"
                        label="Integer vitae massa eu magna cursus tincidunt feugiat eu tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mauris nunc, dictum at sollicitudin vel, rutrum vehicula sem." />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the custom Spark item renderer, skins/CustomItemRenderer.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/08/creating-an-alternating-item-renderer-in-a-spark-list-control-in-flex-4/ -->
<s:ItemRenderer name="CustomItemRenderer"
        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[
            override public function set data(value:Object):void {
                super.data = value;
 
                if ((itemIndex % 2) == 0) {
                    hGr.addElementAt(img, 0)
                }
            }
        ]]>
    </fx:Script>
 
    <s:HGroup id="hGr" left="4" right="4" top="4" bottom="4">
        <s:RichText id="lbl" text="({itemIndex}) {data.label}" width="100%" />
        <mx:Image id="img" source="{data.img}" toolTip="{data.img}" width="100" height="67" />
    </s:HGroup>
 
</s:ItemRenderer>

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.

6 thoughts on “Creating an alternating item renderer in a Spark List control in Flex 4

  1. It would have been really nice if the itemRendererFunction took the index of the renderer, so an actually proper custom item renderer could be returned based on the items position in the List. I guess this still could be achieved by getting the index of the data item from the dataProvider.

    Just seems silly that the itemRendererFunction doesn’t get 2 props, the data, and the index.

    1. @Tink,

      Yeah, actually I was planning on looking for a way to use the itemRendererFunction to do this as well but haven’t had time yet.
      Feel free to file an enhancement request against the itemRendererFunction at http://bugs.adobe.com/flex/ and we can consider it for a future release of the Flex SDK.

      Thanks,
      Peter

  2. When are you going to start putting working examples on the Flex 4 examples? I really liked seeing the var result of the example without having to compile it myself.

    1. @Rob,

      Sure, when/if I have time. I prefer having the SWFs too, but it does take a lot of extra time to create new Flex projects, and publish release SWFs and upload files and embed the SWFs into the HTML.

      I’ve typically been posting updates at work when I answer questions on lists or forums and don’t have the extra time to do a SWF.

      Peter

  3. hi
    i want to create custom List which hold 3 to 4 line of data and one or two button in one row of the list how can i achieve this ?

    hope for positive response

Comments are closed.