Flex States 视图状态

Flex States可以为组件定义多个视图状态，每一个视图状态为一个State，可以在 Flex 组件的 states 属性中使用 State 类。只能在应用程序或自定义控件的根中指定states 属性，而不能在子控件中指定。可通过设置组件的 currentState 属性来启用视图状态。

Flex States功能使用的类在mx.states.*包中：如下
接口
IOverride 该接口用于视图状态覆盖。

类

AddChild 将子显示对象（如组件）作为视图状态的一部分添加到容器。

RemoveChild 将子显示对象（如组件）作为视图状态的一部分从容器中删除。
SetEventHandler 类指定只在特定视图状态期间才处于活动状态的事件处理函数。
SetProperty 类指定只在父视图状态期间有效的属性值。
SetStyle 类指定只在父视图状态期间有效的样式。
State 类定义视图状态，即组件的特定视图。
Transition 类定义了一组在响应视图状态更改时播放的效果。


State 视图状态类

首先看看使用State定义视图，进行组件的属性和样式设置以及添加删除子组件。

State类的默认属性overrides是一个IOverrides类型的数组，AddChild、
RemoveChild、SetEventHandler、SetStyle、SetProperty都是实现IOverride接口的类，可以作为State的默认属性overrides数组的成员。
例如：

<mx:states>
        <mx:State name="Register">
            <mx:AddChild relativeTo="{loginForm}" position="lastChild">
                <mx:target>
                    <mx:FormItem id="confirm" label="Confirm:">
                        <mx:TextInput/>
                    </mx:FormItem>
                </mx:target>
            </mx:AddChild>
            <mx:SetProperty target="{loginPanel}" name="title" value="Register"/>
            <mx:SetProperty target="{loginButton}" name="label" value="Register"/>
            <mx:SetStyle target="{loginButton}" 
                name="color" value="blue"/>
            <mx:RemoveChild target="{registerLink}"/>
            <mx:AddChild relativeTo="{spacer1}" position="before">
                <mx:target>
                    <mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>
                </mx:target>
            </mx:AddChild>
        </mx:State>
    </mx:states>

下面是5个实现了IOverride接口的视图状态行为的使用方法。
1.AddChild添加子组件，relativeTo指定相对于添加子组件的组件，position指定添加的位置，如果不指定默认为lastChild,position可以为firstChild,lastChild,before,after四个值中任意一个，这四个值基于relativeTo指定的子组件，可以确定要添加的子组件将会添加到何处。比如relativeTo="{spacer1}" position="before"将target指定的组件添加到spacer1的前面。

2.RemoveChild为移除子组件。通过target属性指定要移除的子组件即可。

3.SetProperty设置组件的属性。使用target属性指定子组件，name属性指定组件的属性名，value指定要设置的组件的属性的值。

4.同理SetStyle一样。

5.SetEventHandler设置子组件事件侦听器，target指定要进行侦听的目标对象，name指定要侦听的事件的类型，handlerFunction指定事件的处理函数，注意：设置的事件侦听仅仅在该视图状态(State)下有效，即当视图状态切换到其他时，将自动移除该目标对象target的事件类型name的侦听函数handlerFunction。


Transition 类

Transition 类定义了一组在响应视图状态更改时播放的效果。视图状态（State）定义了如何更改状态，而过渡（Transition）则定义了在状态更改过程中可视更改发生的顺序。 可使用 Transition 类的 toState 和 fromState 属性来指定触发过渡的状态更改。默认情况下，fromState 和 toState 属性均设置为“*”，表示将过渡应用到视图状态的任何更改。

effect是Transition的默认属性，其类型为IEffect，在视图过渡时将播放effect指定的效果。例如：

<mx:Transition id="toRegister" fromState="*" toState="Register">
            <mx:Sequence targets="{[loginPanel, registerLink, confirm, loginLink, spacer1]}">
                <mx:RemoveChildAction/>
                <mx:SetPropertyAction target="{loginPanel}" name="title"/>
                <mx:SetPropertyAction target="{loginButton}" name="label"/>
                <mx:SetStyleAction target="{loginButton}" name="color"/>
                <mx:Resize target="{loginPanel}"/>
                <mx:AddChildAction/>
            </mx:Sequence>
        </mx:Transition>

注意：AddChildAction仅指定了添加子组件在效果中的顺序和时间，并非State中AddChild一样定义要添加子组件到组件中。可以理解为State中的AddChild指定添加哪一个子组件到容器，AddChildAction指定该子组件在过渡时何时添加到组件中，比如上面的代码中，先移除State中定义的RemoveChild指定的子组件，然后设置title属性，接着设置登录按钮字体颜色，调整组件大小，最后才将State中AddChild指定要添加的子组件添加进来。


可以使用State的enterState事件和exitState事件侦听State的进入和退出。例如从A视图状态到B视图状态，则会先触发A视图状态的exitState事件和B视图状态的enterState事件。


可以自定义类，实现IOverride接口，将可以使用该类作为State的行为，只需要将该类的对象添加到State的默认属性overrides数组即可，使用如同AddChild，SetPropery。

IOverride接口定义如下
apply(parent:UIComponent):void 应用覆盖
initialize():void 初始化覆盖
remove(parent:UIComponent):void 删除覆盖。


可以自定义类，实现IEffect接口，将可以使用该类作为Transition的效果类，在指定的视图之间切换的时候播放该效果类。