Creating a fancy Spark List control item renderer in Flex 4

The following example shows how you can create a fancy Spark List control item renderer by setting the itemRenderer property.

Full code after the jump.

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/01/27/creating-a-fancy-spark-list-control-item-renderer-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_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"
        xmlns:local="*">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|List {
            chromeColor: #333333;
            color: white;
            contentBackgroundColor: black;
            fontSize: 24;
        }
    </fx:Style>
 
    <s:List id="list"
            itemRenderer="CustomListItemRenderer"
            labelField="name"
            width="400"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout horizontalAlign="justify" gap="0" requestedRowCount="6" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <local:ProductVO name="Adobe Illustrator CS5" icon="@Embed('ai_appicon-tn.gif')" />
                <local:ProductVO name="Adobe AIR 2.0" icon="@Embed('air_appicon-tn.gif')" />
                <local:ProductVO name="ColdFusion 9" icon="@Embed('cf_appicon-tn.gif')" />
                <local:ProductVO name="Dreamweaver CS5" icon="@Embed('dw_appicon-tn.gif')" />
                <local:ProductVO name="Flash Professional CS5" icon="@Embed('fl_appicon-tn.gif')" />
                <local:ProductVO name="Adobe Flash Player 10.1" icon="@Embed('fl_player_appicon-tn.gif')" />
                <local:ProductVO name="Fireworks CS5" icon="@Embed('fw_appicon-tn.gif')" />
                <local:ProductVO name="Flex 4.0" icon="@Embed('fx_appicon-tn.gif')" />
                <local:ProductVO name="Lightroom 2.0" icon="@Embed('lr_appicon-tn.gif')" />
                <local:ProductVO name="Photoshop CS5" icon="@Embed('ps_appicon-tn.gif')" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

View source is enabled in the following example.

And the custom Spark List control item renderer, CustomListItemRenderer.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/27/creating-a-fancy-spark-list-control-item-renderer-in-flex-4/ -->
<s:ItemRenderer name="CustomListItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        autoDrawBackground="false">
    <s:layout>
        <s:HorizontalLayout verticalAlign="middle"
                paddingLeft="5" paddingRight="5"
                paddingTop="5" paddingBottom="5" />
    </s:layout>
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
 
    <s:BitmapImage source="{data.icon}" />
    <s:Label text="{data.name}"
            textDecoration.hovered="underline"
            paddingLeft.selected="5"
            width="100%"
            maxDisplayedLines="1"
            showTruncationTip="true" />
    <s:Label text="&#187;"
            scaleX="2" scaleY="2" />
 
</s:ItemRenderer>

And finally, the ProductVO.as file is as follows (thanks to Steven Shongrunden @ Flexponential):

/** http://blog.flexexamples.com/2010/01/27/creating-a-fancy-spark-list-control-item-renderer-in-flex-4/ */
package {
    public class ProductVO extends Object {
 
        [Bindable]
        public var name:String;
 
        [Bindable]
        public var icon:Class;
    }
}

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.

11 thoughts on “Creating a fancy Spark List control item renderer in Flex 4

  1. Do you have anymore examples of making controls like this one. I think this is really good and I would like to see more examples

  2. Do you have created any custom Flex 4 components with nestes Spark Lists? I mean spark List in itemREnderer of another Spark List. I have problem with size validation. If itemRenderer of nested List change it’s size, parent is not updated. even if can invalidateSize or invalidateDisplayList in parent List, size is not correct. Only when I move mouse over that component, it’s reinvalidated with correct size…

    Any hint on this, Peter? or anyone else? :)

    Thank you

  3. Good Article and this is a good example to learn for the beginners…

    I’m very much beginner in FLEX and Action Script as well.

    I need some help to create list item from the database using PHP. In my application I’m trying to create a dynamic list, where each List Item contains an Image and some text related to that, when click on the list Item it the Image on the list Item will appear next to that in a larger format.

    Please help me on this

    ….
    Thanks

    Srikrishna
    srikrishnagumma@gmail.com

  4. In the above example any of the items displayed cannot be selected and copied via CTRL C key. How can I achieve selection and copy via CTRL C in a list using a ItemRenderer ?

  5. hi,
    I tried this example it works perfectly,here I wanted to make the first item to be in selected state by default and if any other item is selected the selected item should change to normal state.Any ideas..Thanks in advance!!

  6. hi,
    I tried this example it works perfectly,here I wanted to make the first item to be in selected state by default and if any other item is selected the selected item should change to normal state.Any ideas Peter or anyone else..Thanks in advance!!

  7. Thanx for the example. It gave me some starting point.
    I am creating list dynamically and I am doing this:


    dpList.addItem(new ProductVO(uName.text, "@Embed('/assets/"+ gdr.text+".jpg')"));

    Where dpList is the dataprovider. uName.text will appear as text and gdr.text will be the name of image. ProductVO has a constructor with two arguments. Now in the code above the 2nd arg is a string. How can I convert it to Class. Or is there any other workaround? Sorry if I am being dumb, but I am a newbie for flex.

    1. Ok, I found the solution. Instead of following:

      dpList.addItem(new ProductVO(uName.text, "@Embed('/assets/"+ gdr.text+".jpg')"));

      I did

      dpList.addItem(new ProductVO(uName.text, "assets/"+gdr.text+".jpg"));

      and it can take the string value.

      Thanks.

  8. I’d like to do the same, but i want that from xml. I didnt found any article about it. Great tut btw

Comments are closed.