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

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

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

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

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

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

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

你知道嗎？

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

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

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

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

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

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

代碼2-1：自動(dòng)生成的主應(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聲明，每個(gè)MXML文件的***行都必須如此。

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

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

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

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

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

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

代碼2-2：UI設(shè)計(jì)自動(dòng)生成的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的方法使你的***個(gè)Flex應(yīng)用問候這個(gè)世界。

首先在<mx:Application>標(biāo)簽之下，<mx:Panel>標(biāo)簽之上加入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>標(biāo)簽中。上述代碼定義了字符串變量greetingWord以及方法greeting()。該方法將設(shè)置greetingWord變量的值為“HelloFlex!”。

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

為了讓Flex應(yīng)用程序能夠在啟動(dò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)用加載完成后自動(dòng)調(diào)用greeting()方法，以便設(shè)置greetingWord的值。在<mx:Application>標(biāo)簽內(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)在運(yùn)行這個(gè)Flex應(yīng)用，你不會(huì)得到期望的結(jié)果。運(yùn)行結(jié)果如圖2-8所示。

圖2-8錯(cuò)誤的運(yùn)行結(jié)果

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

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

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

[Bindable]  
 
privatevargreetingWord:String="emptyword";  
 

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

步驟三：編譯和運(yùn)行

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

圖2-9運(yùn)行HelloFlex

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

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

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

代碼2-7：HelloFlex

【編輯推薦】

1. 構(gòu)建Flex應(yīng)用時(shí)常見幾大誤區(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)化原則