創建我們的第一個程序

在這一節，我們將會演示如何在Adobe Flex Builder中編譯與運行一個簡單的Flex程序。在這一節，我們也會介紹Flex Builder工程的概念，并且展示如何創建工程。在Flex Builder中，所有的Flex程序都包含在工程中。

創建Lessons工程
在Flex Builder構建一個Flex程序之前，我們必須創建一個工程。當我們在Flex Builder中創建一個工程，就會為我們創建一個主要的MXML程序文件。我們可以向一個工程中添加資源，例如自定義的MXML組件文件，ActionScript文件，以及其他構成我們Flex程序的資源。
1 啟動Flex Builder，從主菜單中選擇File>New>Flex Project。
如果我們有Flex Builder的插件配置，并且我們在打開的Eclipse中是非Flex Builder視圖，選擇New>Other>Flex>Flex Project。
向導會指引我們完成工程創建步驟。
2 在打開的屏幕中，選擇基本數據選項（第一個選項），點擊下一步。
下一個屏幕會詢問我們指定工程的名字以及其存放位置。
3 在工程名字輸入框，輸入Lessons。
這是我們工程的名字。當我們創建一個工程，Flex Builder會基于這個工程名生成一個主要的MXML程序文件。因為一個主要的程序文件使用相同的名字，所以我們在工程名中不要使用空格與特殊字符。
4 在工程內容區，確保選擇了使用默認位置。
我們工程文件的默認位置位于下面的目錄中：
Windows: C:\Documents and Settings\user_name\My Documents\Flex Builder 2

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

Flex Builder會在這個位置為我們創建Lessons目錄。
下圖顯示了一個新Flex工程向導：

5 點擊完成
Flex Builder會創建一個新工程，并且在瀏覽視圖中顯示。

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

了解Flex Builder中的編譯
在我們使用Flex Builder編譯與運行一個程序之前，瀏覽一些關鍵內容是很有幫助的。
在默認情況下，獨立配置的Flex Builder會在我們向工程中添加了一個文件或者是我們編輯之后保存工程文件時自動編譯或是構建程序。自動構建在Flex Builder的插件配置中默認是不允許的，但是我們可以通過選擇Project>Builder Automatically來打開這個選項。
在構建程序之后，Flex Builder會將生成的SWF文件放在bin目錄中，這是編譯的文件所存放的默認目錄。

如果我們要在瀏覽器中運行這個SWF文件，Flex Builder同時也會這個SWF文件生成一個HTML封裝文件，在這種情況下是Lessons.html。

當我們創建了一個工程，Flex Builder會創建一個主要的程序文件，并且會基于工程名為之命名。一個程序文件是一個具有<mx:Application>父標簽的MXML文件。我們的工程可以有多個程序文件，但是主要的程序文件是Flex Builder在構建過程中編譯進入SWF文件的文件。我們可以設計另一個要構建的主要程序文件，但是在每一個工程中只有一個主要程序文件是一個很好的習慣。
但是我們已經了解了在Flex Builder中編譯程序的基本概念，我們可以在Flex Builder創建一個小的程序，然后進行編譯與運行。

創建與運行程序
在這一部分我們認為我們已經創建了Lessons工程，并且打開了自動構建選項。
1 如果Lessons.mxml文件沒有打開，在瀏覽視圖中雙擊打開這個文件。
2 通過點擊文件工具欄的Source按鈕切換到MXML編輯器的代碼模式。

當創建這個文件時Flex Builder會在Lessons.mxml文件插入下面的代碼：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="absolute">
</mx:Application>

3 通過在<mx:Application>標簽中加入<mx:Panel>標簽添加一個面板容器。
<mx:Panel title="My Application" width="200" height="300">
</mx:Panel>

面板容器是許多Flex布局中基本的構建塊。
4 通過添加<mx:Label>標簽添加一個標簽。
<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 保存文件
當我們保存一個文件時，Flex Builder會自動構建這個程序。我們將會在窗口的右下角察看編譯過程。在程序構建時我們仍可以繼續工作。

6 在構建完成之后，點擊工具欄的Run按鈕來運行這個程序。如果使用Flex Builder的插件配置，選擇Run>Run As>Flex Application。

這樣就會打開一個瀏覽器來運行我們的程序。

7 點擊"Welcome to Flex"來查看效果。