Long Step - [with 猫嗔]

<?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>