Flex学习进阶-使用View States 和 Transitions

很多页面里面都有搜索，在搜索里面会有高级选项Flex可以做出高级菜单的动态出现效果，要用到的就是两个标签分别是<mx: States> 和<mx: Transitions>下面就来做这个实例。

首先是建立UI界面，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundImage="">
<mx:Panel id="panel1" 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" click="currentState=''"/>
<mx:LinkButton x="20" y="120" label="Advanced Options" />
</mx:Panel>
</mx:Application>
随后要用到的就是States的概念，它有点想网页中的Div，新建一个States有两种方法，一种是代码的方法，一种是通过设计面板，其中设计面板的方法比较简单，步骤如下：
1.States > New States >（在弹出的面板里面输入它的名字）Advanced
然后在这个State里面拖拽一个VBox，在VBox里面拖拽三个CheckBox，作为高级的选项，作完以后会在代码里面多出下面的代码：
<mx:states>
<mx:State name="Advanced">
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<mx:VBox id="myVBox" x="20" y="150" width="160" height="80">
<mx:CheckBox label="Regular Expression"/>
<mx:CheckBox label="Case sensitive"/>
<mx:CheckBox label="Exact Phrase "/>
</mx:VBox>
</mx:AddChild>
</mx:State>
</mx:states>

下面在按钮里面添加出现States的代码，代码如下：
<mx:Button x="185" y="90" label="Go" click="currentState='Advanced'"/>

可以运行一下了，初步效果已经出来了，肯能有人会说点完GO以后高级菜单应该消失呀，只要在代码里面添加下面的内容就可以了
<mx:Button x="185" y="90" label="Go" click="currentState=''"/>

看看是不是没有问题了，添加事件也可以从设计模式下的组件属性面板中添加。

下面添加一个域的过度效果，要不怎么能够显示出Flex与AJAX的优势呢。
过度效果使用<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>
//fromState="*" toState="Advanced" 是用于说明从任何State到Advanced都会调用这里面的过度效果
<mx:transitions>标签类似于自动触发函数只要是当State发生的时候，该动作就会发生。

不过被被束缚换个效果，由你做主，把
<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
换成
<mx:Blur id="numbersBlur" blurYFrom="80.0" blurYTo="0.0" blurXFrom="80.0" blurXTo="0.0" duration="3000" />
再试试看。