Flex中Tree组件的数据源举例（xml，array，object）

题外话：

      做程序员，是要思考的。无论是宏观方面，还是微小的细节。思考，设计都是程序员的必备素质吧。学着思考……
长城也是由一块一块石头垒起来的。就算是你用现代化的武器，它还是需要石头的。唉，说远了，写正题了。

 

这是flex中文帮助里的一段话：

       Tree 类使用 ITreeDataDescriptor 或 ITreeDataDescriptor2 对象分析和操作数据提供程序。默认

树数据描述符（DefaultDataDescriptor 类的一个对象）支持 XML 和 Object 类；Object 类数据提供程序必须包含children 字段中的所有子项。
 

      之前看的时候，就没有想这个object该是什么样的形式。只想“原来这样紫啊”！回过头来看，对“想到和得到中间还有个做到”这句话，有了点别的理解。

     凡是具有dataProvider的组件，都可以将Array、XML等内容作为数据源。这是《flex第一步》的作者说的一句话，我突然想到，既然都能用，那tree又要求数据要有层次，那array给tree做数据源的时候，有什么特别的吗？

看代码吧

<?xml version="1.0" encoding="utf-8"?>
<!-- Tree control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            [Bindable]
            public var selectedNode:XML;
            
            [Bindable]
            public var selectedNodeArr:Object;

            // Event handler for the Tree control change event.
            public function treeChanged(event:Event):void {
                selectedNode=Tree(event.target).selectedItem as XML;
                selectedNodeArr=Tree(event.target).selectedItem as Object;
            }
        ]]>
    </mx:Script>

    <mx:XMLList id="treeData_xmllist">
        <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:XML id="treeData_xml">
        <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:XML>
    <!--自己理解Array只是把object又封装了一层，仅此而已。可能这样又能用array的特性，
    	其中的记录又可以object的特性。具体的好处，看具体的环境吧-->
    <mx:Array id="treeData_array">
    	<mx:Object label="Mail Box">
    		<mx:children>
    			<mx:Object label="Inbox">
    				<mx:children>
    					<mx:Object label="Marketing"/>
		                <mx:Object label="Product Management"/>
		                <mx:Object label="Personal"/>
    				</mx:children>
	             </mx:Object> 
	             <mx:Object label="Outbox">
    				<mx:children>
    					<mx:Object label="Professional"/>
		                <mx:Object label="Personal"/>
    				</mx:children>
	             </mx:Object>  
	             <mx:Object label="Spam"/>
            	 <mx:Object label="Sent"/>
    		</mx:children>
    	</mx:Object>
    </mx:Array>
    
    <mx:ArrayCollection id="treeData_arrayCollection">
    	<mx:Object label="Mail Box">
    		<mx:children>
    			<mx:Object label="Inbox">
    				<mx:children>
    					<mx:Object label="Marketing"/>
		                <mx:Object label="Product Management"/>
		                <mx:Object label="Personal"/>
    				</mx:children>
	             </mx:Object> 
	             <mx:Object label="Outbox">
    				<mx:children>
    					<mx:Object label="Professional"/>
		                <mx:Object label="Personal"/>
    				</mx:children>
	             </mx:Object>  
	             <mx:Object label="Spam"/>
            	 <mx:Object label="Sent"/>
    		</mx:children>
    	</mx:Object>
    </mx:ArrayCollection>
    
    <mx:Object label="Mail Box" id="treeData_object">
		<mx:children>
			<mx:Object label="Inbox">
				<mx:children>
					<mx:Object label="Marketing"/>
	                <mx:Object label="Product Management"/>
	                <mx:Object label="Personal"/>
				</mx:children>
             </mx:Object> 
             <mx:Object label="Outbox">
				<mx:children>
					<mx:Object label="Professional"/>
	                <mx:Object label="Personal"/>
				</mx:children>
             </mx:Object>  
             <mx:Object label="Spam"/>
        	 <mx:Object label="Sent"/>
		</mx:children>
	</mx:Object>

    <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%">
        	<!--更改dataProvider的属性值，看不同的数据源得到的结果。-->
        	<!--发现showRoot="false"对array没作用。但是object，xml都行。似乎明白道理，又说不出来。用的时候注意好了。-->
            <mx:Tree id="myTree" width="50%" height="100%" labelField="label"
                showRoot="false" dataProvider="{treeData_object}" change="treeChanged(event)"/>
            <!--其实这个只是提醒大家，xml和object的处理方式的不同。要进行别的操作，完成更发杂的功能，原理是一样的^_^-->
            
            <!--如果是Array或ArrayCollection做数据源，要执行下面的操作-->
            <mx:TextArea height="100%" width="50%"
                text="Selected Item: {selectedNodeArr.label}"/>
                
            <!--如果是XML或XMLList做数据源，要执行下面的操作-->    
            <!--<mx:TextArea height="100%" width="50%"
                text="Selected Item: {selectedNode.@label}"/>-->
        </mx:HDividedBox>
        
    </mx:Panel>
</mx:Application>

 

 

没什么，只是备案后查。没有什么难的东西，只是小的东西没有掌握好！！

 

 

 

 

 

 

 

 

 

 

 

评论

3 楼 sheliey1210 2011-11-10  

什么啊这是，纯属扯淡

2 楼 sunlight9641 2011-06-22  

能不能不要用标签实现。。。

1 楼 bolo 2009-12-20  

请问你知不知道在Tree中，是如何解析这些数据的?