JavaFX UI控件教程（十四）之Tree View

翻译自 Tree View

在本章中，您将学习如何在JavaFX应用程序中构建树结构，向树视图添加项，处理事件以及通过实现和应用单元工厂来自定义树单元。

包的TreeView类javafx.scene.control提供了层次结构的视图。在每个树中，层次结构中的最高对象称为“根”。根包含几个子项，也可以有子项。没有孩子的项目称为“叶子”。

图13-1显示了具有树视图的应用程序的屏幕截图。

图13-1树视图示例

创建树视图

在JavaFX应用程序中构建树结构时，通常需要实例化TreeView类，定义多个TreeItem对象，使其中一个树项成为根，将根添加到树视图中，将其他树项添加到根中。

您可以使用相应的TreeItem类构造函数或通过调用setGraphic方法，使用图形图标来附加每个树项。图标的建议大小为16x16，但事实上，任何Node对象都可以设置为图标，并且它将是完全交互式的。

例13-1是具有根和五个叶子的简单树视图的实现。

示例13-1创建树视图

import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;public class TreeViewSample extends Application {private final Node rootIcon = new ImageView(new Image(getClass().getResourceAsStream("folder_16.png")));public static void main(String[] args) {launch(args);}@Overridepublic void start(Stage primaryStage) {primaryStage.setTitle("Tree View Sample");        TreeItem<String> rootItem = new TreeItem<String> ("Inbox", rootIcon);rootItem.setExpanded(true);for (int i = 1; i < 6; i++) {TreeItem<String> item = new TreeItem<String> ("Message" + i);            rootItem.getChildren().add(item);}        TreeView<String> tree = new TreeView<String> (rootItem);        StackPane root = new StackPane();root.getChildren().add(tree);primaryStage.setScene(new Scene(root, 300, 250));primaryStage.show();}
}

for通过调用getChildren和add方法将循环中创建的所有树项添加到根项。您也可以使用该addAll方法而不是add方法一次包含所有先前创建的树项。

如示例13-1所示，您可以在TreeView创建新TreeView对象时在类的构造函数中指定树的根，也可以通过调用类的方法来设置它。setRootTreeView

setExpanded调用根项的方法定义了树视图项的初始外观。默认情况下，所有TreeItem实例都已折叠，必要时必须手动展开。将true值传递给setExpanded方法，以便在应用程序启动时根树项看起来展开，如图13-2所示。

图13-2具有五个树项的树视图

例13-1创建了一个包含String项目的简单树视图。但是，树结构可以包含不同类型的项目。使用以下TreeItem构造函数的通用表示法来定义由树项表示的特定于应用程序的数据：TreeItem<T> (T value)。该T值可以指定任何对象，例如UI控件或自定义组件。

与TreeView类不同，TreeItem该类不扩展Node类。因此，您无法应用任何视觉效果或向树项目添加菜单。使用单元工厂机制克服此障碍，并根据应用程序的需要为树项定义尽可能多的自定义行为。

实现Cell工厂

细胞工厂机制被用于生成TreeCell实例来表示单个TreeItem的TreeView。当您的应用程序使用动态更改或按需添加的过多数据进行操作时，使用单元工厂尤其有用。

考虑一个可视化给定公司的人力资源数据的应用程序，并使用户能够修改员工详细信息并添加新员工。

例13-2创建了Employee类，并根据各自的部门安排员工。

示例13-2创建人力资源树视图模型

import java.util.Arrays;
import java.util.List;
import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.stage.Stage;import javafx.beans.property.SimpleStringProperty;
import javafx.scene.layout.VBox;public class TreeViewSample extends Application {private final Node rootIcon = new ImageView(new Image(getClass().getResourceAsStream("root.png")));private final Image depIcon = new Image(getClass().getResourceAsStream("department.png"));List<Employee> employees = Arrays.<Employee>asList(new Employee("Ethan Williams", "Sales Department"),new Employee("Emma Jones", "Sales Department"),new Employee("Michael Brown", "Sales Department"),new Employee("Anna Black", "Sales Department"),new Employee("Rodger York", "Sales Department"),new Employee("Susan Collins", "Sales Department"),new Employee("Mike Graham", "IT Support"),new Employee("Judy Mayer", "IT Support"),new Employee("Gregory Smith", "IT Support"),new Employee("Jacob Smith", "Accounts Department"),new Employee("Isabella Johnson", "Accounts Department"));TreeItem<String> rootNode = new TreeItem<String>("MyCompany Human Resources", rootIcon);public static void main(String[] args) {launch(args);}@Overridepublic void start(Stage stage) {rootNode.setExpanded(true);for (Employee employee : employees) {TreeItem<String> empLeaf = new TreeItem<String>(employee.getName());boolean found = false;for (TreeItem<String> depNode : rootNode.getChildren()) {if (depNode.getValue().contentEquals(employee.getDepartment())){depNode.getChildren().add(empLeaf);found = true;break;}}if (!found) {TreeItem<String> depNode = new TreeItem<String>(employee.getDepartment(), new ImageView(depIcon));rootNode.getChildren().add(depNode);depNode.getChildren().add(empLeaf);}}stage.setTitle("Tree View Sample");VBox box = new VBox();final Scene scene = new Scene(box, 400, 300);scene.setFill(Color.LIGHTGRAY);TreeView<String> treeView = new TreeView<String>(rootNode);box.getChildren().add(treeView);stage.setScene(scene);stage.show();}public static class Employee {private final SimpleStringProperty name;private final SimpleStringProperty department;private Employee(String name, String department) {this.name = new SimpleStringProperty(name);this.department = new SimpleStringProperty(department);}public String getName() {return name.get();}public void setName(String fName) {name.set(fName);}public String getDepartment() {return department.get();}public void setDepartment(String fName) {department.set(fName);}}
}

