flex4中State的使用

State提供了页面切换的一种途径，如在登录成功后由登录页面切换到主页面，那么可以定义两个状态(State)：login，main，flex4中状态的定义的代码如下：

	<s:states>
		<s:State name="login" />
		<s:State name="main" />
	</s:states>

定义状态后，还需要把状态和UI的组合起来，flex4中UIComponenet提供了两种属性方式：includeIn和excludeFrom。includeIn表示该组件可以出现的状态，excludeFrom表示该组件不出现的状态。我定义了两个panel，一个Panel表示显示登录UI的Panel，一个显示主页面的Panel，代码如下：

	<s:Panel id="loginPanel" title="登录" 
			 includeIn="login" 
			 mouseDown="dragMove(event)"
			 horizontalCenter="0" verticalCenter="0">
		<s:Form id="loginForm" >
			<s:FormItem label="帐号：">
				<s:TextInput id="account" />
			</s:FormItem>
			
			<s:FormItem label="密码：">
				<s:TextInput id="password" displayAsPassword="true" />
			</s:FormItem>
			
			<s:FormItem >
				<s:Button label="登录" click="clickLogin(event)" />
			</s:FormItem>
		</s:Form>
		<s:controlBarContent>
			<mx:LinkButton label="注册" click="clickRegister(event)" />
			<s:Spacer width="100%" />
			<mx:LinkButton label="设置" click="clickSetting(event)" />
		</s:controlBarContent>
	</s:Panel>
	
	<s:Panel id="mainPanel" title="i84Cha"
			 includeIn="main"
			 mouseDown="dragMove(event)"
			 horizontalCenter="0" verticalCenter="0">
		
	</s:Panel>

最后需要加上状态的切换，当点击“登录”按钮后，程序验证正确后，将当前状态设置为main，代码在clickLogin函数中，该函数如下：

			private function clickLogin(event:MouseEvent):void {
				
				// 此处加入验证的代码....
				// 验证成功，将当前状态置为main
				this.currentState = "main";
			}

全部完整的代码如下，例子中使用Transition来添加状态切换的动画效果，不知为何效果没出来。

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   backgroundAlpha="0.0" 
					   showStatusBar="false"
					   width.register="590" height.register="401">
	<fx:Declarations>
		<s:RadioButtonGroup id="radiogrounGender"/>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			
			private function dragMove(event:MouseEvent):void {
				this.nativeWindow.startMove();
			}
			
			private function clickLogin(event:MouseEvent):void {
				
				// 此处加入验证的代码....
				// 验证成功，将当前状态置为main
				this.currentState = "main";
			}
			
			private function clickRegister(event:MouseEvent):void {
				this.currentState = "register";
			}
			
			private function clickSetting(event:MouseEvent):void {
				this.currentState = "setting";
			}
			
			private function clickSaveSetting(event:MouseEvent):void {
				//保存信息后，返回登录页面
				this.currentState="login";
			}
		]]>
	</fx:Script>
	
	<s:states>
		<s:State name="login" />
		<s:State name="register" />
		<s:State name="setting" />
		<s:State name="main" />
	</s:states>
	
	<s:transitions>
		<s:Transition fromState="login" toState="register">
			<s:Parallel>
				<s:Rotate3D target="{loginPanel}" angleYFrom="0" angleYTo="-90" />
				<!--<s:Move3D xFrom="0" xTo="100" 
						  yFrom="0" yTo="100"/>
				<s:Fade alphaFrom="0" alphaTo="1"/>-->
			</s:Parallel>
		</s:Transition>
	</s:transitions>

	<s:Panel id="loginPanel" title="登录" 
			 includeIn="login" 
			 mouseDown="dragMove(event)"
			 horizontalCenter="0" verticalCenter="0">
		<s:Form id="loginForm" >
			<s:FormItem label="帐号：">
				<s:TextInput id="account" />
			</s:FormItem>
			
			<s:FormItem label="密码：">
				<s:TextInput id="password" displayAsPassword="true" />
			</s:FormItem>
			
			<s:FormItem >
				<s:Button label="登录" click="clickLogin(event)" />
			</s:FormItem>
		</s:Form>
		<s:controlBarContent>
			<mx:LinkButton label="注册" click="clickRegister(event)" />
			<s:Spacer width="100%" />
			<mx:LinkButton label="设置" click="clickSetting(event)" />
		</s:controlBarContent>
	</s:Panel>
	
	<s:Panel id="registerPanel" title="注册" 
			 includeIn="register"
			 mouseDown="dragMove(event)"
			 horizontalCenter="0" verticalCenter="0">
		<s:Form id="registerForm">
			<s:FormItem label="帐号：" width="100%" required="true">
				<s:TextInput id="regAcct" />
			</s:FormItem>
			
			<s:FormItem label="密码：" width="100%" required="true">
				<s:TextInput id="regPasswd1" displayAsPassword="true" />
			</s:FormItem>
			
			<s:FormItem label="确认密码：" width="100%" required="true">
				<s:TextInput id="regPasswd2" displayAsPassword="true" />
			</s:FormItem>
			
			<s:FormItem label="性别：" width="100%">
				<s:RadioButton label="男" groupName="radiogrounGender" selected="true"/>
				<s:RadioButton label="女" groupName="radiogrounGender"/>
			</s:FormItem>
			
			<s:FormItem label="电子邮件：" width="100%" required="true">
				<s:TextInput id="email" />
			</s:FormItem>
			
			<s:FormItem width="100%">
				<s:Button label="注册" />
			</s:FormItem>
		</s:Form>
	</s:Panel>
	
	<s:Panel id="settPanel" title="设置"
			 includeIn="setting"
			 mouseDown="dragMove(event)"
			 horizontalCenter="0" verticalCenter="0">
		<s:Form id="settForm">
			<s:FormItem label="服务器地址：" width="100%">
				<s:TextInput id="settURL" />
			</s:FormItem>
			
			<s:FormItem width="100%">
				<s:Button label="保存" click="clickSaveSetting(event)" />
			</s:FormItem>
		</s:Form>
	</s:Panel>
	
	<s:Panel id="mainPanel" title="i84Cha" accentColor="15"
			 includeIn="main"
			 mouseDown="dragMove(event)"
			 horizontalCenter="0" verticalCenter="0">
		
	</s:Panel>
	

</s:WindowedApplication>