Comments on: Adding icons to the Flex ButtonBar control http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/ Just a bunch of Adobe Flex Examples Sun, 12 Feb 2012 14:19:03 +0000 hourly 1 By: Rebecca http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/comment-page-1/#comment-9340 Rebecca Mon, 27 Jun 2011 21:44:54 +0000 http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/#comment-9340 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. 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.

]]> By: sankar http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/comment-page-1/#comment-7379 sankar Mon, 29 Mar 2010 17:00:38 +0000 http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/#comment-7379 how to set the tabbar buttons width according to button label content (dynamic) how to set the tabbar buttons width according to button label content (dynamic)

]]> By: Peter deHaan http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/comment-page-1/#comment-7310 Peter deHaan Fri, 19 Mar 2010 20:35:16 +0000 http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/#comment-7310 @Bill D, This works for me: <pre lang="mxml"> <?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> </pre> Peter @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

]]> By: Bill D http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/comment-page-1/#comment-7309 Bill D Fri, 19 Mar 2010 18:54:20 +0000 http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/#comment-7309 I'm having a problem getting my icons to show up in a button bar. Here is the code I am using: <pre lang="mxml"> <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> </pre> 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 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

]]> By: Adam J http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/comment-page-1/#comment-6710 Adam J Wed, 30 Dec 2009 20:02:32 +0000 http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/#comment-6710 is there a way to specify the disabled icon also? is there a way to specify the disabled icon also?

]]> By: Molt http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/comment-page-1/#comment-4627 Molt Sun, 19 Jul 2009 21:37:38 +0000 http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/#comment-4627 thanks alot peter, that solved my case" though i had to add the slash :-D thanks alot peter,
that solved my case” though i had to add the slash :-D

]]> By: Ranjeet http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/comment-page-1/#comment-2228 Ranjeet Fri, 17 Apr 2009 13:37:13 +0000 http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/#comment-2228 I was facing a similar problem. Following format fixed it: <pre class="code"> icon="@Embed(source='../assets/GD1.jpg')" </pre> I was facing a similar problem. Following format fixed it:

icon="@Embed(source='../assets/GD1.jpg')"
]]> By: Peter deHaan http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/comment-page-1/#comment-2227 Peter deHaan Thu, 09 Apr 2009 20:26:41 +0000 http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/#comment-2227 Scott Macdonald, What if you remove the "/" before the assets directory? Peter Scott Macdonald,

What if you remove the “/” before the assets directory?

Peter

]]> By: Scott Macdonald http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/comment-page-1/#comment-2232 Scott Macdonald Thu, 09 Apr 2009 16:01:17 +0000 http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/#comment-2232 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? 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?

]]> By: Peter deHaan http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/comment-page-1/#comment-2230 Peter deHaan Fri, 23 Jan 2009 17:19:53 +0000 http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/#comment-2230 Fred, Try something like this: <pre class="code"> <?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> </pre> Peter 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

]]>