翻译自 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
对象时在类的构造函数中指定树的根,也可以通过调用类的方法来设置它。setRoot
TreeView
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
对象都有两个属性:和。与雇员相对应的对象被称为树叶,而与部门对应的树项被称为具有子项的树项。通过调用方法从对象中检索要创建的新部门的名称。name
department
TreeItem
Employee
getDepartment
编译并运行此应用程序时,它会创建如图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