12.8. FXML: Declarative UI

FXML is an XML-based language for designing UI separate from logic.

FXML allows developers to create user interfaces (UIs) in a structured way using XML syntax. This means that the design of the UI can be separated from the actual code that controls the app's logic. By writing UI in FXML, developers can focus on the 'what' of the interface rather than the 'how,' which can lead to a cleaner and more maintainable codebase.

Think of FXML like a blueprint for a house. Just as a blueprint shows what the house will look like and the layout of rooms, FXML shows what the UI will look like and how its components are organized without worrying about the internal wiring or plumbing (the logic).

The sample FXML shows a simple user interface structure using a VBox layout container. This layout stacks the UI elements vertically. It consists of a Label prompting the user to 'Enter Name', a TextField where the user can input their name, and a Button labeled 'Submit'. The fx:id attribute links the TextField to a variable in the controller, allowing the application to access the user's input. The onAction attribute specifies a method in the controller that will be called when the button is clicked.

Imagine arranging furniture in a room. The VBox is like the area of the room where you decide to stack your furniture vertically. You have a sign (Label) indicating what goes where (like 'Enter Name'), the space where you input details (TextField), and a button (Button) that, when pressed, makes something happen—like submitting a form. Each piece has its specific purpose and place, just like in the FXML structure.

public class MyController { @FXML private TextField nameField; @FXML private void handleSubmit() { System.out.println("Hello, " + nameField.getText()); } }

The controller class, MyController, manages the interactions defined in the FXML file. The @FXML annotation indicates that the nameField variable should be connected to the TextField in the FXML layout. The method handleSubmit is designated to handle the action when the button is clicked, retrieving the text entered in the TextField and printing a greeting to the console. This separation of logic (controller) from presentation (FXML) is a key component of the Model-View-Controller (MVC) design pattern.

Consider a theater production. The actors (UI elements defined in FXML) perform a script under the direction of a director (the controller). The director instructs the actors on how to act when specific cues are given, like when the audience (button click) interacts. Just as the director’s role is crucial to ensuring everything runs smoothly on stage, the controller ensures that interactions within the app work as intended.

Parent root = FXMLLoader.load(getClass().getResource("layout.fxml")); Scene scene = new Scene(root);

The code snippet demonstrates how to load the FXML-defined UI into a JavaFX application. The FXMLLoader is a Java class that reads the FXML file and creates the corresponding UI components from it. When the FXML is successfully loaded, it creates a 'root' node that serves as the starting point for the scene in the JavaFX application. The Scene class takes this root node to create a visual representation of the UI.

Think of loading FXML like following a recipe to bake a cake. The recipe (FXML) provides the list of ingredients and steps to create the cake (the UI). When you gather all the ingredients and follow the steps, you get a finished cake (the visual UI in JavaFX). This process makes it easy to replicate or change your cake's design (the UI) without altering the kitchen setup (the application’s logic).

--