FLex视图模式与视图转换

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  使用效果过滤器