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';" />

21 thoughts on “Adding icons to the Flex ButtonBar control

  1. Thanks for the very good tutorial,

    I have a question. If I use a XML file as data provider and a repeater class to dynamically create buttons, is there a way to add a proper icon to the dynamically created buttons.

    Here is my code:

    <mx:Repeater id="toolBarRepeater" dataProvider="{toolBarData}">
    <mx:Button styleName="navbutton" name="{toolBarRepeater.currentItem.id}"
        click="setTransition(String(event.currentTarget.getRepeaterItem().state));"
        toolTip="{toolBarRepeater.currentItem.tooltip}"
        icon="HERE I WANT A DYNAMIC ICON"/>
    </mx:Repeater>
    

    I have an icon param in my xml but I alway have an ‘Invalid metadata format’ error.

    Thx!

  2. Hi,
    Here is a sample of my XML. I have tried several approach, but non of them worked. I put below what I’ve tried.

    <?xml version="1.0" encoding="UTF-8"?>
    <toolBar>
    
    	<toolBarItem>
    		<id>toDefaultBtn</id>
    		<state>default</state>
    		<tooltip>Home</tooltip>
    		<icon>@Embed("assets/icons/icon.png")</icon>
    	</toolBarItem>
    
    	<toolBarItem>
    		<id>toCustomersBtn</id>
    		<state>customers</state>
    		<tooltip>Customers</tooltip>
    		<icon>{icon1}</icon>
    	</toolBarItem>
    
    	<toolBarItem>
    		<id>toStockBtn</id>
    		<state>stock</state>
    		<tooltip>Boutique Stock</tooltip>
    		<icon>icon2</icon>
    	</toolBarItem>
    
    </toolBar>
    

    Thx for your help!

  3. I just got the metadata issue, I had Embed(/'assets/my.gif').
    Also, not sure if it is the blog, but make sure it is normal quotes (“) rather than smart quotes

  4. Hi dc
    Thanks for the reply, but I am not sure to understand what u mean

    Here is what I changed:

    <toolBarItem>
    	<id>toDefaultBtn</id>
    	<state>default</state>
    	<tooltip>Home</tooltip>
    	<icon>@Embed(/"assets/icons/icon.png")</icon>
    </toolBarItem>
    

    And here is the same error message:
    Error #1034: Type Coercion failed: cannot convert “@Embed(/”assets/icons/icon.png”)” to Class.

    Could u please send me the details of what u got to work please?
    Thx

  5. Actually, @Embed is like a preprocessor directive (like #include in C). @Embed means open the file, and include it in my SWF file. So you CANT use it at runtime.

    There is a big problem (issue) with icon in flex, because icon must be compiled with the SWF (they not implement loader like image class).

    BUT you can find utility class emulating this, and so you can use url for your icon.

    Have a look at http://blog.benstucki.net/?p=42

  6. Do you know how to *CHANGE* the icon of a button of the ButtonBar ? I tried many piece of code, but my button do not change…

  7. Fred,

    Try something like this:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
        <mx:Script>
            <![CDATA[
                [Embed("Button.png")]
                private const ButtonIcon:Class;
    
                private function btn_click(evt:Event):void {
                    /* Change the first button in the ButtonBar to use the embedded ButtonIcon asset. */
                    Button(buttonBar .getChildAt(0)).setStyle("icon", ButtonIcon);
                }
            ]]>
        </mx:Script>
    
        <mx:ArrayCollection id="arr">
            <mx:Object label="Button" icon="@Embed('ButtonBar.png')" />
            <mx:Object label="ButtonBar" icon="@Embed('ButtonBar.png')" />
            <mx:Object label="CheckBox" icon="@Embed('CheckBox.png')" />
        </mx:ArrayCollection>
    
        <mx:ApplicationControlBar dock="true">
            <mx:Button label="Oops, I meant Button icon"
                    click="btn_click(event);" />
        </mx:ApplicationControlBar>
    
        <mx:ButtonBar id="buttonBar " dataProvider="{arr}" />
    
    </mx:Application>
    

    Peter

  8. The code generates an error. I placed an file named Editor.png in a folder in my Flex project named assets. When i attempted to reference it as such:

    [Bindable]
    [Embed(“/assets/Editor.png”)]
    private var buttonIcon:Class;

    i got this error:

    Unable to resolve /assets/Editor.png for transcoding.

    2nd — which property needs to be set so that an icon appears in the application’s main toolbar?

  9. I was facing a similar problem. Following format fixed it:

    icon="@Embed(source='../assets/GD1.jpg')"
    
  10. I’m having a problem getting my icons to show up in a button bar. Here is the code I am using:

    <mx:ButtonBar id="control_bbar" height="20" width="200" buttonHeight="15" buttonWidth="15">
        <mx:dataProvider>
            <mx:Object icon="@Embed(source='img/icon.png')" />
        </mx:dataProvider>
    </mx:ButtonBar>

    I have tried every combination of the path to the icon.png file that I can think of and it still doesn’t work. Labels show up fine, but not the icons. The PNG is smaller then the buttonHeight and buttonWidth. I am using Flex Builder 3. I have tried all of the various suggestions listed in the posts above. I also tried using a simple button with the icon, which works fine, so I then copied the path used by the Button for the mx:Object in the ButtonBar – still nothing.

    Anybody have any ideas?

    Thanks.
    Bill

    1. @Bill D,

      This works for me:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
       
          <mx:ButtonBar id="control_bbar" width="200" buttonHeight="25" buttonWidth="25">
              <mx:dataProvider>
                  <mx:ArrayCollection>
                      <mx:Object icon="@Embed(source='accept.png')" />
                      <mx:Object icon="@Embed(source='add.png')" />
                      <mx:Object icon="@Embed(source='anchor.png')" />
                      <mx:Object icon="@Embed(source='application.png')" />
                  </mx:ArrayCollection>
              </mx:dataProvider>
          </mx:ButtonBar>
       
      </mx:Application>

      Peter

  11. I realize this is an old thread, but I’m hoping you will spot this post and come to our rescue! I created a button in Flash. I exported it to a swf. In Flex 3, I can use the swf as an image on a button and it will automagically grab the up/over/down states in the swf. However, this will not work on a buttonbar in Flex3. We hope to have the buttonbar icons have different appearances for up/over/down (not just the background skin). Can this be done? Thanks.

Comments are closed.