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

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!

Answer 1

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