DOC-03-14 树视图(Tree View)

在本章你可以学习在JavaFX应用程序中如何构建树形结构,如何向树视图中增加项、处理事件、通过实现和添加单元格工厂(Cell Factory)自定义树的单元格。

在javafx.scene.control包中的TreeView类提供了展示层级结构的视图。在树中最顶级的节点被称为“根(Root)节点”。Root节点包括了一些子节点,这些子节点还可以有下级子节点。一个没有子节点的节点被称为“叶子(leaf)节点”。

图14-1是一个带有树视图的应用程序截图。

14-1 树视图样例

3-14-1 tree-view-sample

创建树视图

如果需要在JavaFX应用中创建树形结构,你一般需要实例化TreeView类,然后定义一些TreeItem对象,指定其中的某一个成为根节点,将根节点添加到树视图中,并将其它TreeItem对象添加到根节点下。

通过调用TreeItem对应的构造方法或使用setGraphic方法,你可以为每个树节点增加图标。建议的图标大小是16 x16,不过实际上任何Node对象都可以被设置为图标,并且将会有全部的交互能力。

下面的代码实现了一个简单的树,它的根节点下有5个叶子节点。

14–1 创建树视图

所有在for循环中创建的的TreeItem都通过调用getChildren和add方法被添加到了root节点上。你也可以使用addAll方法来一次性添加这些子节点。

在上面的代码样例中,你可以通过TreeView类的构造方法来设置根节点,或者通过setRoot方法来指定。

在根节点对象上对setExpanded方法的调用定义了树视图的初始外观。默认情况下所有的TreeItem实例是被折叠起来的,并且必须在必要时手工展开。如果在setExpanded方法调用时设置参数为true,这样会在程序启动时会自动展开根节点,如下图所示。

14–2带有五个子节点的树视图

3-14-2 tree-view-simple

在样例代码中创建了一个简单的树视图,它带有String类型的节点。不过,树型结构可以包含带有各种不同类型数据的节点。使用带有泛型的TreeItem构造方法可以定义展现特定类型数据的树:TreeItem<T> (T value)。T类型的value可以指定任何对象,例如UI控件或者自定义组件等。

与TreeView类不同,TreeItem类不是继承自Node类。因此,你不能对树节点增加视觉特效或者菜单。使用Cell Factory机制可以克服这个障碍,并根据你的应用程序所需来自定义树节点的行为。

实现单元工厂(Cell Factory

Cell Factory机制用于产生TreeCell实例来在TreeView中表现单个的TreeItem。当你的应用需要操作大量动态改变或增加的数据时使用Cell Factory会非常有用。

设想这样一个应用程序:它需要展现某公司的人力资源信息,并且允许用户修改雇员信息、增加新的雇员。

下面的样例代码创建了Employee类,并对雇员根据部门分组。

14–2 为人力资源树视图创建模型

每个Employee对象具有两个属性:name和department。与雇员信息对应的TreeItem对象被用作树的叶子节点,与部门信息对应的TreeItem被用作带有子节点树节点。新部门的名称从Emploee对象中通过getDepartment获取。

程序运行后的界面如下:

14–3 展现雇员信息列表的树视图样例程序

3-14-3 tree-view-hr1

在上面的例子中,你可以预览树视图及其内容,但是你不能修改或增加其中的项。下面的例子中实现了Cell Factory,提供了修改功能,你可以修改雇员的姓名。

14–3 实现一个Cell Factory

通过调用treeView对象的setCellFactory方法可以覆盖TreeCell的默认实现,这里通过TextFieldTreeCellImpl类重新定义了子节点。

TextFieldTreeCellImpl类为每一个树节点创建了一个TextField对象并提供了处理编辑事件的方法。

注意你必须明确地调用TreeView的setEditable(true)方法来允许编辑其节点。

编译并运行上面的程序,然后尝试通过点击树上的雇员姓名来编辑之。下图展示了编辑“IT Support”节点时的情况。

14–4改变雇员名称

3-14-4 tree-view-hr2

添加新的树节点

修改上面的样例程序来使其具有增加新增雇员的功能。使用下面例子中被加粗的代码行来实现此功能。这些代码会为对应的部门节点增加一个上下文菜单。当选择“Add Employee”菜单时,新的Tree Item会被添加到当前的部门下作为叶子节点。

使用isLeaf方法来判断Tree Item是部门还是雇员。

14–4 添加新的树节点

编译并运行程序后,在树型结构上选择部门并单击鼠标右键时将会出现上下文菜单,如下图:

14–5新增雇员信息的上下文菜单

3-14-5 tree-view-hr3

当你从上下文菜单选择“Add Employee”菜单项时,将会向当前的部门下新增雇员记录。下图展现了Accounts Department下新增了一个树节点。

14–6 新增雇员节点

3-14-6 tree-view-hr4

由于树节点已经设置为允许编辑,你可以将默认值“New Employee”修改为更为合适的名称。

使用树单元格(Tree Cell)编辑器

JavaFX API提供了如下几个TreeCell编辑器供使用:CheckBoxTreeCell,ChoiceBoxTreeCell,ComboBoxTreeCell,TextFieldTreeCell。这些类扩展了TreeCell类来在单元格中展现特殊控件。

下面的例子展现了CheckBoxTreeCell类的用法,用它来在树形结构中展现复选框。

14–5 使用CheckBoxTreeCell

上例中使用CheckBoxTreeItem类替换了TreeItem,CheckBoxTreeItem类支持在树型结构中展示选中、未选中以及不确定的状态。一个CheckBoxTreeItem实例可以是独立或非独立状态的。如果是独立状态的CheckBoxTreeItem,则它的选择状态的改变不会影响其父或子CheckBoxTreeItem实例。默认情况下,CheckBoxTreeItem实例是非独立的。

编译运行上面的例子,然后选择“View Source Files”节点,你将会看到如下图的输出,所有子项均会被选择。

14–7 非独立状态的CheckBoxTreeItem样例

3-14-7 tree-view-checkbox1

要使CheckBoxTreeItem实例变成独立的,可以使用setIndependent方法:rootItem.setIndependent(true)。

当你运行样例程序,它将会产生如下图所示的改变:

14–8独立状态的CheckBoxTreeItem样例

3-14-8 tree-view-checkbox2

TreeTableView控件为展现树形结构的数据表提供了更为丰富的扩展,参考后续的树表视图(Tree Table)章节获得更多信息。

相关的文档

    · TreeView

    · TreeItem

    · TreeCell

    · TreeTableView

    · Cell

    · TextField

    · CheckBoxTreeCell

    · CheckBoxTreeItem

    · Customization of UI Controls

 

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/04/doc03_treeview/
百度已收录