08 Добавьте панель инструментов

This chapter gives the steps to add a tool bar GUI control to the layout that you are building with JavaFX Scene Builder.

Use the following steps to add a toolbar to the top portion of the IssueTrackingLite's GUI layout. It will contain an image file and three buttons.

In the Document panel, change the display setting by clicking the Hierarchy display menu button on the top right corner and choosing Info, if it is not already chosen.
Drag an HBox container element from the Library panel to the Hierarchy section of the Document panel and drop it under the row for the VBox element, as shown in Figure 8-1.

Figure 8-1 Add an HBox Control
Add three buttons to the toolbar.
1. From the Library panel, drag a Button element to the Hierarchy panel and drop it in the HBox node that was just added.
2. In the Content panel, right-click the new Button and select Duplicate from the contextual menu to add a second button.
3. Repeat the previous step to add the third button to the toolbar.
Edit the button details.
1. In the Content panel, double-click the leftmost button in the toolbar to get into edit mode and enter New. Click the Code section of the Inspector panel, select newIssue in the drop-down list for the fx:id property for the New button. In the On Action field, select newIssueFired from the drop-down list of event handlers available in the controller source file. The leading # symbol tells your application to look for the newIssueFired method in the controller source code. The method used must be public, return void, and take ActionEvent as parameter. Each time the New button is clicked, the public method newIssueFired(ActionEvent), which is defined in the controller source code, will be executed.
2. Double-click the middle button to get into edit mode. Enter Save in the edit box. Click the Code section of the Inspector panel, and select saveIssue in the drop-down list for the fx:id property for the middle button. In the On Action field, set the value to #saveIssueFired.
3. Select the rightmost button in the toolbar. Click the Code section of the Inspector panel, and select deleteIssue from the fx:id property's drop-down list. In the Properties section of the Inspector panel, enter Delete in the Text field. In the On Action field, set the value to #deleteIssueFired.
Put the buttons in a container and adjust the spacing between them.
1. Hold down the Ctrl-key and select each of the three buttons. From the Menu bar, select Arrange, Wrap in, and then HBox. The buttons are arranged in a row with even spacing between them.
2. Select the Layout section of the Inspector panel and set the value for the Spacing property to 15. Notice that the buttons are adjusted to have more spaces in between them.
Add an image to the toolbar.
1. From the Menu bar, select File, Import, and then Media. Select IssueTrackingLite.png from the <install-dir>/IssueTrackingLite/src/issuetrackinglite folder. The ImageView element is added at the bottom of the Hierarchy panel.
2. In the Hierarchy section of the Document panel, drag the ImageView element so that it is the first element in the top HBox container, as shown in Figure 8-2. Notice that in the Content panel, the image is moved to the left of the HBox container for the three buttons.
  
  Figure 8-2 Move the ImageView Element to the HBox Container
Modify the default values for some of the Layout properties for the first HBox container, so that they match the property values circled in Figure 8-3.
1. In the Hierarchy panel, select the row for the top HBox container.
2. Click the Layout section of the Inspector panel and in the VBox Constraints sub-section, set the Vgrow property value to NEVER.
3. Change the default values for the Margin property to 20, 15, 15, and 10, respectively.
4. In the Size sub-section, change the prefWidth and prefHeight default values to USE_COMPUTED_SIZE.
Figure 8-3 Modify the HBox Layout Default Properties
Modify some of the default property values for the second HBox.
1. In the Hierarchy panel, select the HBox element that contains the three buttons.
2. Select the Layout section of the Inspector panel and change the value of the Hgrow property to ALWAYS.
3. Select the Properties section of the Inspector panel and in the Node sub-section, change Alignment property value to CENTER_RIGHT. The HBox with the three buttons are shifted to the right side of the Content panel.
Select File and then Save from the Menu bar to save your work.