SmartLogic Logo (443) 451-3001

The SmartLogic Blog

SmartLogic is a web and mobile product development studio based in Baltimore. Contact us for help building your product or visit our website to learn more about what we do.

Flex 3: Styling Individual Tabs in a TabBar

November 10th, 2008 by

There are a few ways to style the tabs in a TabBar that are fairly well hidden. Here are a couple methods that hopefully save some time for those of you out there looking to apply advanced styles tabs in Flex.

If you need to style the tabs uniformly, then you’ve got little work to do. Just set the StyleName attribute on the TabBar itself and just define it in your stylesheet.

<mx:TabBar id="tabBar" styleName="myTabBarStyle"  />
.myTabBarStyle {
	tabHeight: 28;
	cornerRadius: 0;
	horizontalGap: 0;
	horizontalAlign: right;
	backgroundAlpha: 1;
	backgroundColor: #357cc6;
	borderStyle: none;
	borderThickness: 0;
	dropShadowEnabled: false;
}

Now that’s all good and well when all your tabs look the same. What if you want to apply styles to tabs individually? Well, if you’ve got 3 tabs or less you can use some css selectors to reference the book ends specifically, and let the general style apply to the middle tab.

.myTabBarStyle{
    ...
  tabStyleName: "greenTab";
  firstTabStyleName: "blueTab";
  lastTabStyleName: "yellowTab";
}
.greenTab {
  fillColors: #a5d414, #87c408;
  backgroundColor: #87c408;
   borderColor: #87c408;
  themeColor: #a5d414;
}
.blueTab {
  fillColors: #5a9cd6, #357cc6;
  backgroundColor: #357cc6;
  borderColor: #357cc6;
  color: #ffffff;
  textRollOverColor: #ffffff;
  themeColor: #5a9cd6;
}
.yellowTab {
  fillColors: #333333, #333333;
  backgroundColor: #333333;
  borderColor: #646464;
  color: #F8ED6D;
  textRollOverColor: #F8ED6D;
  themeColor: #646464;
}

When you have 4 or more tags, you need to set their styles by getting a reference to the tab itself and call the setStyle() method. Straight forward? Yes. Easy to find information about? No… in fact I ran into trouble because there wasn’t any documentation available for an individual tab’s class and FlexBuilder 3 has no source code for the mx.controls.tabBarClasses package.

Import the Tab code, get a reference to the tab you wish to style, and call setStyle() for each attribute you want to change. Let’s say you have 4 tabs and each has a different style. You can combine all 3 methods of styling by using the css code above to set the tab style for all tabs in the tabBar, override styles for the first and last tabs, then specifically grab the 3rd tab and override its style in the component:

  <mx:Script>
    <![CDATA[
	import mx.controls.tabBarClasses.Tab
	
       private function tabBarCreationComplete():void{
	  var tab:Tab = tabBar.getChildAt(2) as Tab;			  
	  tab.setStyle("fillColors", ["#edb000", "#e69500"]);
          tab.setStyle("backgroundColor", "#e69500");
          tab.setStyle("borderColor", "#e69500");
          tab.setStyle("themeColor", "#edb000");
       }
    ]]>
  </mx:Script>

And update the TabBar control:

  <mx:TabBar id="tabBar" 
                     styleName="myTabBarStyle"
                     creationComplete="tabBarCreationComplete();"  />

You can iterate through each tab in the TabBar and set each tab individually if desired. I hope this helps some Flex developers out there who are confused by styling many tabs individually!

  • ravi

    Great Example Thanks.
    Can u tell how i can change the style of SelectedTab.I don’t want Default Flex Selectedtab style

  • http://www.smartlogicsolutions.com/wiki/Glenn_Gentzke Glenn Gentzke

    @ravi
    The Tab class extends Button, so you can style a selected tab like a selected button. That said, if you really want to have the most control over what your button’s looks like in different states, I recommend skinning them.

    To get started, check out Adobe’s quickstart page on skinning:
    http://www.adobe.com/devnet/flex/quickstart/skinning_components/

    For more advanced skinning, especially for drawing skins, you might want to check out the Degrafa [http://www.degrafa.com] libraries.

    You can also create a class of skins for the button:

    [in the css file]
    .myButtonStyle{
    skin: ClassReference(“your.project.skins.MyButtonSkin”);
    }

    Then you would just define skins for all the states in that class. To go into the Degrafa skinning would really need another blog post and there’s a lot of info already out there on that. Hope this helps!

  • Sudhir

    Hi

    I want to change the style of the tab on click(Selected tab). How can I implement this? I have change the size . color, font of the selected tab.