前言

Adobe? Flex? 2.0 是一項(xiàng)新興的技術(shù)，它基于強(qiáng)大的已經(jīng)很成熟的 J2EE 平臺(tái)，具有一些很強(qiáng)大并 且迷人的特性，比如?Flash 的表現(xiàn)能力，豐富的媒體和離線(xiàn)能力等等。Flex 2.0 雖然在前臺(tái)表現(xiàn)
為 Flash，卻是更多地面向開(kāi)發(fā)者（developer），而不是設(shè)計(jì)者（designer）。你只需要編寫(xiě)代碼就 可以使用各種控件做出很漂亮的東西，這是許多缺少藝術(shù)細(xì)胞的開(kāi)發(fā)人員向往的事情。而且 Flex 除去了 Flash 中一些令很多人費(fèi)解的東西，比如幀，元件等（我本人就怎么努力也無(wú)法學(xué)會(huì) Flash， 郁悶），完全可以將界面設(shè)計(jì)和邏輯實(shí)現(xiàn)分離開(kāi)來(lái)，使美工和程序員專(zhuān)注于自己的東西，相信這 也是大家所希望看到的。

其實(shí)? Flex? 2.0? 也不算是 太新的東西 ，在? Flex? 2.0? 之前已經(jīng) 有了? MacroMedia? Flex? 1.0? 和 MacroMedia? Flex? 1.5，不過(guò)國(guó)內(nèi)很少有人關(guān)注。Flex? 1.0 和 1.5 的性能都不是很好，編譯出來(lái)的 SWF 文件很大，而且? Flex Builder 1.5 是一個(gè)類(lèi)似于 Dreamweaver 的編輯器，狂占內(nèi)存，我的機(jī) 器配置又不是太先進(jìn)，用起來(lái)苦不堪言，調(diào)試的時(shí)候每每都要等上一段時(shí)間頁(yè)面才能編譯并顯 示出來(lái)。由于這些原因，大多數(shù)人對(duì) Flex 都只是觀(guān)望態(tài)度。但是 Adobe 收購(gòu)了 MacroMedia 之 后推出的 Flex 2.0 相對(duì)于 Flex 1.5 可以說(shuō)是一個(gè)全新的版本，是 Flex 的真正的起點(diǎn)。它使用了強(qiáng) 面向?qū)ο蟮墓δ軓?qiáng)大的 ActionScript 3.0 取代了以前的 ActionScript 版本，使得運(yùn)行效率大大提高， 編譯出來(lái)的 SWF 文件體積也縮小很多。而且 Adobe 摒棄了以前的 Flex? Builder，做了全新的基
于 Eclipse 的 Flex Builder 2.0，使得開(kāi)發(fā)環(huán)境改進(jìn)良多，提高了開(kāi)發(fā)者的體驗(yàn)（用起來(lái)確實(shí)舒服 多了，代碼提示等方面做的很不錯(cuò)，我可以證明? ^_^）。

Adobe Flex 2.0 可以稱(chēng)得上是最強(qiáng)大的 RIA（Rich Internet Application，富因特網(wǎng)應(yīng)用程序）開(kāi)發(fā) 工具。但是由于國(guó)內(nèi)比較落后，很多新技術(shù)出來(lái)好像都要等上幾年才能傳到國(guó)內(nèi)并且流行。怎 么辦？加強(qiáng)經(jīng)濟(jì)建設(shè)，加快改革開(kāi)放，使中國(guó)趕緊成為發(fā)達(dá)國(guó)家，讓人家做的軟件研究的技術(shù) 發(fā)行出來(lái)就有中文版的……? 不過(guò)這些好像純粹是幻想，至少近期是不可能了，沒(méi)有辦法，只好 去啃英文文檔。然而關(guān)于 Flex 的英文資料也不是很多，F(xiàn)lex 自帶的幫助是最好的文檔，而且看 英文文檔的效率是很低的，遠(yuǎn)不如看母語(yǔ)來(lái)的暢快。我深知其中痛楚，所以就想翻譯一些入門(mén) 的文章供大家參考，而最好的入門(mén)文章莫過(guò)于 Adobe Flex 開(kāi)發(fā)者中心的這些 Quick Starts。以后 我會(huì)逐步把它們翻譯出來(lái)，可能全部翻譯，也可能只翻譯其中一部分，我會(huì)把翻譯的所有這些 都做成 PDF 文件放到網(wǎng)上，算是對(duì)初學(xué)者的幫助，也是對(duì)自己的一種歷練（說(shuō)了那么多亂七八 糟的，現(xiàn)在才說(shuō)重點(diǎn)，發(fā)現(xiàn)自己廢話(huà)也夠多）。原文中的一些示例不能嵌入到 PDF 中，所以大家 如果想看代碼運(yùn)行情況，還請(qǐng)到原文中去找。另外，由于本人英語(yǔ)水平和技術(shù)水平極其有限， 審校工作也做得不好，書(shū)中出現(xiàn)錯(cuò)誤或者不妥之處在所難免，懇請(qǐng)并熱烈歡迎大家批評(píng)指正， 先謝謝大家。

