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 {// 此处加入验证的代码....// 验证成功，将当前状态置为mainthis.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 {// 此处加入验证的代码....// 验证成功，将当前状态置为mainthis.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>