|
添加一個定義咖啡品牌的數(shù)組對象
本程序的數(shù)據(jù)模型是一個簡單的數(shù)組（內容是一系列的對象），你可以直接在程序中用Array和Object元素創(chuàng)建。這里每個數(shù)組單元對象都有兩個屬性：label和data，你可以將這兩個屬性寫成對象的子標簽。用這兩個屬性名稱是為了提供給ComboBox和List這樣的控件元素使用，稍后我們會介紹。
這些控件元素可以使用更加復雜的數(shù)據(jù)對象，但是既然現(xiàn)在是手工創(chuàng)建數(shù)據(jù)模型，我們就使用簡單的形式。通常的語法是：
<mx:Array id="identifier">
<mx:Object>
<label>literal string</label>
<data>another literal string</data>
</mx:Object>
</mx:Array>
留意這里的ID屬性。ID幾乎是所有Flex元素都具備的屬性，它將元素“貼”上標志以區(qū)分其他元素。如果你要在數(shù)據(jù)綁定或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功能，而且更加強大。需顯示的數(shù)組由dataProvider屬性指定。你可以在dataProvider標簽中直接創(chuàng)建數(shù)組，但是更為常用的方法是在別處創(chuàng)建或導入一個數(shù)組，然后在dataProvider處指定：
<mx:ComboBox id="myCombo" dataProvider="{myArray}"/>
這里的大括號告訴編譯器：里面是一個變量或者代求算的變量，而不是字符串。
如果對象包含label和data屬性，他們會自動按顯示數(shù)據(jù)（label）和關聯(lián)數(shù)據(jù)（data）區(qū)分，data可以是簡單的值，也可以是復雜的類型（如對象）。如果對象既沒有l(wèi)abel屬性也沒有data屬性，那么整個對象將作為data屬性，而label屬性則為由ComboBox的labelField屬性指定的對象屬性。例如ComboBox的labelField值為"name"，那么label的值就為對象的name屬性。
8. 在Label之后添加一個ComboBox，id取為coffeeComb，使用dataProvider屬性將CombBox綁定到上一步創(chuàng)建的coffeeArray數(shù)組：
<mx:ComboBox id="coffeeCombo" dataProvider="{coffeeArray}"/>
添加一個顯示說明的Text(文本)控件
Text控件與Label相似，不同的是它可以顯示多行數(shù)據(jù)。這里我們用它來顯示ComboBox中選中的咖啡品牌的說明。這里要用到ComboBox中選擇的項目的data屬性。
9. 在ComboBox之后，添加一個帶有text屬性的文本控件，將text屬性設置為“Description:”然后加上一個到ComboBox選擇項目的data屬性的綁定：
<mx:Text text="Description: {coffeeCombo.selectedItem.data}"/>
添加一個增加咖啡品牌到購物欄的按鈕
Button控件很簡單。它有一個label的屬性來設置顯示的文字，還有一個click事件，用來指定鼠標點擊事件的處理動作。
在這里，我們添加一個按鈕，通過調用一個addToCart函數(shù)，把ComboBox中選擇的項目添加到購物欄中。我們將在后面創(chuàng)建這個函數(shù)。
10. 添加一個顯示“Add to Cart”的按鈕，被點擊后調用addToCart函數(shù)：
<mx:Button label="Add to Cart" click="addToCart()"/>
給購物車添加一個List（列表）控件
List控件和ComboBox唯一的區(qū)別是它能同時顯示和選擇多條項目。這里用的List不需要指定dataProvider屬性了，因為它在用戶添加數(shù)據(jù)前是空的。
11. 在按鈕之后，添加一個List控件，id取為cart:
<mx:List id="cart"/>
添加一段處理按鈕點擊事件的腳本
教程的最后一步是添加一段ActionScript腳本，用來處理按鈕的點擊事件。在這個簡單的應用程序中，我們在Script標簽中添加腳本。
Script標簽中的ActionScript代碼將被包含在 <![CDATA[ ]]> 里面，這個標志里面的內容不被XML解析器解析。這個是標準的XML用法，在這里是為了保護ActionScript的一些可能會被XML解析器誤處理的一些字符（如<等），實際上這樣不僅保護了這些字符，也省去了XML解析器解析ActionScript內容。
這里用到的ActionScript語法很簡單，函數(shù)的通常語法是：
function 函數(shù)名(參數(shù)1:數(shù)據(jù)類型...):返回數(shù)據(jù)類型
{
[ActionScript 語句]
}
在addToCart函數(shù)中，使用List類的addItem方法添加項目。該方法需要有l(wèi)abel參數(shù)和data參數(shù)，這些參數(shù)正好是ComboBox中選中的項目的label屬性和data屬性。
12. 在Array標簽之后，插入一個帶有CDATA包裝的Script標簽：
<mx:Script>
<![CDATA[]]>
</mx:Script>
13. 在CDATA里面，添加一個名為addToCart不返回任何值的函數(shù)：
function addToCart():Void
{
}
14. 在函數(shù)體內部，使用List類的addItem方法將ComboBox中所選項目label屬性和data屬性添加到List上。
cart.addItem(coffeeCombo.selectedItem.label,coffeeCombo.selectedItem.data);
15. 保存文件，在瀏覽器中預覽應用程序 （查看瀏覽MXML文件的方法見第一頁）
出處：藍色理想
責任編輯：藍色
上一頁 Flex 入門教程 [3] 下一頁 Flex 入門教程 [5]
◎進入論壇Flash專欄版塊參加討論
|
第 1 頁 
第 4 頁 Flex 入門教程 [4]
