Displaying icons in an MX MenuBar control in Flex

By On January 29, 2010 · 7 Comments

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>
 
Tagged with:
 
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.

Share
Facebook Twitter

7 Responses to Displaying icons in an MX MenuBar control in Flex

  1. Nitesh says:
    March 15, 2010 at 2:06 am

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

  2. Sunny Goyal says:
    March 17, 2010 at 2:51 am

    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. Franto says:
    December 7, 2010 at 12:44 am

    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

  4. Sam says:
    January 3, 2011 at 9:57 pm

    Hi,
    Any suggestions/sample on how to align icons to the right?

    Thanks

  5. Fernando Carrasco says:
    May 2, 2011 at 9:13 pm

    Is there a way to use fxg’s instead of png’s as icons?