How to Build a Java GUI Application: A Step-by-Step Guide

Learn how to build modern Java GUI applications with JavaFX through this step-by-step guide.

Java is a strong programming language noted for its "write once, run anywhere" feature. One of its advantages is its ability to generate sophisticated Graphical User Interfaces (GUIs) with frameworks such as Swing and JavaFX. If you're wondering how to construct a Java GUI application, this article will help you through the process, from setting up your environment to creating a contemporary JavaFX application. We'll concentrate on JavaFX, the popular current Java GUI framework.

Build innovative Java applications! Join Index.dev for high-paying remote jobs with top global companies today.

Why Choose Java for GUI Applications?

Java is still popular for desktop applications because of its cross-platform compatibility, reliability, and extensive libraries. While other languages, such as Python, provide GUI libraries, Java provides a robust ecosystem through Swing (used for older applications) and JavaFX (current and feature-rich).

JavaFX includes multimedia and sophisticated UI components, making it an ideal platform for complicated applications. JavaFX provides faster speed and is built to handle current requirements such as video integration, animation, and stylesheets (CSS).

Explore More: How to Check the Type of Variable in Java?

Set Up Your Development Environment

To begin developing Java GUI apps, follow these steps to configure your environment.

Tools and software:

Java Development Kit (JDK) - Go to Oracle's website and get the newest version.
Integrated Development Environment (IDE): IntelliJ IDEA, Eclipse, or NetBeans. Each of these includes JavaFX support.
JavaFX Download Scene Builder for visual design.

Setup Steps:

Install JDK and configure the JAVA_HOME environment variable.
Choose and install your desired IDE.
Install and integrate JavaFX Scene Builder with your IDE for visual design.

Design of the User Interface (UI)

Let's get started developing the UI now that your environment is ready. JavaFX employs a hierarchical framework composed of Stage, Scene, and Node. A Stage represents the window, Scene contains the UI elements, and Node refers to individual components such as buttons or text fields.

Example: Basic JavaFX Window

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        Button btn = new Button("Click Me!");
        StackPane root = new StackPane();
        root.getChildren().add(btn);
        
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("JavaFX Application");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

This basic code generates a JavaFX window with a button. When the program launches, the user gets a simple window with a button labeled “Click Me!”

Adding Event Listeners

Adding event listeners to handle user input is straightforward in JavaFX.

btn.setOnAction(e -> System.out.println("Button clicked!"));

FXML: Separating UI from Logic

One of JavaFX's benefits is FXML, which, like HTML, separates the UI design from the functionality. You may design the UI in XML, which is then loaded into Java code.

Example FXML File

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="sample.Controller">
    <children>
        <Button fx:id="myButton" layoutX="100.0" layoutY="100.0" text="Click Me!" />
    </children>
</AnchorPane>

To load this FXML into your Java code:

FXMLLoader loader = new FXMLLoader(getClass().getResource("sample.fxml"));
Parent root = loader.load();

This keeps the design in a separate FXML file while Java code handles the logic.

Advanced Features: Layouts and CSS Style

When creating JavaFX applications, it is critical to arrange the layout effectively using layout managers. JavaFX has numerous layouts, including VBox (vertical arrangement) and GridPane (grid-like organization).

Example: Using GridPane

GridPane grid = new GridPane();
grid.add(new Label("Username:"), 0, 0);
grid.add(new TextField(), 1, 0);
grid.add(new Label("Password:"), 0, 1);
grid.add(new PasswordField(), 1, 1);

This code generates a login form with two labels and two input fields organized in a grid.

Applying CSS Styling

JavaFX also accepts CSS for style. To style the components in your scene, you may connect a CSS file.

.button {
    -fx-background-color: #007bff;
    -fx-text-fill: white;
}

To apply this CSS file:

scene.getStylesheets().add("styles.css");

Handling Data and Forms

Handling user input and verifying data is a critical component of developing a GUI application. For example, to verify a form, you may utilize event listeners to determine whether a field is empty.

submitButton.setOnAction(e -> {
    if (usernameField.getText().isEmpty()) {
        System.out.println("Username cannot be empty!");
    }
});

This determines whether the username field is empty when the user presses the submit button.

Packaging and Deploying Your Application

After the application has been created, you will need to bundle and deploy it.

Creating an Executable JAR

Your JavaFX application may be packaged as a JAR file using your IDE or command line tools.

jar cvf myapp.jar -C out/ .

Native Installers

JavaFX also supports native packaging. MSI (Windows) and DMG (macOS) installations may be created with programs such as jpackage and Inno Setup.

Best Practices in Java GUI Development

Performance Tip:

Avoid stopping the UI thread. Use background threads to do operations such as file loading.

new Thread(() -> {
    // time-consuming task
}).start();

Design Patterns:

Use the Model-View-Controller (MVC) paradigm to segregate functionality from UI, making your code more manageable.

The provided code example demonstrates:

