ActionScript
TypeScript
JavaScript

Tree 组件参考

发布时间:2016-12-30

 

        Tree 组件用来显示树状结构。用户可以查看排列为可扩展树的层次结构数据。
        Tree 组件的脚本接口请参考 Tree API。

 

Tree 组件主要由两个部分组成:

  • 项单元格(可以是 Box 、页面 View、自定义页面);

  • 纵向滚动条 VScrollBar;

 

Tree 组件的单元格通常由四部分组成:

  • 一个单元格选择状态切片动画 Clip;

  • 一个折叠箭头切片动画 Clip ;

  • 一个文件状态切片动画 Clip ;

  • 单元格其他内容元素;

 

Tree 组件的图像资源示例

  1. 单元格选择状态切片动画 Clip 资源:
    切片数为2,切片索引从0开始依次代表:单元格未被选中状态图、单元格选中或悬停状态图。
    图片1.png

  2.  折叠箭头切片动画 Clip 资源:
    切片数为2,切片索引从0开始依次代表:文件夹节点折叠状态图、文件夹节点展开状态图。
    图片2.png

  3.  文件状态切片动画 Clip 资源:
    如果切片数是3,则切片索引从0开始依次代表:文件夹节点折叠状态图、文件夹节点展开状态图、非文件夹节点状态图;
    如果切片数是2,则切片索引从0开始依次代表:文件夹节点状态图、非文件夹节点状态图;
    图片4.png

 

创建 Tree 组件

  1. 编辑 Tree 组件的列表项。
    列表项可以是 Box 类型、View(页面) 类型或自定义的页面类型。此处以Box 类型为例。
    a.从资源面板里选择拖入一个单元格选择状态的切片动画( Clip 组件),设置此Clip 组件对象的 name 属性值为 selectBox,设置属性 clipY 的值为2;
    注意:此处的选择状态切片动画 (Clip 组件)对象的 name 属性值必须设置为 selectBox,只有这样程序才能识别它,并实现此 Clip 组件对象的显示状态跟随单元项的选择状态而改变的功能,否则此 Clip 对象将会被识别为此单元项的普通显示对象。
    图片5.png

    b.从资源面板里选择并拖拽一个单元格的折叠箭头切片动画(Clip 组件),设置此 Clip 组件对象的 name 属性值为 arrow,设置属性 clipY 的值为2;
    注意:此处的折叠箭头切片动画 (Clip 组件)的 name 属性值必须设置为 arrow,只有这样程序才能识别它,并实现点击此 Clip 对象打开或折叠树形节点的功能。否则此 Clip 对象将会被识别为此单元项的普通显示对象。
    图片6.png

    c.从资源面板里选择并拖拽一个单元格的文件状态切片动画(Clip 组件),设置此 Clip 组件对象的 name 属性值为 folder,设置属性 clipY 的值为 3;
    注意:此处的文件状态切片动画(Clip 组件)的 name 属性值必须设置为 folder,只有这样程序才能识别它,并实现此 Clip 组件对象的显示状态跟随单元项的折叠、展开、节点类型(是否有字节点)而改变的功能。否则此 Clip 对象将会被识别为此单元项的普通显示对象。
    图片7.png

     d.拖入此单元项的普通显示对象。
    此处以 Label 为例,从资源面板里选择并拖入一个 Label 组件对象,在此给这个 Label 对象设置一下属性 name 值为 label ,方便在脚本中对它进行赋值,此name 属性值自定义即可。再设置一下 Label 对象显示相关的属性,使它看起来更美观。
    图片8.png

    e.选中以上编辑的所有组件对象,使用快捷键 Ctrl + B 或选择 菜单栏->编辑->转换为容器 选项,打开转换为容器设置面板,选择容器类型为 Box,然后点击确定按钮完成 Box 容器的添加。
    图片9.png

     

  2. 转化为 Tree 容器。
    选择列表渲染项对象,使用快捷键 Ctrl + B 或选择 菜单栏->编辑->转换为容器 选项,打开转换为容器设置面板,选择容器类型为 Tree,然后点击确定按钮完成 Tree 容器的添加。
    图片10.png

  3. 指定 Tree 组件的列表渲染项。
    双击 Tree 组件对象,进入 Tree 对象内部进行编辑,设置 Tree 组件的列表渲染项的属性 name 的值为 render。
    注意:此处列表渲染项属性 name 的值必须为 render,否则程序将无法识别。
    图片11.png

  4. 为 Tree 组件添加滚动条。
    从资源面板里选择一个 VScrollBar 组件,将VScrollBar 组件的资源地址(skin 属性值)设置为 Tree 组件属性scrollBarSkin 的值。
    图片12.png

  5. 调整 Tree 的宽高。设置 Tree 对象的属性 var(全局引用名)的值为 m_tree ,此处名字可以自定义,目的是在脚本中对此 Tree 组件对象赋值。
    图片13.png

  6. 在代码里给 Tree 对象赋值

    var xmlString:String;//创建一个xml字符串,用于存储树结构数据。
    xmlString = "var xmlString:String;//创建一个xml字符串,用于存储树结构数据。
    xmlString = "";
     
    var domParser:* = new Browser.window.DOMParser();//创建一个DOMParser实例domParser。

    var xml:* = domParser.parseFromString(xmlString, "text/xml");//解析xml字符。

    m_tree.xml =xml;//设置 m_tree 的数据源。";


            

  7. 在程序中运行查看效果。
    GIF_tree_show.gif

 

Tree 组件常用属性

 图片15.png

 

属性

功能说明

scrollBarSkin

滚动条皮肤。

spaceBottom

每一项之间的间隔距离。单位是像素。

spaceLeft

左侧缩进距离。单位是像素。