DataGroup 與 List

DataGroup類別與list類別一樣都是使用在多筆資訊顯示的目的，它們兩者都可以透過資料提供者(dataProvider)來做資料的綁定，但它們也有些許的不同，像是List可以管理清單中被點擊的部分，透過API得知誰被點選了。

簡單的DataProvider使用方法

<s:List x="10"         y="10"         dataProvider="{this.dp}"         labelField="name"         itemRenderer="NavigationItem"> </s:List>

我們觀看上面有幾個部分必須說明的 :

首先是dataProvider部分，在這個例子中我們綁定的對象dp它是一個ArrayCollection類別，我們在一開始對它進行初始化的工作，然後使用資料綁定的方式將它綁定到List元件上，初始化的方式如下 :

<fx:Script>     <![CDATA[         import mx.collections.ArrayCollection;         [Bindable]         private var dp:ArrayCollection;         private function initDataSource():void         {             var array:Array=new Array();             var o1:Object=new Object();             o1.name="String1";             o1.address="Address1"             var o2:Object=new Object();             o2.name="String2";             o2.address="Address2"             var o3:Object=new Object();             o3.name="String3";             o3.address="Address3"             array.push(o1);             array.push(o2);             array.push(o3);             dp=new ArrayCollection(array);         }     ]]> </fx:Script>

在來是labelField的部分，這個屬性用來指定我們的List將要顯示綁定資料的哪個屬性，例如我們指定labelField為name，那麼最後在List顯示的將會是Object.name屬性。

也許大家會有個疑問，那假設要顯示多種資訊怎麼辦，是的!!有這個問題存在，因此Flex在這個部分還提供了另一個方式來指定顯示的屬性，它叫做labelFunction，透過自定義的函式我們可以自己定義將要顯示的格式，例如 :

<s:List x="130"         y="10"         dataProvider="{this.dp}"         labelFunction="mutiview"> </s:List>

protected function mutiview(item:Object):String {     return item.name + " " + item.address; }

在來是itemRenderer的屬性，有時候我們可能不想要內建的樣式(Label)來顯示我們List中的資料，因此Flex提供了一個更厲害的機制(與Android自定義xml方式雷同)，我們可以使用自己定義好的格式將資料綁定到相對應的元件上，這個用來處理要怎麼樣顯示List元件就叫做ItemRenderer，以本例為例子，我們實作了一個名為NavigationItem的ItemRenderer，然後List就會依這個格式顯示我們的資訊。

NavigationItem.mxml

<?xml version="1.0" encoding="utf-8"?> <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"                 xmlns:s="library://ns.adobe.com/flex/spark"                 xmlns:mx="library://ns.adobe.com/flex/mx">     <s:layout>         <s:VerticalLayout horizontalAlign="center"/>     </s:layout>     <s:Image width="93"              height="31"              scaleMode="stretch"              source="assets/195283_100000398385599_2595823_n.jpg"/>     <s:Label text="{this.data.name}"/> </s:ItemRenderer>

大致上List與DataGroup基本的使用方式為上面所講的這樣囉!!