8 使用库面板设计GUI
本章介绍了JavaFX Scene Builder的库面板以及可以从中访问的JavaFX GUI对象。提供了关于使用一些可用的容器元素的信息。本章还讨论了如何将自定义的GUI对象导入到JavaFX Scene Builder中。
库面板显示在主窗口的左侧，如图8-1所示。您可以通过从主菜单中选择View，然后选择Hide Library或Hide Left Side Panel来隐藏库面板，以及文档面板一起隐藏。库面板由可折叠的容器、控件、菜单、形状、图表、3D和其他元素组成，可用于构建FXML布局。这些GUI元素是与Java SE发布一起提供的相同的JavaFX GUI元素。要查找在JDK 8发布中引入的GUI组件，例如TextFlow、SwingNode和3D对象，请在库面板的搜索文本字段中输入FX8。
还有一个自定义部分，列出了已导入到库中的自定义GUI组件。自定义类型元素是那些在JDK 8的JavaFX API库中未提供的GUI组件。有关如何导入自己的或第三方自定义GUI组件的更多信息，请参见管理自定义GUI元素。
对于3D GUI元素的支持是有限的。您可以打开包含3D对象的FXML文件，但只能通过检查器面板编辑其中的一些属性，并且不能直接在内容面板中操作对象。JavaFX API中提供了预定义的3D形状（Box、Sphere和Cylinder），它们位于库面板的形状部分。在3D部分中有与光源和相机相关的对象。这些对象可在库中使用，以便您可以编辑其属性并添加其fx:id，以便可以从控制器源代码中引用它们。
当您在Scene Builder中打开一个新的FXML布局时，它是一个空文件。您可以通过从容器部分选择顶级根容器并将其添加到内容或层次结构面板中来开始构建布局。然后，您可以向根容器中添加所需的容器或GUI元素，以构建您的FXML布局。
要从库面板中添加一个GUI元素，请执行以下操作之一：
-
从库面板的列表中选择一个项目，并将其拖放到内容面板或层次结构面板上。
-
从库面板中选择一个项目，然后按下Enter键。
-
双击库面板中的选定项目，它将被添加到内容面板中。
-
单击菜单栏上的插入命令，并从下拉列表中选择一个可用的GUI元素。如果布局当前为空，则该元素将被添加为根元素。如果已经存在根元素，并且在层次结构或内容面板中当前没有选定任何内容，则该元素将被添加到根元素内部。否则，它将被添加到当前选定元素的旁边。
使用位于面板顶部的搜索文本字段，过滤库中可用的GUI元素列表。例如，在搜索字段中键入button将显示所有名称中包含按钮的GUI元素。
在库面板搜索文本字段的右侧是一个菜单按钮，单击它会显示一个命令菜单，如图8-2所示。这些命令帮助您管理库内容的显示方式：作为一个长列表，或作为分组元素的列表显示在不同的部分中，这是默认设置。还提供了允许您将自定义GUI组件导入到库中的命令。有关更多信息，请参见管理自定义GUI元素。
选择自定义库文件夹菜单项会显示一个子菜单，其中包括在本地文件管理器中显示和显示JAR分析报告命令。选择在 本地文件管理器中显示 命令（其中本地文件管理器是Mac OS平台的Finder，Windows平台的Explorer，Linux平台的Desktop）将在包含自定义组件JAR和/或FXML文件的文件夹位置打开系统的文件管理器。如果自定义库文件夹为空，则该命令被禁用。
选择显示JAR分析报告命令允许您查看位于自定义库文件夹中的JAR文件的分析报告。此报告将列出所有被检查并确定为不适合添加到库中的Java类的自定义组件。还提供了失败标准的指示，例如该类不是JavaFX Node，或者Scene Builder无法实例化该类。在后一种情况下，还列出了Java异常。
以下部分讨论了在Library面板中可用的一些容器元素以及如何在JavaFX Scene Builder工具中最大化它们的使用。还介绍了如何管理自定义类型。要了解JavaFX SDK平台提供的所有其他GUI元素，请参阅JavaFX API文档。
管理自定义GUI元素
在Library面板中显示的第一个部分是Custom部分，如图8-3所示。它列出了所有不属于JavaFX 8 API库的自定义GUI元素，但可用于在GUI布局中使用。自定义GUI元素是由用户或第三方创建的Java类，并添加到可用组件的Library中，您可以在FXML布局中使用。
向库中添加自定义组件
您可以使用库面板的导入命令导入自定义的GUI组件。您可以将层次结构或内容面板中的任何简单或复杂的图形对象添加到库中，并将其作为可重用组件从库面板中使用。您还可以从FXML文档中导入图形组件，或导入JAR文件并选择其中的一部分自定义组件，以使它们成为永久可用的可重用组件。
-
从JAR或FXML文件中导入自定义GUI组件的步骤：
-
从库面板的菜单中选择导入JAR/FXML文件命令，或直接从系统的本地文件管理器（资源管理器或Finder）中拖动JAR或FXML文件并将其放入库面板中
-
在打开的对话框窗口中，导航到要导入的JAR或FXML文件的位置。
显示类似于图8-4所示的导入对话框。检查JAR文件的内容，并在对话框窗口中显示所有被确定为合适的自定义组件的Java类。解析FXML文件的内容以确保要添加的组件是有效且自包含的。 -
从导入对话框窗口中，选择或取消选择要导入的项目列表中的项目。
-
点击导入组件。
导入的项目将添加到库面板的自定义部分。它们可以立即使用，并且在重新启动Scene Builder后仍然保留在库中
-
-
要将当前布局中的自定义GUI对象添加到库面板中：
-
使用层次结构或内容面板，在当前布局中选择自包含组件。
-
从库面板的菜单中选择导入选择命令。或者，将选定的组件从内容或层次结构面板拖放到库面板中。
所选项目将被检查，如果遇到问题，将显示类似于图8-5的错误对话框。如果没有遇到错误，自定义组件将被添加到库中，并在消息栏中显示一条消息。导入选择时创建的FXML文件的名称基于根元素的名称。例如，如果您的选择中的根元素是
Button类，则第一次导入该元素时创建的文件名为Button_1.fxml。您还可以导入在内容或层次结构面板中进行的多个选择。例如，您可以在内容面板中选择一个
Button和一个CheckBox元素，并将这两个元素拖放到库中。导入的元素在库面板的自定义部分中显示为两行：一个名为Button_1，另一个名为CheckBox_1。它们分别存储在对应的FXML文件Button_1.fxml和CheckBox_1.fxml中，并创建在自定义库文件夹中。
-
当您在另一个时间导入相同的JAR或FXML文件时，新导入的版本将替换先前导入的版本。如果您在另一个时间从内容或层次结构面板中导入相同的自包含GUI元素，则为该元素创建的FXML文件将带有版本号。例如，如果以Button元素作为根的选择已经被先前导入过，则第二次导入时为自定义元素创建的新FXML文件的名称为Button_2.fxml。
如果您决定不再需要自定义GUI组件，可以直接从自定义库文件夹中删除JAR和FXML文件，或者删除整个文件夹。即使在运行Scene Builder工具时，也可以安全地执行此操作。Scene Builder工具会定期检查自定义库文件夹的内容，并相应地更新库的内容。
要使用自定义库文件夹，打开库面板的菜单，点击自定义库文件夹，然后选择在本地文件管理器中显示，其中本地文件管理器是Mac OS平台上的Finder，Windows平台上的Explorer，以及Linux平台上的Desktop。
使用网格面板容器
网格面板容器使您能够创建一个灵活的GUI元素布局，这些元素按行和列组织。通过从库面板的容器部分选择网格面板并将其拖动到内容或层次结构面板中，您可以在布局中使用网格面板。然后，您可以在网格面板容器中添加其他GUI元素，元素会根据填充、间隙和其他属性自动排列。
您还可以添加一个包含您已经添加到布局中的GUI元素的网格面板容器。请按照以下步骤操作：
-
从主菜单中选择编辑，然后选择全选，以选择布局中的所有元素。
-
通过从主菜单中选择排列，然后选择包装在，再选择网格面板，添加网格面板容器。
在内容面板中，一个空的未选中的网格面板是不可见的。要使其边框可见，点击层次结构面板中对应的网格面板元素的相应层级。要使用特定的网格面板，直接点击其边界，但不要点击其中包含的任何元素。当选中时，网格面板周围有一个浅蓝色的边框标签，并显示每个对应的索引号，如图8-6所示。要选择单个列或行，请点击选择边框标签内部。所选列或行的标签会变成黄色背景，如图8-6中的第1列所示。您还可以同时选择多个行或多个列，以便一次编辑这些选定项的值。但是，您不能同时选择行和列的组合。
要查看可以在网格面板上执行的操作的子菜单，请执行以下操作之一：
-
在网格面板上右键单击，从上下文菜单中选择一个命令。
-
从主菜单中选择修改，然后选择网格面板。
您可以将行上移或下移，将列左移或右移。您还可以删除或添加行或列，增加或减少行或列的跨度。
Inspector面板的布局部分还可以修改当前选定的Grid Pane。与选定行或列相关的属性会显示出来，并且可以在GridPane行或GridPane列部分进行管理。
您可以将一个元素从一个网格单元移动到另一个已存在的网格单元。在内容面板中，选择要重新定位的元素，并按住鼠标按钮，将元素拖动到目标网格单元，如图8-7所示。注意，只要将光标悬停在目标网格单元上方，目标网格单元的背景就会变为灰色。释放鼠标按钮后，元素将被移动到Grid Pane中目标网格单元的位置。
要将元素移动到尚未创建的新行或列中，选择内容面板中的元素，并将其拖动到要插入新行或列的行或列之间的分隔线上。当将鼠标悬停在单元格分隔线上方时，单元格分隔线会变粗并变为灰色。释放光标后，将创建新行或列，并将元素放置在目标网格单元中。 图8-8显示了一个按钮元素被拖动到即将插入的新列的第二行的网格单元中。
使用Border Pane容器
Border Pane容器允许您在容器的顶部、右侧、左侧、底部和中心位置布局GUI元素。通过从库面板的容器部分选择BorderPane元素并将其拖动到内容面板中，可以在布局中使用Border Pane。在添加BorderPane元素后，图8-9显示了层次结构面板。
您可以通过将元素从库面板拖动到Border Pane的特定位置来将GUI元素添加到Border Pane容器中。您还可以将元素从库面板拖动到层次结构面板中，如图8-10所示。请注意，当元素被拖动到层次结构面板中的目标层上时，该层在Border Pane中的相应位置会变为较深的颜色，如图8-10右侧所示。
您可以将元素从Border Pane的一个位置移动到另一个位置。在内容面板或层次结构面板中，选择要重新定位的元素，并将元素拖动到目标位置，如图8-11所示。请注意，当您将鼠标悬停在目标位置上方时，目标位置的背景颜色会变暗。释放鼠标按钮后，元素将移动到Border Pane中的目标位置。
使用Tab Pane容器
默认情况下，Tab Pane带有两个Tab元素，每个Tab元素都包含一个Anchor Pane元素，如图8-12所示。
您可以通过双击标签并直接编辑其在内容面板中的Text属性来更改Tab元素的默认标题。要向Tab Pane容器添加另一个Tab元素，可以将Tab元素从库面板拖放到内容面板或层次结构面板中的Tab Pane中。新的Tab元素将添加到任何现有Tab元素的右侧。要更改Tab元素在Tab Pane中的顺序，可以使用层次结构面板。将Tab元素的行从层次结构面板拖放到Tab Pane容器中的目标位置。您还可以使用内容面板将其标签拖放到Tab Pane容器中的目标位置。
要向Tab元素的Anchor Pane添加GUI元素，请单击目标Tab元素的标题以选择它。将要添加的GUI元素从库面板拖放到Tab元素中，如图8-13所示。
根据每个Tab元素的标题长度和Tab Pane容器中的Tab元素数量，当一些Tab变得隐藏时，会自动在Tab Pane容器的菜单栏中添加一个下拉菜单，如图8-14所示。这个下拉菜单可以选择所需的标签。在内容面板中，此菜单不起作用，但在预览窗口中查看布局时是有效的。如果调整Tab Pane容器的大小，使所有Tab元素都完全可见，则下拉菜单将自动从Tab Pane的菜单栏中移除。
使用菜单控件
Library面板的Controls部分包含三个与菜单相关的控件元素：MenuBar、Menu Button和Split Menu Button。当你从Library面板拖放一个MenuBar到Content面板上时，它会自动填充带有标签为File、Edit和Help的Menu元素。默认情况下，每个Menu元素都包含一个Menu Item元素，如图8-15所示。
Menu和Menu Item元素在Content面板中没有可见的图形表示，所以你只能使用层次结构面板来选择和管理这些元素。你可以通过在层次结构面板中选择Menu元素并将其拖动到你想要显示的位置来更改Menu元素在菜单栏中的显示顺序。你可以通过选择Menu或Menu Item元素并点击文本区域来直接修改其文本属性，进入编辑模式。你也可以使用Inspector面板的Properties部分来修改Text字段。
你可以通过从Library面板将元素拖放到层次结构面板中的目标Menu位置来添加其他与菜单相关的项，例如另一个Menu Item或Separator Menu Item。要创建二级菜单，在层次结构面板中的一个已存在的Menu元素内放置一个Menu元素。
使用Preview菜单可以查看你的菜单栏的效果。从预览窗口中，你可以点击菜单项及其子菜单。
