Flex 4 상태 설정

다음은 가장 쉬 운 상태 입 니 다.
 

<?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>

 state Group 의 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>