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>