给Flex的Tree赋值方式(XML和ArrayCollection)

1)方式一，mxml内嵌xml数据赋值方式,Embedded XMLListCollection
<mx:Tree id="env_list" labelField="label" showRoot="true" width="243" alternatingItemColors="[#FFFFFF, #FFFFFF]">
<mx:XMLListCollection>
<mx:XMLList>
         <node label="Env Group1">
<node label="Env1"/>
<node label="Env2"/>
</node>
<node label="Env Group2">
<node label="EnvA"/>
<node label="EnvB"/>
</node>
</mx:XMLList>
</mx:XMLListCollection>
</mx:Tree>
Comments: in this way, no need to set value to dataProvider of the tree.


2)普通ArrayCollection方式，这里要用children或者categories关键字来指定某个结点的子结点，而且这两个关键字是不能改变的，它们被定义在tree的实现里面。Constant ArrayCollection with children or categories keywords
[Bindable]
private var treeEnvDataProvider:ArrayCollection=new ArrayCollection([
{node:"noneleaf",label:"Env Group1",children:[{node:"leaf",label:"Env11"},{node:"leaf2",label:"Env12"}]},
{node:"noneleaf",label:"Env Group2",children:[{node:"leaf",label:"Env21"},{node:"leaf2",label:"Env22"}]},
{node:"noneleaf",label:"Env Group3",children:[{node:"leaf",label:"Env31"}]}
]);

<mx:Tree id="env_list" labelField="label" showRoot="true" alternatingItemColors="[#FFFFFF, #FFFFFF]" dataProvider=”{treeEnvDataProvider}”/>
Comments: in this way we need use keywords children or categories.


3)元素为动态对象的ArrayCollection。ActionScript ArrayCollection with Object
[Bindable]
private var envGroups:ArrayCollection=new ArrayCollection();
private function mockupTreeEnvData():void{
           
           
             var obj:Object=new Object();
            obj.label="Env GroupA";
            obj.children=new ArrayCollection([{label:"Env1"}]);
           
           
            envGroups.addItem(obj);
           
            }
Comments: also we need use keywords “children” as the dynamic object’s property.


4)元素为对象的ArrayCollection方式，同样要用children关键字作为对象的一个属性来标明某结点的子结点。ActionScript ArrayCollection with domain object

[Bindable]
public class EnvironmentDTO
{
public function EnvironmentDTO()
{
}

public var id:String;
public var type:String;
public var label:String;
}

[Bindable]
public class EnvironmentGroupDTO
{
public function EnvironmentGroupDTO()
{
}
public var id:String;
public var type:String;
public var label:String;
public var children:ArrayCollection=new ArrayCollection();

}
  
private function mockupTreeEnvData():void{
             var group1:EnvironmentGroupDTO=new EnvironmentGroupDTO();
            group1.id="group1";
            group1.label="Env Group1";
            var env11:EnvironmentDTO=new EnvironmentDTO();
            env11.id="env11";
            env11.label="Env11";

            group1.children.addItem(env11);
            var evn12:EnvironmentDTO=new EnvironmentDTO();
            evn12.id="env12";
            evn12.label="Env12";
            group1.children.addItem(evn12);
                       
           
            envGroups.addItem(group1);
           
}

Comments: very important, we still need use the “children” keywords as a property of our domain object, otherwise, the tree cannot find where are the children of the non-leaf node.


5) Conclusion
When using XML object as the dataProvider of tree, things are looked easier and straightforward, while needing keywords “children” as the property of our object when using ArrayCollection.