Styling buttons of Flex TabNavigator - apache-flex

Question

I created a TabNavigator with a bunch of NavigatorContent inside it, and want to skin just the buttons of the tabs themselves. So I added a skinClass, but looks like in the documentation, there's no skin part to target the button specifically.
Do I have to style the mx:TabNavigator itself to accomplish this? I was hoping not since I don't know how to style mx components and am more comfortable with styling spark.
Any other alternatives that I didn't think about?

Answer 1

Since TabNavigator is a mx component, you'll have to style it the old way. You can style the buttons by setting the 'tabStyleName' style, ie:
TabNavigator{
tabStyleName: "myTabButton";
}
.myTabButton{
skin: ClassReference("com.yournamespace.skins.TabButtonSkin");
}
You'll have to create the skins the old way, you may want to look at the mx.skins.halo.Button class for an example, or you can use degrafa or you can use pngs.
Note you can also set a firstTabStyleName or lastTabStyleName seperately if you so desire.
programmatic skin example:
http://www.davidflatley.com/2007/12/17/programmatic-button-skins-in-flex-3/
degrafa example:
http://styleanderror.net/2010/02/creating-animated-programmatic-button-skins-in-degrafa/

Answer 2

You can write you own button skin or use the one here http://www.wabysabi.com/flex/enhancedbuttonskin/
named EnhancedButtonSkin.as (right-click, View-Source).
Then declare your TabNavigator component and specify its tabStyleName.
<mx:TabNavigator y="0" height="100%" right="0" left="0" id="navigator" tabStyleName="tab">
And now the css:
<fx:Style>
.tab
{
upSkin:ClassReference('com.EnhancedButtonSkin');
overSkin:ClassReference('com.EnhancedButtonSkin');
downSkin:ClassReference('com.EnhancedButtonSkin');
disabledSkin:ClassReference('com.EnhancedButtonSkin');
selectedUpSkin:ClassReference('com.EnhancedButtonSkin');
selectedOverSkin:ClassReference('com.EnhancedButtonSkin');
selectedDownSkin:ClassReference('com.EnhancedButtonSkin');
selectedDisabledSkin:ClassReference('com.EnhancedButtonSkin');
cornerRadii: 5, 5, 0, 0;
borderColors: #CC0000, #000000;
overBorderColors: #003399, #003399;
selectedBorderColors: #666666, #FFFFFF;
borderThickness: 1;
borderAlpha: 1;
fillColors: #CC3300, #F98900;
fillAlphas: 1, 1;
fillColorRatios: 0, 255;
overFillColors: #999999, #FFFFFF;
overFillAlphas: 1, 1;
overFillColorRatios: 0, 255;
selectedFillColors: #999999, #FFFFFF;
selectedFillAlphas: 1, 1;
selectedFillColorRatios: 111, 255;
highlightAlphas: 0, 0;
color: #000000;
textRollOverColor: #000000;
fontSize: 13;
}
</fx:Style>
This css will display:
i.imgur.com/4HwD3.png
Remy