Flex实践——States Practice

   上一次用组合效果完成了一些变化，这一次，来学习一下如何实现当单击一个按钮时改变页面状态（包括布局，内容，颜色等）

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

在这次实践中，涉及到两种状态的设计
设计基础状态在你使用视图状态之前，你必须设计好应用程序或组件的基础状态。所谓的基础状态，就是指程序或定制组件的默认状态。
设计视图状态范例程序提供了一个满足大多用户需要的，简单的搜索机制。然而，一些用户可能会比
较喜欢更多的搜索选项。你可以使用视图状态来提供这些需求。

开始实践吧，Ready？GO！

首先，创建一个 MXML Application——>ViewStates
然后拖控件，这些控件在这次实践中将会被视为是基础状态的设计

接下来，新建一个state， 选择 Window—>States,在设计模式中，在状态查看（Window > States）上点击新状态/New State 按钮。

完成后，新状态出现在状态查看中。

接下来，在Advanced状态下拖控件，这些控件将会被视为视图状态

视图状态设计完成后，在source下可以看到 state 代码：

注：<mx:state> </mx: states>标签内的内容是设计的视图状态下的结果

调用视图状态（当点击 Advanced Options 按钮时，页面切换到视图状态）
1. 在设计模式中，在状态视图中的列表里选择基础状态。
因为你将为Link 控件定义的事件处理器是基础状态的一部分，所以你需要将MXML
编辑器的焦点变到基础状态上。

当你在这一步选择基础状态时，MXML 编辑器并没有显示那三个CheckBox 控件，因

为它们并不是基础状态的一部分。

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

currentState='Advanced'

点击属性表明，当用户点击LinkButton 控件时，应用程序从当前状态变换成高级查看

状态，它将显示额外那三个check 框。

接下来，当用户第二次点击LinkButton 控件时，隐藏那三个check 框，并恢复到基础

状态。

3. 在状态视图中，选择Advanced state。

4. 在高级查看状态的布局中选择LinkButton 控件，指定点击属性：

currentState=''

在source下可以看到代码：

第一次点击 Advanced Options 时调用视图状态代码：

第二欠点击Advanced Options 时切换到原始状态代码：

运行结果：

基本状态

点击Advanced Options后切换到视图状态

再次点击 Advanced Options 将切换到原始状态

这次的实践完成了，不知道对你有没有帮助呢，呵呵。。。