Flex TabBar 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" 
			   viewSourceURL="srcview/index.html">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		s|TabBar s|ButtonBarButton:up
		{
			fontStyle:normal;
		}
		s|TabBar s|ButtonBarButton:upAndSelected,
		s|ButtonBar s|ButtonBarButton:downAndSelected
		{
			fontStyle:italic;
			font-weight:bold;
		}
	</fx:Style>
	<fx:Declarations>
		<s:ArrayCollection id="contacts"/>
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
	</s:layout>
	<s:Panel width="40%"
			 height="60%"
			 title="TabBar Demo"
			 backgroundColor="0x5a5a5a">
		<s:TabBar id="tabs"
				  left="8"
				  y="2"
				  dataProvider="{vs}"
				  skinClass="Skin.TabBar"
				  cornerRadius="4" />
		
		<mx:ViewStack id="vs"
					  width="95%"
					  height="90%"
					  left="8"
					  y="23">
			<s:NavigatorContent label="User Login"
								backgroundColor="0x789898" >
				<s:BorderContainer borderColor="0x2a2f5f"
								   width="100%"
								   height="100%"
								   cornerRadius="4"
								   dropShadowVisible="true"
								   backgroundColor="0x789898"
								   borderVisible="false">
					<s:layout>
						<s:VerticalLayout paddingTop="10"
										  paddingLeft="5"/>
					</s:layout>
					<mx:Form>
						<mx:FormItem label="User Name:">
							
							<s:TextInput id="username"
										 width="100%"/>
						</mx:FormItem>
						<mx:FormItem label="Password:">
							<s:TextInput id="userpassword"
										 width="100%"
										 displayAsPassword="true"/>
						</mx:FormItem>
					</mx:Form>
					<s:HGroup>
						<s:Button label="Login"/>
					</s:HGroup>
				</s:BorderContainer>
			</s:NavigatorContent>
			
			<s:NavigatorContent label="Registration"
								backgroundColor="0xF9EBAE">
				<s:BorderContainer borderColor="0x2a2f5f"
								   width="100%"
								   height="100%"
								   cornerRadius="4"
								   dropShadowVisible="true"
								   backgroundColor="0xF9EBAE"
								   borderVisible="false">
					<s:layout>
						<s:VerticalLayout paddingTop="10"
										  paddingLeft="5"/>
					</s:layout>
					<mx:Form>
						<mx:FormItem label="First Name:">
							<s:TextInput id="firstname"
										 width="100%"/>
						</mx:FormItem>
						<mx:FormItem label="Last Name:">
							<s:TextInput id="lastname"
										 width="100%"/>
						</mx:FormItem>
						<mx:FormItem label="Email:">
							<s:TextInput id="email"
										 width="100%"/>
						</mx:FormItem>
						<mx:FormItem label="Age:">
							<s:TextInput id="age"
										 width="100%"/>
						</mx:FormItem>
						<mx:FormItem label="Contect Number:">
							<s:TextInput id="contect"
										 width="100%"/>
							
						</mx:FormItem>
						<mx:FormItem label="Address:">
							<s:TextArea id="address"
										width="127"/>
						</mx:FormItem>
						<mx:FormItem label="State:">
							<s:TextInput id="state"
										 width="100%"/>
						</mx:FormItem>
						<mx:FormItem label="Country:">
							<s:TextInput id="country"
										 width="100%"/>
						</mx:FormItem>
					</mx:Form>
					<s:HGroup>
						<s:Button label="Save"/>
					</s:HGroup>
				</s:BorderContainer>
			</s:NavigatorContent>
			
			<s:NavigatorContent label="Admin Login"
								backgroundColor="0xE8B54D">
				<s:BorderContainer borderColor="0x2a2f5f"
								   width="100%"
								   height="100%"
								   cornerRadius="4"
								   dropShadowVisible="true"
								   backgroundColor="0xE8B54D"
								   borderVisible="false">
					<s:layout>
						<s:VerticalLayout paddingTop="10"
										  paddingLeft="5"/>
					</s:layout>
					<mx:Form>
						<mx:FormItem label="Admin Name:">
							<s:TextInput id="adminname"
										 width="100%"/>
						</mx:FormItem>
						<mx:FormItem label="Password:">
							<s:TextInput id="password"
										 width="100%"
										 displayAsPassword="true"/>
						</mx:FormItem>
					</mx:Form>
					<s:HGroup>
						<s:Button label="Login"/>
					</s:HGroup>
				</s:BorderContainer>
			</s:NavigatorContent>
		</mx:ViewStack>
	</s:Panel>
</s:Application>

 

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
		alpha.disabled="0.5">
	
	<fx:Metadata>
		<![CDATA[
		[HostComponent("spark.components.TabBar")]
		]]>
	</fx:Metadata>
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
	</s:states>
	<s:DataGroup id="dataGroup"
				 width="100%"
				 height="100%">
		<s:layout>
			<s:ButtonBarHorizontalLayout gap="-1"/>
		</s:layout>
		<s:itemRenderer>
			<fx:Component>
				<s:ButtonBarButton chromeColor="{data.getStyle('backgroundColor')}"
								   color="{myColor}"
								   creationComplete="buttonbarbutton1_creationCompleteHandler(event)">
					<fx:Script>
						<![CDATA[
							
							[Bindable]
							private var myColor:uint=0x000000;
							
							import mx.events.FlexEvent;
							
							protected function buttonbarbutton1_creationCompleteHandler(event:FlexEvent):void
							{
								switch (data.getStyle('backgroundColor'))
								{
									
									case (0x789898):
									{
										myColor=0xFFFFFF;
										break;
									}
									default:
									{
										myColor=0x000000;
										break;
									}
								}
							}
							
						]]>
					</fx:Script>
				</s:ButtonBarButton>
			</fx:Component>
		</s:itemRenderer>
	</s:DataGroup>
</s:Skin>

 

补个图片，方便观看


附带提供代码下载，节省各位时间，呵呵

flex效果真不错