TabBar with multicolored tabs

Tabs of TabBar component can be a tweaked to produce tabs of different colors.
The trick is to iterate through the datasource of TabBar, pick the tabs one by one and set the properties - backgroundColor, fillAlphas and fillColors.

Here is the quick code

mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
backgroundColor="#D1D1D1"  >

Canvas
{
borderStyle: applicationControlBar; 
fillColors:  #FFB600,#FFFFFF; 
fillAlphas: 0.4, 1.0; 
highlightAlphas: 0, 0;  
} 





 






import mx.events.ItemClickEvent;
private function onItemClick(event:ItemClickEvent):void
{
var colorArray:Array = ["#FFB600", "#FFFF00", "#80FF4D"];
canvasMain.setStyle("backgroundColor", colorArray[event.index]);
}
private function onTabCreated():void
{
var colorArr:Array = ["haloOrange", "yellow", "haloGreen"];
var len:int = tabContainer.dataProvider.length;
var tab:Object;

for(var i:int = 0; i< len; i++)
{
tab = tabContainer.getChildAt(i);
tab.setStyle("fillColors", [colorArr[i], "white"]);
tab.setStyle("fillAlphas", [1.0, 1.0]);
tab.setStyle("backgroundColor", colorArr[i]);
tab.width = 200;
}
}