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>