Flex4.6创建Tree

图片路径配置写法:

[Bindable]
[Embed(source="assets/icon/person.png")]
public var imgPath:Class;

这样写了下面才好使用, 一定要写public方法, 如果写private方法它会找不到图片.会报错.

树控件的申明:

<mx:Canvas right="0" bottom="100" height="90%" width="25%" borderColor="red" borderStyle="solid">
	<mx:Tree id="tree" 
			 height="90%"
			 width="90%"
			 showRoot="false"
			 dataProvider="treeData"//绑定数据源
			 labelField="@label"	//显示文字.
			 iconField="@img" />	//显示图片.
</mx:Canvas>

显示文字, 显示图片那里的@lable, @img 是在下面Node节点里配置的属性, 可以随意修改. 绑定数据源那点写的是下面XMLlist的ID.

数据源的申明:

<fx:Declarations>  
	<fx:XMLList id="treeData">    
		<node label="好友">    
			<node label="无极剑圣" img="imgPath"/>    
			<node label="流浪法师" img="imgPath"/>    
		</node>
		<node label="陌生人">
			<node label="德玛西亚" img="imgPath"/>
			<node label="光辉女郎" img="imgPath"/>    
		</node>    
	</fx:XMLList>    
</fx:Declarations>

如果没有Node节点没有配置Img属性. 那他就会显示默认的文件夹图片. 所以还是自己配上一个.

下面我们用字符串(String)来生成一个Tree列表:

图片配置和上面一样, 就不贴出代码了.

树控件申明代码:

<mx:Canvas right="0" bottom="100" height="90%" width="25%" borderColor="red" borderStyle="solid">
	<mx:Tree id="tree" 
			 height="90%"
			 width="90%"
			 showRoot="false"
			 labelField="@label"	//显示文字.
			 iconField="@img" />	//显示图片.
</mx:Canvas>

没有了上面的数据源绑定ID的代码.

数据源获取代码:

protected function addNode(event:MouseEvent):void {
	//XML的字符串
	var xmlStr:String = "<nodes><node label=\"好友\"><node label=\"无极剑圣\" img=\"imgPath\"/><node label=\"流浪法师\" img=\"imgPath\"/></node><node label=\"陌生人\"><node label=\"德玛西亚\" img=\"imgPath\"/><node label=\"光辉女郎\" img=\"imgPath\"/></node></nodes>";
	//把字符串转成XML.
	var xml:XML = new XML(xmlStr);
	//把XML转成XMLList. 也就是多个XML.获取根节点下的所有子节点.
	var xmlList:XMLList = xml.elements("node");
	//转换成Tree需要的那种类型.
	var collection:XMLListCollection = new XMLListCollection(xmlList);
	//设置到Tree
	tree.dataProvider = collection;
}

此代码写在一个按钮的单击事件里面.  这里的字符串是:

<nodes>
	<node label="好友">
		<node label="无极剑圣" img="imgPath"/>
		<node label="流浪法师" img="imgPath"/>
	</node>
	<node label="陌生人">
		<node label="德玛西亚" img="imgPath"/>
		<node label="光辉女郎" img="imgPath"/>
	</node>
</nodes>

因为要转成XML.所以必须要加一个更节点.