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数组的成员。
例如:
下面是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指定的效果。例如:
注意: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 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的效果类,在指定的视图之间切换的时候播放该效果类。