Flex中如何利用mx:states和mx:State创建不同状态应用的例子

1.

代码

<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.validators.ValidationResult;
import mx.controls.Alert;
//登陆处理
private function loginHandle():void
{
currentState="index";//成功后跳转到新状态"index"
}
]]>
</mx:Script>

<!--新状态"index"-->
<mx:states>
<mx:State name="index"> <!--新建'index'State-->
<mx:RemoveChild target="{panel1}"/> <!--移除”登陆框“-->

<mx:AddChild position="lastChild"> <!--添加新的组件-->
<mx:Panel x="144" y="76" width="400" height="400" layout="absolute">
<mx:Label x="200" y="200" text="欢迎来到主页" fontSize="20" fontFamily="Georgia" color="#EAC248"/>
</mx:Panel>
</mx:AddChild>


</mx:State>
</mx:states>
<!--登陆框-->
<mx:Panel width="326" height="247"
layout="absolute" title="用户登陆" id="panel1"
fontFamily="Georgia" fontSize="12" fontWeight="normal" left="108" top="108">
<!--"用户名标签"-->
<mx:Label x="41.5" y="33" text="用户名"/>
<!--"密码标签"-->
<mx:Label x="41.5" y="77" text="密 码"/>
<!--"用户名输入框"-->
<mx:TextInput x="110" y="33" id="txtUsername" />
<!--"密码输入框"-->
<mx:TextInput x="110" y="75" id="txtPassword" displayAsPassword="true"/>
<!--"验证码输入框"-->
<mx:TextInput x="110" y="108" width="48" id="txtCheckCode"/>
<!--"登陆按钮"-->
<mx:Button x="106" y="155" label="登陆" id="btnLogin" click="loginHandle()"/>
<!--"重置按钮"-->
<mx:Button x="218" y="155" label="重置" id="btnReset" />
<!--"验证码标签"-->
<mx:Label x="41.5" y="108" text="验证码"/>
<!--"验证码显示标签"-->
<mx:Label x="166" y="108" width="49" height="25" id="lblCheckCode"/>
<!--"重设验证码"-->
<mx:Label x="223" y="108" text="看不清楚" height="25" />
</mx:Panel>
</mx:Application>

复制代码

 

 

2.

代码

<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

<mx:states>
<mx:State name="login">
<mx:AddChild>
<mx:Form id="loginForm">
<mx:FormHeading label="Login" />
<mx:FormItem label="Username:">
<mx:TextInput id="log_username" />
</mx:FormItem>
<mx:FormItem label="Password:">
<mx:TextInput id="log_password"
displayAsPassword="true" />
</mx:FormItem>
<mx:FormItem>
<mx:Button label="Login" />
</mx:FormItem>
</mx:Form>
</mx:AddChild>
</mx:State>
<mx:State name="register">
<mx:AddChild>
<mx:Form id="registerForm">
<mx:FormHeading label="Register" />
<mx:FormItem label="Username:">
<mx:TextInput id="reg_username" />
</mx:FormItem>
<mx:FormItem label="Password:">
<mx:TextInput id="reg_password1"
displayAsPassword="true" />
</mx:FormItem>
<mx:FormItem label="Confirm password:">
<mx:TextInput id="reg_password2"
displayAsPassword="true" />
</mx:FormItem>
<mx:FormItem>
<mx:Button label="Register" />
</mx:FormItem>
</mx:Form>
</mx:AddChild>
</mx:State>
</mx:states>

<mx:transitions>
<mx:Transition id="loginTransition"
fromState="*"
toState="login">
<mx:WipeDown target="{loginForm}"/>
</mx:Transition>
<mx:Transition id="registerTransition"
fromState="*"
toState="register">
<mx:WipeDown target="{registerForm}"/>
</mx:Transition>
</mx:transitions>

<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;

private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
currentState = evt.item.data;
}
]]>
</mx:Script>

<mx:Array id="dp">
<mx:Object data="" label="Default state" />
<mx:Object data="login" label="Login" />
<mx:Object data="register" label="Register" />
</mx:Array>

<mx:ApplicationControlBar dock="true">
<mx:ToggleButtonBar id="toggleButtonBar"
dataProvider="{dp}"
itemClick="toggleButtonBar_itemClick(event);" />
</mx:ApplicationControlBar>

</mx:Application>

复制代码

参考：Flex中如何利用mx:states和mx:State创建不同状态应用的例子