Flex4 state状态设置

下面是一组最简单的状态

 

<?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()">
	<fx:Declarations>
		<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			protected function init():void
			{
				currentState = 'style1';
				st1.addEventListener(MouseEvent.CLICK,st1_cicked);
				st2.addEventListener(MouseEvent.CLICK,st2_cicked);
			}
			// 脚本控制切换
			protected function st1_cicked(event:Event):void
			{
				currentState = 'style1';
			}
			
			protected function st2_cicked(event:Event):void
			{
				currentState = 'style2';
			}
		]]>
	</fx:Script>
	<!--添加了2个state-->
	<s:states>
		<s:State name="style1"/>
		<s:State name="style2"/>
	</s:states>
	<s:Panel title="Mix" horizontalCenter="0" verticalCenter="0" width="450" height="300">
		<s:VGroup verticalCenter="0" horizontalCenter="0">
			<s:HGroup>
				<s:Button label="Style1" id="st1"/>
				<s:Button label="Style2" id="st2"/>
			</s:HGroup>
			<!--设置了2种状态下的属性-->
			<s:Label text="I just want to show this!" visible.style1="false" visible.style2="true" fontWeight="bold" fontSize="15"/>
		</s:VGroup>
	</s:Panel>
</s:Application>

 使用stateGroup的state

<?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()">
	<fx:Declarations>
		<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			protected function init():void
			{
				currentState = 'style1_1';
				st1.addEventListener(MouseEvent.CLICK,st1_cicked);
				st2.addEventListener(MouseEvent.CLICK,st2_cicked);
			}
			// 脚本控制切换
			protected function st1_cicked(event:Event):void
			{
				if(currentState == 'style1_1' || currentState == 'style1_2')
					currentState = 'style2_1';
				else  if(currentState == 'style2_1' || currentState == 'style2_2' )
						currentState = 'style1_1';
			}
			
			protected function st2_cicked(event:Event):void
			{
				if(currentState == 'style1_1' || currentState == 'style1_2')
					currentState = 'style2_2';
				else if(currentState == 'style2_1' || currentState == 'style2_2' )
					currentState = 'style1_2';
			}
			
			protected function st3_cicked(event:Event):void
			{
				currentState = 'style1_1';
			}
		]]>
	</fx:Script>
	<!--添加了4个state，2个stateGroup。stateGroup设置的属性是该组下state的公共属性。-->
	<s:states>
		<s:State name="style1_1" stateGroups="style1"/>
		<s:State name="style1_2" stateGroups="style1"/>
		<s:State name="style2_1" stateGroups="style2"/>
		<s:State name="style2_2" stateGroups="style2"/>
	</s:states>
	<s:Panel title="Mix" horizontalCenter="0" verticalCenter="0">
		<s:VGroup verticalCenter="0" horizontalCenter="0">
			<s:HGroup>
				<s:Button label.style1_1="Style1_1_A" label.style1_2="Style1_2_A" label.style2_1="Style2_1_A" label.style2_2="Style2_2_A" color.style1="#000000" color.style2="#C08888" id="st1"/>
				<s:Button label.style1_1="Style1_1_B" label.style1_2="Style1_2_B" label.style2_1="Style2_1_B" label.style2_2="Style2_2_B" color.style1="#000000" color.style2="#C08888" id="st2"/>
			</s:HGroup>
			<!--该button显示在style2中-->
			<s:Button label="Style2!" includeIn="style2" />
			<!--该组件显示在除了style1_1的所有状态中-->
			<s:Button label="Style1!" excludeFrom="style1_1"/>
		</s:VGroup>
	</s:Panel>
</s:Application>

 综合小程序

<?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.*">
	<s:layout>
		<s:VerticalLayout paddingLeft="20" paddingTop="20"/>
	</s:layout>
	<s:states>
		<s:State name="login" stateGroups="loggedOut"/>
		<s:State name="computers" stateGroups="loggedIn"/>
		<s:State name="info" stateGroups="loggedIn"/>
		<s:State name="tv" stateGroups="loggedIn"/>
	</s:states>
	<fx:Declarations>
		<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			
			protected function init():void
			{
				
			}
		]]>
	</fx:Script>
	<!--创建登陆界面-->
	<s:Panel includeIn="loggedOut" title.login="Get in there!">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:Form>
			<s:FormItem label="用户名">
				<s:TextInput id="username"/>
			</s:FormItem>
			<s:FormItem label="密   码">
				<s:TextInput id="password"/>
			</s:FormItem>
		</s:Form>
		<mx:ControlBar>
			<s:Button label="Login" id="login" click="currentState='computers'"/>
		</mx:ControlBar>
	</s:Panel>
	<!--创建登陆后显示-->
	<s:HGroup includeIn="loggedIn">
		<s:ButtonBar dataProvider="{contentStack}"/>
		<s:Button label="log out" color="black" id="logout" click="currentState='login'"/>
	</s:HGroup>
	<mx:ViewStack id="contentStack" includeIn="loggedIn">
		<views:TVView label="TV"/>
		<views:ComputerView label="Com"/>
	</mx:ViewStack>
</s:Application>