創(chuàng)建我們的第一個(gè)程序

在這一節(jié)，我們將會(huì)演示如何在Adobe Flex Builder中編譯與運(yùn)行一個(gè)簡(jiǎn)單的Flex程序。在這一節(jié)，我們也會(huì)介紹Flex Builder工程的概念，并且展示如何創(chuàng)建工程。在Flex Builder中，所有的Flex程序都包含在工程中。

創(chuàng)建Lessons工程
在Flex Builder構(gòu)建一個(gè)Flex程序之前，我們必須創(chuàng)建一個(gè)工程。當(dāng)我們?cè)贔lex Builder中創(chuàng)建一個(gè)工程，就會(huì)為我們創(chuàng)建一個(gè)主要的MXML程序文件。我們可以向一個(gè)工程中添加資源，例如自定義的MXML組件文件，ActionScript文件，以及其他構(gòu)成我們Flex程序的資源。
1 啟動(dòng)Flex Builder，從主菜單中選擇File>New>Flex Project。
如果我們有Flex Builder的插件配置，并且我們?cè)诖蜷_的Eclipse中是非Flex Builder視圖，選擇New>Other>Flex>Flex Project。
向?qū)?huì)指引我們完成工程創(chuàng)建步驟。
2 在打開的屏幕中，選擇基本數(shù)據(jù)選項(xiàng)（第一個(gè)選項(xiàng)），點(diǎn)擊下一步。
下一個(gè)屏幕會(huì)詢問(wèn)我們指定工程的名字以及其存放位置。
3 在工程名字輸入框，輸入Lessons。
這是我們工程的名字。當(dāng)我們創(chuàng)建一個(gè)工程，F(xiàn)lex Builder會(huì)基于這個(gè)工程名生成一個(gè)主要的MXML程序文件。因?yàn)橐粋€(gè)主要的程序文件使用相同的名字，所以我們?cè)诠こ堂胁灰褂每崭衽c特殊字符。
4 在工程內(nèi)容區(qū)，確保選擇了使用默認(rèn)位置。
我們工程文件的默認(rèn)位置位于下面的目錄中：
Windows: C:\Documents and Settings\user_name\My Documents\Flex Builder 2

Macintosh: \Users\user_name\Documents\Flex Builder 2

Flex Builder會(huì)在這個(gè)位置為我們創(chuàng)建Lessons目錄。
下圖顯示了一個(gè)新Flex工程向?qū)В?

5 點(diǎn)擊完成
Flex Builder會(huì)創(chuàng)建一個(gè)新工程，并且在瀏覽視圖中顯示。

新Flex工程會(huì)自動(dòng)生成工程的配置文件，存放編譯的SWF文件的輸出目錄(bin),主要的程序文件Lessons.mxml。
6 確保在Flex Builder中允許了自動(dòng)構(gòu)建選項(xiàng)。
這個(gè)選項(xiàng)在獨(dú)立配置的Flex Builder中是默認(rèn)打開的，但是在插件配置中并不是這樣。我們可以選擇Project>Build Automatically打開自動(dòng)構(gòu)建選項(xiàng)。

了解Flex Builder中的編譯
在我們使用Flex Builder編譯與運(yùn)行一個(gè)程序之前，瀏覽一些關(guān)鍵內(nèi)容是很有幫助的。
在默認(rèn)情況下，獨(dú)立配置的Flex Builder會(huì)在我們向工程中添加了一個(gè)文件或者是我們編輯之后保存工程文件時(shí)自動(dòng)編譯或是構(gòu)建程序。自動(dòng)構(gòu)建在Flex Builder的插件配置中默認(rèn)是不允許的，但是我們可以通過(guò)選擇Project>Builder Automatically來(lái)打開這個(gè)選項(xiàng)。
在構(gòu)建程序之后，F(xiàn)lex Builder會(huì)將生成的SWF文件放在bin目錄中，這是編譯的文件所存放的默認(rèn)目錄。

如果我們要在瀏覽器中運(yùn)行這個(gè)SWF文件，F(xiàn)lex Builder同時(shí)也會(huì)這個(gè)SWF文件生成一個(gè)HTML封裝文件，在這種情況下是Lessons.html。

當(dāng)我們創(chuàng)建了一個(gè)工程，F(xiàn)lex Builder會(huì)創(chuàng)建一個(gè)主要的程序文件，并且會(huì)基于工程名為之命名。一個(gè)程序文件是一個(gè)具有<mx:Application>父標(biāo)簽的MXML文件。我們的工程可以有多個(gè)程序文件，但是主要的程序文件是Flex Builder在構(gòu)建過(guò)程中編譯進(jìn)入SWF文件的文件。我們可以設(shè)計(jì)另一個(gè)要構(gòu)建的主要程序文件，但是在每一個(gè)工程中只有一個(gè)主要程序文件是一個(gè)很好的習(xí)慣。
但是我們已經(jīng)了解了在Flex Builder中編譯程序的基本概念，我們可以在Flex Builder創(chuàng)建一個(gè)小的程序，然后進(jìn)行編譯與運(yùn)行。

創(chuàng)建與運(yùn)行程序
在這一部分我們認(rèn)為我們已經(jīng)創(chuàng)建了Lessons工程，并且打開了自動(dòng)構(gòu)建選項(xiàng)。
1 如果Lessons.mxml文件沒有打開，在瀏覽視圖中雙擊打開這個(gè)文件。
2 通過(guò)點(diǎn)擊文件工具欄的Source按鈕切換到MXML編輯器的代碼模式。

當(dāng)創(chuàng)建這個(gè)文件時(shí)Flex Builder會(huì)在Lessons.mxml文件插入下面的代碼：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="absolute">
</mx:Application>

3 通過(guò)在<mx:Application>標(biāo)簽中加入<mx:Panel>標(biāo)簽添加一個(gè)面板容器。
<mx:Panel title="My Application" width="200" height="300">
</mx:Panel>

面板容器是許多Flex布局中基本的構(gòu)建塊。
4 通過(guò)添加<mx:Label>標(biāo)簽添加一個(gè)標(biāo)簽。
<mx:Label text="Welcome to Flex!" mouseDownEffect="WipeRight"/>

最終的程序文件如下面的樣子所示：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="absolute">
??? <mx:Panel title="My Application" width="200" height="300">
??????? <mx:Label text="Welcome to Flex!" mouseDownEffect="WipeRight"/>
??? </mx:Panel>
</mx:Application>

5 保存文件
當(dāng)我們保存一個(gè)文件時(shí)，F(xiàn)lex Builder會(huì)自動(dòng)構(gòu)建這個(gè)程序。我們將會(huì)在窗口的右下角察看編譯過(guò)程。在程序構(gòu)建時(shí)我們?nèi)钥梢岳^續(xù)工作。

6 在構(gòu)建完成之后，點(diǎn)擊工具欄的Run按鈕來(lái)運(yùn)行這個(gè)程序。如果使用Flex Builder的插件配置，選擇Run>Run As>Flex Application。

這樣就會(huì)打開一個(gè)瀏覽器來(lái)運(yùn)行我們的程序。

7 點(diǎn)擊"Welcome to Flex"來(lái)查看效果。