Flashmx2004系列教程〈二〉UI组件-TreeComponent

The Tree Component组件允许你显示一个树状结构的导航，而且可以是图形化的。其实你已经很了解它了，因为它和我们经常使用的资源管理器是十分相似的。

1。创建一个400*200大小的新的FLASH文件，使用下列的图示做为参照进行布局。

2.创建两个新分层，从上到下分别将新层命名为：action,tree component,text area component.

3.选择tree component层的第一帧。从组件库中将tree component拖放到层中打开属性面板将其宽设为172高设为180。并且将其实例名命名为myTree.

4. 选择text area component层上第一帧，从组件库中将text area component组件拖至此层上，打开属性面板，将其宽设为188高设为180，并将其实例名命名为myStatusArea.设置其html属性为true.因为我们要将它的内容显示为html格式。同时要将它的换行属性设为true.

5.使用记事本找开你下载的xml文件tree_source.xml来观看它的结构。观看它是如何包括文件目录以及一些未包括的文档。

<?xml version="1.0" encoding="iso-8859-1"?>

<node label = "Personal Folders">

    <node label = "Inbox">

        <node label = "First message" />

        <node label = "Second message" />

        <node label = "Third message" />

    </node>

    <node label = "Drafts">

        <node label = "First message" />

    </node>

    <node label = "Outbox" isBranch="true">

        <node label = "No messages." />

    </node>

    <node label = "Sent Items">

        <node label = "First message" />

        <node label = "Second message" />

    </node>

</node>

6.在action层的第一帧上输入如下代码：

//载入并指定数据源
myTreeDataProvider=new XML();
//在xml中忽略空格，这在xml中是很重要的。
myTreeDataprovider.ignoreWhite=true;

//载入外部xml文件
myTreeDataProvider.load("tree_source.xml");
//xml的onload事件
myTreeDataProvider.onLoad=function(){
 myTree.dataProvider=myTreeDataProvider;
}

以上代码是用来载入数据源，同时将这个XML文件作为数据源提供给TREE COMPONENT。

7.继续在下方加入如下代码

//设置tree component的侦听器。
myTreeListener=new Object();
//节点打开事件
myTreeListener.nodeOpen=function(eventObject){
 myStatusArea.text+="<li>"+eventObject.node.attributes.label+"opened.</li>";
}

以上代码建立侦听器，来侦听节点打开事件。

8。继续加入代码如下；

//节点关闭事件
myTreeListener.nodeClose=function(eventObject){
 myStatusArea.text+="<li>"+eventObject.node.attributes.label+"<i>closed.</i>.</li>";
}

向上面代码一样建立关闭事件。

9。继续在帧上加入代码

//改变事件
myTreeListener.change=function(eventObject){
 //选择的节点
 var theSelectedNode=eventObject.target.selectedNode;
 //选中节点的label
 var theSelectedNodeLabel=theSelectedNode.attributes.label;
 //将其显示在textArea组件中
 myStatusArea.text+="<li>"+theSelectedNodeLabel+"<b>Selected</b>.</li>";
}
10。继续加入如下代码。

myTree.addEventListener("nodeOpen",myTreeListener);
myTree.addEventListener("nodeClose",myTreeListener);
myTree.addEventListener("change",myTreeListener);

在这里要注意的是在注册侦听器时你不能一次注册所有的事件。

11。测试你的影片吧。