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

Step 7: Sizing the Button
By default, Scene Builder sets a Button 's width based on its text. For this app, we chose to
make the Button the same width as the other controls in the GridPane 's right column. To
do so, select the Button , then in the Inspector 's Layout section, set the Max Width property
to MAX_VALUE . This causes the Button 's width to grow to fill the column's width.
Previewing the GUI
As you design your GUI, you can preview it by selecting Preview > Show Preview in Win-
dow . As you can see in Fig. 25.15, there's no space between the Label s in the left column
and the controls in the right column. In addition, there's no space around the GridPane ,
because the Stage is sized to fit the Scene 's content. Thus, many of the controls touch or
come close to the window's borders. You'll fix these issues in the next step.
Fig. 25.15 | GridPane with the TextField s and Button resized.
Step 8: Configuring the GridPane 's Padding and Horizontal Gap Between Its Columns
The space between a node's contents and its top, right, bottom and left edges is known as
the padding , which separates the contents from the node's edges. Since the GridPane 's size
determines the size of the Stage 's window, the padding in this example also separates the
GridPane 's children from the window's edges. To set the padding, select the GridPane ,
then in the Inspector 's Layout section, set the Padding property's four values ( TOP , RIGHT ,
BOTTOM and LEFT ) to 14 —the JavaFX recommended distance between the edge of a con-
trol and the edge of a Scene .
You can specify the default amount of space between a GridPane 's columns and rows
with its Hgap (horizontal gap) and Vgap (vertical gap) properties, respectively. Because
Scene Builder sets each GridPane row's height to 30 pixels—which is greater than the
heights of this app's controls—there's already some vertical space between the compo-
nents. To specify the horizontal gap between the columns, select the GridPane in the Hier-
archy window, then in the Inspector 's Layout section, set the Hgap property to 8 . If you'd
like to precisely control the vertical space between components, you can set each row's Pref
Height property to USE_COMPUTED_SIZE (as we did for the columns' Pref Width property in
Step 5), then set the GridPane 's Vgap property.
Step 9: Making the tipTextField and totalTextField Uneditable and Not
Focusable
The tipTextField and totalTextField are used in this app only to display results, not
receive text input. For this reason, they should not be interactive. You can type in a Text-
Field only if it's “in focus ”—that is, it's the control that the user is interacting with. When