Flex 4 SDK 新特性教程系列 – 改進的檢視狀態 (1)

文章目錄

• Flex 3的檢視狀態(View States)
• Flex 4：全新的檢視狀態文法

本章是Flex 4 SDK 新特性教程系列的第5章。本章將介紹Flex 4全新的檢視狀態文法。

 

Flex 3的檢視狀態(View States)

在此之前有多少人使用過檢視狀態？至少我沒用過。:P
下面是一個典型的例子：

<mx:states>     <mx:State name="State1">         <mx:SetStyle target="{btn}" name="color" value="0xAAAAAA"/>              <mx:SetProperty target="{btn}" name="enabled" value="false"/>         <mx:SetEventHandler target="{btn}" name="click" handler="handler()"/>        <mx:AddChild relativeTo="{v1}">             <mx:Button label="New Button" />        </mx:AddChild>   </mx:State>   <mx:State name="State2">          ...    </mx:State> </mx:states>

我們知道，使用MXML而不是ActionScript的一大好處在於，用MXML所表達的內容非常易讀和直觀（設計師也可以理解），而且MXML易於編寫。但是在Flex 3中使用檢視狀態時，這些優點都喪失了：描述狀態的MXML文法即不易讀，也難以編寫和維護。如果你想瞭解某一個特定狀態下的實際效果，你必須把這些看起來更像ActionScript的MXML代碼在腦海中“運行”一遍，而且要確保你的記性足夠好。:P

但是在Flex 4中，情況則大不相同了。

Flex 4：全新的檢視狀態文法

在Flex 4中，我們使用美觀的“點文法”來代替醜陋的SetProperty，SetEventHandler以及SetStyle，如下例：

<mx:Button label.state1="State 1" label.state2="State 2"                    color.state1="0xFF0000" color.state2="0xFFFF00"        click.state1="handler1(event)" click.state2="handler2(event)"/>

上面的代碼我想不需要任何解釋也能非常容易地理解，類似地，我們使用includeIn和excludeFrom來代替AddChild/RemoveChild:

• includeIn聲明當前組件“只存在於特定狀態中”。
• excludeFrom聲明當前組件“只在特定狀態中不存在”。

例如：

<s:states>    <s:State name="state1"/>    <s:State name="state2"/>    <s:State name="state3"/></s:states> <mx:Button id="button1" includeIn="state1" /> <mx:Button id="button2" excludeFrom="state3" /> <mx:Button id="button3" includeIn="state2,state3" />

在上面的例子中：

• button1存在於state1，在state2和state3中不存在。
• button2存在於state1和state2，在state3中不存在。
• button3存在於state2和state3，在state1中不存在。

可以看到，新的視圖文法將所有與狀態有關的設定“嵌入”到組件的標籤中，並使用了簡化的文法，從而大大提高了可讀性並降低了編寫的難度。我想檢視狀態將成為我在Flex 4中經常使用的特性。:P（需要注意的是，想要使用新的檢視狀態文法，你必須使用MXML 2009版本。)

下面是一個Flex3中經典的使用檢視狀態的執行個體：使用者登陸/註冊對話方塊。使用者通過點擊按鈕來切換狀態並顯示不同內容。我將這個例子用Flex 4的檢視狀態文法改寫，你可以拷貝代碼並編譯運行來看到效果：

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"         xmlns:s="library://ns.adobe.com/flex/spark"         xmlns:mx="library://ns.adobe.com/flex/halo"><s:states><s:State name="login"/><s:State name="register"/></s:states> <s:Panel title="Login"  title.register="Register" height="138" height.register="170"        verticalCenter="0" horizontalCenter="0" width="290"><s:TextInput x="89" y="10" width="177"/><s:TextInput x="89" y="42" width="177"/><s:Label x="10" y="10" text="User Name:" width="66" height="21" verticalAlign="middle"/><s:Label x="10" y="44" text="Password:" width="66" height="21" verticalAlign="middle"/><s:Button x="10" label="Need to Register?" label.register="Back to login" bottom="8"         click="currentState='register'" click.register="currentState='login'"/><s:Button x="196" bottom="8" label="Login" label.register="Register"/><s:Label includeIn="register" x="10" y="82" text="Confirm:" /><s:TextInput includeIn="register" x="89" y="72" width="177"/></s:Panel></s:Application>

更酷的是，Flash Builder 4提供了代碼環境下可以動態切換檢視狀態的功能，所有在當前選擇的檢視狀態下無效的代碼將會以灰階顯示，使你可以更加直觀的檢查不同狀態下的生效代碼，例如選中上面例子中login狀態：

在下一章中，我們將介紹其他與狀態視圖有關的新特性，包括如何控制組件在不同檢視狀態下的建立和銷毀，狀態群組，以及<fx:Reparent>標籤等等。