例13-2中的每个Employee对象都有两个属性：和。与雇员相对应的对象被称为树叶，而与部门对应的树项被称为具有子项的树项。通过调用方法从对象中检索要创建的新部门的名称。namedepartmentTreeItemEmployeegetDepartment

编译并运行此应用程序时，它会创建如图13-3所示的窗口。

图13-3树视图示例应用程序中的员工列表

使用示例13-2，您可以预览树视图及其项目，但不能更改现有项目或添加任何新项目。例13-3显示了实现单元工厂的应用程序的修改版本。修改后的应用程序使您可以更改员工的姓名。

示例13-3实现单元工厂

import java.util.Arrays;
import java.util.List;
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.control.TreeCell;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.util.Callback;import javafx.beans.property.SimpleStringProperty;
import javafx.scene.layout.VBox;public class TreeViewSample extends Application {private final Node rootIcon = new ImageView(new Image(getClass().getResourceAsStream("root.png")));private final Image depIcon = new Image(getClass().getResourceAsStream("department.png"));List<Employee> employees = Arrays.<Employee>asList(new Employee("Ethan Williams", "Sales Department"),new Employee("Emma Jones", "Sales Department"),new Employee("Michael Brown", "Sales Department"),new Employee("Anna Black", "Sales Department"),new Employee("Rodger York", "Sales Department"),new Employee("Susan Collins", "Sales Department"),new Employee("Mike Graham", "IT Support"),new Employee("Judy Mayer", "IT Support"),new Employee("Gregory Smith", "IT Support"),new Employee("Jacob Smith", "Accounts Department"),new Employee("Isabella Johnson", "Accounts Department"));TreeItem<String> rootNode = new TreeItem<String>("MyCompany Human Resources", rootIcon);public static void main(String[] args) {Application.launch(args);}@Overridepublic void start(Stage stage) {rootNode.setExpanded(true);for (Employee employee : employees) {TreeItem<String> empLeaf = new TreeItem<String>(employee.getName());boolean found = false;for (TreeItem<String> depNode : rootNode.getChildren()) {if (depNode.getValue().contentEquals(employee.getDepartment())){depNode.getChildren().add(empLeaf);found = true;break;}}if (!found) {TreeItem<String> depNode = new TreeItem<String>(employee.getDepartment(), new ImageView(depIcon));rootNode.getChildren().add(depNode);depNode.getChildren().add(empLeaf);}}stage.setTitle("Tree View Sample");VBox box = new VBox();final Scene scene = new Scene(box, 400, 300);scene.setFill(Color.LIGHTGRAY);TreeView<String> treeView = new TreeView<String>(rootNode);treeView.setEditable(true);treeView.setCellFactory(new Callback<TreeView<String>,TreeCell<String>>(){@Overridepublic TreeCell<String> call(TreeView<String> p) {return new TextFieldTreeCellImpl();}});box.getChildren().add(treeView);stage.setScene(scene);stage.show();}private final class TextFieldTreeCellImpl extends TreeCell<String> {private TextField textField;public TextFieldTreeCellImpl() {}@Overridepublic void startEdit() {super.startEdit();if (textField == null) {createTextField();}setText(null);setGraphic(textField);textField.selectAll();}@Overridepublic void cancelEdit() {super.cancelEdit();setText((String) getItem());setGraphic(getTreeItem().getGraphic());}@Overridepublic void updateItem(String item, boolean empty) {super.updateItem(item, empty);if (empty) {setText(null);setGraphic(null);} else {if (isEditing()) {if (textField != null) {textField.setText(getString());}setText(null);setGraphic(textField);} else {setText(getString());setGraphic(getTreeItem().getGraphic());}}}private void createTextField() {textField = new TextField(getString());textField.setOnKeyReleased(new EventHandler<KeyEvent>() {@Overridepublic void handle(KeyEvent t) {if (t.getCode() == KeyCode.ENTER) {commitEdit(textField.getText());} else if (t.getCode() == KeyCode.ESCAPE) {cancelEdit();}}});}private String getString() {return getItem() == null ? "" : getItem().toString();}}public static class Employee {private final SimpleStringProperty name;private final SimpleStringProperty department;private Employee(String name, String department) {this.name = new SimpleStringProperty(name);this.department = new SimpleStringProperty(department);}public String getName() {return name.get();}public void setName(String fName) {name.set(fName);}public String getDepartment() {return department.get();}public void setDepartment(String fName) {department.set(fName);}}
}

