My Additions to the SuperTabNavigator

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.

3 comments February 8th, 2007