第四章　第七节使用视图状态和变换

你可以在Adobe Flex 中使用视图状态和变换来创建更为丰富、更为互动性的用户经历。
举个例子，你可以使用视图状态去创建用户界面，它可以根据用户所执行的任务来改变它的
外观。
视图状态/view states 是你为一个MXML 程序或组件定义的布局命名。你可以为一个程
序或组件定义几种视图状态，并且根据用户的行为在它们之间进行切换。视图状态允许你动
态地改变用户界面，以便来对用户的活动或增加的内容作出响应。
备注：当然，你还可以使用ViewStack 导航容器来实现同样的效果。
变换/transition 是当一个视图状态发生变化时成组播放的几种效果。变换的目的是使视
觉上的变化更为平滑和有趣。
本节将教授你如何使用视图状态和变换去创建用户界面。
设计基础状态
在你使用视图状态之前，你必须设计好应用程序或组件的基础状态。所谓的基础状态，
就是指程序或定制组件的默认状态。
在本节中，你创建好有一个简单搜索表格的基础状态。

1. 在导航视图中选定Lessons 项目，选择File > New > MXML Application 并创建一个名
叫ViewStates.mxml 的文件。
2. 将导航视图中的ViewStates.mxml 设计成被编译的默认文件，并且在关联菜单中选择
Set As Default Application。
3. 在MXML 编辑器设计模式中，从组件视图的布局分类中拖拉出一个面板容器，将它
添中到ViewStates.mxml 文件里。
4. 选择布局中的面板容器，并进行相应的属性设置：
Width: 300
Height: 400
X: 5
Y: 5
5. 从组件视图的控件分类中将随后控件拖拉到面板中：
Label
TextInput
Button
LinkButton
6. 选择面板中的Label 控件，并进行相应的属性设置：
Text: Search
X: 20
Y: 70
7. 选择TextInput 控件，并进行相应的属性设置：
X: 20
Y: 90
8. 选择按钮控件，并进行相应的属性设置：
Label: Go
X: 185
Y: 90
9. 选择LinkButton 控件，并进行相应的属性设置：
Label: Advanced Options
X: 20
Y: 120
布局看起来就象这样：

10. 切换到编辑器的源代码模式下，在ViewStates.mxml 文件中输入如下代码：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel x="5" y="5" width="300" height="400" layout="absolute">
<mx:Label x="20" y="70" text="Search"/>
<mx:TextInput x="20" y="90"/>
<mx:Button x="185" y="90" label="Go"/>
<mx:LinkButton x="20" y="120" label="Advanced Options"/>
</mx:Panel>
</mx:Application>
11. 保存文件，编译后运行。

设计视图状态
范例程序提供了一个满足大多用户需要的，简单的搜索机制。然而，一些用户可能会比
较喜欢更多的搜索选项。你可以使用视图状态来提供这些需求。
1. 在设计模式中，在状态查看（Window > States）上点击新状态/New State 按钮。

新状态对话框出现。

在名称框中键入Advanced 并点击。新状态出现在状态查看中。

你可以使用Flex Builder 中的布局工具去修改新状态的外观。你可以修改、添加或删除
组件，对新状态变化的描述都被编码成MXML 代码。
3. 在设计模式下，在Advanced Search link 下插入一个VBox 容器，为出现的对话框指
定宽度160 高度80，并设置相应的属性：
ID: myVBox
X: 20
Y: 160
4. 拖拉三个CheckBox 控件到VBox 容器。
VBox 容器会自动地纵向排列控件。
5. 选择VBox 容器中的第一个CheckBox 控件，将它的标签属性值设置为Regular
Expression。
6. 选择第二个CheckBox 控件，将它的标签属性值设置为Case sensitive。
7. 选择第三个CheckBox 控件，将它的标签属性值设置为Exact Phrase。
布局看起来就会象这样：

