Macromedia Flex 教程: Flex入門

建立第一個Flex應用程式

作者：Robert Crooks (Macromedia培訓小組)
翻譯：MoonFun.qhwa

轉載請註明來自藍色理想

在本教程中，你可以閱讀到Flex的簡單介紹，還可以利用MXML建立一個簡單的分類購物車，從而學習到Macromedia Flex應用程式的基本構成。你將會學到：建立一個應用程式、添加一個布局的容器、添加控制項、建立與控制項關聯的簡單資料模型，以及利用ActionScript對事件進行處理。

本文是Robert Crooks編寫的四步Flex入門系列的第一部分，Robert Crooks現就職於Macromedia客戶培訓部門

Flex 入門 （2）：建立一個Flex計算機
Flex 入門 （3）：使用容器
Flex 入門 （4）：使用資料模型

點擊這裡下載整個系列教程： Flex入門系列(144KB)

如果你需要更加詳細的資訊，Macromedia客戶培訓小組提供了為期兩天的線上培訓課程：《利用Flex開發豐富的互連網應用程式》，教你快速學習Flex應用程式開發。 讓我們開始吧！

如果你是一個XML新手，請記住下面的基本規則

如同所有的XML語言一樣，在MXML中，標籤和屬性都是區分大小寫；
所有的屬性值必須用雙引號(")或單引號(包含

所有的標籤必須是閉合的。沒有子標籤的標籤可以以斜杠直接結束，而無需額外的結束標籤：

<mx:Label text="Hello"></mx:Label>

或

<mx:Label text="Hello"/>

如果你是一個ActionScript新手，你可以發現它的文法和你熟悉的語言的文法很相近，比如JavaScript或者Java。請記住這些基本的規則：

ActionScript是區分大小寫
語句必須以分號(;)結尾

本教程包含的內容：

1. Flex簡單介紹
2. 如何使用Application (應用程式)標籤
3. 如何使用Panel (面板)容器
4. 如何使用Label (標籤)控制項
5. 如何使用Text (文本)控制項
6. 如何使用Button (按鈕)控制項
7. 如何使用ComboBox (下拉式清單)控制項
8. 如何建立一個數組對象
9. 如何綁定資料到控制項對象
10. 如何用ActionScript處理使用者事件

準備條件：

完成本教程必須具備的軟體和檔案：

Macriomedia Flex

（可以在Flex支援的平台和伺服器上安裝運行）試用版的Flex只有光碟片供應，請從Macromedia銷售處購買，售價$8.99. 試用版的相關資訊，請訪問: Flex常見問題

試用 購買

Dreamweaver MX 2004 或其他文字編輯器（例如記事本），用來編輯XML和ActionScript代碼

試用 購買

準備知識：

閱讀Flex簡介
會瀏覽一個Flex應用程式

Flex 簡介

Macromedia Flex 是一個用來建立豐富資訊的互連網應用程式的伺服器組件。Flex內建的介面可以由Macromeida Flash播放器顯示在用戶端系統上。Flex的本質是：

• 一個描述應用程式介面的XML語言 (MXML)
• 一個ECMA規範的指令碼語言(ActionScript)，處理使用者和系統的事件，構建複雜的資料模型
• 一個類庫
• 運行時的即時服務
• 一個由MXML檔案產生SWF檔案的編譯器

MXML

MXML是一種描述Flex應用程式構造的XML1.0語言。每個MXML檔案應該以一個XML聲明開始：<?xml version="1.0"?>

和其他XML語言一樣，MXML包含元素（標籤）和屬性，對大小寫敏感。標籤名稱以大寫字母開頭，大小寫混合，必須有對應的結束標籤：
<ComboBox></ComboBox>

也可以這樣結束對沒有內容的標籤：
<ComboBox/>

屬性以小寫字母開頭，大小寫混合。屬性必須包含在引號內。
<ComboBox id="myCombo"/>

除了click或initialize之類的事件之外，所有的屬性都被編譯器作為文本字串處理。如果需要綁定資料或者強迫編譯器執行運算式，可以將變數的部分用花括弧包起來：
<ComboBox dataProvider="{myArray}"/>

大部分的屬性都可以作為子標籤：
<ComboBox dataProvider="{myArray}"/>
等效於：
<ComboBox> <dataProvider>{myArray}</dataProvider> </ComboBox>

描述應用程式的MXML檔案必須有一個位於其他元素之外的Application元素：
<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
  [other elements...] 
</mx:Application>

注意xmlns屬性，它聲明了XML的命名空間。命名空間可以讓你在單個文檔中使用多重XML語言而避免混淆不同語言中相同的元素名稱。這裡的":mx"就是一個在特定命名空間中使用的首碼。

注意：這裡定義的命名空間是標準的MXML類庫，請將它包含在每個MXML檔案中。

可以將聲明放在任何MXML標籤中；聲明對該標籤嵌套的所有標籤有效。本系列教程中都以mx作為MXML類庫的首碼。

如需更多資訊，請參閱 Flex語言參考

ActionScript

ActionScript是一種類似JavaScript和其他ECMA規範的物件導向的指令碼語言。如果你使用過JavaScript或Java/C#等其他物件導向的語言，你可以發現它們的文法很相似。你可以在MXML檔案中嵌入ActionScript代碼，也可以從獨立的外部檔案匯入代碼。

完整的ActionScript參考： Action 語言參考

MXML類庫

Flex既包含控制和容器等可見的組件，也包括了遠程服務物件和資料模型等的不可見組件。你可以在後面的介紹中得到詳細的資訊。

運行時服務

Flex提供了多項運行時服務，如：曆史控制和遠程服務連線物件。以開發的角度看，這些服務都是對類庫的調用。

編譯器

Flex編譯器會在收到一個瀏覽器訪問MXML檔案的請求後，自動編譯產生相應的SWF檔案。該SWF檔案將被緩衝，直到你修改了源MXML檔案。

建立應用程式

在這個簡單的購物車中，我們顯示一個咖啡品牌的列表（類似於HTML的select）。使用資料繫結功能在下面顯示當前選擇的品牌的說明，還有一個添加到購物車的按鈕，當按鈕被按下後，該品牌的咖啡便會被添加到購物列表中。

圖1. 教程建立的Flex應用程式

這個教程的目的是為了學習使用：

Application (應用程式)類
Panel (面板)容器
Script (指令碼)元素
Array (數組)元素
Object (對象)元素
Label (標籤)元素
Text (文字框)元素
Button (按鈕)控制項
ComboBox (下拉式清單)控制項
List (列表)控制項
一個ActionScript函數

建立Application（應用程式）對象

任何一個Flex程式都是以XML聲明開始和Application標記的。Application標籤包含一個MX類庫命名空間的聲明：xmlns:mx="http://www.macromedia.com/2003/mxml" 。引用該類庫的所有標籤必須以mx作為首碼。

1. 建立一個新檔案 ，然後儲存為 firstapp.mxml，位於flex_tutorials目錄下
2. 在檔案的開始處，插入XML聲明：
<?xml version="1.0"?>
3. 在XML聲明後，添加帶命名空間的Application標籤：
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
</mx:Application>

應用程式布局：添加一個面板

通常你可以將Flex應用程式中可見的組件放置於容器中，容器提供了綁定文本、控制項、映像和其他媒體類型的元素。在這裡，你可以使用稱為“面板”(Panel)的容器，它可以提供大部分應用程式需要的全部外殼。你還可以使用面板的title(標題)屬性，修改面板上方自動包含著的標題欖的文字。

4. 在Application標籤內部，添加一個Panel標籤，title屬性為"my First Flex App"

<mx:Panel title="My First Flex App">
</mx:Panel>

添加一個顯示標題的Label元素

Label元素可以用來顯示單行文本。它有一些屬性，這裡用到的是text（文本）屬性，定義Label顯示的內容。

5. 在Panel標籤內，插入一個帶有文字屬性的Label標籤，如下：<mx:Label text="Coffee Blends"/>

6. 儲存檔案，預覽一下程式

添加一個定義咖啡品牌的數組對象

本程式的資料模型是一個簡單的數組（內容是一系列的對象），你可以直接在程式中用Array和Object元素建立。這裡每個數組單元對象都有兩個屬性：label和data，你可以將這兩個屬性寫成對象的子標籤。用這兩個屬性名稱是為了提供給ComboBox和List這樣的控制項元素使用，稍後我們會介紹。

這些控制項元素可以使用更加複雜的資料對象，但是既然現在是手工建立資料模型，我們就使用簡單的形式。通常的文法是：

<mx:Array id="identifier">
  <mx:Object>
      <label>literal string</label>
      <data>another literal string</data>
  </mx:Object>
</mx:Array>

留意這裡的ID屬性。ID幾乎是所有Flex元素都具備的屬性，它將元素“貼”上標誌以區分其他元素。如果你要在資料繫結或ActionScript中使用這個元素，最好給它指定一個ID。

隱藏元素可以由你隨意擺放，但是把他們放到程式的首部--即可見元素的前面--是一個好習慣。

<mx:Array id="coffeeArray">
 <mx:Object>
  <label>Red Sea</label>
  <data>Smooth and fragrant</data>
 </mx:Object>
 <mx:Object>
  <label>Andes</label>
  <data>Rich and pungent</data>
 </mx:Object>
 <mx:Object>
 <label>Blue Mountain</label>
 <data>Delicate and refined</data>
 </mx:Object>
</mx:Array>

添加一個顯示咖啡品牌的ComboBox

Flex的ComboBox類似於HTML的select功能，而且更加強大。需顯示的數組由dataProvider屬性指定。你可以在dataProvider標籤中直接建立數組，但是更為常用的方法是在別處建立或匯入一個數組，然後在dataProvider處指定：

<mx:ComboBox id="myCombo" dataProvider="{myArray}"/>

這裡的大括弧告訴編譯器：裡面是一個變數或者代求算的變數，而不是字串。

如果對象包含label和data屬性，他們會自動按顯示資料（label）和關聯資料（data）區分，data可以是簡單的值，也可以是複雜的類型（如對象）。如果對象既沒有label屬性也沒有data屬性，那麼整個對象將作為data屬性，而label屬性則為由ComboBox的labelField屬性指定的對象屬性。例如ComboBox的labelField值為"name"，那麼label的值就為對象的name屬性。

8. 在Label之後添加一個ComboBox，id取為coffeeComb，使用dataProvider屬性將CombBox綁定到上一步建立的coffeeArray數組：

<mx:ComboBox id="coffeeCombo" dataProvider="{coffeeArray}"/>

添加一個顯示說明的Text(文本)控制項

Text控制項與Label相似，不同的是它可以顯示多行資料。這裡我們用它來顯示ComboBox中選中的咖啡品牌的說明。這裡要用到ComboBox中選擇的項目的data屬性。

9. 在ComboBox之後，添加一個帶有text屬性的文本控制項，將text屬性設定為“Description:”然後加上一個到ComboBox選擇項目的data屬性的綁定：

<mx:Text text="Description: {coffeeCombo.selectedItem.data}"/>

添加一個增加咖啡品牌到購物欄的按鈕

Button控制項很簡單。它有一個label的屬性來設定顯示的文字，還有一個click事件，用來指定滑鼠點擊事件的處理動作。

在這裡，我們添加一個按鈕，通過調用一個addToCart函數，把ComboBox中選擇的項目添加到購物欄中。我們將在後面建立這個函數。

10. 添加一個顯示“Add to Cart”的按鈕，被點擊後調用addToCart函數：

<mx:Button label="Add to Cart" click="addToCart()"/>

給購物車添加一個List（列表）控制項

List控制項和ComboBox唯一的區別是它能同時顯示和選擇多條項目。這裡用的List不需要指定dataProvider屬性了，因為它在使用者添加資料前是空的。

11. 在按鈕之後，添加一個List控制項，id取為cart:

<mx:List id="cart"/>

添加一段處理按鈕點擊事件的指令碼

教程的最後一步是添加一段ActionScript指令碼，用來處理按鈕的點擊事件。在這個簡單的應用程式中，我們在Script標籤中添加指令碼。

Script標籤中的ActionScript代碼將被包含在 <![CDATA[  ]]> 裡面，這個標誌裡面的內容不被XML解析器解析。這個是標準的XML用法，在這裡是為了保護ActionScript的一些可能會被XML解析器誤處理的一些字元（如<等），實際上這樣不僅保護了這些字元，也省去了XML解析器解析ActionScript內容。

這裡用到的ActionScript文法很簡單，函數的通常文法是：

function 函數名(參數1:資料類型...):返回資料類型
{
 [ActionScript 語句]
}

在addToCart函數中，使用List類的addItem方法添加項目。該方法需要有label參數和data參數，這些參數正好是ComboBox中選中的項目的label屬性和data屬性。

12. 在Array標籤之後，插入一個帶有CDATA封裝的Script標籤：

<mx:Script>
  <![CDATA[]]>
</mx:Script>

13. 在CDATA裡面，添加一個名為addToCart不返回任何值的函數：

function addToCart():Void
{
}

14. 在函數體內部，使用List類的addItem方法將ComboBox中所選項目label屬性和data屬性添加到List上。

cart.addItem(coffeeCombo.selectedItem.label,coffeeCombo.selectedItem.data);

15. 儲存檔案，在瀏覽器中預覽應用程式 （查看瀏覽MXML檔案的方法見第一頁）

 

firstapp.mxml完整的代碼：

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" >
 <!-- data model -->
 <mx:Array id="coffeeArray">
  <mx:Object>
   <label>Red Sea</label>
   <data>Smooth and fragrant</data>
  </mx:Object>
  <mx:Object>
   <label>Andes</label>
   <data>Rich and pungent</data>
  </mx:Object>
  <mx:Object>
   <label>Blue Mountain</label>
   <data>Delicate and refined</data>
  </mx:Object>
 </mx:Array>
 <mx:Script>
  <![CDATA[
   function addToCart():Void
   {
    cart.addItem(coffeeCombo.selectedItem.label,coffeeCombo.selectedItem.data);
   }
  ]]>
 </mx:Script>
 <!-- view -->
 <mx:Panel title="My First Flex App">
  <mx:Label text="Coffee Blends"/>
  <mx:ComboBox id="coffeeCombo" dataProvider="{coffeeArray}"/>
  <mx:Text text="Description: {coffeeCombo.selectedItem.data}"/>
  <mx:Button label="Add to Cart" click="addToCart()"/>
  <mx:List id="cart"/>
 </mx:Panel>
</mx:Application>

進一步學習

在這個簡單的例子中，我們學習了Flex的一些核心元素：容器、控制項、資料模型、資料繫結和事件處理。你可以繼續看本系列教程：

Flex 入門 （2）：建立一個Flex計算機
Flex 入門 （3）：使用容器
Flex 入門 （4）：使用資料模型

你也可以下載整個教程：Flex入門(1-4)。