Adding icons to the Flex ButtonBar control

The following example shows how you can add icons to the ButtonBar control in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed("assets/Button.png")]
            private var buttonIcon:Class;

            [Bindable]
            [Embed("assets/ButtonBar.png")]
            private var buttonBarIcon:Class;

            [Bindable]
            [Embed("assets/CheckBox.png")]
            private var checkBoxIcon:Class;

            [Bindable]
            [Embed("assets/ColorPicker.png")]
            private var colorPickerIcon:Class;
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Button" icon="{buttonIcon}" />
        <mx:Object label="ButtonBar" icon="{buttonBarIcon}" />
        <mx:Object label="CheckBox" icon="{checkBoxIcon}" />
        <mx:Object label="ColorPicker" icon="{colorPickerIcon}" />
    </mx:Array>

    <!-- The data provider has an "icon" property. -->
    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            height="32" />

</mx:Application>

View source is enabled in the following example.

The previous example works because the the data provider has an “icon” field, and the default value for the ButtonBar control’s iconField property is “icon”.

The following snippet shows how you can override the default value for the ButtonBar control’s iconField property in MXML:

<mx:Array id="arr">
    <mx:Object label="Button" img="{buttonIcon}" />
    <mx:Object label="ButtonBar" img="{buttonBarIcon}" />
    <mx:Object label="CheckBox" img="{checkBoxIcon}" />
    <mx:Object label="ColorPicker" img="{colorPickerIcon}" />
</mx:Array>

<!-- The data provider has an "img" property, so use ButtonBar
     control's iconField property to set the icons on the
     control. -->
<mx:ButtonBar id="buttonBar"
        dataProvider="{arr}"
        iconField="img"
        height="32" />

You could also set the iconField property using ActionScript, as shown in the following snippet:

<mx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        private function buttonBar_initialize(evt:FlexEvent):void {
            buttonBar.iconField = "img";
        }
    ]]>
</mx:Script>

<mx:Array id="arr">
    <mx:Object label="Button" img="{buttonIcon}" />
    <mx:Object label="ButtonBar" img="{buttonBarIcon}" />
    <mx:Object label="CheckBox" img="{checkBoxIcon}" />
    <mx:Object label="ColorPicker" img="{colorPickerIcon}" />
</mx:Array>

<mx:ButtonBar id="buttonBar"
        dataProvider="{arr}"
        height="32"
        initialize="buttonBar_initialize(event);" />

Or, the slightly more condensed version:

<mx:Array id="arr">
    <mx:Object label="Button" img="{buttonIcon}" />
    <mx:Object label="ButtonBar" img="{buttonBarIcon}" />
    <mx:Object label="CheckBox" img="{checkBoxIcon}" />
    <mx:Object label="ColorPicker" img="{colorPickerIcon}" />
</mx:Array>

<mx:ButtonBar id="buttonBar"
        dataProvider="{arr}"
        height="32"
        initialize="buttonBar.iconField = 'img';" />

Tagged as: icon, iconField