本文和大家重點討論一下***個Flex應用——HelloFlex!，僅僅通過3到4行的代碼，使用Flex也能編寫“HelloWorld”。本文的“HelloFlex”樣例稍顯復雜，我希望能利用這些代碼，盡量體現Flex應用的本質，幫助你更深入地體會Flex技術。

***個Flex應用——HelloFlex!

“HelloWorld”之類的例子是***的“***次”。一些人熱衷于使用最少的代碼編寫“HelloWorld”，但往往同時缺失了很多要點。僅僅通過3到4行的代碼，使用Flex也能編寫“HelloWorld”。但本文的“HelloFlex”樣例稍顯復雜，我希望能利用這些代碼，盡量體現Flex應用的本質，幫助你更深入地體會Flex技術。

如果在本節你讀到一些不甚明了的文字，別擔心，我們還有大量的篇幅和時間為你一一闡明。

現在，讓我們一起向Flex打聲招呼。

步驟一：創建***個Flex項目

在文件目錄系統中創建一個目錄（如C:\DONG\FlexBookWorkspace\），將它用作本書中所有樣例項目的工作空間（Workspace）。

你知道嗎？

工作空間（workspace）是所有項目的容器，具有自己特有的屬性和元數據設置。一個安裝好的Eclipse可以支持多個工作空間，你只須在啟動時指定使用哪個工作空間。

啟動FlexBuilder后，選中File→New→FlexProject創建項目。FlexBuilder（以下簡稱FB）彈出“新建Flex項目”向導，如圖2-5所示。

圖2-5創建項目向導

如圖“創建項目向導”中所示，填寫項目名稱（ProjectName）為“HelloFlex”，去掉“Usedefaultlocation”的選項框中的選擇，指定“C:\DONG\FlexBookWorkspace\HelloFlex”為項目位置。選擇“Webapplication(runsinFlashPlayer)”作為本項目的應用類型，接受其他默認設置，直接點擊“Finish”完成項目的創建。新創建的HelloFlex如圖2-6所示。

圖2-6創建的項目HelloFlex

FlexBuilder自動生成主應用文件：HelloFlex.mxml，如代碼2-1所示。

代碼2-1：自動生成的主應用文件

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> 
 
</mx:Application> 
 

Flex應用程序就是普通XML文件，后綴名為mxml。因此，你可以看到MXML文件的***行是XML聲明，每個MXML文件的***行都必須如此。

<mx:Application>是Flex互聯網應用程序的***個標簽，也是Flex互聯網應用程序的根標簽。該標簽定義了Flex互聯網應用程序的應用容器，開發者之后添加的任何容器、組件及ActionScript代碼最終都被包含或嵌入該標簽中。#p#

步驟二：UI設計和編寫ActionScript腳本

UI設計：添加容器和組件
點擊“設計（Design）”按鈕進入FlexBuilder的設計視圖。（圖2-6中用實線框標識“Design”按鈕。）FlexBuilder提供了可視化的UI設計器，通過拖曳，開發者即可進行頁面布局。

如圖2-7中，在左下角的“組件（Components）”調板中，拖曳Layout類別下的Panel容器到設計區域，然后拖曳Text組件到Panel中。確認選中Text組件，在右側的“FlexProperty（Flex屬性）”調板中，設置其ID為txtGreeting。

圖2-7在設計視圖中進行UI可視化設計

FlexBuilder的設計視圖幫助你可視化地、拖過拖曳操作進行頁面布局、設置組件屬性或進行其他UI設計。在進行拖曳或者屬性設置的同時，FlexBuilder自動生成了相應的MXML代碼。如下面的代碼2-2所示，即為FlexBuilder在你剛剛的操作中生成的。你會看到，代表Panel容器的<mx:Panel>嵌入在<mx:Application>根容器中。而代表Text組件的<mx:Text>嵌入在<mx:Panel>中。

代碼2-2：UI設計自動生成的MXML代碼

<mx:Panelxmx:Panelx="147"y="91"width="768"height="521"layout="absolute"> 
 
<mx:Textwidthmx:Textwidth="264"height="50"id="txtGreeting"fontFamily="Arial"  
fontSize="26"text="text"textAlign="center"x="242"y="178"/> 
 
</mx:Panel> 
 

#p#編寫ActionScript腳本

我們通過ActionScript的方法使你的***個Flex應用問候這個世界。

首先在<mx:Application>標簽之下，<mx:Panel>標簽之上加入greeting方法，代碼片斷如代碼2-3所示：

代碼2-3：ActionScript方法：Greeting()

<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> 
 
<mx:Script> 
 
<![CDATA[  
 
privatevargreetingWord:String="emptyword";  
 
functiongreeting():void{  
 
greetingWord="HelloFlex!";  
 
}  
 
]]> 
 
</mx:Script> 
 
<mx:Panelxmx:Panelx="147"y="91"width="768"height="521"layout="absolute" 
 
fontFamily="TimesNewRoman"fontSize="20"> 
 

MXML文件中的ActionScript代碼內嵌于<mx:Script>標簽中。上述代碼定義了字符串變量greetingWord以及方法greeting()。該方法將設置greetingWord變量的值為“HelloFlex!”。

事件觸發和變量綁定

為了讓Flex應用程序能夠在啟動后顯示“HelloFlex!”，我們還要完成兩件事：

設置變量greetingWord和可視文本控件txtGreeting文本屬性text的綁定，如代碼2-4所示。該屬性指定了控件顯示的文本內容。

代碼2-4：ActionScript變量greetingWord與對象屬性text綁定

<mx:Textwidthmx:Textwidth="264"height="50"id="txtGreeting"fontFamily="Arial"fontSize="26" 
 
text="{greetingWord}"textAlign="center"x="242"y="178"/> 
 

使應用加載完成后自動調用greeting()方法，以便設置greetingWord的值。在<mx:Application>標簽內，增加事件creationComplete="greeting()"，如代碼2-5所示：

代碼2-5：應用加載完成后調用greeting方法

<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"  
 
creationComplete="greeting()"> 
 

如果你現在運行這個Flex應用，你不會得到期望的結果。運行結果如圖2-8所示。

圖2-8錯誤的運行結果

可以看到，Flex應用并沒有成功地顯示出“HelloFlex!”。

在Flex應用中，當需要把ActionScript變量或屬性綁定到其他對象的屬性上時，需要使用元數據“[Bindable]”來聲明。因此，還需要在“greetingWord”的變量聲明中加入代碼，見代碼2-6。

代碼2-6：ActionScript方法：Greeting()

[Bindable]  
 
privatevargreetingWord:String="emptyword";  
 

現在，我們完成了全部代碼，準備迎接你的***個Flex應用吧！#p#

步驟三：編譯和運行

點擊運行（Run）按鈕（綠色箭頭，如下圖），運行HelloFlex。FlexBuilder將自動啟動瀏覽器，顯示運行結果，如圖2-9所示。

圖2-9運行HelloFlex

運行結果如圖2-10所示。

圖2-10Firefox瀏覽器中運行的HelloFlex！應用

代碼分析（見代碼2-7）

代碼2-7：HelloFlex

【編輯推薦】

1. 構建Flex應用時常見幾大誤區解析
2. 解析Flex應用開發步驟和技術框架
3. 解析構建Flex應用的10大誤區
4. 解析Flex全屏模式設置方法
5. Flex內存泄露解決方法和內存釋放優化原則