[教材] Tree组件构建仿Windows资源管理器

taoshaw

闪吧成员

Rank: 8 Rank: 8

淘沙帮

帖子: 253
积分: 147
技术分: 87
来自: 重庆市涪陵区
在线时间: 122 小时
注册时间: 2005-10-5

1^# 大中小发表于 2008-6-4 15:57 只看该作者

Tree组件构建仿Windows资源管理器

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
//★淘沙网所有教程欢迎转载。不过请转载时注明出处。谢谢合作。
//================版权声明结束================//