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>