flex tree 的兩個小技巧

學習了一段時間的Flex,感覺Flex再成熟一些的話,Flex就很有可能成爲視圖層的最主流技術了.期待着Flex4,Flex5的改進吧.
這篇短文說一下使用Flex中樹組件過程中兩個使用小技巧吧.
可能剛剛學習的朋友會發現樹組件的以下兩個小問題:
 

• 點擊一個非葉子節點的時候,Tree組件不自動的展開或關閉他的子節點.
• 點擊同一個節點第二次的時候change事件是不觸發的.

下邊的小例子解決這兩個小問題:
 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderStyle="none" cornerRadius="0">

<mx:XMLList id="treeData">
<node id="10000" label="評估計劃">
<node id="10100" label="計劃生成器">
<node id="10101" label="新建計劃" canvas="javaest.FirstCanvas"/>
<node id="10102" label="複製計劃" canvas="javaest.SecondCanvas"/>
</node>
<node id="10200" label="計劃管理">
<node id="10201" label="將計劃轉爲準備運行" canvas="javaest.GetProductList"/>
<node id="10202" label="將計劃轉爲正在配置" canvas="javaest.SecondCanvas"/>
<node id="10203" label="查詢計劃狀態" canvas="javaest.FirstCanvas"/>
</node>
<node id="10300" label="我的博客">
<node id="10301" label="北邊村人" canvas="javaest.iteye.com"/>

</node>
</node>
</mx:XMLList>

<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.controls.Button;
import mx.containers.Canvas;
import mx.controls.Alert;
private function addNewTabPage(event:Event):void {
var selectedNode:XML=Tree(event.target).selectedItem as XML;
var id:String=selectedNode.@id;
var label:String=selectedNode.@label;
var canvasClassName:String=selectedNode.@canvas;
Alert.show(label);
if (functionTree.dataDescriptor.isBranch(selectedNode)) {
functionTree.expandItem(selectedNode, !functionTree.isItemOpen(selectedNode));
}
Tree(event.target).selectedItem=null;
}

]]>
</mx:Script>
<mx:Panel width="100%" height="100%" dropShadowEnabled="false" title="新聞管理">
<mx:Tree id="functionTree" change="addNewTabPage(event)" width="100%" height="100%" enabled="true" showRoot="true" dataProvider="{treeData}" labelField="@label" borderStyle="none">
</mx:Tree>
</mx:Panel>
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderStyle="none" cornerRadius="0">

   	<mx:XMLList id="treeData">
    <node id="10000" label="評估計劃">
	    <node  id="10100" label="計劃生成器">
	        <node  id="10101" label="新建計劃" canvas="javaest.FirstCanvas"/>
	        <node  id="10102" label="複製計劃" canvas="javaest.SecondCanvas"/>
		</node>	        
	    <node  id="10200" label="計劃管理">
	        <node  id="10201" label="將計劃轉爲準備運行" canvas="javaest.GetProductList"/>
	        <node  id="10202" label="將計劃轉爲正在配置" canvas="javaest.SecondCanvas"/>
	        <node  id="10203" label="查詢計劃狀態" canvas="javaest.FirstCanvas"/>
	    </node>	  
	    <node id="10300" label="我的博客">
	    	<node id="10301" label="北邊村人" canvas="javaest.iteye.com"/>
	    	
	    </node>
	</node>
    </mx:XMLList>

   	<mx:Script>
        <![CDATA[
        	import mx.controls.Image;
        	import mx.controls.Button;
        	import mx.containers.Canvas;
        	import mx.controls.Alert;
            private function addNewTabPage(event:Event):void {
            	var selectedNode:XML=Tree(event.target).selectedItem as XML;
            	var id:String=selectedNode.@id;
            	var label:String=selectedNode.@label;
            	var canvasClassName:String=selectedNode.@canvas;
            	Alert.show(label); 
           	    if (functionTree.dataDescriptor.isBranch(selectedNode)) { 
                    functionTree.expandItem(selectedNode, !functionTree.isItemOpen(selectedNode)); 
                }            	
            	Tree(event.target).selectedItem=null; 
            }   

     ]]>
    </mx:Script>
	<mx:Panel width="100%" height="100%"  dropShadowEnabled="false" title="新聞管理">
    	<mx:Tree  id="functionTree"   change="addNewTabPage(event)" width="100%" height="100%" enabled="true" showRoot="true"  dataProvider="{treeData}"  labelField="@label" borderStyle="none">
        </mx:Tree> 
    </mx:Panel>
</mx:Application>

其中34,35,36行解決了第一個問題
37解決了第二個問題