Flex4 选项卡TabNavigator的使用

选项卡是常用的GUI控件 ，自然不必再说，看其实现方式

 

<?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"
			   creationComplete="init()"
			   xmlns:views="views.*">
	
	<fx:Script>
		<![CDATA[
			
			import mx.controls.Alert;
			import mx.events.IndexChangedEvent;
			
			protected function init():void
			{
				tab.addEventListener(IndexChangedEvent.CHANGE,Tab_ItemChanged_Call);
			}
			
			protected function Tab_ItemChanged_Call(event:IndexChangedEvent):void
			{
				Alert.show(event.newIndex+"\n"+event.oldIndex+"\n"+tab.selectedChild.label);
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Panel id="mix" verticalCenter="0" horizontalCenter="0" title="Mix">
		<mx:TabNavigator id="tab" width="400" height="200">
			<views:TVView label="TV"/>
			<views:ComputerView label="Computer"/>
		</mx:TabNavigator>
	</s:Panel>
</s:Application>

 填充使用的View内容如下

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Panel title="TVs" width="100%" height="100%">
		<s:layout>
			<s:VerticalLayout paddingTop="20" paddingBottom="20" paddingLeft="20" paddingRight="20"/>
		</s:layout>
		<s:Group width="100%" enabled="false">
			<s:TextInput width="100%"/>
			<s:Button label="Search for channel"/>
		</s:Group>
		<s:Line width="100%"/>
		<s:Spacer height="10"/>
		<s:Label text="There are no channels avaiable."/>
	</s:Panel>
</s:NavigatorContent>

 

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Panel title="Computer" width="100%" height="100%">
		<s:layout>
			<s:VerticalLayout paddingTop="20" paddingBottom="20" paddingLeft="20" paddingRight="20"/>
		</s:layout>
		<s:Group width="100%" enabled="false">
			<s:TextInput width="100%"/>
			<s:Button label="Search for IBM"/>
		</s:Group>
		<s:Line width="100%"/>
		<s:Spacer height="10"/>
		<s:Label text="You can't afford a IBM..."/>
	</s:Panel>
</s:NavigatorContent>