Tabbed Navigation in Flex 4

If you didn’t know it already, the philosophy behind Flex 4 is ‘pay as you go’ for performance reasons. The goal was to reduce overhead and create lightweight components as a rule, so many things we were used to in Flex 3 are no longer included out of the box and it now requires some modification to the approach we take in building our apps. I recently created a Tour de Flex sample showing how you can do tabbed navigation with Flex 4 and wanted to share a simple example here too with a bit of explanation. One big benefit from my point of view is to be able to control the look and feel of my tabbed navigation quickly and easily with the new Flex 4 skinning model. For instance I could easily change the tab button borders, add icons to them etc with this approach.

We would implement the same tabbed navigation in Flex 4 by using the Spark TabBar control with a ViewStack. The best way to show this is by example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300">
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}"/>
	
	<mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23">
		<s:NavigatorContent label="Tab 1"  width="100%" height="100%">
			<s:Border width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
				<s:Label left="3" top="5" text="This is my first tab..."/>
			</s:Border>
		</s:NavigatorContent>
		<s:NavigatorContent label="Tab 2"  width="100%" height="100%">
			<s:Border width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
				<s:Label left="3" top="5" text="This is my second tab..."/>
			</s:Border>
		</s:NavigatorContent>
		<s:NavigatorContent label="Tab 3"  width="100%" height="100%">
			<s:Border width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
				<s:Label left="3" top="5" text="This is my third tab..."/>
			</s:Border>
		</s:NavigatorContent>
	</mx:ViewStack>
</s:Application>

Here is a screenshot of the above code running:

This is just a very simple example of how you can achieve a similar look to the Flex 3 TabNavigator, but now if you want to change the look of the tabs you can just apply a new custom TabBarSkin via the skinClass property on the TabBar control:

<s:TabBar" id="tabs" left="8" y="2" dataprovider="{vs}" 2="skinClass="skins.MyTabBarSkin"/>

If you want to change the look of the tab bar buttons themselves then you would also need a custom TabBarButtonSkin that would be referred to from the dataGroup within MyTabBarSkin.mxml. I created a couple of more sophisticated examples showing this within Tour de Flex, and the custom skin classes are included. The second sample called ‘Custom Tabs’ shows how you can add an icon to the tabs as well. These samples can be found under the Flex 4 category (under Groups/Containers) or here in the Tour de Flex web version if you’d like to see more.