State提供了页面切换的一种途径,如在登录成功后由登录页面切换到主页面,那么可以定义两个状态(State):login,main,flex4中状态的定义的代码如下:
定义状态后,还需要把状态和UI的组合起来,flex4中UIComponenet提供了两种属性方式:includeIn和excludeFrom。includeIn表示该组件可以出现的状态,excludeFrom表示该组件不出现的状态。我定义了两个panel,一个Panel表示显示登录UI的Panel,一个显示主页面的Panel,代码如下:
<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>