在Flex控制元件中使用XMLListCollection

現在，應用程式已經通過 HTTPService 取得了資料，並將資料儲存在了一個 XMLListCollection 中。而目前唯一能夠知道應用程式可以正常工作的方式是使用偵錯程式。在下面這個練習中，我們會在應用程式中通過一個水平的列表來顯示類別資料。

(1) 開啟 FlexGrocer.mxml 檔案。

如果你沒有完成上一課中的練習，或者你的程式碼工作不正常，可以從 Lesson06/intermediate 資料夾中匯入 FlexGrocer-PreList.fxp 專案。附錄為跳過了某一課或者無法解決程式碼中問題的讀者提供了匯入專案的完整說明。

(2) 在應用程式的 controlBarContent 區域中新增一個 <s:List> 控制元件。可以在現有的幾個按鈕後面新增這個控制元件。

<s:controlBarContent>

   <s:Button id="btnCheckout" label="Checkout" right="10" y="10"/>

   <s:Button id="btnCartView" label="View Cart" right="90" y="10" click.

State1="handleViewCartClick( event )"/>

   <s:Button label="Flex Grocer" x="5" y="5"/>

   <s:List>

   </s:List>

</s:controlBarContent>

(3) 然後，指定這個 List 距控制條區域的左邊 200 畫素，高度為 40 畫素。

<s:List left="200" height="40">

</s:List>

(4) 指定這個 List 會使用 HorizontalLayout 。

<s:List left="200" height="40">

   <s:layout>

      <s:HorizontalLayout/>

   </s:layout>

</s:List>

前面我們對控制元件組使用了水平和垂直佈局，但 List 類也可以使用相同的物件來確定其子控制元件的排列方式。

(5) 接下來，將前面定義和填充的 categories 變數繫結到 List 例項的屬性 dataProvider 。

<s:List left="200" height="40" dataProvider="{categories}">

   <s:layout>

      <s:HorizontalLayout/>

   </s:layout>

</s:List>

這個語法告訴 Flex 框架，當發生 categories 屬性變化的事件時，列表需要從資料來源取得更新的資料，以便正確地響應。本書後面將經常用到 List 和 dataProvider 。

(6) 儲存並執行應用程式。

新建立的列表將橫跨在介面上方，其中的資料元素水平排列。然而，此時不僅顯示了類別名稱，還顯示了與類別相關的 XML 標籤。我們真正想要顯示的是 XML 的 <category> 節點包含的 <name/> 節點中的資料。

(7) 返回 FlexGrocer 應用程式，為列表新增一個名為 labelField 的屬性，將其值設定為 name 。

<s:List left="200" height="40" dataProvider="{categories}" labelField="name">

   <s:layout>

      <s:HorizontalLayout/>

   </s:layout>

</s:List>

這裡的 labelField 屬性用於告訴列表將資料來源中的哪個欄位（屬性）作為列表項的標籤。

(8) 儲存並執行應用程式。

這樣，列表中只顯示了類別名稱，下一課還將用到這些資料。