Creating a fancy Spark List control item renderer in Flex 4

By Peter deHaan On January 27, 2010 · 11 Comments

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

Tagged with: fancy • Gumbo • itemRenderer

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.

11 Responses to Creating a fancy Spark List control item renderer in Flex 4

kered says:

January 28, 2010 at 4:25 am

this is a great example of using flex with detail information from start to finish .

Reply
Dave says:

January 28, 2010 at 4:28 am

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

Reply
franto says:

February 22, 2010 at 6:37 am

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

Reply
srikrishna says:

June 3, 2010 at 5:31 am

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

Reply
Mohith says:

January 30, 2011 at 5:16 am

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 ?

Reply
Naveen says:

May 8, 2011 at 11:31 pm

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

Reply
Naveen says:

May 8, 2011 at 11:32 pm

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

Reply
Bhairav says:

July 12, 2011 at 7:31 am

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.

Reply
- Bhairav says:
  
  July 12, 2011 at 8:59 am
  
  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.
  
  Reply
Morph89 says:

November 8, 2011 at 7:25 am

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

Reply
BillSt says:

February 9, 2012 at 8:15 am

Awesome, thanks a lot!

Reply