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

***個Flex應(yīng)用——HelloFlex!

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

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

現(xiàn)在，讓我們一起向Flex打聲招呼。

步驟一：創(chuàng)建***個Flex項目

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

你知道嗎？

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

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

圖2-5創(chuàng)建項目向?qū)?/p>

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

圖2-6創(chuàng)建的項目HelloFlex

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

代碼2-1：自動生成的主應(yīng)用文件

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

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

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

步驟二：UI設(shè)計和編寫ActionScript腳本

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

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

圖2-7在設(shè)計視圖中進行UI可視化設(shè)計

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

代碼2-2：UI設(shè)計自動生成的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應(yīng)用問候這個世界。

首先在<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代碼內(nèi)嵌于<mx:Script>標簽中。上述代碼定義了字符串變量greetingWord以及方法greeting()。該方法將設(shè)置greetingWord變量的值為“HelloFlex!”。

事件觸發(fā)和變量綁定

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

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

代碼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"/> 
 

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

代碼2-5：應(yīng)用加載完成后調(diào)用greeting方法

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

如果你現(xiàn)在運行這個Flex應(yīng)用，你不會得到期望的結(jié)果。運行結(jié)果如圖2-8所示。

圖2-8錯誤的運行結(jié)果

可以看到，F(xiàn)lex應(yīng)用并沒有成功地顯示出“HelloFlex!”。

在Flex應(yīng)用中，當需要把ActionScript變量或?qū)傩越壎ǖ狡渌麑ο蟮膶傩陨蠒r，需要使用元數(shù)據(jù)“[Bindable]”來聲明。因此，還需要在“greetingWord”的變量聲明中加入代碼，見代碼2-6。

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

[Bindable]  
 
privatevargreetingWord:String="emptyword";  
 

現(xiàn)在，我們完成了全部代碼，準備迎接你的***個Flex應(yīng)用吧！#p#

步驟三：編譯和運行

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

圖2-9運行HelloFlex

運行結(jié)果如圖2-10所示。

圖2-10Firefox瀏覽器中運行的HelloFlex！應(yīng)用

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

代碼2-7：HelloFlex

【編輯推薦】

1. 構(gòu)建Flex應(yīng)用時常見幾大誤區(qū)解析
2. 解析Flex應(yīng)用開發(fā)步驟和技術(shù)框架
3. 解析構(gòu)建Flex應(yīng)用的10大誤區(qū)
4. 解析Flex全屏模式設(shè)置方法
5. Flex內(nèi)存泄露解決方法和內(nèi)存釋放優(yōu)化原則