Java - GUI Development - FXML and Scene Builder

Overview

FXML is an XML-based language used to define the user interface of JavaFX applications. Scene Builder is a visual layout tool that allows developers to design JavaFX application interfaces without writing any code. This tutorial explores the basics of FXML and Scene Builder, demonstrating how to create and manage JavaFX applications using these tools.

Creating an FXML File

An FXML file describes the structure of a JavaFX application's UI. Here is a simple example of an FXML file that defines a UI with a button and a label:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<VBox spacing="10" alignment="CENTER" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <Label fx:id="label" text="Hello, FXML!" />
    <Button text="Click Me" onAction="#handleButtonClick" />
</VBox>
            

Loading FXML in Java

To load an FXML file in a Java application, use the FXMLLoader class. The following example demonstrates how to load the above FXML file and set it as the scene's root node:

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class FXMLExample extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("example.fxml"));
        primaryStage.setTitle("FXML Example");
        primaryStage.setScene(new Scene(root, 300, 200));
        primaryStage.show();
    }
}
            

Using Scene Builder

Scene Builder is a drag-and-drop interface design tool that generates FXML files. To use Scene Builder:

1. Download and install Scene Builder from the official website.
2. Open Scene Builder and design your UI by dragging and dropping components onto the layout pane.
3. Save the design as an FXML file.
4. Link the FXML file to your Java application using FXMLLoader.

Scene Builder makes it easy to visualize and create complex layouts without manually writing FXML code.

Controllers and Event Handling

Controllers are Java classes that handle user interactions and manage the application logic. An FXML file can be linked to a controller using the fx:controller attribute. Here is an example of a controller class:

import javafx.fxml.FXML;
import javafx.scene.control.Label;

public class ExampleController {
    @FXML
    private Label label;

    @FXML
    private void handleButtonClick() {
        label.setText("Button clicked!");
    }
}
            

Link the controller to the FXML file:

<VBox spacing="10" alignment="CENTER" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ExampleController">
    <Label fx:id="label" text="Hello, FXML!" />
    <Button text="Click Me" onAction="#handleButtonClick" />
</VBox>
            

Binding and Data Synchronization

FXML supports binding properties of UI components to each other or to properties in the controller. This enables data synchronization between the UI and the underlying data model. For example, you can bind the text property of a label to a property in the controller:

import javafx.beans.property.StringProperty;
import javafx.beans.property.SimpleStringProperty;

public class ExampleController {
    private StringProperty labelText = new SimpleStringProperty("Hello, FXML!");

    public StringProperty labelTextProperty() {
        return labelText;
    }

    @FXML
    private Label label;

    @FXML
    private void initialize() {
        label.textProperty().bind(labelText);
    }

    @FXML
    private void handleButtonClick() {
        labelText.set("Button clicked!");
    }
}
            

Example Code

Here is a complete example that demonstrates the use of FXML, Scene Builder, and controllers in a JavaFX application:

// ExampleController.java
import javafx.fxml.FXML;
import javafx.scene.control.Label;

public class ExampleController {
    @FXML
    private Label label;

    @FXML
    private void handleButtonClick() {
        label.setText("Button clicked!");
    }
}

// FXMLExample.java
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class FXMLExample extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("example.fxml"));
        primaryStage.setTitle("FXML Example");
        primaryStage.setScene(new Scene(root, 300, 200));
        primaryStage.show();
    }
}

// example.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<VBox spacing="10" alignment="CENTER" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ExampleController">
    <Label fx:id="label" text="Hello, FXML!" />
    <Button text="Click Me" onAction="#handleButtonClick" />
</VBox>
            

Summary

In this tutorial, you learned about FXML and Scene Builder, two powerful tools for designing JavaFX applications. FXML allows you to define your UI in an XML format, separating the design from the application logic. Scene Builder provides a visual interface for creating FXML files. By using controllers and data binding, you can create interactive and responsive JavaFX applications with ease.