Flex Examples
The following example shows how you can add icons to the ButtonBar control in Flex.
Full code after the jump.
<?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';" />
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.
Share
very good
enjoy
Thank you you example it’s give me a lot of help
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!
jeremie,
Good question. What does your XML look like?
Peter
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!
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
Hi dc
Thanks for the reply, but I am not sure to understand what u mean
Here is what I changed:
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
what about using @Embed(‘assets/icons/icon.png’) instead
i mean: & # 6 4 ; Embed(‘images/icon8.png’)
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
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…
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
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?
Scott Macdonald,
What if you remove the “/” before the assets directory?
Peter
thanks alot peter,
that solved my case” though i had to add the slash :-D
I was facing a similar problem. Following format fixed it:
is there a way to specify the disabled icon also?
I’m having a problem getting my icons to show up in a button bar. Here is the code I am using:
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
@Bill D,
This works for me:
Peter
how to set the tabbar buttons width according to button label content (dynamic)
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.