10-使用states

在FLEX术语里,state是视图改变的集,可叫作覆盖,它可以是增加或删除组件,改变属性和行为。每个Flex应用都有至少一个状态,叫base

state。使用Flex state使你为应用容易地改变视图,在宏或微观级。使用state作屏幕是认为是宏观级的使用,使用state来管理层叠表单和

组件的不同视图可认为是微观级的使用。

你能创建states在application级和组件级,可用MXML或ActionScript创建。但用MXML肯定更方便。
每个application和component都有一个states属性,定义一个states数组。States是mx.states.State类的实例,在MXML里使用<mx:State>标

签,必须指定它的name属性,用来引用它。name属性的值需符合变量名规定。

默认地,base state是被应用于application或组件。你能定义许多states对于每个application和组件。但是你一个时刻只能应用一个state

。通过currentState属性可来设置一个state。
注:如果你想返回base state,你能分配一个null值或空字符串给currentState属性。
currentState属性继承于UIComponent类。

默认地,所有的states是基于base state的,新的states是相对于base state增减变化,但多个state之间是互相切换的,不是累加的。。如

果你想定义一个非基于base state的state,则使用<mx:State>的basedOn属性。这样,就可累加上那个作基础的state。
注:当组件通过改变states移除时,这个组件仍然存在内存中。

一、在MXML里操作

增加和删除组件
<mx:AddChild>标签默认在application容器和组件里增加组件,使用relativeTo属性可以明确指定操作的目标。
新的实例将默认地作为目标的最后一个子对象,使用position属性默认为lastChild,你也可选地指定firstChild作为目标容器的首个子对象


如果你指定before或after作为position属性,将作为目标对象的兄弟。
<mx:RemoveChild>只要一个target属性。

设置属性
<mx:SetProperty target=""{textinput}" name="enabled" value="{true}" />


设置样式,如:
<mx:SetStyle target="{car}" name="color" value="0xFF0000" />

设置事件处理函数
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:states>
 <mx:State name="enabled">
            <mx:SetProperty target="{textinput}" name="enabled" value="{true}" />
            <mx:SetEventHandler target="{button}" name="click"
                handler="currentState=''" />
            <mx:SetProperty target="{button}" name="label" value="Disable" />
       </mx:State>
    </mx:states>
    <mx:HBox id="hbox">
        <mx:Button id="button" label="Enable" click="currentState='enabled'" />
        <mx:TextInput id="textinput" enabled="false" text="example text" />
    </mx:HBox>
</mx:Application>
注:使用SetEventHandler标签并不覆盖已存的事件控制,它增加一个新的事件处理函数到已存的事件处理队列中。

二、创建ActionScript定义States
在大多数情况,使用MXML定义states更直观。但有时要用ActionScript定义,如要在运行时根据数据来定义一个多页表单。
例:
import mx.states.State;
var stateA:State = new State();
stateA.name = "exampleStateA";
var stateB:State = new State( );
stateB.name = "exampleStateB"; //这里要使用基于state的名字而不是它的引用对象名
stateB.basedOn = "exampleStateA";
增加states,这个states属性定义在UIComponent,它的数据类型是一个数组,默认地,在没给它赋值之前,它的初始值为null。
states = new Array();
states.push(stateA);
states.push(stateB);
在states定义里,我们需要定义overrides,即AddChild和SetProperty等行为。在MXML里,只需简单地将这些行为标签放置在

<mx:State>标签里面就好了。但在ActionScript中,overrides是State类的属性。它是个数组,默认的,它的值是未定义的,因

此,你必须首先定义overrides属性为一个数组,在你能增加overrides到一个state之前:
stateA.overrides = new Array();
stateA.overrides.push(exampleAddChild);
使用mx.states.AddChild和mx.states.RemoveChild类来增加和删除:
var addChild:AddChild = new AddChild();
var button:Button = new Button();
button.label = "example"; //在你要将组件放到state里之前,你必须先创建它
addChild.target = button;
addChild.relativeTo = vbox;
addChild.position = "firstChild";
如果是要删除则:
var removeChild:RemoveChild = new RemoveChild( );
removeChild.target = button;
设置属性和样式:
var setProperty:SetProperty = new SetProperty(button, "width", 200);
var setStyle:SetStyle = new SetStyle(button, "color", 0xFF00FF);
设置事件处理函数:
var setEventHandler:SetEventHandler = new SetEventHandler(button, "click");
setEventHandler.handlerFunction = clickHandler;  //必须是一个函数或方法的引用


一个大例子,载入XML文件,按该文件内容动态创建多页表单:
附在最后。。。。

三、管理对象创建策略
默认地,非base state的组件并不被初始化,直到这个state第一次被请求时。可用<mx:AddChild>标签的creatioinPolicy属性(或AddChild类

)来设置组件的创建策略,分别可为auto(默认),all和none。设为all时,组件在应用开始时便创建。设为none时,组件将不会被初始化,直到

明确调用AddChild对象的createInstance()方法,所以这时你须指定一个id。
一般情况下,使用默认的auto创建策略。
在如下两种情况下使用all创建策略:
增加的组件需要长时间的初始化
在第一次请求这个state之前想引用这个增加的组件
而用none创建策略,在你想明确控制创建时特别有用,如,创建时间需要长,你想在后台创建它。

 

四、对待State事件
四个事件有关于state改变:
当一个state改变被请求,包含state的应用或组件分发一个currentStateChanging事件,在state实际改变之前发生。
一旦state已被改变,应用或组件分发currentStateChanged事件。
两个事件都是mx.events.StateChangeEvent类型,(使用常量CURRENT_STATE_CHANGING和CURRENT_STATE_CHANGED来增加监听器)

两个事件都不是cancelable的,即你不能防止一个state改变,通过取消currentStateChanging事件。

enterState和exitState事件发生当state开始和结束时。
enterState事件在state已开始但还未被激活到视图之前发生。
exitState事件在state结束时发生。
两个事件都是mx.events.FlexEvent类型(使用常量ENTER_STATE和EXIT_STATE来增加监听器)
enterState事件由一个State对象当state开始时分发,和一个应用或组件返回base state时。exitState事件由State对象当state

结束时,和一个应用或组合退出base state时。


五、何时使用States
States是与视图有关联的,他们被用来做些与影响视图或改变视图有关行为的事,虽然你也可用state来改变数据模型,但这并不

是一个恰当的使用。
应用一个过渡效果时,你应用使用states
改变或更换全部或部分的屏幕,使用states通常是个恰当的选择。
如果你只是想当用户选择一个checkbox时可使用一个文本输入控件,你只需简单地用ActionScript来实现就好了。

上面的大例子,太长,P221,列在这里:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值