Flex如何创建状态States并掌握几个常用控件用法
Flex如何创建状态States并掌握几个常用控件用法
1.首先创建初始状态，可以看到右边有个<Base state>(start),在初始切换到设计模式拖动一个Panel,然后拖动一个
From控件，然后往Form拖动2个TextInput命名为用户名和密码，然后拖动一个ControlBar在From下面，放一个LinkButton,Spacer空格控件，一个Button控件,<mx:LinkButton label="需要注册" id="registerLink"/>增加click="currentState='Register'"。
1).说明：From控件是表单控件，如果拖动一个FormHeading，就是表单表头名称，拖动 TextInput生成一个双向的，左边是名称右边是输入框
2).ControlBar是一个横向排列控件的控制控件，在里面的放的都是横向排列的，与ApplicationControlBar区别是ControlBar只是一个宽没有背景，共同点都是横向排列控件
3).Spacer控件是空格，设置宽度调整左右的控件距离
目前的页面代码如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel id="loginPanel" title="初始状态登陆页面" x="82" y="63" width="315" height="210" layout="absolute">
<mx:Form id="loginForm">
<mx:FormHeading label="表单表头名称"/>
<mx:FormItem label="用户名：">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="密码：">
<mx:TextInput/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:LinkButton label="需要注册" id="registerLink"/>
<mx:Spacer width="100%" id="spacer1"/>
<mx:Button label="登录" id="loginButton"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
本文为http://www.ajaxcn.net作者原创，作者经过思考总结写下本文，如有转载请注明初处
2.创建新的一个状态 <Base state>(start)右键 New State,Name设置为Register，点击Register状态，在此状态下更改Panel名称为注册，再往Form拖动个TextInput命名确认密码，LinkButton需要注册改为返回登陆on click处 click="currentState='Register'"改为click="currentState=''"，登陆改为Button注册， 运行调试可以了，这时的代码如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:states>
<mx:State name="Register">
<mx:SetProperty target="{loginPanel}" name="title" value="注册"/>
<mx:SetProperty target="{formheading1}" name="label" value="注册表单表头名称"/>
<mx:AddChild relativeTo="{loginForm}" position="lastChild">
<mx:FormItem label="确认密码：">
<mx:TextInput/>
</mx:FormItem>
</mx:AddChild>
<mx:SetProperty target="{registerLink}" name="label" value="返回登陆"/>
<mx:SetProperty target="{loginButton}" name="label" value="注册"/>
<mx:SetEventHandler target="{registerLink}" name="click" handler="currentState=''"/>
</mx:State>
</mx:states>
<mx:Panel id="loginPanel" title="初始状态登陆页面" x="82" y="63" width="315" height="210" layout="absolute">
<mx:Form id="loginForm">
<mx:FormHeading label="表单表头名称" id="formheading1"/>
<mx:FormItem label="用户名：">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="密码：">
<mx:TextInput/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:LinkButton label="需要注册" id="registerLink" click="currentState='Register'"/>
<mx:Spacer width="100%" id="spacer1"/>
<mx:Button label="登录" id="loginButton"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
原创文章转载请注明出处：云飞扬IT的blog
