7 使用文档面板

层次结构部分

层次结构部分显示了组成您的FXML布局的所有GUI元素，包括在内容面板中不可见的元素。您可以使用层次结构面板来专注于一个特定的GUI元素，无论它是父节点还是叶节点。在将元素隔离后，您可以使用内容面板或检查器面板来专注于该特定元素及其属性。当在层次结构面板中隔离一个GUI元素时，从FXML布局的根到特定GUI元素的路径将显示在路径和选择栏中。所选的GUI对象在层次结构面板和内容面板中都会被突出显示。

您还可以通过将其从库面板拖动到层次结构面板中的所需位置来向FXML布局中添加新的GUI元素。这在添加弹出控件（如Tooltip或ContextMenu）时特别有用。例如，要将Tooltip添加到Button元素中，将Tooltip控件从库面板拖动到层次结构面板中的目标Button元素上。Tooltip将成为该Button元素的子元素。

您可以通过在层次结构面板中的容器内拖动它来重新排列GUI元素在布局中的位置。您可以在层次结构面板中同时选择多个元素，并将它们拖放到一个位置。

层次结构面板还可用于向具有图形属性的GUI元素添加图形元素，根据其API。例如，您可以向Button元素添加一个图形元素，但不能向GridPane元素添加图形元素。使用以下步骤使用层次结构面板向Button元素添加一个Circle图形元素：

1. 从库面板中，将Circle元素拖动到层次结构面板中的目标Button层。

2. 在不释放鼠标光标的情况下，将鼠标悬停在Button层上一秒钟，您会注意到为Circle创建了一个新的子层。

3. 释放鼠标光标，Circle将出现在内容面板中，并具有默认的半径大小为100。

4. 在检查器面板的布局部分，将圆的半径大小减小到6，以使其更适合在Button中使用。
   您一次只能向Button元素添加一个图形元素。要添加新的图形元素，必须先删除现有的图形元素。如果元素是容器，则可以包含任意数量的图形元素。

在内容面板中右键单击一个元素或在层次结构面板中的特定元素层上右键单击，将显示一个上下文菜单，其中包含可用于所选元素的命令，如图7-2所示。这些命令是菜单栏中可用命令的子集。您可以点击层次结构面板中列出的GUI元素行的右侧以激活内联属性编辑器。

当您点击右上角在图7-3中圈出的下拉箭头，并选择层次结构显示，您可以选择信息、fx:id或节点ID来显示在层次结构面板中列出的每个元素旁边。默认显示模式是信息，它显示元素的任何相关信息，或者如果元素有文本属性，则显示文本属性的值。当您选择fx:id显示模式时，层次结构面板显示每个元素的fx:id属性的值，该值由应用程序控制器类使用。当您选择节点ID时，层次结构面板显示与每个元素在选择栏中使用的相同节点名称。

控制器部分

控制器部分如图7-4所示，可以管理您想要与FXML文档一起使用的控制器类。控制器类提供了处理FXML布局中对象行为的逻辑。在控制器类文本字段中，您设置要使用的控制器类文件的完全限定Java类名。该文件必须与FXML文件位于同一文件夹、子文件夹或父文件夹中。如果控制器类文件已经存在于与您正在使用的FXML文件相同的文件夹中，您可以通过单击图7-4中圈出的向下箭头，从下拉列表中选择控制器类。如果您正在使用带有JavaFX Scene Builder的NetBeans IDE，并且您的FXML文件位于NetBeans项目中，则控制器类Java文件可以位于NetBeans项目的src文件夹中的任何Java包中。

FXML文档中使用的所有fx:id值都列在表格视图中。控制器部分还包括fx:root构造复选框，用于创建对先前定义的根元素的引用。有关<fx:root>元素的更多信息，请参阅JavaFX API文档。