What is FXML?

FXML

FXML is an XML-based markup language for generating Java object graphs that can be scripted. It’s a great alternative to composing procedural code for building those graphs; and, it’s suitable for defining the user interface of a JavaFX program because the hierarchical layout of an XML document strongly matches the structure of a JavaFX scene graph.

Benefits

FXML + Scene Builder is better for short-term tasks because one can quickly drag and drop GUI elements. It allows users to pay more attention to the rational pieces.

FXML is a versatile tool that allows one to distinguish the program design from the application logic, making the code simpler and easier to manage.

Creating a registration form using JavaFX’s Grid Pane layout

The following is a step-by-step illustration of how to build the user interface for the Desktop application using FXML provided by JavaFX.

An FXML application’s user interface is specified within an FXML text, and all the logic to handle input events is written inside a controller class (as shown in the diagram).

The Main class, which calls the FXML loader, starts the program’s execution. The FXML loader then parses the FXML text, generates the scene graph, and describes the nodes identified in the document. Next, the FXML loader generates the controller class, injects the fields with objects generated from the fxml text, and calls the controller’s initialise() method after creating the scene graph.

To create your own:

• Build a new Java project called javafx-registration-form-fxml in your favorite IDE. Create three files in a package called javafx.example after creating the project with the names: RegistrationFormApplication.java (main application class), RegistrationFormController.java (containing user interface for application), and registration form.xml (used for event handler code).

• The Main class needs to be expanded from javafx.application.Application to build a JavaFX program. To do this, override the start() function of the program (the key class is easy to understand). FXMLLoader is then used to load the FXML document first. This gives us a pointer to the user interface’s root node. The FXML root node is used to create a scene and it is set on the primary stage.

• The registration form will be built using the JavaFX GridPane layout. It encourages one to set out user interface controls in a fluid grid of rows and columns. Below is an example of a GridPane configuration that is center-aligned and has a horizontal and vertical gap of 10.

• Add different labels, password fields, and text fields to the GridPane. GridPane.columnIndex and GridPane.rowIndex places UI controls in a specific cell. The Submit button calls for the handleSubmitButtonAction method, which needs to be set in the FXML controller.

• Inside the handler, write code to manage the Submit event. The FXMLLoader can dynamically insert values from the FXML text into the controller class’s relevant references. As a result, the objects generated from the FXML document will automatically inject the name field, email field, password field, and submit button references defined in the controller above. The @FXML annotation is required for the controller class’s private member fields; otherwise, field injection would fail. For public areas, though, it may be omitted. The code for managing form submission is found in the handleSubmitButtonAction() process. Since this form isn’t public, it has to be annotated with @FXML in order to be included in an fxml text.