Tree组件提供一个类似Windows资源管理器的文件夹。可以将数据分组聚集在一起。称为节点（Node），节点里可以再有节点。成树枝状展开。可随心所欲的展开或者收拢。平时用FLASH开发一些项目时，有可能会用到此组件。
1、利用数据生成Tree组件的节点。
Tree的节点必须通过XML生成。
Tree组件加载XML的方法跟MenuBar组件加载XML完全一样。XML文件格式也是极其相同的。建议在书写XML时，节点名称用<node>
例如：
<?xml version="1.0" encoding="UTF-8" ?>
<node label="Tree">
<node label="文件" icon1="folderClose_ico" icon2="folderOpen_ico">
<node label="新建" icon1="new_ico" data="new"/>
<node label="打开" icon1="open_ico" data="open"/>
<node label="退出" icon1="exit_ico" data="exit"/>
</node>
<node label="编辑" icon1="folderClose_ico" icon2="folderOpen_ico">
<node label="剪切" icon1="cut_ico" data="cut" />
<node label="复制" icon1="copy_ico" data="copy" />
<node label="粘贴" icon1="paste_ico" data="paste" />
</node>
<node label="帮助" icon1="folderClose_ico" icon2="folderOpen_ico">
<node label="关于淘沙网" icon1="help_ico" data="http://www.taoshaw.com" />
</node>
</node>
然后将Tree实例设置为my_Tree。
在AS层，AS帧中添加代码：
//符合编码规范
System.useCodepage=true;
//定义Tree为Tree组件
var my_Tree:mx.controls.Tree;
//滚动条顺其自然
my_Tree.vScrollPolicy="auto"
//定义一个XML
var my_XML:XML=new XML();
//消除空格
my_XML.ignoreWhite=true;
//加载XML文件
my_XML.load("my_xml.xml")
//判断加载是否成功
my_XML.onLoad=function(ok:Boolean):Void{
if(ok){
//设置Tree的数据源
my_Tree.dataProvider=this.firstChild;
}else{
trace("加载失败!")
}
}
2、为Tree组件设置图标。
Tree可以根据XML文件生成节点，但不会自动设置图标。Tree组件的setIcon()方法虽然可以负责设置图标。但是它只可以逐一设置指定节点的图标。也就是说，在生成节点的过程中，不可以依靠dataProvider自动进行XML分析。需要自行编程过盛。
方法一：
在XML.onLoad事件处理函数时，加一个遍历XML节点的自定义函数:
my_XML.onload=function(ok:Boolean){
if(ok){
my_Tree.dataProvider=this.firstChild;
setTreeIcon(my_Tree,this.firstChild)
}
}
添加function图层，加入setTreeIcon函数代码。
import mx.controls.Tree;
function seTreeIcon(tree:Tree,treeNode:XMLNode):Void{
var nodeLength:Number=treeNode.childNodes.length;
for(var i:Number=0;i<nodeLength;i++){
var node:XMLNode=treeNode.getTreeAt(i);
tree.setIcon(node,noe.attributes.icon1,node.attributes.icon2);
if(node.childNodes.length>0){
setTreeIcon(tree,node)
}
}
}
setIcon()的语法如下：
setIcon(Tree组件实例名称,节点关闭图标,节点打开图标);
方法二：
Tree类是继承于List类。List类有一个iconFunction()方法，当新节点加入时，或者鼠标对节点进行操作时，iconFunction()都会被调用。
继续上面的例子，并加入如下代码：
//添加节点
my_Tree.iconFunction = function(node:XMLNode):String {
//如果节点没有打开，或者它不是“树枝”
//使用代表"关闭“或”树叶“的图村
if (!this.getIsOpen(node) or !this.getIsBranch(node)) {
return node.attributes.icon1;
} else {
//当打开时，使用代表打开的图标
return node.attributes.icon2;
}
};
3、设置行高、边距。
图标的大小最好为16*16px.注册点靠左上角。当使用大图标时，可以增大行高。设置行高的方法：
Tree组件实例名称.rowHeight=数值；
子节点边距也要增加，可以修改样式。默认是17px。
Tree组件实例名称.indentation=数值。
example:使用16*16px的图标。
my_Tree.rowHeight=60;
my_Tree.indentation=24;
图标与卷标文字的间距也可以修改的。
my_Tree.textIndent=数值。
4、设置箭头。
左边默认箭头，可以用样式修改。
//节点打开时，
my_Tree.setStyle("discolsureOpenIcon",“链接属性”)；
//节点关闭时
my_Tree.setStyle("discolsureClodsedIcon","链接属性");
如果要删除，只要链接属性中的MC是一个空的就OK了。
5、设置水平滚动条。
Tree有一个很大的缺点。就是水平滚动条不会随着XML节点的宽度增大而自动出现。可以加入如下代码解决：
my_Tree.hScrooPolicy="on";
my_Tree.maxHPosition=100;
写明水平滚动条要出现，还要写明滚动范围的值。
6、读取Tree组件被选择的节点。
Tree是一个只可以单选的组件。一次只能选择一个对象属性。可以用selectedNode，for:
var my_Listenenr:Object=new Object();
my_Listenenr.change=function(eventObj:Object):Void{
//所选节点的标签
trace("label:"+eventObj.selectedNode.attributes.label);
//所选节点的数据
trace("data:"+eventObj.selectedNode.attributes.data);
}
//添加监听
my_Tree.addEventListener("change",my_Listenenr)
演示：
AS中所有代码：
//================版权声明开始================//
//★淘沙网：
http://www.taoshaw.com//★淘沙网所有教程欢迎转载。不过请转载时注明出处。谢谢合作。
//================版权声明结束================//
//符合编码规范
System.useCodepage = true;
//定义Tree为Tree组件
var my_Tree:mx.controls.Tree;
//滚动条顺其自然
my_Tree.vScrollPolicy = "auto";
//定义一个XML
var my_XML:XML = new XML();
//消除空格
my_XML.ignoreWhite = true;
//加载XML文件
my_XML.load("
http://www.taoshaw.com/taoshaw/study/Tree_XML_List/my_xml.xml");
//判断加载是否成功
my_XML.onLoad = function(ok:Boolean):Void {
if (ok) {
//设置Tree的数据源
my_Tree.dataProvider = this.firstChild;
} else {
trace("加载失败!");
}
};
//添加节点
my_Tree.iconFunction = function(node:XMLNode):String {
//如果节点没有打开，或者它不是“树枝”
//使用代表"关闭“或”树叶“的图村
if (!this.getIsOpen(node) or !this.getIsBranch(node)) {
return node.attributes.icon1;
} else {
//当打开时，使用代表打开的图标
return node.attributes.icon2;
}
};
//添加组件选择节点命令
var myListener:Object = new Object();
myListener.change = function(evtObj:Object):Void {
trace("label: "+evtObj.target.selectedNode.attributes.label);
trace("data: "+evtObj.target.selectedNode.attributes.data);
};
my_Tree.addEventListener("change", myListener);
//AD
ad_text.border = 0;
ad_text.html = true;
ad_text.htmlText = "<a href='
http://www.taoshaw.com' target='_blank'>淘沙网原创教程系列：
http://www.taoshaw.com</a>";
//================版权声明开始================//
//★淘沙网：
http://www.taoshaw.com//★淘沙网所有教程欢迎转载。不过请转载时注明出处。谢谢合作。
//================版权声明结束================//
源文件下载>>> 
