TWaver组件之Tree使用（翻译TWaver文档+补充自己使用体会）

第一篇：使用一个 Tree 组件

TTree 是 Twaver 提供的主要图形组件之一，它实现了分层呈现 DataBox 中数据，每个 Tree 都有一个根节点，所有节点都从该节点下降。

树上的每个节点都是一个 element 实例，它有一系列的属性，如 标签、图标、工具提示等，这些属性通过 element 的一到多个属性进行设置的。

介绍 Tree 组 件

这个 TWaver Tree 继承自 Swing 的 JTree 和实现了 TWaver 的 Tview 接口。他是一个 JTree 的扩展且可以直接使用它作为一个 JTree ； TTree 连接到一个 DataBox, 并展示 DataBox 里面的所有数据。但是，它是 通过限制根节点来显示所选择的内容，或者说可以通过过滤器来限制。节点数据都是通过设置它的父亲和他的孩子节点的。

TTree 提供了一些 tree 节点使用的 API. 不如：

l         设置 或者检索 DataBox:getDataBox() 和 setDataBox()

l         设置 tree 的选择模式

l         改变 tree 的根节点

l         过滤 tree 节点

l         通过 比较器来 对 tree 节点进 行排序

创建 一个 Tree

本章节展示如何创建和展示一个 tree 的计算机网格图：

要创建一个 tree 视图，我们需要通过一下步骤：

l         创建一个 TDataBox 实例

l         创建一个 Tree 组件

l         把 tree 和 DataBox 连接起来

l         生成一些 elemts 并把他们放到 DataBox 里面

// 创建一个 TDataBox 实例

TDataBox box=new TDataBox();

// 创建一个 tree 实例，并把 box 和 tree 组件连接起来

TTree tree=new TTree(box);

// 或者可以如下设置 box 到 tree 组件

//tree.setDataBox(box);

// 创建一个 group 和一个子网

  Group group=new Group();

box.addElement(group);

SubNetwork subnetwork=new SubNetwork();

box.addElement(subnetwork);

// 创建一个数据 节点 .

Node node1=new Node();

node1.setName(“Node1”);

node1.setParent(group);

box.addElement(node1);

Node node2=new Node();

node2.setName(“Node2”);

node2.setParent(group);

box.addElement(node2);

Node node3=new Node();

node3.setName(“Node3”);

node3.setParent(subnetwork);

box.addElement(node3);

TWaver Tree 节点

在 TWaver 里面有两种 tree 节点： twaver.tree.DataBoxNode 和 twaver.tree.ElementNode.DataBoxNode 连接到一个 DataBox ， ElementNode 连接到一个 Elment

关于 tree 节点的一些有用的方法如下：

l       显示 / 隐藏 Tree 根 节点

tree.setRootVisible(Boolean rootVisible);

l       获取一 个 tree 节点

tree.getRootNode();

l       设置 DataBOx 节点图片

tree.setDataBoxIconURL(“/root.png”);

l       设置 DataBox 节点的 label 文本

tree.getDataBox().setName(“name”);

l       设置 tree 的根节点

tree.setRootElement(rootNode);

l       设置 tree 节点的 label 文 本

默认是用： element.getName() ，改变使用方法： setName(String name)

l       设置 tree 节点的标签工具文本

默认是使用： element.getToolTipText(), 改变使用方法： setToolTipText(String tip);

l       twaver.tree.DataBoxNode,twaver.tree.ElementNode

默认使 用 ((AbstractElement)element).getElementTreeIcon(), 改变使用 ((AbstractElement)element).putElementTreeIcon(Icon ElementTreeIcon)

自定义 Tree 节点的 Renderer

作为一 个 Swing JTree 的子类，同样可以为一个 tree 组件设置一个新的 renderer 。 TTree 的默认实现方式是创建一个默认的 renderer 去绘制 tree 组件的每一个 element 。这个默认的 renderer 会考虑到 element 的名称，告警状态，选中状态，标签工具，图片和父亲关系。

创建一 个新的 tree 节点 renderer 并且考虑所有的方方面面不是一件容易的事情。所以一个更好的办法 是去创建一个 renderer 继承自这个默认的 tree 节 点 renderer 和实现 twaver.tree.ElementNode 类。它是从 Swing 的 DefaultMutableTreeNode 派生的。所以你能够自定义它去绘制你需要的 tree 节点。

tree 节点默认的使用 Element.getIcon 去获取一个图片并把它展现在一个 tree 节 点上。一般情况下它被用来作为一个树上节点数据的类型象征。你能够自定义这个图片类型。调用 Element.setCustomIcon 方法去指定一种新的图片类型来展示在 tree 节点上。

如果设 置为 null 的话，将使用默认的图片。

如果你 想使用一个 java.swing.Icon 对象来代替 the icon URL 字符串去改变 Tree 组件上一个图片组件。你可以使用如下代码：

//Create an Icon object.

Icon icon = ….

//Change some element icon

Object key = TWaverConst.PROPERTYNAME_ELEMENT_TREE_ICON;

