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!

A few days ago one of the commit messages in the Gumbo trunk mentioned some work for advanced CSS was beginning. I tried to create an example of using a descendant selector as well as an ID selector, but neither worked.

Tonight, another commit message said that this was now in place by default (I guess it would have worked earlier, but I needed to be specify a compiler argument). But now, after rebuilding the latest checkout of Gumbo you should now be able to compile the following example to see the advanced CSS selectors working. Below is the SWF (you’ll need Flash Player 10 to view it) and the code follows:

[flash http://blog.smartlogicsolutions.com/wp-content/uploads/2008/10/CSSExample.swf]

CSSExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<FxApplication xmlns="http://ns.adobe.com/mxml/2009">
 
    <layout><VerticalLayout /></layout>
 
    <Style source="descendants.css" />
 
    <VGroup>
        <TextView>Text in a VGroup</TextView>
    </VGroup>
 
    <HGroup>
        <TextView id="red">Text in an HGroup</TextView>
    </HGroup>
 
</FxApplication>

Standard so far, now let’s see the CSS with the advanced selectors:

descendants.css

VGroup TextView {
    font-size: 24pt;
}
 
HGroup TextView {
    text-decoration: underline;
}
 
#red {  
    color: #ff0000;
}

Flex 4 is now fully demonstrating the Cascading part of CSS. (You may need to review CSS selectors syntax.) NOTE: I don’t know how much of the CSS spec is going to be supported in Flex 4, and am not suggesting that everyone of the selectors at the CSS selectors page will be available in Flex 4.

The VGroup TextView selector targets any TextView instances which are a child of a VGroup. #red selector targets instances with an ID of “red”.

As usual, here is the bundled source and SWF.

I hope everyone’s enjoying their Gumbo!