9 在Inspector面板中定义属性
本章介绍了JavaFX Scene Builder工具的Inspector面板，包括其属性、布局和代码部分。
在Content面板的右侧是Inspector面板，如图9-1所示，其中展开了布局部分并显示了Inspector菜单。Inspector面板也被称为右侧面板。它包含一个Accordion容器，其中包含多个部分。顶部部分包含一个搜索文本字段，您可以使用它快速定位要编辑的属性。搜索结果显示在顶部部分中，如图9-1所示。您可以直接使用搜索结果部分修改属性。您可以通过点击右上角的下拉箭头来显示Inspector菜单，如图9-1中所圈出的。默认情况下，选择“显示全部”和“查看部分”模式。选择“仅显示已编辑的”模式只显示在FXML文件中明确出现的属性。例如，当从库面板中拖放一个Button元素时，Inspector面板中只显示Text、LayoutX和LayoutY属性。选择“按属性名称查看”或“按属性类型查看”模式会在单个选项卡式部分中显示所有属性，按名称或类型排序。
属性、布局和代码部分为您提供了访问所选GUI元素的属性的方式。在这些部分中显示的每个属性名称都是JavaFX API中对应给定属性名称的表示。例如，JavaFX API中的minWidth属性在Inspector面板中显示为最小宽度。当您点击属性名称时，会打开一个浏览器窗口，显示该属性的JavaFX API名称和描述。
您可以通过从主菜单中选择“视图”，然后选择“隐藏右侧面板”来隐藏Inspector面板。这个功能可以让Content面板有更多的空间。选择“视图”，然后选择“显示右侧面板”可以再次显示面板。
属性部分
检查器面板的属性部分如图9-2所示，可以定义层次结构面板或内容面板中所选元素的样式。
当通过代码部分为所选GUI元素分配fx:id值时，只有在CSS部分的Id字段为null时，该值才会被分配给属性部分的Id字段。
JavaFX CSS部分的样式、样式类和样式表文本区域允许您为特定的GUI组件及其所有子组件指定样式规则和样式表。您可以添加、删除和排序将应用的样式表。有关更多信息，请参见本文档中的使用CSS和CSS分析器进行样式化章节。
属性值可以被CSS文件或Style属性中定义的CSS样式覆盖。被CSS文件定义覆盖的属性的左侧会添加一个CSS图标，如图9-3所示。您可以通过单击属性字段导航到CSS文件或样式属性。
您可以通过按Tab键在不同的属性之间切换。当您按下Enter键或切换到另一个属性字段时，属性的新值将被保存。您可以直接更改可用且可编辑的属性的值来操作所选GUI元素的外观。例如，您可以通过点击向下箭头按钮来显示可用效果的菜单，从而定义所选列表视图元素的效果，如图9-4所示。从可用的效果列表中，您可以选择一个或多个效果应用于所选的GUI元素。
在属性面板的属性部分显示的剩余属性取决于在内容面板或层次结构面板中选择的GUI元素的类型。例如，如果在内容面板中选择单选按钮、切换按钮或单选菜单项，则属性部分显示Toggle Group属性。您可以使用此属性为要添加到切换组的每个切换控件分配相同的ToggleGroup id。
当为属性输入无效值时，会出现一个对话框窗口，并提示您选择以下命令之一：修复值或恢复为上一个值。如果选择修复值命令，则焦点返回到具有无效属性值的文本字段。
如果允许为属性分配值列表，则默认情况下会显示一个空项。要添加项目，请单击+按钮并输入或选择值。单击向下箭头以显示菜单，允许您删除、上移或下移值列表中的项目。
当在内容面板或层次结构面板中选择相同类型的多个对象（例如，两个按钮元素），并且如果任何属性具有不同的值，则该属性的文本字段中显示减号（-）。如果输入新值，则该新值将设置为所有选定的对象。
如果在内容或层次结构面板中选择了不同类型的多个对象，则显示所有对象共有的属性。
某些属性在鼠标悬停在属性值编辑器上时，在属性字段的右侧会出现一个齿轮菜单，如图9-5所示。齿轮菜单提供了可用于该编辑器的特定操作。例如，您可以通过选择重置为默认值命令将当前属性值重置为JavaFX API中的默认值。 图9-5显示了Ellipsis String的可用操作。
任何数值都可以使用向上或向下箭头键增加或减少。使用Shift-Up和Shift-Down键分别将数字值增加和减少10。
Insets、Margins和Padding属性的编辑器允许您输入第一个值（顶部）并将相同的值设置为其余三个文本字段（右侧、底部、左侧），步骤如下：
-
在第一个属性文本字段中输入值。
-
按下Tab键，焦点将放在链接按钮上。
-
按下Enter键，将刚刚输入的属性值应用于剩余的三个属性文本字段。
图9-6显示了在HBox中为按钮分配的Margin属性的统一值。
所有具有预定义值的属性都可以使用自动建议编辑器。当您点击属性的文本字段时，会显示建议的值列表。随着您在文本字段中开始输入，列表会进行过滤。
某些属性值需要外部资源文件的路径，例如图像文件或CSS文件。您可以使用表9-1中列出的格式之一来指定文件路径。
表9-1 外部资源文件的文件路径格式
| 文件格式类型 | 示例 |
|---|---|
|
绝对路径 |
|
|
相对于当前FXML文档位置的路径 |
|
|
相对于类或资源文件位置的路径 |
|
可为具有颜色值的属性提供绘图编辑器。当您点击属性值字段时，绘图编辑器窗口会出现。在图9-7中，显示了所选按钮元素的文本填充颜色属性的绘图编辑器窗口。您可以通过在颜色调色板上移动光标来更改GUI元素的颜色值。
当您点击线性渐变或径向渐变选项卡时，文本填充属性值会相应地更改为线性渐变或径向渐变。绘图编辑器的线性或径向编辑器部分会显示出来。从该部分，您可以通过移动两侧的滑块来调整渐变值，直到您看到所需的颜色色调。其他属性的值也会显示并可以从编辑器中进行编辑。
当您调整特定GUI元素的颜色、线性渐变或径向渐变时，这些调整也会同时反映在内容面板中显示的GUI元素上。
布局部分
Inspector面板的布局部分如图9-9所示，帮助您在应用程序窗口调整大小时指定布局的运行时行为。它还可以让您更改所选元素的大小（例如Pref Width和Pref Height）和位置（例如Layout X和Layout Y）。布局部分显示的一些信息与所选元素本身有关（例如Min Width、Max Height或Pref Width），而另一些信息取决于容器元素的类型。如果所选元素包含在AnchorPane容器中，则在布局部分中会出现一个AnchorPane部分。如果所选元素包含在Grid Pane容器中，则在Inspector面板的布局部分中会有一个Grid Pane子部分。然而，某些容器没有任何相关的上下文信息，因此在布局部分中不会出现上下文容器子部分。
只有当所选元素的最直接容器是AnchorPane时，AnchorPane约束子部分才会出现。例如，在图9-9中，所选的HBox元素的容器是AnchorPane。您可以使用AnchorPane约束子部分中的图表或文本字段来管理锚点面板的锚点。锚点可以帮助您在调整窗口大小时管理所选GUI元素的行为。单击锚线可以指定对象的大小是否随应用程序窗口的调整而更改。单击后，线条从实线黑色变为实线红色。您还可以在图表周围的字段中指定数值。灰色的数值表示锚点已禁用。您可以使用Tab键在锚点字段之间导航。
如果HBox元素的最直接容器是StackPane元素，则布局部分的顶部子部分将标记为StackPane约束，并显示不同的可编辑属性。
变换子部分使您能够定义不同类型的变换设置，例如旋转、缩放和平移。
代码部分
图9-10显示了在层次结构面板中选择新建按钮元素时打开的代码部分。在fx:id字段中，您可以为所选的GUI元素分配一个唯一的值。如果您已经将控制器源类分配给您的FXML布局，则可以从可用变量的下拉列表中进行选择。
代码部分允许您指定在所选元素上发生拖放、键盘、鼠标或任何其他事件时应采取的操作。从事件文本字段的下拉列表中，选择应在特定事件或事件发生时执行的相应命令。给定的命令是对控制器方法事件处理程序的调用。它由默认添加的井号(#)和处理程序方法的名称组成。该方法应符合标准事件处理程序的签名，这意味着它接受一个扩展了javafx.event.Event类的类型的单个参数，并且应返回void。例如，图9-10显示了当按钮上发生OnAction事件时，将执行newIssueFired()控制器方法。
当您从菜单栏点击View，然后选择Show Sample Controller Skeleton时，将出现一个文本编辑器窗口，显示控制器源代码中方法应该是什么样子的示例源文件。您可以复制骨架源文件的内容并根据需要进行自定义。
