put icon at left of each button in spark ButtonBar flex 4

Question

hello all i have the following:

<s:ButtonBar id="tabs" y="15" left="0" height="31"
             change="VideosMenuBar_changeHandler(event)" requireSelection="true">  
    <s:layout>
        <s:HorizontalLayout gap="1" columnWidth="180" variableColumnWidth="false"   
                            />
    </s:layout>

    <s:ArrayCollection>
        <fx:String>Latest Videos</fx:String>
        <fx:String>Last Week Videos</fx:String>
        <fx:String>Last Month Videos</fx:String>
    </s:ArrayCollection>

</s:ButtonBar>

can anyone tell me how can i embed an icon to the left of each button of this (spark)ButtonBar?? I have searched all the web!

Thanks beforehand!

score 2 · Accepted Answer · answered Feb 09 '12 at 08:07

Create a skin class for the ButtonBar (e.g. CustomButtonBarSkin)

<s:ButtonBar id="tabs" y="15" left="0" height="31"
             skinClass="CustomButtonBarSkin"    
             change="VideosMenuBar_changeHandler(event)" requireSelection="true">  
    <s:layout>
        <s:HorizontalLayout gap="1" columnWidth="180" variableColumnWidth="false"   
                            />
    </s:layout>

    <s:ArrayCollection>
        <fx:String>Latest Videos</fx:String>
        <fx:String>Last Week Videos</fx:String>
        <fx:String>Last Month Videos</fx:String>
    </s:ArrayCollection>

</s:ButtonBar>

In the skin class look for the part where the buttons are defined as components, and change the skinClass attribute of the ButtonBarButton's to a custom skin class (e.g. CustomButtonBarButtonSkin).

<fx:Component id="firstButton">
    <!-- <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarFirstButtonSkin" /> -->
    <s:ButtonBarButton skinClass="CustomButtonBarButtonSkin" />
</fx:Component> 
[...]

The custom ButtonBar skin class is based on spark.skins.spark.ButtonBarFirstButtonSkin, spark.skins.spark.ButtonBarMiddleButtonSkin or spark.skins.spark.ButtonBarLastButtonSkin.

In the custom ButtonBarButton skin class, you can add components as you wish. In the case of an image to he left, the class would look something like this.

<!-- layer 8: text -->
<!---  @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s:Image source="@Embed('bricks.png')" />
<s:Label id="labelDisplay"
         textAlign="center"
         verticalAlign="middle"
         maxDisplayedLines="1"
         horizontalCenter="0" verticalCenter="1"
         left="10" right="10" top="2" bottom="2">
</s:Label>!

And this it how it looks

Thanks a lot for your answer but i have a few questions if you could help me..1) i have applied a theme in my app which has made the buttons look somehow without an icon and i would like on top of that put an icon will there be any problem if i apply a skin at the buttonbar despite it has taken some features from the theme? and 2) how can i change the height of each button, i have put height="31" in buttonbar but it changes only the space for the buttonbar without expanding the buttons..any idea? Thanks a lot again! — sstauross, Feb 09 '12 at 11:07
Another question..3) Can i use an array of objects on order to embed the icon in each one as a dataprovider of the buttonbar or it is a technique regarding mx components? — sstauross, Feb 09 '12 at 11:40
1) Really can't say. You may have to take a closer look at the theme skin files and apply your changes there. — Rico Leuthold, Feb 09 '12 at 21:16
2) You can set the button height in the `ButtonBarButton` skin file: `` 3) Dou you mean like [this](http://blog.flexexamples.com/2009/07/28/displaying-icons-in-a-spark-buttonbar-control-in-flex-4/)? — Rico Leuthold, Feb 09 '12 at 21:24
What i did is to put the property verticalAlign="justify" in the ` ` for the 1) question if you apply a skin over a theme the skin is stronger so the properties of the theme disappear! — sstauross, Feb 10 '12 at 10:06

put icon at left of each button in spark ButtonBar flex 4

1 Answers1