Cindy is a technical writer in the JavaFX group.
She has written tutorials, online help, and technical articles for Java and JavaFX technologies. 
Yves is a member of the JavaFX Scene Builder development team. He enjoys creating tutorials to help users quickly learn and adopt developer tools, such as the JavaFX Scene Builder.JavaFX Scene Builder User Guide
 |
 |
8 Inspector Panel
On the right side of the Content panel is the Inspector panel, as shown in Figure 8-1 with the Layout panel expanded. The Inspector panel is also referred to as the Right
Side panel. It contains an Accordion container with multiple sections. The top section contains a Search text field, which you can use to quickly locate the properties you would like to edit. The search results are displayed in the top subpanel, as shown in Figure 8-1. You can directly modify the properties from the search results panel.
The Properties, Layout, and Code sections give you access to properties for the selected UI element. Each displayed property name shown in the panels is a representation of the corresponding given property name in the Java FX API. For example, minWidth property in the JavaFX API is displayed in the Inspector panel as Min Width. When you hover over the property name, a tooltip displays the corresponding JavaFX API name for the property and its description.
You can hide the Inspector panel by selecting View from the Main menu and then selecting Hide Right Side Panel. Select View and then Show Right Side Panel to make the panel visible again.
Figure 8-1 Inspector Panel with the Search Results Displayed and Layout Panel Opened
Description of "Figure 8-1 Inspector Panel with the Search Results Displayed and Layout Panel Opened"
When multiple elements of the same type (for example, two button elements) are selected in the Content panel or the Hierarchy panel, and if any of the properties have a different value, the minus sign (-) is displayed in the text field for that property. If a new value is entered, then the new value is set for all the selected elements.
There are some properties, such as Blend Mode in the Properties section and some Layout properties, that have an additional checkbox on the right side of the value editor. The checkbox can be used to set the existing property value to null. For instance, if the value for the Blend Mode property is set to SRC_OVER, you can set it back to the default value of null by deselecting the checkbox.
Properties Panel
The Properties panel, shown in Figure 8-2, enables you to define the look of the selected element in the Hierarchy panel or the Content panel. A unique fx:id value can be assigned for the selected GUI element. If the controller class name is already set in the Code Panel, you can select the fx:id value from a drop-down list for the fx:id text field. When the fx:id value is assigned, that same value is also assigned to the Id field in the CSS section of the Properties panel only if that Id field is null.
The Style, Style Class, and Stylesheets text areas in the CSS section enable you to specify the style sheet to use for a particular UI component and all of its child components. You can add, delete, and put in order the style sheets that will be applied. See the Style Sheet Support chapter in this document for additional information.
The Transforms section enable you to define settings for different types of transformations, such as rotation, scaling, and translation.
The remaining properties displayed on the Properties panel depend on the type of UI element that is selected in either the Content panel or in the Hierarchy panel. For example, if you select a radio button, toggle button, or radio menu item in the Content panel, the Properties section shows the Toggle Group property. You can use this property to assign the same ToggleGroup id for each toggle control that you want to add to a toggle group.
You can go from one property to another by pressing the Tab key. A new value for a property is saved when you press Enter or when you move to another property. You can manipulate the look of the selected UI element by directly changing the value of the properties that are available and editable. For example, you can define the effects of a selected tree view element by clicking the down arrow button to open the Effect list view and the + button to display the menu of available effects, as shown in Figure 8-3. From the list of effects available, you can select one or more effects to apply to the selected UI element. To determine the order in which the effects are applied, click the up or down buttons. The effects are applied in chronological order from the top of the list to the bottom.
Figure 8-3 Effects Menu in the Properties Section of the Inspector Panel
Description of "Figure 8-3 Effects Menu in the Properties Section of the Inspector Panel"
Layout Panel
The Layout panel, shown in Figure 8-4, helps you to specify the runtime behavior of the layout when the application's window is resized. It also enables you to change the size (such as, Pref Width and Pref Height) and position (such as, Layout X and Layout Y) of the selected element. Some of the information displayed in the Layout panel pertains to the selected element itself (such as Min Width, Max Height, or Pref Width), and some of the information depends on the type of the container element. If the selected element is contained in an AnchorPane container, then an AnchorPane section is present in the Layout panel. If the selected element is contained in a Grid Pane container, then there is a Grid Pane section in the panel. Some containers, however, do not have any associated contextual information, and so no contextual container section appears in the Layout panel.
The AnchorPane Constraints section, shown in Figure 8-4, only appears when the container of the selected element is an Anchor Pane. In that section, you can use either the diagram or the text fields to manage the Anchor Pane anchors. The anchors help you manage the behavior of the selected UI element when you resize the window. You can click the anchor lines to specify whether the object's size changes as the application's window is adjusted. The lines change from dashed lines to solid lines when you click them. You can also specify the numerical values in the fields below the diagram. A grayed out numerical value means the anchor is disabled.
Code Panel
Figure 8-5 displays the opened Code panel when the topmost Anchor Pane layer is selected in the Hierarchy panel. In the Controller class field, you set the name of the controller class that provides the logic to handle the behavior of the objects in your FXML layout. If the controller class file already exists in the same folder as the FXML layout file you are working on, you can select the controller class from the drop-down list by clicking the button circled in Figure 8-5. The path field contains the full path of the folder where you saved your FXML file. The controller Java class file must be located in this same folder, a sub-folder, or a parent folder. If you are using NetBeans IDE with JavaFX Scene Builder and your FXML file is located in a NetBeans project, then the Controller class java file can be located in any java package inside your NetBeans project's src folder.
|
Tip: The Controller Class text field is only visible when the root container is selected in the Hierarchy panel. |
Figure 8-5 Code Panel When Root Anchor Pane is Selected
Description of "Figure 8-5 Code Panel When Root Anchor Pane is Selected"
The Code panel, shown in Figure 8-6, enables you to specify the action that should be taken when a drag-and-drop, keyboard, mouse, or any other event occurs on the selected element. From the drop-down list on the event text field, select the corresponding command that should be executed when a specific event or events occur for that UI element. The given command is a call to the controller method event handler. It is specified by a leading number sign (#) followed by the name of the handler method. The method is expected to conform to the signature of a standard event handler, which means that it takes a single argument of a type that extends the javafx.event.Event class and should return void. For example, Figure 8-6 shows that when the OnAction event occurs on the button, the newIssueFired() controller method is executed. If you choose View from the Menu bar and then Show Sample Controller Skeleton, a skeleton sample source file that gives an example of what the method should look like in your controller source code.
|
|