FLEX中的VIEW STATES

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 属性。