Displaying icons in a Flex List control

 

Displaying icons in a Flex List control

By peterd

Categories: List Tags: iconField, iconFunction, labelField, List, textIndent.

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.