element.putClientProperty(key, icon);

or

element.putElementTreeIcon (“treeicon.png”);

 

Tree 节 点的双击事件监听

使用方 法： TTree.addElementNodeClickedActionListener 去监听鼠标在 tree 节点上的双击事件。

Check-box Tree 节点

使用 Selection Mode

TWaver tree 组件允许你去选择模式选择 check-box 类型。使用 TTree.setTTreeSelectionMode(int mode) 去切换类型：

l       TTree.DEFAULT_SELECTION: 一般选择模式

l       TTree.CHECK_SELECTION: 树节点带复选框，选中父节点，该父节点下的字节点不会被选中。

l       TTree.CHECK_CHILDREN_SELECTION: 复选框模式，孩子节点选择状态会跟着父亲的选择状态而改变。选 中 父节点，该父节点下的所有字节点都会被选中

l       TTree.CHECK_DESCENDANT_SELECTION: 复选框模式，孩子节点和孙子节点也会跟着一起改变选中状态的模 式

l       TTree.CHECK_DESCENDANT_ANCESTOR_SELECTION: 复选框模式。孩子节点和孙子节点会跟着父亲节点的选中状态一起 改 变。父亲节点也会跟着孩子节点被选中而选中。如下选中：节点 000 的 同时上面两个节点也变成选中状态。

 

使用 CheckableFilter 过滤器

如果你 想使得几个特殊的树节点能被选中，你可以是可被选中过滤器：

//Create and use a checkable filter.

tree.setCheckableFilter(new CheckableFilter(){

public boolean isCheckable(Element element) {

//return true if it can be checked.

if(…) {

return true;

} else {

return false;

}

}

});

使用定型复选框

TWaver Tree 节点可以被设置成选中状态变 化后变灰色，通过设置 setEnableTristateCheckBox 去实现。让这种状态可编辑，效果如下，当孩子节点或者孙子节点 去掉一个之后 该去掉对钩的节点的所有上层节点都变灰。

对 Tree 节点排序

Tree 组件可以对节点进行排序后再展示，如此做，通过使用 setSortComparator 来实例化一个 java.util.Comparator 的树组件。方法 Comparator.compare() 将被用来对 DataBox 里面的一对 Element 实例进行排序。对象被局部的排序。

当一个 新的比较器被设置的时候，所有的对象将被重新排序；如果没有比较器的话，节点将被随即的顺序进行排序。请注 意，同一组的对象是始终显示在同一顺序，即使没有被定义的排序顺序

检索当前 的排序可以使用方法： getsortComparator();

Tree 节点索引控制

你可以 通过引用 TDataBox.moveTo** 方法来控制 tree 节 点的索引。请注意：这些方法仅仅影响 Twaver Tree 节点或者 TWaver List 子项的位置。它不影响节点索 引在拓扑图组件中的绘制。

这些方 法是：

l       TDataBox.moveToUp: 把该 tree 节点往上移动一位，但不能超过他的父节点。

l       TDataBox.moveToDown: 移动 Tree 节点到到下一位，不能超过他们的父节点

l       TDataBox.moveToTop: 把该 Tree 节点移动到最顶端。

l       TDataBox.moveToBottom: 把该 Tree 节点移动到最底端

使用 twaver.DataBoxSequenceListener 去监听这个 tree 节点索引的改变监听。当 tree 节点所以被改变之后方法 hiberarchyChanged 将被收回

迭代 Tree 节点

一般来 说可以通过 TDataBox.iterator 方法来迭代遍历所有 elements 数据。如果你想按照 Tree 展示的顺序迭代出来的话，使用下面的方法：

l       TDataBox.breadthFirstEnumeration() ：通过宽度规则迭代 box 里面的数据。

l       TDataBox.breadthFirstEnumeration(Element root): 使用 BreadFirst 规则从根节点数据开始过滤

l       TDataBox.depthFirstEnumeration(): 深度规则迭代 box 里面的数据

l       TDataBox.depthFirstEnumeration(Element root): 从根节点数据按照深度 规 则迭代

 

懒加载

Tree 组件允许对数据进行懒加载，在展示大数据量的网络数据的时候这 个功能是很重要的。想象一下创建一个树去展示一个文件系统，把所有的文件在展示的同时都加载上来显然不是一个很好的方案。我们希望文件在折叠被第一次代开 的时候的进行加载。使用下面的接口： twaver.tree.LazyLoader 定义懒加载器，必须实现一下方法：、

l       load: 执 行数据加载动作

l       isLoaded: 这个 Tree 节点数据是不是已经加载完毕

l       isLeaf: 判断该 Tree 节点是不是一个叶子节点，如果是叶子节点的话，就没有懒加载操 作

现在我 们创建一个带有懒加载器的 tree 组件去展示文件系统：

//set lazy loader

