… is to not use TabNavigator at all. Use a ViewStack and RadioButtons in an HBox!

I like doing skinning work in Flex but there certainly are a few components that I often times find easier to just re-engineer than skin. Scroll bars and TabNavigators are some examples of such components. I’ve heard skinning these components has gotten much easier in Flex 4, but alas, all my projects are still being developed in Flex 3.5.

I was recently given the task of skinning a ‘tabbed’ component, which was previously using the TabNavigator. In Flex 3.5, one can assign custom skins for the first, and last tabs, then a repeating skin for any in-between. This is a fairly common setup for tabs, but unfortunately in this particular component each tab needed to be unique. Another caveat of the component was that the tab bar needed to be wider than the views. After struggling once again to skin the TabNavigator to meet my needs, I finally decided that it might be easier to just do a little re-engineering.

In the past I’d done a series of normal Buttons in an HBox and scripted the ‘turn off/on’ for the other buttons. This time I decided to use RadioButtons and it went flawlessly! The script below shows how to do this. I believe this approach could be used in many situations and not require a lot of re-engineering since it can be done entirely in MXML. Another neat feature of this that the TabNavigator doesn’t allow is a ‘intro screen’ that doesn’t necessarily relate to the tabs, like the blank grey view in my example below.

<!--?xml version="1.0" encoding="utf-8"?-->

		.characterName {
			fontSize: 24;
			fontWeight: bold;
			color: #FFFFFF;
		}

		.tab1 {
 			up-skin: Embed(source='/style/batman_d.jpg');
			down-skin: Embed(source='/style/batman_u.jpg');
			over-skin: Embed(source='/style/batman_u.jpg');

			selected-up-skin: Embed(source='/style/batman_u.jpg');
			selected-down-skin: Embed(source='/style/batman_u.jpg');
			selected-over-skin: Embed(source='/style/batman_u.jpg');

			upIcon: ClassReference("mx.skins.ProgrammaticSkin");
			overIcon: ClassReference("mx.skins.ProgrammaticSkin");
			downIcon: ClassReference("mx.skins.ProgrammaticSkin");
			selectedUpIcon: ClassReference("mx.skins.ProgrammaticSkin");
			selectedOverIcon: ClassReference("mx.skins.ProgrammaticSkin");
			selectedDownIcon: ClassReference("mx.skins.ProgrammaticSkin");
			disabledIcon:ClassReference("mx.skins.ProgrammaticSkin");
			selectedDisabledIcon: ClassReference("mx.skins.ProgrammaticSkin");
		}

		.tab2 {
			up-skin: Embed(source='/style/wolverine_d.jpg');
			down-skin: Embed(source='/style/wolverine_u.jpg');
			over-skin: Embed(source='/style/wolverine_u.jpg');

			selected-up-skin: Embed(source='/style/wolverine_u.jpg');
			selected-down-skin: Embed(source='/style/wolverine_u.jpg');
			selected-over-skin: Embed(source='/style/wolverine_u.jpg');

			upIcon: ClassReference("mx.skins.ProgrammaticSkin");
			overIcon: ClassReference("mx.skins.ProgrammaticSkin");
			downIcon: ClassReference("mx.skins.ProgrammaticSkin");
			selectedUpIcon: ClassReference("mx.skins.ProgrammaticSkin");
			selectedOverIcon: ClassReference("mx.skins.ProgrammaticSkin");
			selectedDownIcon: ClassReference("mx.skins.ProgrammaticSkin");
			disabledIcon:ClassReference("mx.skins.ProgrammaticSkin");
			selectedDisabledIcon: ClassReference("mx.skins.ProgrammaticSkin");
		}

		.tab3 {
			up-skin: Embed(source='/style/wonderwoman_d.jpg');
			down-skin: Embed(source='/style/wonderwoman_u.jpg');
			over-skin: Embed(source='/style/wonderwoman_u.jpg');

			selected-up-skin: Embed(source='/style/wonderwoman_u.jpg');
			selected-down-skin: Embed(source='/style/wonderwoman_u.jpg');
			selected-over-skin: Embed(source='/style/wonderwoman_u.jpg');

			upIcon: ClassReference("mx.skins.ProgrammaticSkin");
			overIcon: ClassReference("mx.skins.ProgrammaticSkin");
			downIcon: ClassReference("mx.skins.ProgrammaticSkin");
			selectedUpIcon: ClassReference("mx.skins.ProgrammaticSkin");
			selectedOverIcon: ClassReference("mx.skins.ProgrammaticSkin");
			selectedDownIcon: ClassReference("mx.skins.ProgrammaticSkin");
			disabledIcon:ClassReference("mx.skins.ProgrammaticSkin");
			selectedDisabledIcon: ClassReference("mx.skins.ProgrammaticSkin");
		}