Problem:
To show each tab in TabBar with different images as skin
Solution :
Spark TabBar with dataprovider
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]private var tabs:ArrayCollection = new ArrayCollection([
{label:'Fabric',imageIcon:'color.png',id:'FABRIC'},
{label:'Design',imageIcon:'design.png',id:'DESIGN'},
{label:'Color Contrast',imageIcon:'fabric.png',id:'COLOR_CONTRAST'},
{label:'Measurement',imageIcon:'measurment.png',id:'MEASUREMENT'}
]);
]]>
</fx:Script>
<s:TabBar skinClass=”TabBarSkin” dataProvider=”{tabs}” height=”25″
labelField=”label”/>
TabBarSkin.mxml
<s:DataGroup id=”dataGroup” width=”100%” height=”100%”>
<s:layout>
<s:ButtonBarHorizontalLayout gap=”-1″/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ButtonBarButton skinClass=”IconButtonSkin” />
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
IconButtonSkin:
In script file:
– create Class type for each image
[Embed(source="measurment.png")]
private var image1:Class;
[Embed(source="color.png")]
private var image2:Class;
[Embed(source="design.png")]
private var image3:Class;
[Embed(source="fabric.png)]
private var image4:Class;
– Override function updateDisplayList
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var btnId:String = (this as Object).hostComponent.data.id;
var label:String = (this as Object).hostComponent.data.label;
labelDisplay.text = label ;
switch(btnId)
{
case ‘FABRIC’:
icon.source = image1 ;
break;
case ‘DESIGN’:
icon.source = image2 ;
break;
case ‘COLOR_CONTRAST’:
icon.source = image3;
break;
case ‘MEASUREMENT’:
icon.source = image4 ;
break;
}
this.width = this.hostComponent.width;
this.minWidth = this.hostComponent.width;
}
<s:Label id=”labelDisplay” visible=”false” includeInLayout=”false”
textAlign=”center”
verticalAlign=”middle”
maxDisplayedLines=”1″
horizontalCenter=”0″ verticalCenter=”1″
left=”10″ right=”10″ top=”2″ bottom=”2″>
</s:Label>
<s:BitmapImage id=”icon” smooth=”true” width=”91″ height=”101″ visible=”true”
/>
