Anistar RIA Blog

有道是:"出來混的，遲早都要還的~" [原文出自-無間道]，前幾天答應 Flex 班上同學要幫他在 Blog 上寫如何使用 Tree Control ，說到總是要做到，所以趕快在今天先寫一個最基礎的 Tree Control 的用法，再陸續補完使用技巧跟事件整合的部份。

說到 Controls 就會想到它的資料來源 dataProvider ，每一種 Controls 所使用的資料來源皆不相同，有的用 ArrayCollection 有的用 Object ，而 Tree 則使用了最容易表現資料樹狀結構的 XML 資料，當然其他 XML 系列的例如 XMLList 也是可以作為資料來源的，接下來我們來示範一下該如何將一個 XML 的資料當作 Tree Control 的資料來源。

像是這樣的樹狀組織結構就還蠻適合用 Tree 來表示的，這時只要做一個 XML 的資料給他就可以了，你可以獨立產生一個 XML 的檔案，再從外部讀入進來，或者是直接在 Flex 中使用 <mx:XML> 標籤來描述這些資料，在這篇中我們選用 <mx:XML> 的方式來形容樹狀結構，其寫法可寫為：


 <mx:XML id="treeData">
  <node label="公司組織">
   <node label="行銷部">
    <node label="行銷處長"/>
    <node label="行銷經理"/>
       <node label="行銷專員"/>
   </node>
   <node label="資訊部">
       <node label="資訊處長"/>
       <node label="資訊經理"/>
   </node>
  </node>
    </mx:XML>

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


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

完成後就有一個動態展開和收合的 Tree 可以用了，最近實在是太忙了，今天先寫到這裡下次再回頭探討 Tree 的事件。

p.s. 至少我先把債環了…. *笑*
不過還有一個多執行緒的問題還沒解答，好，下次來優先處理這個問題。