Working with FXML in Java

Introduction

FXML is an XML-based markup language used to define the structure of a JavaFX user interface. By using FXML, developers can separate the design and logic of a JavaFX application, making it easier to manage the user interface and its interactions.

In this tutorial, we will explore how to use FXML in JavaFX to build a user interface, load it from an FXML file, and connect the FXML elements to Java code through a controller.

Step 1: Create a Simple FXML File

First, we will create a simple FXML file that defines a user interface with a Button and a Label.

          <?xml version="1.0" encoding="UTF-8"?>
          <?import javafx.scene.control.Button>
          <?import javafx.scene.layout.StackPane>
          <?import javafx.scene.control.Label>
      
          <StackPane xmlns:fx="http://javafx.com/fxml" fx:controller="FXMLController">
              <Label fx:id="label" text="Hello, JavaFX!" />
              <Button fx:id="button" text="Click Me" onAction="#handleButtonClick" />
          </StackPane>
        

In this FXML file:

• The StackPane layout is used to hold the Label and Button.
• The fx:id attribute is used to give the Label and Button unique identifiers so that they can be accessed in the controller class.
• The onAction attribute is used to bind the Button to an event handler method handleButtonClick in the controller.

Step 2: Create a Controller Class

Now, we will create a Java controller class that will handle the event when the button is clicked. This controller will be linked to the FXML file through the fx:controller attribute in the FXML.

          import javafx.fxml.FXML;
          import javafx.scene.control.Button;
          import javafx.scene.control.Label;
      
          public class FXMLController {
              @FXML
              private Label label;  // This will be linked to the label in FXML
      
              @FXML
              private Button button;  // This will be linked to the button in FXML
      
              @FXML
              private void handleButtonClick() {
                  // Change the label text when the button is clicked
                  label.setText("Button Clicked!");
              }
          }
        

In this controller class:

• The @FXML annotation is used to link the Java variables label and button to the FXML elements.
• The method handleButtonClick is called when the button is clicked (as defined in the FXML file). This method changes the text of the label to "Button Clicked!".

Step 3: Create the Main Application Class

The main Java application class will be responsible for loading the FXML file and displaying the user interface. We will use the FXMLLoader class to load the FXML file and set the scene on the primary stage.

          import javafx.application.Application;
          import javafx.fxml.FXMLLoader;
          import javafx.scene.Scene;
          import javafx.stage.Stage;
      
          public class MainApp extends Application {
              public static void main(String[] args) {
                  launch(args);
              }
      
              @Override
              public void start(Stage primaryStage) throws Exception {
                  // Load the FXML file
                  FXMLLoader loader = new FXMLLoader(getClass().getResource("sample.fxml"));
                  Scene scene = new Scene(loader.load());
      
                  // Set the scene on the stage
                  primaryStage.setTitle("FXML Example");
                  primaryStage.setScene(scene);
                  primaryStage.show();
              }
          }
        

In this main application class:

• The FXMLLoader class is used to load the FXML file. The file path should be relative to the location of the Java class.
• The scene is created using the loaded FXML, and the scene is set on the primary stage.

Step 4: Running the Application

After setting up the FXML file, controller, and main application, you can run the application. When you click the "Click Me" button, the text of the label will change to "Button Clicked!".

Conclusion

In this tutorial, we learned how to work with FXML in JavaFX:

• We created an FXML file to define the user interface.
• We linked the FXML file to a controller class using the fx:controller attribute.
• We handled user interactions (button clicks) through methods in the controller class.
• We loaded the FXML file and displayed the user interface using the FXMLLoader class.