Complete application structure
Integration of various UI components
Data visualization with charts
Table view implementation
Menu and toolbar creation

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.geometry.Insets;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;

public class DataVisualizationApp extends Application {
    // Sample data for the table
    private static class DataPoint {
        private final String month;
        private final double value;
        
        public DataPoint(String month, double value) {
            this.month = month;
            this.value = value;
        }
        
        public String getMonth() { return month; }
        public double getValue() { return value; }
    }

    @Override
    public void start(Stage primaryStage) {
        // Create main container
        VBox root = new VBox(10);
        root.setPadding(new Insets(10));

        // Create menu bar
        MenuBar menuBar = createMenuBar();
        
        // Create toolbar
        ToolBar toolBar = createToolBar();
        
        // Create chart
        LineChart<Number, Number> chart = createChart();
        
        // Create table
        TableView<DataPoint> table = createTable();
        
        // Create status bar
        Label statusBar = new Label("Ready");
        
        // Add all components to root
        root.getChildren().addAll(menuBar, toolBar, chart, table, statusBar);

        // Create scene and show stage
        Scene scene = new Scene(root, 800, 600);
        primaryStage.setTitle("JavaFX Data Visualization");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private MenuBar createMenuBar() {
        MenuBar menuBar = new MenuBar();
        
        Menu fileMenu = new Menu("File");
        MenuItem newItem = new MenuItem("New");
        MenuItem openItem = new MenuItem("Open");
        MenuItem saveItem = new MenuItem("Save");
        MenuItem exitItem = new MenuItem("Exit");
        fileMenu.getItems().addAll(newItem, openItem, saveItem, new SeparatorMenuItem(), exitItem);
        
        Menu editMenu = new Menu("Edit");
        MenuItem cutItem = new MenuItem("Cut");
        MenuItem copyItem = new MenuItem("Copy");
        MenuItem pasteItem = new MenuItem("Paste");
        editMenu.getItems().addAll(cutItem, copyItem, pasteItem);
        
        Menu helpMenu = new Menu("Help");
        MenuItem aboutItem = new MenuItem("About");
        helpMenu.getItems().add(aboutItem);
        
        menuBar.getMenus().addAll(fileMenu, editMenu, helpMenu);
        
        return menuBar;
    }

    private ToolBar createToolBar() {
        ToolBar toolBar = new ToolBar();
        Button newButton = new Button("New");
        Button openButton = new Button("Open");
        Button saveButton = new Button("Save");
        toolBar.getItems().addAll(newButton, openButton, saveButton);
        return toolBar;
    }

    private LineChart<Number, Number> createChart() {
        NumberAxis xAxis = new NumberAxis();
        NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("Month");
        yAxis.setLabel("Value");
        
        LineChart<Number, Number> lineChart = new LineChart<>(xAxis, yAxis);
        lineChart.setTitle("Monthly Data");
        
        XYChart.Series<Number, Number> series = new XYChart.Series<>();
        series.setName("2024 Data");
        
        // Add sample data
        series.getData().add(new XYChart.Data<>(1, 23));
        series.getData().add(new XYChart.Data<>(2, 14));
        series.getData().add(new XYChart.Data<>(3, 15));
        series.getData().add(new XYChart.Data<>(4, 24));
        series.getData().add(new XYChart.Data<>(5, 34));
        series.getData().add(new XYChart.Data<>(6, 36));
        
        lineChart.getData().add(series);
        return lineChart;
    }

    private TableView<DataPoint> createTable() {
        TableView<DataPoint> table = new TableView<>();
        
        TableColumn<DataPoint, String> monthCol = new TableColumn<>("Month");
        monthCol.setCellValueFactory(data -> 
            new SimpleStringProperty(data.getValue().getMonth()));
        
        TableColumn<DataPoint, Number> valueCol = new TableColumn<>("Value");
        valueCol.setCellValueFactory(data -> 
            new SimpleDoubleProperty(data.getValue().getValue()));
        
        table.getColumns().addAll(monthCol, valueCol);
        
        // Add sample data
        ObservableList<DataPoint> data = FXCollections.observableArrayList(
            new DataPoint("January", 23),
            new DataPoint("February", 14),
            new DataPoint("March", 15),
            new DataPoint("April", 24),
            new DataPoint("May", 34),
            new DataPoint("June", 36)
        );
        
        table.setItems(data);
        return table;
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Conclusion

Creating a Java GUI application is simple using JavaFX, a strong and contemporary framework. From basic design to complex multimedia integrations, JavaFX simplifies the process of creating user-friendly apps. You now have the skills to begin developing Java GUI apps with the best tools and methods available.

For Java Developers:

Want to build innovative Java applications? Join Index.dev for high-paying remote jobs with top global companies today!

For Clients:

Looking for skilled Java developers to create modern GUI applications? Hire top 5% talent from Index.dev’s global network today!

Blog

Build a Java GUI Application using JavaFX