Displaying icons in an MX MenuBar control in Flex

The following example shows how you can display icons in an MX MenuBar control in Flex by setting the iconField property.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/29/displaying-icons-in-an-mx-menubar-control-in-flex/ -->
<mx:Application name="MenuBar_iconField_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            [Embed("assets/BorderContainer.png")]
            public const BorderContainerIcon:Class;
 
            [Embed("assets/Button.png")]
            public const ButtonIcon:Class;
 
            [Embed("assets/ButtonBar.png")]
            public const ButtonBarIcon:Class;
        ]]>
    </mx:Script>
 
    <mx:XMLListCollection id="xmlListColl">
        <mx:source>
            <mx:XMLList xmlns="">
                <topmenu label="BorderContainer" icon="BorderContainerIcon">
                    <submenu label="Properties:">
                        <submenu label="backgroundFill : IFill" />
                        <submenu label="borderStroke : IStroke" />
                    </submenu>
                    <submenu label="Methods:">
                        <submenu label="BorderContainer()" />
                    </submenu>
                    <submenu label="Styles:">
                        <submenu label="backgroundImage : Object" />
                        <submenu label="backgroundImageFillMode : String" />
                        <submenu label="borderAlpha : Number" />
                        <submenu label="borderColor : uint" />
                        <submenu label="borderStyle : String" />
                        <submenu label="borderVisible : Boolean" />
                        <submenu label="borderWeight : Number" />
                        <submenu label="cornerRadius : Number" />
                        <submenu label="dropShadowVisible : Boolean" />
                    </submenu>
                    <submenu label="Events:" />
                </topmenu>
                <topmenu label="Button" icon="ButtonIcon">
                    <submenu label="Properties:" />
                    <submenu label="Methods:" />
                    <submenu label="Styles:" />
                    <submenu label="Events:" />
                </topmenu>
                <topmenu label="ButtonBar" icon="ButtonBarIcon">
                    <submenu label="Properties:" />
                    <submenu label="Methods:" />
                    <submenu label="Styles:" />
                    <submenu label="Events:" />
                </topmenu>
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>
 
    <mx:MenuBar id="mnBr"
            dataProvider="{xmlListColl}"
            labelField="@label"
            iconField="@icon"
            horizontalCenter="0" top="20" />
 
</mx:Application>

Or you can set the dataProvider property to an MXML ArrayListCollection using the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/29/displaying-icons-in-an-mx-menubar-control-in-flex/ -->
<mx:Application name="MenuBar_iconField_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="BorderContainer" icon="@Embed('assets/BorderContainer.png')">
                    <mx:children>
                        <mx:Object label="Properties:">
                            <mx:children>
                                <mx:Object label="backgroundFill : IFill" />
                                <mx:Object label="borderStroke : IStroke" />
                            </mx:children>
                        </mx:Object>
                        <mx:Object label="Methods:">
                            <mx:children>
                                <mx:Object label="BorderContainer()" />
                            </mx:children>
                        </mx:Object>
                        <mx:Object label="Styles:">
                            <mx:children>
                                <mx:Object label="backgroundImage : Object" />
                                <mx:Object label="backgroundImageFillMode : String" />
                                <mx:Object label="borderAlpha : Number" />
                                <mx:Object label="borderColor : uint" />
                                <mx:Object label="borderStyle : String" />
                                <mx:Object label="borderVisible : Boolean" />
                                <mx:Object label="borderWeight : Number" />
                                <mx:Object label="cornerRadius : Number" />
                                <mx:Object label="dropShadowVisible : Boolean" />
                            </mx:children>
                        </mx:Object>
                        <mx:Object label="Events:" />
                    </mx:children>
                </mx:Object>
                <mx:Object label="Button" icon="@Embed('assets/Button.png')">
                    <mx:children>
                        <mx:Object label="Properties:" />
                        <mx:Object label="Methods:" />
                        <mx:Object label="Styles:" />
                        <mx:Object label="Events:" />
                    </mx:children>
                </mx:Object>
                <mx:Object label="ButtonBar" icon="@Embed('assets/ButtonBar.png')">
                    <mx:children>
                        <mx:Object label="Properties:" />
                        <mx:Object label="Methods:" />
                        <mx:Object label="Styles:" />
                        <mx:Object label="Events:" />
                    </mx:children>
                </mx:Object>
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>
 
    <mx:MenuBar id="mnBr"
            dataProvider="{arrColl}"
            labelField="label"
            iconField="icon"
            horizontalCenter="0" top="20" />
 