tree.setLazyLoader(new LazyLoader(){

//load children

public void load(Element element) {

FileElement fileElement = (FileElement)element;

File file = fileElement.getFile();

if(file.isDirectory()){

File[] files = FileElement.fileSystemView.getFiles(file, true);

if (files != null) {

for (int i = 0; i < files.length; ++i) {

FileElement child = new FileElement(files[i]);

fileElement.addChild(child);

box.addElement(child);

}

}

}

fileElement.setLoaded(true);

label.setText("box size:" + box.size());

}

//check whether children is loaded.

public boolean isLoaded(Element element) {

FileElement fileElement = (FileElement)element;

return fileElement.isLoaded();

}

//check whether the element has child

public boolean isLeaf(Element element) {

Boolean isLeaf = (Boolean)element.getClientProperty("isLeaf");

if(isLeaf == null){

FileElement fileElement = (FileElement)element;

File file = fileElement.getFile();

if(file.isDirectory()){

File[] files = FileElement.fileSystemView.getFiles(file, false);

if (files != null && files.length > 0) {

isLeaf = Boolean.FALSE;

}else{

isLeaf = Boolean.TRUE;

}

}else{

isLeaf = Boolean.TRUE;

}

//cache result

element.putClientProperty("isLeaf", isLeaf);

}

return isLeaf.booleanValue();

}

});

 

Tree 节点的提示框

默认 TTree 节点展示的提示信息为：

使之失 效的办法为： TTree.setElementToolTipDisplayable(false)

Tree 节点的大小

TTree 图片大小可以使用下面的办法设置：

tree.setIconWidth(30); 和 tree.setIconHeight(30);

改变 Tree 根节点

一旦连接 DataBox 的 Tree 组件生成之后，它将分层次展示 DataBox 里面的所有数据。 Tree 的默认根节点是 DataBox 本身。所有的高层次数据节点都将作为它的孩子呈现出来。

但是，你可以使用 DataBox 里面的任何一个数据来作为根节点展示。当创建一个 Tree 组件的时候，你可以指定一个 Element ，或者使用： TTree.setRootElement 来指定。

弹出菜单

Tree 组件有能力使用弹出菜单器进行自定义弹出菜单。菜单生成器能被 用在网络组件中。所以很有可能的是 Tree 组件和一个拓扑图组件进行分享使用同一个弹出菜单生成器。

PopupMenuGenerator generator=new MyPopupMenuGenerator();

//share the same popup menu generator instance for network and tree

network.setPopupMenuGenerator(generator);

tree.setPopupMenuGenerator(generator);

TWaver Tree 组件生成的默认弹出菜单生成器如 下：

设置值为 null 的话就不会有弹出菜单发生了。

使用生成器

TWaver Tree 定义了三种生成器：提示框文本生成器， element 标签文本生成器 和 element 图片生成器。他们被用 于控制 tree 节 点提示框文本内容， tree 节 点标签文本内容和 Tree 节 点图片显示。

我们可以定义一个新的生成器去自定义一些默认的 tree 节点行为。根据下面的例子自定义个一个 ElementIconGenerator 并返回不同的图片：

定义数字节点

public static class NumberNode extends Node {

private int value;

private Color color;

public NumberNode() {

this.value = TWaverUtil.getRandomInt(TreeTest.MAX) + 1;

this.setName(value + "");

}

public int getValue() {

return this.value;

}

public Color getColor() {

return color;

}

public void setColor(Color color) {

this.color = color;

}

}

Add Element

SubNetwork subnetwork = new SubNetwork();

Node node3 = new Node();

node3.setName("Node3");

node3.setParent(subnetwork);

box.addElement(node3);

NumberNode node4=new NumberNode();

Node node5=new Node();

node4.addChild(node5);

box.addElement(node4);

box.addElement(node5);

box.addElement(new NumberNode());

box.addElement(new NumberNode());

box.addElement(new NumberNode());

 

Set IconGenerator

tree.setElementIconGenerator(new Generator() {

public Object generate(Object object) {

if (!(object instanceof NumberNode)) {

return new TTreeCellIcon((Element) object, tree);

}

final NumberNode node = (NumberNode) object;

Icon icon = new Icon() {

public int getIconHeight() {

return 16;

}

public int getIconWidth() {

return 100;

}

//paint tree node icon

public void paintIcon(Component c, Graphics g, int x, int y) {

//paint selected state

if (node.isSelected()) {

g.setColor(UIManager.getColor("Tree.selectionBackground"));

g.fill3DRect(x, y, getIconWidth(), getIconHeight(), true);

g.setColor(UIManager.getColor("Tree.selectionBorderColor"));

g.drawRect(x, y, getIconWidth(), getIconHeight());

}

g.setColor(node.getColor());

g.fill3DRect(x + 1,

y + 2,

node.getValue() * getIconWidth() / MAX - 2,

getIconHeight() - 4, true);

((Graphics2D) g).setStroke(TWaverConst.BASIC_STROKE);

g.setColor(Color.BLACK);

g.drawRect(x + 1, y + 2, getIconWidth() - 2, getIconHeight() - 4);

}

};

return icon;