JavaFX GUI: Part 1 - Java: How to Program Early Objects - page 1116

1. Adding a VBox to the Default Layout. Drag a VBox from the Library window's
Containers section onto the default AnchorPane in Scene Builder's content panel.
2. Making the VBox the Root Layout. Select Edit > Trim Document to Selection to
make the VBox the root layout and remove the AnchorPane .
25.4.6 Configuring the VBox Layout Container
You'll now specify the VBox 's alignment, initial size and padding:
1. Specifying the VBox 's Alignment. A VBox 's alignment determines the layout posi-
tioning of the VBox 's children. In this app, we'd like each child node (the Label and
the ImageView ) to be centered horizontally in the scene, and we'd like both children
to be centered vertically, so that there is an equal amount of space above the Label
and below the ImageView . To accomplish this, select the VBox , then in the Inspec-
tor 's Properties section, set the Alignment property to CENTER . When you set the
Alignment , notice the variety of potential alignment values you can use.
2. Specifying the VBox 's Preferred Size. The preferred size (width and height) of the
scene graph's root node is used by the scene to determine its window size when
the app begins executing. To set the preferred size, select the VBox , then in the
Inspector 's Layout section, set the Pref Width property to 450 and the Pref Height
property to 300 .
25.4.7 Adding and Configuring a Label
Next, you'll create the Label that displays "Welcome to JavaFX!" :
1. Adding a Label to the VBox . Drag a Label from the Library window's Controls
section onto the VBox . The Label is automatically centered in the VBox because
you set the VBox 's alignment to CENTER in Section 25.4.6.
2. Changing the Label 's text. You can set a Label 's text either by double clicking it
and typing the text, or by selecting the Label and setting its Text property in the
Inspector 's Properties section. Set the Label 's text to "Welcome to JavaFX!" .
3. Changing the Label 's font. For this app, we set the Label to display in a large bold
font. To do so, select the Label , then in the Inspector 's Preferences section, click
the value to the right of the Font property. In the window that appears, set the
style property to Bold and the size property to 30 .
25.4.8 Adding and Configuring an ImageView
Finally, you'll add the ImageView that displays bug.png :
1. Adding an ImageView to the VBox . Drag an ImageView from the Library window's
Controls section onto the VBox . The ImageView is automatically placed below the
Label . Each new control you add to a VBox is placed below the VBox 's other chil-
dren, though you can change the order by dragging the children in Scene Build-
er's Hierarchy window. Like the Label , the ImageView is also automatically
centered in the VBox .
2. Setting the ImageViews 's image. To set the image to display, select the ImageView
and click the ellipsis ( … ) button to the right of the Image property in the Inspec-