深入探究Flex應用程序使用
本文和大家重點討論一下Flex應用程序的概念,主要包括時間和行為的使用,在Flex應用程序中如何添加多個頁面,以及如何使用Flex等內容,希望本文的介紹能讓你有所收獲。
一、事件和行為的使用
HTML應用程序的原理是由客戶端發出請求,并從服務器端得到反應。與之不相同的是,Flex應用程序是基于事件的/event-based。舉個例子,當用戶單擊一個按鈕時,便會觸發一個事件。應用程序本身,不是指服務器,包含了識別事件的邏輯并采取相應的行動。
當事件被觸發時修改組件的屬性
對某個組件以編程方式進行操作時,為了對某個事件作出反應,必須首先要引用它,這時你就需要賦予它一個ID值,如下所示:
- <mx:Panelidmx:Panelid="myPanel"layout="absolute"width="80%"
- height="80%"x="122"y="24">
隨后你就可以將行為/behavior添加到應用程序上,當某個事件被觸發時改變組件的屬性值,就象這樣:
- <mx:Buttonlabelmx:Buttonlabel="Close"right="30"bottom="40"
- click="myPanel.visible=false"/>
當按鈕被單擊時,面板的可見屬性值被設置為false。
使用ActionScript功能函數
你也可以通過編寫ActionScript功能函數,并在事件中調用它來達到相同的目的,在這種情況下,按鈕組件的單擊事件如下所示:
- xmlversionxmlversion="1.0"encoding="utf-8"?>
- <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
- layout="absolute">
- <mx:Stylesourcemx:Stylesource="styles.css"/>
- <mx:Script>
- publicfunctionclose():void{
- myPanel.visible=false;
- }
- ]]>
- mx:Script>
- <mx:Panelidmx:Panelid="myPanel"layout="absolute"width="80%"
- height="80%"x="122"y="24">
- <mx:TextAreatextmx:TextAreatext="SayhellotoFlex!"top="10"bottom="70"
- left="10"right="30"/>
- <mx:Buttonlabelmx:Buttonlabel="Close"right="30"bottom="40"
- click="close();"/>
- mx:Panel>
- mx:Application>
ActionScript功能函數是在MXML文件里的
單獨的ActionScript代碼
為了從MXML文件中更好地分離出ActionScript代碼,你可以將它們放到單獨的ActionScript文件中而不是作為函數,然后再將它們導入到MXML文件里,如下所示:
- <mx:Scriptsourcemx:Scriptsource="myFunctions.as"/>
運用行為和變換增強豐富的視覺互動性
Flex應用程序是事件驅動的,這就意味著你可以在程序運行時使用事件去添加豐富的視覺互動性。為了實現它,你使用了一個事件觸發器,用其來描述一個行為。
在前面的例子中,面板組件的visible屬性值被設置為false因而不可見。你還可以通過使用行為來制造出更強的視覺效果。
下面的例子創建了一個行為,該行為首先創建好一種效果,然后把它綁定到組件的hideEffect屬性上(觸發器):
- <mx:Fadeidmx:Fadeid="myFade"/>
- <mx:Panelidmx:Panelid="myPanel"layout="absolute"width="80%"
- height="80%"hideEffect="{myFade}">
當關閉按鈕被單擊時,面板組件淡出而不是消失。
觸發器和效果還可以組合到更為復雜的行為中,其被稱之為變換/transitions。
二、在應用程序中添加多態頁面
有幾種方法在一個Flex應用程序中創建多態頁面。你可以使用ViewStack組件、創建單獨的MXML文件、或者使用視圖狀態。視圖狀態可以被看作是一個組件或組件群構成的預定義的用戶界面布局。你可以使用視圖狀態為程序表現出不同的視覺效果。每一種視圖狀態都是基于一種基礎的狀態,并進行繼承和擴展。
在隨后的例子中,當用戶在組件上滾動鼠標時,基礎狀態發生變化。
當一個視圖狀態被調用時(通過用戶的鼠標在組件上滾動時產生的事件),一種效果(或一種變換)改變了用戶界面的外觀。
使用視圖狀態方式、ViewStack方式還是MXML文件方式,取決于你想從一個頁面到另一個頁面進行變化的范圍、用戶界面的復雜性、以及實現Flex程序的構架。
三、開始使用Flex
現在,想必你對Flex的概念有了一個基礎的認識,讓我們開始創建Flex應用程序吧。
◆使用FlexBuilder
通過使用新項目向導/NewFlexProjectWizard創建一個Flex項目(File>New>FlexProject)。設計,編譯,以及調試Flex應用程序所需的所有工具,都被包括在FlexBuilder中了。
◆使用FlexSDK
創建一個文件名后綴為MXML的文本文件,在其中添加MXML文件的基本元素(上述例子中的頭兩行代碼),然后使用文檔資料(特別是AdobeFlex2LanguageReference)去研究各種組件的用法。編譯和調試工具是以命令行的方法提供的。
【編輯推薦】
- 解析Flexbuilder4十大新特性
- 從Flex Builder更名看Flash平臺戰略
- 探討Flex設計理念 如何為Flex應用程序設計界面布局
- FlexBuilder3.0與Eclipse3.4的***結合
- 學習筆記 FlexBuilder2.0中如何使用基于Lists的控件