<?xml version="1.0" encoding="utf-8"?>
<!-- Tree control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!--下面是樣式-->
    <mx:Style >
        Tree
    {    
        verticalScrollBarStyleName: treeVerticalScrollBar;
        selectionColor: #417597;
     /*為默認、打開、關閉、有子項等幾個狀態添加不同的ico*/
        defaultLeafIcon: Embed(source="longstep/icon/sharp_grey/gif/base.gif");
        folderOpenIcon: Embed(source="longstep/icon/sharp_grey/gif/vote_yes.gif");
        folderClosedIcon: Embed(source="longstep/icon/sharp_grey/gif/options.gif");
        disclosureOpenIcon: Embed(source="longstep/icon/sharp_grey/gif/pause.gif");
    }
    .treeVerticalScrollBar
    {
        borderColor: #f00;
    }
    </mx:Style>
<mx:Script>
<![CDATA[
        //綁定數據，定義xml類型變量用于存放選中節點
[Bindable]
public var selectedNode:XML;
//當tree發生change事件時的事件
public function treeChanged(event:Event):void {
//將選中的節點轉換成xml，賦予selectedNode，as為轉換類型
selectedNode=Tree(event.target).selectedItem as XML;
}
     //tree有3個事件使用較多，change、itemClick、itemOpen、itemClose
     //change:選中列改變時被觸發
     //itemClick:點擊某一列時觸發
     //itemOpen:節點展開時觸發
     //itemClose:節點關閉時觸發
]]>
</mx:Script>
<!--XMLList作為數據源是最適合于tree組件的-->
<mx:XMLList id="treeData">
     <node label="Mail Box">
     <node label="Inbox">
     <node label="Marketing"/>
     <node label="Product Management"/>
     <node label="Personal"/>
     </node>
     <node label="Outbox">
     <node label="Professional"/>
     <node label="Personal"/>
     </node>
     <node label="Spam"/>
     <node label="Sent"/>
        </node>    
</mx:XMLList>
<mx:Panel title="Tree Control Example" height="75%" width="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Label width="100%" color="blue"
text="Select a node in the Tree control."/>
<mx:HDividedBox width="100%" height="100%">
<!--@表示xml中間點的屬性，如：@label表示label屬性的值-->
<!--dataProvider="{treeData}"表示綁定數據，數據源可以是XML也可以是XMLList-->
<mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
<mx:TextArea height="100%" width="50%"
text="Selected Item: {selectedNode.@label}"/>
</mx:HDividedBox>
</mx:Panel>
</mx:Application>