FLEX中的VIEW STATES

发布于，归属于flex。 沙发还空着，抢！ 共有341人围观    

FLEX中视图改变有很多种形式，可以跳转页面，也可以通过添加state控制，在当前页面进行控制。这里介绍mx:states（对应到as中试States 类）的使用。具体的使用在示例代码中介绍，本例是一个登陆/注册界面的转换，下面看代码：

 

 

 

  1. <?xml version="1.0" ?>
  2.  
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  4.  
  5.     <!-- 定义一个视图状态，用于向基态中添加-->
  6.     <mx:states>
  7.         <mx:State name="Register"><!--状态名称-->
  8.             <mx:AddChild relativeTo="{loginForm}" position="lastChild"><!--把FormItem作为一个子组件添加到ID为loginForm的组件中，位置为该组件的最后-->
  9.                 <mx:target>
  10.                     <mx:FormItem id="confirm" label="Confirm:">
  11.                         <mx:TextInput/>
  12.                     </mx:FormItem>
  13.                 </mx:target>
  14.             </mx:AddChild>
  15.             <mx:SetProperty target="{loginPanel}" name="title" value="Register"/><!--修改id值为loginPanel的组件的 title属性的值-->
  16.             <mx:SetProperty target="{loginButton}" name="label" value="Register"/>
  17.             <mx:SetStyle target="{loginButton}" 
  18.                 name="color" value="blue"/>
  19.             <mx:RemoveChild target="{registerLink}"/>><!--删除id值为registerLink的组件-->
  20.  
  21.             <mx:AddChild relativeTo="{spacer1}" position="before"><!--增加子级在id为spacer1的组件之前-->
  22.                 <mx:target>
  23.                     <mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>
  24.                 </mx:target>
  25.             </mx:AddChild>
  26.         </mx:State>
  27.     </mx:states>
  28.  
  29.     <!-- Define a Panel container that defines the login form.-->
  30.     <mx:Panel title="Login" id="loginPanel" 
  31.         horizontalScrollPolicy="off" verticalScrollPolicy="off"
  32.         paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
  33.  
  34.         <mx:Text width="100%" color="blue"
  35.             text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>
  36.  
  37.         <mx:Form id="loginForm" >
  38.             <mx:FormItem label="Username:">
  39.                 <mx:TextInput/>
  40.             </mx:FormItem>
  41.             <mx:FormItem label="Password:">
  42.                 <mx:TextInput/>
  43.             </mx:FormItem>
  44.         </mx:Form>
  45.         <mx:ControlBar>
  46.             <mx:LinkButton id="registerLink"  label="Need to Register?"
  47.                 click="currentState='Register'"/>
  48.             <mx:Spacer width="100%" id="spacer1"/>
  49.             <mx:Button label="Login" id="loginButton"/>
  50.         </mx:ControlBar>
  51.     </mx:Panel>
  52. </mx:Application>

详细说一下mx:AddChild 有六个属性 其中id不说了

  • relativeTo：相对于其添加子项的对象；
  • target：要添加的子级；
  • position：显示列表中子项的位置，随 relativeTo 属性指定的对象而变化。有效值为 “before”、”after”、”firstChild” 和 “lastChild”。 默认值为“lastChild”。
  • creationPolicy：该子级的创建策略。该属性确定 targetFactory 将在何时创建该子级的实例。仅当指定 targetFactory 属性时，Flex 才使用该属性。以下是有效值：
    值 意义
    auto （默认）在第一次需要实例时创建实例。
    all 在应用程序启动时创建实例。
    none 不自动创建实例。必须调用 createInstance() 方法来创建该实例。
    默认值为 “auto”.
  • targetFactory:创建子级的 factory。可以指定以下任一项目：
    1实现 IDeferredInstance 接口并创建一个或多个子实例的 factory 类。
    2Flex 组件（即任何为 UIComponent 类的子类的类），如 Button 控件。如果使用 Flex 组件，Flex 编译器会自动将该组件包装到 factory 类中。
    如果设置了该属性，子级将在由 creationPolicy 属性确定的时间实例化。
    如果设置了 target 属性，则不要设置该属性。该属性是 AddChild 类默认属性。设置该属性并将 creationPolicy 设置为“all”等同于设置 target 属性。
（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

同类