Displaying icons in a Flex PopUpButton control

The following example shows you how you can add items to a pop up menu in a PopUpButton control in Flex by specifying the iconField property in the PopUpButton control’s nested Menu control.

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2008/01/24/displaying-icons-in-a-flex-popupbutton-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;

            [Bindable]
            private var menu:Menu;

            private function initMenu():void {
                menu = new Menu();
                menu.dataProvider = arr;
            }
        ]]>
    </mx:Script>

    <mx:Style>
        PopUpButton {
            popUpStyleName: myCustomPopUpStyleName;
        }

        .myCustomPopUpStyleName {
           fontWeight: normal;
           textAlign: left;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="Alert" />
        <mx:Object label="Button"
                icon="@Embed('assets/Button.png')" />
        <mx:Object label="ButtonBar"
                icon="@Embed('assets/ButtonBar.png')" />
        <mx:Object label="CheckBox"
                icon="@Embed('assets/CheckBox.png')" />
        <mx:Object label="ColorPicker"
                icon="@Embed('assets/ColorPicker.png')" />
    </mx:Array>

    <mx:PopUpButton id="popUpButton"
            label="Select a control..."
            popUp="{menu}"
            preinitialize="initMenu();"
            creationComplete="popUpButton.open();" />

</mx:Application>

View source is enabled in the following example.

If your data provider didn’t have an “icon” field, you could set the iconField property on the Menu instance to the field with the icon you want to display, as shown in the following snippet:

View MXML

<mx:Array id="arr">
    <mx:Object label="Alert" />
    <mx:Object label="Button"
            img="@Embed('assets/Button.png')" />
    <mx:Object label="ButtonBar"
            img="@Embed('assets/ButtonBar.png')" />
    <mx:Object label="CheckBox"
            img="@Embed('assets/CheckBox.png')" />
    <mx:Object label="ColorPicker"
            img="@Embed('assets/ColorPicker.png')" />
</mx:Array>

<mx:Script>
    <![CDATA[
        import mx.controls.Menu;

        [Bindable]
        private var menu:Menu;

        private function initMenu():void {
            menu = new Menu();
            menu.iconField = "img";
            menu.dataProvider = arr;
        }
    ]]>
</mx:Script>

View source

5 thoughts on “Displaying icons in a Flex PopUpButton control

  1. i am new @ Flex and i am wondering if there is a way to use a dataprovider with Image-objects for the icon. How do I convert an Image-object to an icon?

    Greetz, Tobias Hoffmann

  2. Perhaps you could provide a similar example of an icon on a MenuItem under a MenuBar where the MenuItems are specified in an XMLList. : ) I cannot figure out how to get the icon field to consume the string that is placed there.

Comments are closed.