CODEWITHSUNDEEP
apache-flexactionscript-3adobeviewstacktabnavigator
donpal
donpal

Reputation: 2112

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?

Upvotes: 0

Views: 7349

Answers (2)

Remy Mellet
Remy Mellet

Reputation: 1805

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

Upvotes: 1

quoo
quoo

Reputation: 6307

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/

Upvotes: 1

Related Questions