8. 切换到源代码模式，并检测代码。
在<mx:Application>标签后插入<mx:states>标签：
<mx:states>
<mx:State name="Advanced">
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<mx:VBox x="20" y="160" width="160" height="80" id="myVBox">
<mx:CheckBox label="Regular expression"/>
<mx:CheckBox label="Case sensitive"/>
<mx:CheckBox label="Exact phrase"/>
</mx:VBox>
</mx:AddChild>
</mx:State>
</mx:states>
9. 保存文件，编译后运行。

程序并没有显示在新视图状态中插入控件。默认地，Flex 应用程序只显示基础状态。你
必须定义用户如何变换视图状态，通常是点击某个控件。
定义用户如何转换视图状态
你可以设计你的应用程序，使它在用户点击Advanced Options link 时，布局会变换成附
有额外搜索选项的高级查看状态。当用户再次点击link，布局又会变换回基本状态并隐藏那
些选项。为了实现这种效果，你需要定义变换状态的点击事件处理器。
1. 在设计模式中，在状态视图中的列表里选择基础状态。

因为你将为Link 控件定义的事件处理器是基础状态的一部分，所以你需要将MXML
编辑器的焦点变到基础状态上。
当你在这一步选择基础状态时，MXML 编辑器并没有显示那三个CheckBox 控件，因
为它们并不是基础状态的一部分。

2. 选择布局中的LinkButton 控件，在On Click 文本框中输入如下数值：
currentState='Advanced'

点击属性表明，当用户点击LinkButton 控件时，应用程序从当前状态变换成高级查看
状态，它将显示额外那三个check 框。
接下来，当用户第二次点击LinkButton 控件时，隐藏那三个check 框，并恢复到基础
状态。
3. 在状态视图中，选择Advanced state。
4. 在高级查看状态的布局中选择LinkButton 控件，指定点击属性：
currentState=''

将 currentState 的值指定为空的字符串，是要恢复成基础状态。
5. 保存文件，编译后运行。

创建一个变换
当你在应用程序中改变视图状态时，check 框立即出现在屏幕上。你可以定义一个Flex
变换，让它产生揩去和淡化的效果而不是突然变化。
1. 在源代码模式下，创建一个Transition 对象，在<mx:states>标签后添加<mx:transitions>
标签，指定触发它的变换：
<mx:transitions>
<mx:Transition id="myTransition" fromState="*" toState="Advanced">
</mx:Transition>
</mx:transitions>
代码定义了一个名叫myTransition 的变换对象。（你可以在<mx:transitions>标签中定义
更多的变换）
代码还确定，当应用程序从任何视图状态（fromState="*"）变换成高级查看状态
（toState="Advanced"）时，变换就会执行。数值"*"是一个通配符，用来指定任何视图状态。
2. 为变换指定目标组件，以及效果的播放形式，是同时还是顺序进行：
<mx:Transition id="myTransition" fromState="*" toState="Advanced">
<mx:Parallel target="{myVBox}">
</mx:Parallel>
</mx:Transition>
变换的目标组件是名叫myVBox 的VBox 容器。
因为你希望在变换期间两种效果同时发生，所以使用了<mx:Parallel>标签。如果你希望
两种效果顺序发生，则需要使用<mx:Sequence>标签。
3. 在<mx:Parallel>标签对中输入<mx:WipeDown>和<mx:Dissolve>标签，指定在变换期
用播放的效果：
<mx:Parallel target="{myVBox}">
<mx:WipeDown duration="2000"/>
<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
</mx:Parallel>
完成后的<mx:transitions>标签看起来就象这样：
<mx:transitions>
<mx:Transition id="myTransition" fromState="*" toState="Advanced">
<mx:Parallel target="{myVBox}">
<mx:WipeDown duration="2000"/>
<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
</mx:Parallel>
</mx:Transition>
</mx:transitions>
4. 保存文件，编译后运行。
在本节中，你学习了如何使用视图状态和变换去创建更加灵活的用户界面。

加支付宝好友偷能量挖...