雖然只是翻譯幾篇文章發(fā)出來(lái)，讀者也可能很少，但是我還是想在這里感謝幾個(gè)人（虛榮一下， 莫怪? ^_^），他們是我的兄弟們：冬瓜，小侯，雷子，張霄。雖然他們沒(méi)有對(duì)翻譯做任何貢獻(xiàn)而 且有可能問(wèn) Flex 是不是很好吃，但是他們是我的精神支柱和生活中的重要部分。謝謝你們，我 以你們?yōu)闃s。

使用 MXML 和 ActionScript 編程
Adobe?是把 Flex 作為一個(gè) ActionScript 類(lèi)庫(kù)實(shí)現(xiàn)的。這個(gè)類(lèi)庫(kù)包含了組件（容器
和控件），manager 類(lèi)，數(shù)據(jù)服務(wù)類(lèi)，以及具有其他特性的類(lèi)。你可以通過(guò)使用帶有 類(lèi)庫(kù)的 MXML 和 ActionScript 語(yǔ)言來(lái)開(kāi)發(fā)應(yīng)用程序。

MXML

MXML 是一個(gè)可以讓你在 Adobe? Flex?中布局用戶(hù)界面組件的一種 XML 語(yǔ)言。你也可 以使用 MXML 聲明來(lái)定義程序中的非可視化組件，比如對(duì)服務(wù)器端數(shù)據(jù)源的訪(fǎng)問(wèn)以及 用戶(hù)界面組件和數(shù)據(jù)源之間的數(shù)據(jù)綁定。
比如，你可以像下面這樣，使用＜mx:Button＞標(biāo)簽來(lái)創(chuàng)建 Button 控件的一個(gè)實(shí)例：
＜mx:Button? id="myButton"? label="I‘m? a? button!"/＞
這里通過(guò)設(shè)定 id 屬性賦予了這個(gè) Button 實(shí)例一個(gè)獨(dú)一無(wú)二的名字，你以后可以使 用這個(gè)名字來(lái)引用這個(gè)實(shí)例。而 label? 屬性用來(lái)設(shè)置顯示在這個(gè) Button 實(shí)例上的標(biāo) 簽內(nèi)容。

下面的例子展示了用來(lái)創(chuàng)建一個(gè)展示 Button 控件的 Flex 程序的完整代碼：
＜?xml? version="1.0"? encoding="utf-8"?＞
＜mx:Application
xmlns:mx=" http://www.adobe.com/2006/mxml "
horizontalAlign="center"? verticalAlign="center"＞

＜mx:Button? id="myButton"? label="I’m? a? button!"? /＞
＜/mx:Application＞

當(dāng)你編寫(xiě)完一個(gè) Flex 程序之后，你必須使用 Flex 編譯器編譯它。Flex 編譯器是一 個(gè)叫做? mxmlc 的小型執(zhí)行文件，它在你的 Flex? 2 安裝目錄下的 Flex? SDK? 2.0\bin 文件夾中。
提示：請(qǐng)確定 Flex? 2 安裝目錄\? Flex? SDK? 2.0\bin 文件夾在你的系統(tǒng)變量中。把 Flex 編譯器設(shè)定到你的系統(tǒng)變量中可以使你不管在哪個(gè)文件夾下都可以從命令行直
接調(diào)用它。

步驟：

1.? 用你喜歡的文本編輯器創(chuàng)建一個(gè)新的文件（比如，記事本）并把它保存為
MyFirst.mxml。

2.? 把前面例子中的代碼寫(xiě)入 MyFirst.mxml 中并保存文件。

3.? 通過(guò)選擇? 開(kāi)始? ＞? 所有程序? ＞? 附件? ＞? 命令提示符? ，打開(kāi)一個(gè)命令行窗口。
4.? 改變當(dāng)前的目錄，將它指向你在第一步中保存的 Flex 程序所在的文件夾。
5.? 敲入下面的命令來(lái)調(diào)用 Flex 編譯器：
mxmlc? --strict=true? --file-specs? MyFirst.mxml
命令行中以?xún)蓚€(gè)短劃線(xiàn)開(kāi)頭的兩個(gè)元素就是所謂的編譯器選項(xiàng)，它們被用來(lái) 定義 Flex 編譯器的行為。在上一個(gè)例子中，你把? –strict? 選項(xiàng)設(shè)為 true? 來(lái) 強(qiáng)制編譯器執(zhí)行 strict 模式。在 strict 模式中，編譯器對(duì)你的代碼有更嚴(yán) 格的檢查。比如，它會(huì)檢查你是否為變量定義了類(lèi)型。--file-specs 用來(lái)定 義需要編譯的 MXML 文件。
6.? 你可以在 Windows 資源管理器中雙擊 SWF 文件來(lái)運(yùn)行它，也可以在命令行中 輸入它的名字在獨(dú)立的 Adobe? Flash? Player? 9 中運(yùn)行它。

