Displaying icons in a Flex List control

The following example demonstrates how to use embedded images in a List control so that each item in the list displays a little icon based on a certain property in the data provider. You’ll also notice that we set the textIndent style to give the label a bit more padding from the icon. Finally, we create three non-interactive Button controls beneath the list as a sort of “legend” for the icons.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/17/displaying-icons-in-a-flex-list-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="assets/bulletCheck.png")]
            public var BulletCheck:Class;

            [Bindable]
            [Embed(source="assets/bulletWarning.png")]
            public var BulletWarning:Class;

            [Bindable]
            [Embed(source="assets/bulletCritical.png")]
            public var BulletCritical:Class;
        ]]>
    </mx:Script>

    <mx:List id="list"
            labelField="label"
            iconField="icon"
            rowCount="4"
            width="200"
            themeColor="haloSilver"
            textIndent="5">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="Item 1" icon="BulletWarning" />
                <mx:Object label="Item 2" icon="BulletCritical" />
                <mx:Object label="Item 3" icon="BulletCritical" />
                <mx:Object label="Item 4" icon="BulletCheck" />
                <mx:Object label="Item 5" icon="BulletWarning" />
                <mx:Object label="Item 6" icon="BulletCheck" />
                <mx:Object label="Item 7" icon="BulletCheck" />
                <mx:Object label="Item 8" icon="BulletCritical" />
            </mx:Array>
        </mx:dataProvider>
    </mx:List>

    <mx:HBox>
        <mx:Button label="Success"
                icon="{BulletCheck}"
                mouseEnabled="false"
                skin="{null}" />

        <mx:Button label="Warning"
                icon="{BulletWarning}"
                mouseEnabled="false"
                skin="{null}" />

        <mx:Button label="Critical"
                icon="{BulletCritical}"
                mouseEnabled="false"
                skin="{null}" />
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

You can also add icons to a List control using the iconFunction property, as seen in the following example. Note that the list’s data provider doesn’t contain a column with the name of the specific icon to use, the icon is being determined by a user-defined function which calculates the icon from the “data” property in data provider.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/17/displaying-icons-in-a-flex-list-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="assets/bulletCheck.png")]
            public var BulletCheck:Class;

            [Bindable]
            [Embed(source="assets/bulletWarning.png")]
            public var BulletWarning:Class;

            [Bindable]
            [Embed(source="assets/bulletCritical.png")]
            public var BulletCritical:Class;

            private function list_iconFunc(item:Object):Class {
                var iconClass:Class;

                if (item.data >= 8) {
                    iconClass = BulletCheck;
                } else if (item.data >= 5) {
                    iconClass = BulletWarning;
                } else {
                    iconClass = BulletCritical;
                }

                return iconClass;
            }
        ]]>
    </mx:Script>

    <mx:List id="list"
            labelField="label"
            iconFunction="list_iconFunc"
            rowCount="4"
            width="200"
            themeColor="haloSilver"
            textIndent="5">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="Item 1" data="7" />
                <mx:Object label="Item 2" data="3" />
                <mx:Object label="Item 3" data="1" />
                <mx:Object label="Item 4" data="8" />
                <mx:Object label="Item 5" data="5" />
                <mx:Object label="Item 6" data="8" />
                <mx:Object label="Item 7" data="9" />
                <mx:Object label="Item 8" data="2" />
            </mx:Array>
        </mx:dataProvider>
    </mx:List>

    <mx:HBox>
        <mx:Button label="Success"
                icon="{BulletCheck}"
                mouseEnabled="false"
                skin="{null}" />

        <mx:Button label="Warning"
                icon="{BulletWarning}"
                mouseEnabled="false"
                skin="{null}" />

        <mx:Button label="Critical"
                icon="{BulletCritical}"
                mouseEnabled="false"
                skin="{null}" />
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

11 thoughts on “Displaying icons in a Flex List control

  1. Thanks for small and quick learning tips.

    I have a question regarding the skin property for the Button component.

    Is the skin property for the Button component available in Flex 2 or it has been added in Flex 3?

    Because when I use skin property in Flex 2 it doesn’t recognize it and gives the following compile time error:

    Cannot resolve attribute ‘skin’ for component type mx.controls.Button.

    Regards,
    S.Ali

  2. Sher Ali,

    I believe the skin property was added in Flex 3. See the documentation for the Flex 2.0.1 Button control on LiveDocs for more information.

    I created all these samples using the Flex 3 beta and apparently didn’t test in earlier versions (as I’m sure you noticed by now). ;)

    I’d imagine you could just set each of the skin styles individually to do the same thing. In that case, I’m sure it would be easier to set the styles in an <mx:Style /&gt block on the Button class, or create a new custom style and use the styleName property.

    Peter

  3. The default ListItemRender is defined as icon:IFlexDisplayObject and labelText:IUITextField

    Now,how do you make the icon(image) clickable?
    Not the whole ListItem just the icon only.

    http://www.mail-archive.com/flexcoders@yahoogroups.com/msg99162.html

    Am i missing anything because the myClickHandler is not getting invoked.

    public class MyListItemRenderer extends ListItemRenderer {
    
    private function myClickHandler(e:MouseEvent):void{
                   trace('myClickHandler invoked');
     }
    
    override protected function commitProperties():void{
             super.commitProperties();
             if(icon){
                  trace('icon is NOT null');
                   icon.addEventListener(MouseEvent.CLICK,myClickHandler);
    
             } else {
                  trace(' icon is null');
             }
    }
    }
    
  4. Figured out the answer to my question. You dont need to extend ListItemRenderer. The default one is good enough.
    The currentTarget property of the ListEvent.Click (Not ListEvent.ItemClick) will tell you whether you clicked on the icon (if it exists) or the textfield.

  5. Hello guys..

    i’m new to RIA, Flex.
    Currently i’m using Flex 3.
    I have some difficulty in my work.
    I want to add icon to Advanced Datagrid control.
    I just don’t know how to add it. (I found this sample which added icons to List)
    but in ADG, it has not such icon or iconFunction.

    So, do u have any idea of how can i add icons to ADG?

    (P.S: I want to add icons in other columns except first, tree column)

    If u guys can help me, pls guide me.
    Thanks

  6. I have this working perfectly… but how do I change the width and height if the icons need to be resized?

    –Great tutorials, Google always seems to guide me to this blog.

  7. Hi,

    Any ideas about how I would have a different itemrenderer for only the first item in the list and the rest of the items follow a 2nd itemrenderer? Right now I only found a way to set the itemrender to the whole List.

    Thanks for all the great samples!

  8. Found the answer for my own question: In case anyone wants-
    You can change the looks by overriding set Data method of the itemRenderer:
    override public function set data(value:Object):void {

    if (value.type is A1)
    set A1′s image
    if( value.type is A2)
    set A2′s image
    }

  9. thanks for this example.

    does the list_iconFunc have to return a class? I would like to have a function that draws and returns a sprite. I have tried to convert a sprite to a class – but cant find how to do that, and it seems a little ineffecient to do that.

  10. i’m new to RIA, Flex.
    Currently i’m using Flex 3.
    I have some difficulty in my work.
    i have three lists and a button.
    depending up on the selected items in first two list and after clicking the button i have to disply the items in third list.can any any one help me
    thanks in advance

Comments are closed.