</mx:Application>

Or you can create the ArrayListCollection object using ActionScript using the following awkward code:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/29/displaying-icons-in-an-mx-menubar-control-in-flex/ -->
<mx:Application name="MenuBar_iconField_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
 
            [Embed("assets/BorderContainer.png")]
            public const BorderContainerIcon:Class;
 
            [Embed("assets/Button.png")]
            public const ButtonIcon:Class;
 
            [Embed("assets/ButtonBar.png")]
            public const ButtonBarIcon:Class;
 
 
            [Bindable]
            public static var arrColl:ArrayCollection;
 
            public function init():void {
                /* BorderContainer */
                var borderContainerProperties:Array = [];
                borderContainerProperties.push({label:"backgroundFill : IFill"});
                borderContainerProperties.push({label:"borderStroke : IStroke"});
 
                var borderContainerMethods:Array = [];
                borderContainerMethods.push({label:"BorderContainer()"});
 
                var borderContainerStyles:Array = [];
                borderContainerStyles.push({label:"backgroundImage : Object"});
                borderContainerStyles.push({label:"backgroundImageFillMode : String"});
                borderContainerStyles.push({label:"borderAlpha : Number"});
                borderContainerStyles.push({label:"borderColor : uint"});
                borderContainerStyles.push({label:"borderStyle : String"});
                borderContainerStyles.push({label:"borderVisible : Boolean"});
                borderContainerStyles.push({label:"borderWeight : Number"});
                borderContainerStyles.push({label:"cornerRadius : Number"});
                borderContainerStyles.push({label:"dropShadowVisible : Boolean"});
 
                var borderContainerEvents:Array = [];
 
                var borderContainerObj:Object = {label:"BorderContainer", icon:BorderContainerIcon,
                    children:[{label:"Properties:", children:borderContainerProperties},
                        {label:"Methods:", children:borderContainerMethods},
                        {label:"Styles:", children:borderContainerStyles},
                        {label:"Events:", children:borderContainerEvents}]};
 
                /* Button */
                var buttonProperties:Array = [];
                var buttonMethods:Array = [];
                var buttonStyles:Array = [];
                var buttonEvents:Array = [];
 
                var buttonObj:Object = {label:"Button", icon:ButtonIcon,
                    children:[{label:"Properties:", children:buttonProperties},
                        {label:"Methods:", children:buttonMethods},
                        {label:"Styles:", children:buttonStyles},
                        {label:"Events:", children:buttonEvents}]};
 
                /* ButtonBar */
                var buttonBarProperties:Array = [];
                var buttonBarMethods:Array = [];
                var buttonBarStyles:Array = [];
                var buttonBarEvents:Array = [];
 
                var buttonBarObj:Object = {label:"Button", icon:ButtonBarIcon,
                    children:[{label:"Properties:", children:buttonBarProperties},
                        {label:"Methods:", children:buttonBarMethods},
                        {label:"Styles:", children:buttonBarStyles},
                        {label:"Events:", children:buttonBarEvents}]};
 
                arrColl = new ArrayCollection([borderContainerObj, buttonObj, buttonBarObj]);
            }
        ]]>
    </mx:Script>
 
    <mx:MenuBar id="mnBr"
            dataProvider="{arrColl}"
            labelField="label"
            iconField="icon"
            horizontalCenter="0" top="20" />
 
</mx:Application>

7 thoughts on “Displaying icons in an MX MenuBar control in Flex

  1. Hi, I was wondering if there is any method so that we get the icon on the right side of the label?

  2. I have been trying to get this code to work for 5 hours now, with no luck yet. The icon simply wont appear. Could you please provide an online demo

  3. Hi,

    is there possibility to include dynamic icons (URL instead of Embeded assets). I think just custom itemRenderer for all menu items must be set (somehow, don’t know how to do it right now)

    Thanks

Comments are closed.