欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flex States 视图状态

程序员文章站 2022-06-17 14:24:18
...
    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的效果类,在指定的视图之间切换的时候播放该效果类。





相关标签: Flex STATE