My Additions to the SuperTabNavigator

Posted on February 8, 2007 | 5 comments

Doug McCune just released a very nice post about the perfect tabnavigator, aka: SuperTabNavigator. I just happened to be messing with a skinning feature for TabBar’s and TabNavigator’s that I thought would go well with this awesome component.

The default Tab skin for the TabBar and TabNavigator makes the selected Tab a solid color, the same color as the backgroundColor of the respective container component (TabBar or TabNavigator). This modification allows the developer to modify the selected Tab’s color through CSS. Not just change the color but make it fancy with gradient colors and alpha’s. It does require you to override all the Tab’s “skins” to make it work but it is fine as that can be done globally.

Take a look at the result here:

The code works by creating a custom programmatic skin file called GradientTabSkin.as. This file is a copy of the Halo theme'd TabSkin.as with my modifications. Now you need to set the Tab's skins to point to the new programmatic skin class. The following code is an example of how to do this in CSS:

Tab {
	disabledSkin: ClassReference("com.renaun.skins.GradientTabSkin");
	downSkin: ClassReference("com.renaun.skins.GradientTabSkin");
	overSkin: ClassReference("com.renaun.skins.GradientTabSkin");
	selectedDisabledSkin: ClassReference("com.renaun.skins.GradientTabSkin");
	selectedDownSkin: ClassReference("com.renaun.skins.GradientTabSkin");
	selectedOverSkin: ClassReference("com.renaun.skins.GradientTabSkin");
	selectedUpSkin: ClassReference("com.renaun.skins.GradientTabSkin");
	upSkin: ClassReference("com.renaun.skins.GradientTabSkin");
}

The new custom skin uses the "backgroundGradientColors" and "backgroundGradientAlphas" to modify the selected Tab's gradient fill. I choose to use these two styles because first they are not used by the Tab component and they make sense in terms of the select Tab trying to reflect the backgroundColors of the container. You could extend Tab and put you own custom style names in, but then you would have to extend TabBar and TabNavigator, too messy for me. You can view the CSS values used in the above example with the source links below.

You can click here to get the source code of my modifications. To get the full source of SuperTabNavigator please visit Doug's site.

Share the post "My Additions to the SuperTabNavigator"

  • Howard Ross

    I would like to set each tab to be a different color. Any suggestions on how to go about doing that would be greatly appreciated

  • Max

    the most needed component after dataGrid and tree so far..
    +1 to Howard (im working on same )
    now trying to override some tabbar “fetching” methods to set styles..

  • yochikoh

    for 1# comment

    I think you can create different tabStyle for each tab.
    It would be something like this:

    TabBar
    {
    firstButtonStyleName: “tabStyle1″;
    tabStyleName: “tabStyle2″;
    lastButtonStyleName: “tabStyle3″;
    }

    .tabStyle1 {
    disabledSkin: Embed(source=”flex_skins.swf”, symbol=”Tab_disabledSkin”);
    downSkin: Embed(source=”flex_skins.swf”, symbol=”Tab_downSkin”);
    overSkin: Embed(source=”flex_skins.swf”, symbol=”Tab_overSkin”);
    selectedDisabledSkin: Embed(source=”flex_skins.swf”, symbol=”TabSelected_disabledSkin”);
    selectedDownSkin: Embed(source=”flex_skins.swf”, symbol=”TabSelected_upSkin”);
    selectedOverSkin: Embed(source=”flex_skins.swf”, symbol=”TabSelected_upSkin”);
    selectedUpSkin: Embed(source=”flex_skins.swf”, symbol=”TabSelected_upSkin”);
    upSkin: Embed(source=”flex_skins.swf”, symbol=”Tab_upSkin”);

    }

    .tabStyle2 {

    }

    .tabStyle3 {
    }

    I found useful info about skinning here:
    http://www.adobe.com/devnet/flex/articles/flex_skins.html

  • http://www.shrutijakhete.blogspot.com Shruti

    hey… thanks for it. I need the same thing in flex 3 . I am new in flex… could you please direct me how could I start with it.

    Thanks.

    • http://www.renaun.com Renaun Erickson

      The code should work in Flex 3 with out too many changes.