運(yùn)行結(jié)果圖示：

譯注：由于文檔中無(wú)法嵌入 SWF 文件，代碼運(yùn)行結(jié)果請(qǐng)查看原文中相應(yīng)的部分。

提示：你也可以使用Adobe Flex Builder 2 來(lái)創(chuàng)建和編譯你的Flex應(yīng)用程序。AdobeFlex Builder2是一個(gè)含有一個(gè)可視化設(shè)計(jì)視圖的開(kāi)發(fā)Flex的集成開(kāi)發(fā)環(huán)境（IDE）。 想要獲得更多關(guān)于Flex? Builder2的信息，請(qǐng)看使用? Flex? Builder2。

ActionScript
MXML 標(biāo)簽與 ActionScript 類(lèi)或者類(lèi)中的屬性是相對(duì)應(yīng)的。當(dāng)你編譯你的 Flex 應(yīng)用 程序的時(shí)候，F(xiàn)lex 解析你的 MXML 標(biāo)簽并且生成相應(yīng)的 ActionScript 類(lèi)。然后這些 ActionScript 類(lèi)會(huì)被編譯成 SWF 字節(jié)碼存儲(chǔ)到一個(gè) SWF 文件中。
提示：你可以把--keep-generated-actionscript? 選項(xiàng)添加到你的 mxmlc 命令行中， 來(lái)查看 Flex 生成的 ActionScript 中間文件。
繼續(xù)看上面的例子，F(xiàn)lex 提供了一個(gè)定義 Flex Button 控件的 ActionScript Button類(lèi)。
注意：在上面的例子中，＜mx:Button＞標(biāo)簽中的? mx 前綴是一個(gè)命名空間。它是通過(guò)
在 Application 標(biāo)簽中使用一個(gè)獨(dú)一無(wú)二的 URL 來(lái)聲明的。mx 前綴把在 mx 命名空間 中的每個(gè)組件映射到它的完全限定類(lèi)名。這就是為什么 Flex 編譯器可以在找到與 mx 命名空間中的 MXML 標(biāo)簽相對(duì)應(yīng)的 ActionScript 類(lèi)。
下面的例子展示了如何使用 ActionScript 來(lái)創(chuàng)建一個(gè) Button 控件。最后結(jié)果和前 面的 MXML 版本的結(jié)果是一樣的。

＜?xml? version="1.0"? encoding="utf-8"?＞
＜mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/GettingStartedActionScript/index.html"
creationComplete="creationCompleteHandler();"
width="300"? height="80"? ＞
?＜mx:Script＞
＜![CDATA[?
import? mx.controls.Button;?
import? mx.events.FlexEvent;
??private? var? myButton:Button;
??private? function? creationCompleteHandler():void
??{
//? 創(chuàng)建一個(gè) Button 實(shí)例并設(shè)置其標(biāo)簽
myButton? =? new? Button();
myButton.label? =? "I‘m? a? button!";
//一旦 button 組件創(chuàng)建完畢就要通知應(yīng)用程序并對(duì)布局進(jìn)行處理
myButton.addEventListener? (FlexEvent.CREATION_COMPLETE,
buttonCreationCompleteHandler);
//? 將? Button 實(shí)例添加到? DisplayList
addChild? (myButton);
}
private? function? buttonCreationCompleteHandler
(? evt:FlexEvent? ):void
{
//? 將按鈕居中顯示
myButton.x? =? parent.width/2? -? myButton.width/2;
myButton.y? =? parent.height/2? -? myButton.height/2;
}
]]＞?
＜/mx:Script＞?
＜/mx:Application＞

當(dāng)你通過(guò) ActionScript 來(lái)創(chuàng)建一個(gè) Flex 組件時(shí)，你必須導(dǎo)入這個(gè)組件的類(lèi)。你還
必須使用 addChild()方法將組件添加到程序的 DisplayList 中來(lái)使其可見(jiàn)。通過(guò)比 較這兩個(gè)等價(jià)的例子的長(zhǎng)度和復(fù)雜性，你可以發(fā)現(xiàn)這種簡(jiǎn)單的，基于標(biāo)簽的，而且 具有聲明式語(yǔ)法的 MXML 是如何使你避免編寫(xiě)很多行 ActionScript 代碼來(lái)布局組件 的。

運(yùn)行結(jié)果圖示：

譯注：由于文檔中無(wú)法嵌入 SWF 文件，代碼運(yùn)行結(jié)果請(qǐng)查看原文中相應(yīng)的部分。

注意：這個(gè)例子展示了如何在 Script 標(biāo)簽中編寫(xiě) ActionScript，這是在 Flex 程序 中包含 ActionScript 代碼的一種可行的方法。其它的方法是將 script 代碼塊分離 到外部 ActionScript 文件中或者使用外部的 ActionScript 類(lèi)。