flex基礎(3)

新增一個定義咖啡品牌的陣列物件

本程式的資料模型是一個簡單的陣列（內容是一系列的物件），你可以直接在程式中用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>