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>