Flex Solutions: Essential Techniques for Flex 2 and 3 Developers

<?xml version="1.0" encoding="utf-8"?>
<!--
////////////////////////////////////////////////////////////////////////////////
// Flex Solutions: Essential Techniques for Flex 2 and Flex 3 Developers
// Author: Marco Casario 
// Editor: FriendsOfED www.friendsofed.com
// All Rights Reserved.
//
// Chapter 13: User Navigation in Flex Applications
// 
// Solution 13-1: Moving through the application with the Navigation containers
//
// 
// @author      Marco Casario
// @date        26 November 2007
// @version     1.0
// @site        flexsolutions.comtaste.com
//
////////////////////////////////////////////////////////////////////////////////
-->
 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
	<mx:Script>
		<![CDATA[    
			  import mx.events.ItemClickEvent;
 
			  private function clickHandler(event:ItemClickEvent):void 
			  {			
					mx.controls.Alert.show("You have selcted the button with the index:" 
					+ String(event.index) + "\n" + " and the label: " + event.label);
			  }
		]]>
	</mx:Script>
 
 
	<mx:Panel title="Navigation Containers"  height="90%" width="90%" >
 
		<mx:TabNavigator id="myTN" width="100%" height="100%">
 
		<mx:VBox label="Services">
 
			<mx:LinkBar fontWeight="bold" dataProvider="{myVS}" itemClick="clickHandler(event);"/>
 
			<mx:ViewStack id="myVS"  borderStyle="solid"  width="100%" height="80%">
 
				<mx:Canvas id="Consulting" label="Consulting" width="100%"  height="100%">
					<mx:Label text="Consulting" color="#000000"/>
				</mx:Canvas>
 
				<mx:Canvas id="Training"  label="Training" width="100%" height="100%">
					<mx:Label text="Training" color="#000000"/>
				</mx:Canvas>
 
				<mx:Canvas id="Development"  label="Development" width="100%" height="100%">
					<mx:Label text="Development" color="#000000"/>
				</mx:Canvas>
 
			</mx:ViewStack>
 
		</mx:VBox>
 
		<mx:VBox label="About">
			<mx:Label text="Child container 2"/>
		</mx:VBox>
 
		<mx:VBox label="Contact">
			<mx:Label text="Child container 3"/>
		</mx:VBox>
 
		</mx:TabNavigator>
 
 
	</mx:Panel>
</mx:Application>