17
Aug
07

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.


6 Responses to “Displaying icons in a Flex List control”


  1. 1 Sher Ali Aug 22nd, 2007 at 3:38 am

    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. 2 peterd Aug 22nd, 2007 at 6:33 am

    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. 3 Alex Aug 22nd, 2007 at 10:13 am

    I’d like to do this with a datagrid… has anyone done it? I’m trying it now with no luck.

    Alex

  4. 4 Vijay Jul 22nd, 2008 at 9:26 pm

    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');
             }
    }
    }
    
  5. 5 Vijay Jul 27th, 2008 at 3:02 pm

    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.

  6. 6 scsfdev Aug 10th, 2008 at 6:39 am

    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

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".