有 道是:”出來(lái)混的，遲早都要還的~” [原文出自-無(wú)間道]，前幾天答應(yīng) Flex 班上同學(xué)要幫他在 Blog 上寫(xiě)如何使用 Tree Control ，說(shuō)到總是要做到，所以趕快在今天先寫(xiě)一個(gè)最基礎(chǔ)的 Tree Control 的用法，再陸續(xù)補(bǔ)完使用技巧跟事件整合的部份。

說(shuō)到 Controls 就會(huì)想到它的資料來(lái)源 dataProvider ，每一種 Controls 所使用的資料來(lái)源皆不相同，有的用 ArrayCollection 有的用 Object ，而 Tree 則使用了最容易表現(xiàn)資料樹(shù)狀結(jié)構(gòu)的 XML 資料，當(dāng)然其他 XML 系列的例如 XMLList 也是可以作為資料來(lái)源的，接下來(lái)我們來(lái)示範(fàn)一下該如何將一個(gè) XML 的資料當(dāng)作 Tree Control 的資料來(lái)源。

像是這樣的樹(shù)狀組織結(jié)構(gòu)就還蠻適合用 Tree 來(lái)表示的，這時(shí)只要做一個(gè) XML 的資料給他就可以了，你可以獨(dú)立產(chǎn)生一個(gè) XML 的檔案，再?gòu)耐獠孔x入進(jìn)來(lái)，或者是直接在 Flex 中使用 <mx:XML> 標(biāo)籤來(lái)描述這些資料，在這篇中我們選用 <mx:XML> 的方式來(lái)形容樹(shù)狀結(jié)構(gòu)，其寫(xiě)法可寫(xiě)為：


 <mx:XML id="treeData">
  <node label="公司組織">
   <node label="行銷部">
    <node label="行銷處長(zhǎng)"/>
    <node label="行銷經(jīng)理"/>
       <node label="行銷專員"/>
   </node>
   <node label="資訊部">
       <node label="資訊處長(zhǎng)"/>
       <node label="資訊經(jīng)理"/>
   </node>
  </node>
    </mx:XML>

描寫(xiě)完再交由 Tree 來(lái) Binding 就可以了，怎麼樣，夠簡(jiǎn)單吧，由於我們要取用的資料是 <node> 中的 label 屬性，所以要記得用 labelField 來(lái)指定 label 要呈現(xiàn)的什麼資料，資料提供方法如下：


<mx:Tree x="28" y="27" dataProvider="{treeData}" showRoot="true"
  labelField="@label" width="151" height="197"/>

完成後就有一個(gè)動(dòng)態(tài)展開(kāi)和收合的 Tree 可以用了，最近實(shí)在是太忙了，今天先寫(xiě)到這裡下次再回頭探討 Tree 的事件。

p.s. 至少我先把債環(huán)了…. *笑*
不過(guò)還有一個(gè)多執(zhí)行緒的問(wèn)題還沒(méi)解答，好，下次來(lái)優(yōu)先處理這個(gè)問(wèn)題。