[size=medium]3.2 视图模式与视图转换
3.2.1 视图模式
Flex为了多样化可视化组件并加强与用户的交互性,提供了视图模式的支持。HTML页面通过框架设计、标签编程等方式来进行界面的统一视图处理,这给页面上的数据元素带来了很大的不确定性,同时也降低了数据的可维护性,Flex的视图模式则对应用程序界面的视图控制进行了单独的定义——视图模式。
具体来说,视图模式定义了界面中一部分数据条目组件的显示方式,如我们可以对Windows系统中的文件夹进行平铺查看或列表查看,这就是典型的视图模式。在Flex应用开发中,我们常常需要对数据组件进行更为复杂的视图转换操作,如定制化地增减组件、修改组件属性、组件外观控制等。
在Flex中使用视图控制,我们需要首先定义基本视图,然后定义视图变更或视图覆盖的集合,用来修改基本视图。每一种附加的视图模式都可以对基本视图中的组件数量、组件内容、相关属性进行设置和调整。
3.2.2 创建和应用视图模式
使用MXML标签<mx:States>和<mx:State>可以进行视图模式的创建,<mx:States>用于进行视图模式组的定义,可以在其中包含一或多个<mx:State>,<mx:State>则对应每一个具体的视图定义。
示例3.5 创建视图模式
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:states>
<mx:State name="Register">
<mx:AddChild relativeTo="{loginForm}" position="lastChild">
<mx:FormItem id="confirm" label="确认密码:">
<mx:TextInput/>
</mx:FormItem>
</mx:AddChild>
<mx:SetProperty target="{loginPanel}" name="title" value="注册"/>
<mx:SetProperty target="{loginButton}" name="label" value="注册"/>
<mx:RemoveChild target="{registerLink}"/>
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:LinkButton label="返会到登录" click="currentState=''"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Panel id="loginPanel" title="登录" fontSize="12"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Form id="loginForm">
<mx:FormItem label="用户名:">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="密码:">
<mx:TextInput/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:LinkButton id="registerLink" label="还未注册?"
click="currentState='Register'"/>
<mx:Spacer width="100%" id="spacer1"/>
<mx:Button label="登录" id="loginButton"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
结合示例3.5我们来了解一下如何创建视图模式并设计不同视图中的组件变化。首先我们看示例程序的下半部分,这里定义了一个id为loginPanel的Panel组件,程序从这里开始创建了一个基本视图,也就是默认状态下的组件显示状态,在Panel组件中一个LinkButton组件定义了click时间监听器,执行了currentState=‘Rigister’的视图转换功能;然后我们再来看程序上半部分id为Rigister的视图定义,在<mx:States>中定义了一个id为Rigister的视图模式,在这个模式中使用了<mx:AddChild>、<mx:SetProperty>和<mx:RemoveChild>等MXML标签,实现了对Panel容器组件的内容控制——增加了一个用于确认密码输入的TextInput,并且修改了基本视图模式的一些显示用的文字信息,删除掉了原来的LinkButton组件,新增加了用于返回到基本视图模式的LinkButton组件。运行效果如图3.7和3.8所示。当处于初始状态时,程序显示为一个登录窗体(见图3.7),可以通过单击“还未注册”按钮跳转到注册视图进行新用户注册(见图3.8)。这就是视图模式的创建和应用,增加了现有组件的可重用性,并且加强了数据的可维护性,极大地提高了程序的工作效率,节省了系统资源。
图3.7 视图模式创建和应用(1)
图3.8 视图模式创建和应用(2)
如果使用Flex Builder 3进行Flex应用程序开发,视图处理功能可以通过设计界面进行更加方便的设计。如图3.9所示,右上部分的窗体是一个视图模式编辑器States,可以通过图形界面设定创建、修改或删除视图模式,每一个应用程序都会有基本视图模式,即图3.9中的<Base state>,这个视图模式是不能修改或删除的,在基本视图模式的基础上我们可以直接使用States视图编辑器进行视图创建,即图3.9中的Register,对应示例3.5中的Register视图模式。
图3.9 使用Flex Builder 3设计视图模式(1)
当选中了States视图编辑器中的Register后,我们即可以在新的视图模式中进行GUI设计,如图3.10所示。这时我们在UI设计器中对组件的设计操作只会对Register视图模式进行修改,而不会影响基本视图。
图3.10 使用Flex Builder 3设计视图模式(2)
States视图编辑器的右上角有3个按钮,分别用于添加、修改和删除视图模式。当我们选中Register视图后,单击修改按钮,会弹出如图3.11所示的对话框。这时,我们可以修改视图模式的名称,并可以指定该视图模式是否作为起始状态的视图模式,如果勾选了“Set as start state”,那么该视图模式在程序启动后会自动加载。
图3.11 使用Flex Builder 3设计视图模式(3)
3.2.3 视图模式与历史记录管理器
略……
3.2.4 视图转换——Transitions
视图模式的切换让用户更方便快捷地与Flex应用程序进行交互,此时我们可以使用Flex的Transitions来进行视图模式转换的效果控制。视图模式用于定义当前界面的组件表现和数据集成,多个视图模式可以通过设置currentState来进行切换,而具体切换的过程和需要实现的效果可以使用Transitions进行控制。
Flex的绚丽效果可谓处处可见,小到每一个组件,大到整个应用程序的控制都可以附加丰富多彩的效果,对视图转换的效果设置有些类似于Microsoft PowerPoint的幻灯片切换设定,即我们可以对目标的视图组件,如新添加的组件、发生改动的组件或被删除的组件进行具体的效果设定。
对视图转换的设定是非常灵活的,我们可以为视图中每一个组件设定不同的效果,并可以设定效果集合来同时设定多个组件的效果类型。通过MXML标签<mx:transitions>和<mx:Transition>可以对Transitions进行定义。
示例3.7 使用Transitions控制视图转换效果
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
verticalAlign= "middle">
<mx:Script>
<![CDATA[
import mx.effects.easing.Bounce;
]]>
</mx:Script>
<mx:transitions>
<mx:Transition>
<mx:Parallel
targets="{[loginPanel, registerLink, loginButton, confirm]}">
<mx:Resize duration="500" easingFunction="Bounce.easeOut"/>
<mx:Sequence target="{confirm}">
<mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0"/>
<mx:Blur duration="200" blurYFrom="20.0" blurYTo="1"/>
</mx:Sequence>
</mx:Parallel>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="Register">
<mx:AddChild relativeTo="{loginForm}" position="lastChild">
<mx:FormItem id="confirm" label="确认密码:">
<mx:TextInput/>
</mx:FormItem>
</mx:AddChild>
<mx:SetProperty target="{loginPanel}" name="title" value="注册"/>
<mx:SetProperty target="{loginButton}" name="label" value="注册"/>
<mx:RemoveChild target="{registerLink}"/>
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:LinkButton label="返会到登录" click="currentState=''"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Panel id="loginPanel" title="登录" fontSize="12"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Form id="loginForm">
<mx:FormItem label="用户名:">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="密码:">
<mx:TextInput/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:LinkButton id="registerLink" label="还未注册?"
click="currentState='Register'"/>
<mx:Spacer width="100%" id="spacer1"/>
<mx:Button label="登录" id="loginButton"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
示例3.7定义了一个登录与注册视图模式的转换效果,界面内容与示例3.5是一致的,分别对应从登录视图到注册视图的切换效果为Resize效果和Blur效果,Parallel和Sequence分别定义了效果的并行响应和线性响应。按照示例中的设定,点击LinkButton组件进行视图模式转换时,会响应一个尺寸改变的效果,同时伴随组件的模糊清晰转换效果,同时对Resize效果设置了Bounce.easeOut,这样当尺寸改变效果完成时会出现一个组件颤动的效果,如图3.14所示。这个实例集合了多种顺序和状态的转换效果。
图3.14 使用Transitions控制视图转换效果
3.2.5 详解Transition的使用
略……
3.2.6 效果过滤器
默认情况下,Flex会对所有Transition所指定的视图模式进行效果响应,然而有些时候我们往往不希望所有的目标组件都执行这样的效果,而是能够动态地对效果进行过滤,更有时会出于效率方面的原因,希望屏蔽掉某些组件的效果,这时我们需要对Transition进行效果过滤。
在Transition中定义效果对象,可以使用filter属性指定过滤器,这样可以在执行效果响应时控制目标组件的状态选择。filter属性所指定的效果过滤器会在目标组件触发效果时生效,因此即使不使用视图模式,也可以为可视化组件设置效果过滤器属性,实现对某些特定组件的效果过滤。
效果过滤器在可视化组件的应用中,一种典型的使用方法就是屏蔽掉当前隐藏掉的组件的效果处理,因为我们往往对某一批组件进行统一的效果处理,而这些组件中的一部分甚至绝大部分在某一时刻处于隐藏状态,这种状态不需要对这些组件进行任何与外观相关的操作,效果处理也不例外,因此,有必要将这些组件的效果响应过滤掉,从而提高应用程序的执行效率。
效果过滤器通过filter属性支持下列状态过滤。
* add:允许当前视图中添加组件时执行效果。
* hide:允许当前视图中隐藏状态的组件执行效果。
* move:允许当前视图中移动状态的组件执行效果。
* remove:允许当前视图中删除组件时执行效果。
* resize:允许当前视图中大小变化的组件执行效果。
* show:允许当前视图中显示状态的组件执行效果。
示例3.9 使用效果过滤器
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:states>
<mx:State name="Two">
<mx:SetProperty target="{p1}" name="visible" value="false"/>
<mx:SetProperty target="{p2}" name="visible" value="true"/>
<mx:SetProperty target="{p3}" name="visible" value="true"/>
<mx:SetProperty target="{p2}" name="x" value="0"/>
<mx:SetProperty target="{p2}" name="y" value="0"/>
<mx:SetProperty target="{p3}" name="x" value="0"/>
<mx:SetProperty target="{p3}" name="y" value="110"/>
</mx:State>
<mx:State name="Three">
<mx:SetProperty target="{p1}" name="visible" value="true"/>
<mx:SetProperty target="{p2}" name="visible" value="false"/>
<mx:SetProperty target="{p3}" name="visible" value="true"/>
<mx:SetProperty target="{p1}" name="x" value="0"/>
<mx:SetProperty target="{p1}" name="y" value="110"/>
<mx:SetProperty target="{p3}" name="x" value="0"/>
<mx:SetProperty target="{p3}" name="y" value="0"/>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Sequence targets="{[p1,p2,p3]}">
<mx:Sequence id="sequence1" filter="hide" >
<mx:WipeUp/>
<mx:SetPropertyAction name="visible" value="false"/>
</mx:Sequence>
<mx:Move filter="move"/>
<mx:Sequence id="sequence2" filter="show" >
<mx:SetPropertyAction name="visible" value="true"/>
<mx:Fade/>
</mx:Sequence>
</mx:Sequence>
</mx:Transition>
</mx:transitions>
<mx:Canvas id="pm" width="100%" height="100%">
<mx:Panel id="p1" title="收件箱" x="0" y="0" fontSize="12" width="200"
height="100" click="currentState=''" >
<mx:List id="myL1" width="100%" height="100%">
<mx:Array>
<mx:String>1.来自 Ian.</mx:String>
<mx:String>2.天气预报.</mx:String>
<mx:String>3.来自 Zoe.</mx:String>
</mx:Array>
</mx:List>
</mx:Panel>
<mx:Panel id="p2" title="发件箱" x="0" y="110" fontSize="12" width="200"
height="100" click="currentState='Two'" >
<mx:List id="myL2" width="100%" height="100%">
<mx:Array>
<mx:String>1.发往 Ian.</mx:String>
<mx:String>2.发往 Zoe.</mx:String>
</mx:Array>
</mx:List>
</mx:Panel>
<mx:Panel id="p3" title="草稿箱" visible="false" fontSize="12" width="200"
height="100" click="currentState='Three'" >
<mx:List id="myL3" width="100%" height="100%">
<mx:Array>
<mx:String>1.申请.</mx:String>
</mx:Array>
</mx:List>
</mx:Panel>
</mx:Canvas>
</mx:Application>
示例3.9创建了一个信箱界面,包含三个视图模式,分别是收件箱、发件箱和草稿箱。每种模式都会显示两个组件,而隐藏掉另一个组件,这样可以通过点击下方的组件进行视图状态切换。不难看出,整个视图切换的流程是一个固定的循环,因此使用Transition来进行控制会非常方便,但是每次需要显示和隐藏的视图是在不停变化的,设置成固定的效果模式并不能满足要求。这时,我们就可以使用效果过滤器来进行处理。
示例中,对两个效果稽核Sequence分别定义了不同的过滤器,当目标组件隐藏时,执行id为sequence1的效果集,当目标组件显示时,则执行id为sequence2的效果集。即组件从显示到隐藏会执行WipeUp的效果,而从隐藏到显示则会执行Fade的效果。示例的运行效果如图3.15所示。
图3.15 使用效果过滤器[/size]
3.2.1 视图模式
Flex为了多样化可视化组件并加强与用户的交互性,提供了视图模式的支持。HTML页面通过框架设计、标签编程等方式来进行界面的统一视图处理,这给页面上的数据元素带来了很大的不确定性,同时也降低了数据的可维护性,Flex的视图模式则对应用程序界面的视图控制进行了单独的定义——视图模式。
具体来说,视图模式定义了界面中一部分数据条目组件的显示方式,如我们可以对Windows系统中的文件夹进行平铺查看或列表查看,这就是典型的视图模式。在Flex应用开发中,我们常常需要对数据组件进行更为复杂的视图转换操作,如定制化地增减组件、修改组件属性、组件外观控制等。
在Flex中使用视图控制,我们需要首先定义基本视图,然后定义视图变更或视图覆盖的集合,用来修改基本视图。每一种附加的视图模式都可以对基本视图中的组件数量、组件内容、相关属性进行设置和调整。
3.2.2 创建和应用视图模式
使用MXML标签<mx:States>和<mx:State>可以进行视图模式的创建,<mx:States>用于进行视图模式组的定义,可以在其中包含一或多个<mx:State>,<mx:State>则对应每一个具体的视图定义。
示例3.5 创建视图模式
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:states>
<mx:State name="Register">
<mx:AddChild relativeTo="{loginForm}" position="lastChild">
<mx:FormItem id="confirm" label="确认密码:">
<mx:TextInput/>
</mx:FormItem>
</mx:AddChild>
<mx:SetProperty target="{loginPanel}" name="title" value="注册"/>
<mx:SetProperty target="{loginButton}" name="label" value="注册"/>
<mx:RemoveChild target="{registerLink}"/>
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:LinkButton label="返会到登录" click="currentState=''"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Panel id="loginPanel" title="登录" fontSize="12"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Form id="loginForm">
<mx:FormItem label="用户名:">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="密码:">
<mx:TextInput/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:LinkButton id="registerLink" label="还未注册?"
click="currentState='Register'"/>
<mx:Spacer width="100%" id="spacer1"/>
<mx:Button label="登录" id="loginButton"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
结合示例3.5我们来了解一下如何创建视图模式并设计不同视图中的组件变化。首先我们看示例程序的下半部分,这里定义了一个id为loginPanel的Panel组件,程序从这里开始创建了一个基本视图,也就是默认状态下的组件显示状态,在Panel组件中一个LinkButton组件定义了click时间监听器,执行了currentState=‘Rigister’的视图转换功能;然后我们再来看程序上半部分id为Rigister的视图定义,在<mx:States>中定义了一个id为Rigister的视图模式,在这个模式中使用了<mx:AddChild>、<mx:SetProperty>和<mx:RemoveChild>等MXML标签,实现了对Panel容器组件的内容控制——增加了一个用于确认密码输入的TextInput,并且修改了基本视图模式的一些显示用的文字信息,删除掉了原来的LinkButton组件,新增加了用于返回到基本视图模式的LinkButton组件。运行效果如图3.7和3.8所示。当处于初始状态时,程序显示为一个登录窗体(见图3.7),可以通过单击“还未注册”按钮跳转到注册视图进行新用户注册(见图3.8)。这就是视图模式的创建和应用,增加了现有组件的可重用性,并且加强了数据的可维护性,极大地提高了程序的工作效率,节省了系统资源。
图3.7 视图模式创建和应用(1)
图3.8 视图模式创建和应用(2)
如果使用Flex Builder 3进行Flex应用程序开发,视图处理功能可以通过设计界面进行更加方便的设计。如图3.9所示,右上部分的窗体是一个视图模式编辑器States,可以通过图形界面设定创建、修改或删除视图模式,每一个应用程序都会有基本视图模式,即图3.9中的<Base state>,这个视图模式是不能修改或删除的,在基本视图模式的基础上我们可以直接使用States视图编辑器进行视图创建,即图3.9中的Register,对应示例3.5中的Register视图模式。
图3.9 使用Flex Builder 3设计视图模式(1)
当选中了States视图编辑器中的Register后,我们即可以在新的视图模式中进行GUI设计,如图3.10所示。这时我们在UI设计器中对组件的设计操作只会对Register视图模式进行修改,而不会影响基本视图。
图3.10 使用Flex Builder 3设计视图模式(2)
States视图编辑器的右上角有3个按钮,分别用于添加、修改和删除视图模式。当我们选中Register视图后,单击修改按钮,会弹出如图3.11所示的对话框。这时,我们可以修改视图模式的名称,并可以指定该视图模式是否作为起始状态的视图模式,如果勾选了“Set as start state”,那么该视图模式在程序启动后会自动加载。
图3.11 使用Flex Builder 3设计视图模式(3)
3.2.3 视图模式与历史记录管理器
略……
3.2.4 视图转换——Transitions
视图模式的切换让用户更方便快捷地与Flex应用程序进行交互,此时我们可以使用Flex的Transitions来进行视图模式转换的效果控制。视图模式用于定义当前界面的组件表现和数据集成,多个视图模式可以通过设置currentState来进行切换,而具体切换的过程和需要实现的效果可以使用Transitions进行控制。
Flex的绚丽效果可谓处处可见,小到每一个组件,大到整个应用程序的控制都可以附加丰富多彩的效果,对视图转换的效果设置有些类似于Microsoft PowerPoint的幻灯片切换设定,即我们可以对目标的视图组件,如新添加的组件、发生改动的组件或被删除的组件进行具体的效果设定。
对视图转换的设定是非常灵活的,我们可以为视图中每一个组件设定不同的效果,并可以设定效果集合来同时设定多个组件的效果类型。通过MXML标签<mx:transitions>和<mx:Transition>可以对Transitions进行定义。
示例3.7 使用Transitions控制视图转换效果
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
verticalAlign= "middle">
<mx:Script>
<![CDATA[
import mx.effects.easing.Bounce;
]]>
</mx:Script>
<mx:transitions>
<mx:Transition>
<mx:Parallel
targets="{[loginPanel, registerLink, loginButton, confirm]}">
<mx:Resize duration="500" easingFunction="Bounce.easeOut"/>
<mx:Sequence target="{confirm}">
<mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0"/>
<mx:Blur duration="200" blurYFrom="20.0" blurYTo="1"/>
</mx:Sequence>
</mx:Parallel>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="Register">
<mx:AddChild relativeTo="{loginForm}" position="lastChild">
<mx:FormItem id="confirm" label="确认密码:">
<mx:TextInput/>
</mx:FormItem>
</mx:AddChild>
<mx:SetProperty target="{loginPanel}" name="title" value="注册"/>
<mx:SetProperty target="{loginButton}" name="label" value="注册"/>
<mx:RemoveChild target="{registerLink}"/>
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:LinkButton label="返会到登录" click="currentState=''"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Panel id="loginPanel" title="登录" fontSize="12"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Form id="loginForm">
<mx:FormItem label="用户名:">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="密码:">
<mx:TextInput/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:LinkButton id="registerLink" label="还未注册?"
click="currentState='Register'"/>
<mx:Spacer width="100%" id="spacer1"/>
<mx:Button label="登录" id="loginButton"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
示例3.7定义了一个登录与注册视图模式的转换效果,界面内容与示例3.5是一致的,分别对应从登录视图到注册视图的切换效果为Resize效果和Blur效果,Parallel和Sequence分别定义了效果的并行响应和线性响应。按照示例中的设定,点击LinkButton组件进行视图模式转换时,会响应一个尺寸改变的效果,同时伴随组件的模糊清晰转换效果,同时对Resize效果设置了Bounce.easeOut,这样当尺寸改变效果完成时会出现一个组件颤动的效果,如图3.14所示。这个实例集合了多种顺序和状态的转换效果。
图3.14 使用Transitions控制视图转换效果
3.2.5 详解Transition的使用
略……
3.2.6 效果过滤器
默认情况下,Flex会对所有Transition所指定的视图模式进行效果响应,然而有些时候我们往往不希望所有的目标组件都执行这样的效果,而是能够动态地对效果进行过滤,更有时会出于效率方面的原因,希望屏蔽掉某些组件的效果,这时我们需要对Transition进行效果过滤。
在Transition中定义效果对象,可以使用filter属性指定过滤器,这样可以在执行效果响应时控制目标组件的状态选择。filter属性所指定的效果过滤器会在目标组件触发效果时生效,因此即使不使用视图模式,也可以为可视化组件设置效果过滤器属性,实现对某些特定组件的效果过滤。
效果过滤器在可视化组件的应用中,一种典型的使用方法就是屏蔽掉当前隐藏掉的组件的效果处理,因为我们往往对某一批组件进行统一的效果处理,而这些组件中的一部分甚至绝大部分在某一时刻处于隐藏状态,这种状态不需要对这些组件进行任何与外观相关的操作,效果处理也不例外,因此,有必要将这些组件的效果响应过滤掉,从而提高应用程序的执行效率。
效果过滤器通过filter属性支持下列状态过滤。
* add:允许当前视图中添加组件时执行效果。
* hide:允许当前视图中隐藏状态的组件执行效果。
* move:允许当前视图中移动状态的组件执行效果。
* remove:允许当前视图中删除组件时执行效果。
* resize:允许当前视图中大小变化的组件执行效果。
* show:允许当前视图中显示状态的组件执行效果。
示例3.9 使用效果过滤器
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:states>
<mx:State name="Two">
<mx:SetProperty target="{p1}" name="visible" value="false"/>
<mx:SetProperty target="{p2}" name="visible" value="true"/>
<mx:SetProperty target="{p3}" name="visible" value="true"/>
<mx:SetProperty target="{p2}" name="x" value="0"/>
<mx:SetProperty target="{p2}" name="y" value="0"/>
<mx:SetProperty target="{p3}" name="x" value="0"/>
<mx:SetProperty target="{p3}" name="y" value="110"/>
</mx:State>
<mx:State name="Three">
<mx:SetProperty target="{p1}" name="visible" value="true"/>
<mx:SetProperty target="{p2}" name="visible" value="false"/>
<mx:SetProperty target="{p3}" name="visible" value="true"/>
<mx:SetProperty target="{p1}" name="x" value="0"/>
<mx:SetProperty target="{p1}" name="y" value="110"/>
<mx:SetProperty target="{p3}" name="x" value="0"/>
<mx:SetProperty target="{p3}" name="y" value="0"/>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Sequence targets="{[p1,p2,p3]}">
<mx:Sequence id="sequence1" filter="hide" >
<mx:WipeUp/>
<mx:SetPropertyAction name="visible" value="false"/>
</mx:Sequence>
<mx:Move filter="move"/>
<mx:Sequence id="sequence2" filter="show" >
<mx:SetPropertyAction name="visible" value="true"/>
<mx:Fade/>
</mx:Sequence>
</mx:Sequence>
</mx:Transition>
</mx:transitions>
<mx:Canvas id="pm" width="100%" height="100%">
<mx:Panel id="p1" title="收件箱" x="0" y="0" fontSize="12" width="200"
height="100" click="currentState=''" >
<mx:List id="myL1" width="100%" height="100%">
<mx:Array>
<mx:String>1.来自 Ian.</mx:String>
<mx:String>2.天气预报.</mx:String>
<mx:String>3.来自 Zoe.</mx:String>
</mx:Array>
</mx:List>
</mx:Panel>
<mx:Panel id="p2" title="发件箱" x="0" y="110" fontSize="12" width="200"
height="100" click="currentState='Two'" >
<mx:List id="myL2" width="100%" height="100%">
<mx:Array>
<mx:String>1.发往 Ian.</mx:String>
<mx:String>2.发往 Zoe.</mx:String>
</mx:Array>
</mx:List>
</mx:Panel>
<mx:Panel id="p3" title="草稿箱" visible="false" fontSize="12" width="200"
height="100" click="currentState='Three'" >
<mx:List id="myL3" width="100%" height="100%">
<mx:Array>
<mx:String>1.申请.</mx:String>
</mx:Array>
</mx:List>
</mx:Panel>
</mx:Canvas>
</mx:Application>
示例3.9创建了一个信箱界面,包含三个视图模式,分别是收件箱、发件箱和草稿箱。每种模式都会显示两个组件,而隐藏掉另一个组件,这样可以通过点击下方的组件进行视图状态切换。不难看出,整个视图切换的流程是一个固定的循环,因此使用Transition来进行控制会非常方便,但是每次需要显示和隐藏的视图是在不停变化的,设置成固定的效果模式并不能满足要求。这时,我们就可以使用效果过滤器来进行处理。
示例中,对两个效果稽核Sequence分别定义了不同的过滤器,当目标组件隐藏时,执行id为sequence1的效果集,当目标组件显示时,则执行id为sequence2的效果集。即组件从显示到隐藏会执行WipeUp的效果,而从隐藏到显示则会执行Fade的效果。示例的运行效果如图3.15所示。
图3.15 使用效果过滤器[/size]