Flash MX 2004 UI组件系列教程(2)

目分大女且

目分大女且

2016-01-29 13:28

Flash MX 2004 UI组件系列教程(2),Flash MX 2004 UI组件系列教程(2)
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层的第一帧上输入如下代码:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/fjc/)
//载入并指定数据源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.";}

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

  8. 继续加入代码如下:

//节点关闭事件myTreeListener.nodeClose=function(eventObject){ myStatusArea.text+="<LI"+eventObject.node.attributes.label+"<Iclosed.</I.";}

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/fjc/)

  9. 继续在帧上加入代码

//改变事件myTreeListener.change=function(eventObject){ //选择的节点 var theSelectedNode=eventObject.target.selectedNode; //选中节点的label var theSelectedNodeLabel=theSelectedNode.attributes.label; //将其显示在textArea组件中 myStatusArea.text+="<LI"+theSelectedNodeLabel+"<BSelected</B.";}

  10. 继续加入如下代码。

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

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

  11.

展开更多 50%)
分享

猜你喜欢

Flash MX 2004 UI组件系列教程(2)

flash教程
Flash MX 2004 UI组件系列教程(2)

Flash MX 2004 UI组件系列教程(2) (1)

FLASH flash教程
Flash MX 2004 UI组件系列教程(2) (1)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Flash MX 2004 UI组件系列教程(5)

flash教程
Flash MX 2004 UI组件系列教程(5)

Flash MX 2004 UI组件系列教程(6)

flash教程
Flash MX 2004 UI组件系列教程(6)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Flash MX 2004 UI组件系列教程(3)

flash教程
Flash MX 2004 UI组件系列教程(3)

Flash MX 2004 UI组件系列教程(7)

flash教程
Flash MX 2004 UI组件系列教程(7)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

.NET 数据访问架构指南

.NET 数据访问架构指南

菜鸟模仿duwamish开发时常见的错误

菜鸟模仿duwamish开发时常见的错误
下拉加载更多内容 ↓