Tour de Flex中经典例子（一)-------LinkBar与Viewstack实现导航

<?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/mx" 
			   >
	
	<s:layout>
		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
	</s:layout>
	
	<s:Panel title="LinkBar Control" width="600" height="100%"
			 color="0x000000" 
			 borderAlpha="0.15">
		
		<s:layout>
			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
		</s:layout>
		
		<s:Label width="100%" color="0x323232" textAlign="center"
				 text="Select a link in the LinkBar control to set the active child of the ViewStack container."/>
		
		<mx:LinkBar color="0x0050AA" horizontalAlign="center" width="100%" fontWeight="bold" dataProvider="{myViewStack}" borderColor="0xACACAC" borderStyle="solid"/>
		
		<!-- Define the ViewStack and the three child containers -->
		<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%" color="0x323232">
			
			<s:NavigatorContent id="search" label="Customer Info" backgroundColor="0xDCDCDC" fontWeight="bold">
				<s:layout>
					<s:VerticalLayout horizontalAlign="center" />
				</s:layout>
				
				<s:Label text="Search Panel" width="100%" textAlign="center" paddingTop="10" />
				<s:HGroup>
					<s:TextInput id="Searchtxt" width="200" />
					<s:Button label="search" click="Searchtxt.text=''" />
				</s:HGroup>
			</s:NavigatorContent>
			
			<s:NavigatorContent id="custInfo" label="Customer Info" backgroundColor="0xDCDCDC" width="100%" height="100%">
				
				<s:layout>
					<s:VerticalLayout horizontalAlign="center" />
				</s:layout>
				
				<s:Label text="Customer Info" width="100%" textAlign="center" paddingTop="10" />
				<s:HGroup>
					<s:Label text="Email Address"/>
					<s:TextInput id="email" width="200"/>
					<s:Button label="Submit" click="email.text='';" />
				</s:HGroup>
				
			</s:NavigatorContent>
			
			<s:NavigatorContent id="accountInfo" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
				
				<s:layout>
					<s:VerticalLayout horizontalAlign="center" />
				</s:layout>
				
				<s:Label text="Account Info" width="100%" textAlign="center" paddingTop="10" />
				<s:HGroup>
					<mx:Button label="Purchases" />
					<mx:Button label="Sales" />
					<mx:Button label="Reports" />
				</s:HGroup>
			</s:NavigatorContent>
			
		</mx:ViewStack>
		
	</s:Panel>
</s:Application>