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

• Creates the GUI's scene graph and returns a Parent (package javafx.scene ) ref-
erence to the scene graph's root node.
• Initializes the controller's instance variables for the components that are manip-
ulated programmatically.
• Creates and registers the event handlers for any events specified in the FXML.
We'll discuss these steps in more detail in Sections 25.5.4-25.5.5.

25.5.3 Building the App's GUI
In this section, we'll show the precise steps for using Scene Builder to create the Tip Calcu-
lator 's GUI. The GUI will not look like the one shown in Fig. 25.9 until you've completed
the steps.

fx:id Property Values for This App's Controls
If a control or layout will be manipulated programmatically in the controller class (as we'll
do with one of the Label s, all of the TextField s and the Slider in this app), you must
provide a name for that control or layout. In Section 25.5.4, you'll learn how to declare
variables in your source code for each such component in the FXML, and we'll discuss
how those variables are initialized for you. Each object's name is specified via its fx:id prop-
erty . You can set this property's value by selecting a component in your scene, then ex-
panding the Inspector window's Code section—the fx:id property appears at the top of the
Code section. Figure 25.11 shows the fx:id properties of the Tip Calculator 's programmat-
ically manipulated controls. For clarity, our naming convention is to use the control's class
name in the fx:id property.

amountTextField

tipPercentageLabel tipPercentageSlider

tipTextField

totalTextField

Fig. 25.11 |

Tip Calculator 's programmatically manipulated controls labeled with their fx:id s.

Creating the TipCalculator Project
Click the New Project… ( ) button on the toolbar or select File > New Project… . In the
New Project dialog. Under Categories , select JavaFX and under Projects select JavaFX
FXML Application , then click Next > and specify TipCalculator in the Project Name , FXML
name and Create Application Class fields. Click Finish to create the project.