apache-flexactionscript-3adobeviewstacktabnavigator

Styling buttons of Flex TabNavigator

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?

Solution

  • 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/