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" />
再試試看。