setCellFactory调用该treeView对象的方法会覆盖TreeCell实现并重新定义TextFieldTreeCellImpl类中指定的树项。

在TextFieldTreeCellImpl类创建了一个TextField针对每个树对象，并提供方法来处理编辑事件。

请注意，必须setEditable(true)在树视图上显式调用该方法才能编辑其所有项目。

编译并运行例13-3中的应用程序。然后尝试单击树中的员工并更改其名称。图13-4显示了在IT支持部门编辑树项目的时刻。

图13-4更改员工姓名

按需添加新树项

修改Tree View Sample应用程序，以便人力资源代表可以添加新员工。使用示例13-4的粗体代码行作为参考。这些行将上下文菜单添加到与部门对应的树项目中。选择“添加员工”菜单项后，新树项将作为叶添加到当前部门。

使用此isLeaf方法可以区分部门树项和员工树项。

示例13-4添加新树项

import java.util.Arrays;
import java.util.List;
import javafx.application.Application;
import javafx.event.Event;
import javafx.event.EventHandler;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.control.TreeCell;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.util.Callback;import javafx.beans.property.SimpleStringProperty;
import javafx.scene.control.ContextMenu;
import javafx.scene.control.MenuItem;
import javafx.scene.layout.VBox;public class TreeViewSample extends Application {private final Node rootIcon = new ImageView(new Image(getClass().getResourceAsStream("root.png")));private final Image depIcon = new Image(getClass().getResourceAsStream("department.png"));List<Employee> employees = Arrays.<Employee>asList(new Employee("Ethan Williams", "Sales Department"),new Employee("Emma Jones", "Sales Department"),new Employee("Michael Brown", "Sales Department"),new Employee("Anna Black", "Sales Department"),new Employee("Rodger York", "Sales Department"),new Employee("Susan Collins", "Sales Department"),new Employee("Mike Graham", "IT Support"),new Employee("Judy Mayer", "IT Support"),new Employee("Gregory Smith", "IT Support"),new Employee("Jacob Smith", "Accounts Department"),new Employee("Isabella Johnson", "Accounts Department"));TreeItem<String> rootNode = new TreeItem<String>("MyCompany Human Resources", rootIcon);public static void main(String[] args) {Application.launch(args);}@Overridepublic void start(Stage stage) {rootNode.setExpanded(true);for (Employee employee : employees) {TreeItem<String> empLeaf = new TreeItem<String>(employee.getName());boolean found = false;for (TreeItem<String> depNode : rootNode.getChildren()) {if (depNode.getValue().contentEquals(employee.getDepartment())){depNode.getChildren().add(empLeaf);found = true;break;}}if (!found) {TreeItem depNode = new TreeItem(employee.getDepartment(), new ImageView(depIcon));rootNode.getChildren().add(depNode);depNode.getChildren().add(empLeaf);}}stage.setTitle("Tree View Sample");VBox box = new VBox();final Scene scene = new Scene(box, 400, 300);scene.setFill(Color.LIGHTGRAY);TreeView<String> treeView = new TreeView<String>(rootNode);treeView.setEditable(true);treeView.setCellFactory(new Callback<TreeView<String>,TreeCell<String>>(){@Overridepublic TreeCell<String> call(TreeView<String> p) {return new TextFieldTreeCellImpl();}});box.getChildren().add(treeView);stage.setScene(scene);stage.show();}private final class TextFieldTreeCellImpl extends TreeCell<String> {private TextField textField;private ContextMenu addMenu = new ContextMenu();public TextFieldTreeCellImpl() {MenuItem addMenuItem = new MenuItem("Add Employee");addMenu.getItems().add(addMenuItem);addMenuItem.setOnAction(new EventHandler() {public void handle(Event t) {TreeItem newEmployee = new TreeItem<String>("New Employee");getTreeItem().getChildren().add(newEmployee);}});}@Overridepublic void startEdit() {super.startEdit();if (textField == null) {createTextField();}setText(null);setGraphic(textField);textField.selectAll();}@Overridepublic void cancelEdit() {super.cancelEdit();setText((String) getItem());setGraphic(getTreeItem().getGraphic());}@Overridepublic void updateItem(String item, boolean empty) {super.updateItem(item, empty);if (empty) {setText(null);setGraphic(null);} else {if (isEditing()) {if (textField != null) {textField.setText(getString());}setText(null);setGraphic(textField);} else {setText(getString());setGraphic(getTreeItem().getGraphic());if (!getTreeItem().isLeaf()&&getTreeItem().getParent()!= null){setContextMenu(addMenu);}}}}private void createTextField() {textField = new TextField(getString());textField.setOnKeyReleased(new EventHandler<KeyEvent>() {@Overridepublic void handle(KeyEvent t) {if (t.getCode() == KeyCode.ENTER) {commitEdit(textField.getText());} else if (t.getCode() == KeyCode.ESCAPE) {cancelEdit();}}});  }private String getString() {return getItem() == null ? "" : getItem().toString();}}public static class Employee {private final SimpleStringProperty name;private final SimpleStringProperty department;private Employee(String name, String department) {this.name = new SimpleStringProperty(name);this.department = new SimpleStringProperty(department);}public String getName() {return name.get();}public void setName(String fName) {name.set(fName);}public String getDepartment() {return department.get();}public void setDepartment(String fName) {department.set(fName);}}
}

