Flex4.6创建Tree

图片路径配置写法:

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

树控件的申明:

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

数据源获取代码:

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>