编译并运行应用程序。然后在树结构中选择一个部门并右键单击它。出现上下文菜单，如图13-5所示。

图13-5添加新员工的上下文菜单

从上下文菜单中选择“添加员工”菜单项时，新记录将添加到当前部门。图13-6显示了添加到Accounts Department的新树项。

图13-6新增员工

由于已为树项启用了编辑，因此可以将默认的“新员工”值更改为相应的名称。

使用树单元格编辑器

开始的JavaFX SDK 2.2，可以使用可用下面的树单元格编辑器的API中：CheckBoxTreeCell，ChoiceBoxTreeCell，ComboBoxTreeCell，TextFieldTreeCell。类扩展了TreeCell实现以在单元内呈现特定控件。

例13-5演示了CheckBoxTreeCell在UI中使用类来构建复选框的层次结构。

示例13-5使用CheckBoxTreeCell类

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.control.cell.CheckBoxTreeCell;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;public class TreeViewSample extends Application {public static void main(String[] args) {launch(args);}@Overridepublic void start(Stage primaryStage) {primaryStage.setTitle("Tree View Sample");        CheckBoxTreeItem<String> rootItem = new CheckBoxTreeItem<String>("View Source Files");rootItem.setExpanded(true);                  final TreeView tree = new TreeView(rootItem);  tree.setEditable(true);tree.setCellFactory(CheckBoxTreeCell.<String>forTreeView());    for (int i = 0; i < 8; i++) {final CheckBoxTreeItem<String> checkBoxTreeItem = new CheckBoxTreeItem<String>("Sample" + (i+1));rootItem.getChildren().add(checkBoxTreeItem);                }tree.setRoot(rootItem);tree.setShowRoot(true);StackPane root = new StackPane();root.getChildren().add(tree);primaryStage.setScene(new Scene(root, 300, 250));primaryStage.show();}
}

例13-5使用CheckBoxTreeItem类而不是TreeItem 构建树视图。该CheckBoxTreeItem班是专门设计用于支持树形结构的选择，未选择的，和不确定的状态。甲CheckBoxTreeItem实例可以是独立或从属。如果CheckBoxTreeItem实例是独立的，则对其选择状态的任何更改都不会影响其父CheckBoxTreeItem实例和子实例。默认情况下，所有ChechBoxTreeItem实例都是相关的。

编译并运行Example 13-5，然后选择View Source Files项。您应该看到如图13-7所示的输出，其中选择了所有子项。

图13-7从属CheckBoxTreeItem

要使CheckBoxTreeItem实例独立，请使用以下setIndependent方法：rootItem.setIndependent(true);。

运行TreeViewSample应用程序时，其行为应如图13-8所示进行更改。

图13-8独立CheckBoxTreeItem

相关的API文档

TreeView
TreeItem
TreeCell
Cell
TextField
CheckBoxTreeCell
CheckBoxTreeItem