Graphical User Interface (GUI) Development with JavaFX

This post is part of our Java Programming: A Comprehensive Guide for Beginners series.

JavaFX is a versatile and powerful framework for building Graphical User Interfaces in Java. This chapter covered the basics of JavaFX development, including setting up a project, creating UI components, managing layouts, handling events, applying styles, and exploring advanced concepts. By building a simple task tracker application, you gained hands-on experience in combining these concepts to create a complete JavaFX application. As you delve deeper into JavaFX, you'll discover its capabilities for creating modern and visually appealing desktop applications.

6.1 Introduction to JavaFX

JavaFX is a powerful framework for building Graphical User Interfaces (GUIs) in Java. It provides a rich set of features for creating interactive and visually appealing desktop applications. In this chapter, we'll explore the fundamentals of JavaFX, covering key concepts and demonstrating how to build basic GUI applications.

6.2 Setting Up a JavaFX Project

Before diving into JavaFX development, you need to set up your project and environment. JavaFX can be used with various Integrated Development Environments (IDEs), and the following example uses IntelliJ IDEA.

• Create a New Project: Open IntelliJ IDEA, select "Create New Project," and choose "JavaFX" from the project templates.
• Configure JavaFX SDK: Set up the JavaFX SDK by selecting the path to the JavaFX SDK on your system. If you haven't installed JavaFX, download it from the official website.
• Create a JavaFX Application: IntelliJ IDEA generates a basic JavaFX application template. The primary class extends Application and overrides the start method, where you'll define the GUI components.

Example: Basic JavaFX Application

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.layout.StackPane;

import javafx.stage.Stage;

public class HelloWorldApp extends Application {

public static void main(String[] args) {

launch(args);

}

@Override

public void start(Stage primaryStage) {

primaryStage.setTitle("Hello, JavaFX!");

Button btn = new Button();

btn.setText("Say 'Hello World'");

btn.setOnAction(e -> System.out.println("Hello World!"));

StackPane root = new StackPane();

root.getChildren().add(btn);

primaryStage.setScene(new Scene(root, 300, 250));

primaryStage.show();

}

}

This simple JavaFX application creates a window with a button. When the button is clicked, it prints "Hello World!" to the console.

6.3 JavaFX UI Components

JavaFX provides a wide range of UI components that you can use to build your application's interface. Some commonly used components include:Labels: Display text or images.

• Buttons: Trigger actions when clicked.
• Text Fields and Password Fields: Accept user input.
• Checkboxes and Radio Buttons: Allow users to make selections.
• ComboBoxes: Provide a dropdown list of options.
• ListView and TableView: Display lists or tables of data.

Example: Using UI Components

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.control.Label;

import javafx.scene.control.TextField;

import javafx.scene.layout.VBox;

import javafx.stage.Stage;

public class UIComponentsApp extends Application {

public static void main(String[] args) {

launch(args);

}

@Override

public void start(Stage primaryStage) {

primaryStage.setTitle("JavaFX UI Components");

Label nameLabel = new Label("Name:");

TextField nameField = new TextField();

Button submitButton = new Button("Submit");

submitButton.setOnAction(e ->

System.out.println("Submitted: " + nameField.getText())

);

VBox layout = new VBox(10);

layout.getChildren().addAll(nameLabel, nameField, submitButton);

Scene scene = new Scene(layout, 300, 200);

primaryStage.setScene(scene);

primaryStage.show();

}

}

This example creates a simple form with a label, a text field, and a submit button. When the button is clicked, it prints the entered name to the console.

6.4 Layout Management in JavaFX

Layout management is crucial for arranging UI components effectively. JavaFX provides various layout panes, such as VBox, HBox, BorderPane, and GridPane, to help you organize your interface.

Example: Using Layout Panes

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.layout.HBox;

import javafx.stage.Stage;

public class LayoutExampleApp extends Application {

public static void main(String[] args) {

launch(args);

}

@Override

public void start(Stage primaryStage) {

primaryStage.setTitle("JavaFX Layout Example");

Button btn1 = new Button("Button 1");

Button btn2 = new Button("Button 2");

Button btn3 = new Button("Button 3");

HBox layout = new HBox(10);

layout.getChildren().addAll(btn1, btn2, btn3);

Scene scene = new Scene(layout, 300, 100);

primaryStage.setScene(scene);

primaryStage.show();

}

}

In this example, an HBox (horizontal box) layout is used to arrange three buttons horizontally.

6.5 Event Handling in JavaFX

Event handling allows your application to respond to user interactions. JavaFX provides a robust event handling mechanism, allowing you to capture events like button clicks, key presses, and mouse actions.

Example: Event Handling in JavaFX

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.layout.StackPane;

import javafx.stage.Stage;

public class EventHandlingApp extends Application {

public static void main(String[] args) {

launch(args);

}

@Override

public void start(Stage primaryStage) {

primaryStage.setTitle("JavaFX Event Handling");

Button clickButton = new Button("Click Me");

// Event handling using lambda expression

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

StackPane layout = new StackPane();

layout.getChildren().add(clickButton);

Scene scene = new Scene(layout, 300, 200);

primaryStage.setScene(scene);

primaryStage.show();

}

}

In this example, clicking the button triggers the event, resulting in the message "Button clicked!" being printed to the console.

6.6 CSS Styling in JavaFX

JavaFX supports styling through Cascading Style Sheets (CSS), allowing you to customize the appearance of your application. You can define styles for individual components or apply styles globally.

Example: CSS Styling in JavaFX

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.layout.StackPane;

import javafx.stage.Stage;

public class StylingExampleApp extends Application {

public static void main(String[] args) {

launch(args);

}

@Override

public void start(Stage primaryStage) {

primaryStage.setTitle("JavaFX Styling Example");

Button styledButton = new Button("Styled Button");

styledButton.getStyleClass().add("styled-button");

StackPane layout = new StackPane();

layout.getChildren().add(styledButton);

Scene scene = new Scene(layout, 300, 200);

// Applying a CSS file to the scene

scene

.getStylesheets()

.add(getClass().getResource("styles.css").toExternalForm());

primaryStage.setScene(scene);

primaryStage.show();

}

}

In this example, the button is styled using an external CSS file (styles.css). The CSS file defines the style for the class .styled-button.

6.7 Advanced JavaFX Concepts

• FXML and Scene Builder: FXML is an XML-based markup language that allows you to define the UI of your JavaFX application. Scene Builder is a visual layout tool that helps you create FXML files.
• Charts and Graphics: JavaFX provides charting APIs for creating various types of charts. Additionally, you can use the Canvas class for drawing custom graphics.
• Concurrency in JavaFX: Dealing with background tasks and concurrency in a JavaFX application is essential for maintaining a responsive user interface.

6.8 Building a Complete JavaFX Application

Building a complete JavaFX application involves combining the concepts discussed in this chapter. Let's consider a simple task tracker application where users can add, edit, and delete tasks.

Example: Simple Task Tracker

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.control.*;

import javafx.scene.layout.VBox;

import javafx.stage.Stage;

public class TaskTrackerApp extends Application {

public static void main(String[] args) {

launch(args);

}

@Override

public void start(Stage primaryStage) {

primaryStage.setTitle("Task Tracker");

TextField taskInput = new TextField();

Button addButton = new Button("Add Task");

ListView<String> taskList = new ListView<>();

addButton.setOnAction(e -> {

String task = taskInput.getText().trim();

if (!task.isEmpty()) {

taskList.getItems().add(task);

taskInput.clear();

}

});

Button deleteButton = new Button("Delete Task");

deleteButton.setOnAction(e -> {

int selectedIndex = taskList.getSelectionModel().getSelectedIndex();

if (selectedIndex != -1) {

taskList.getItems().remove(selectedIndex);

}

});

VBox layout = new VBox(10);

layout.getChildren().addAll(taskInput, addButton, taskList, deleteButton);

Scene scene = new Scene(layout, 300, 400);

primaryStage.setScene(scene);

primaryStage.show();

}

}

This example creates a simple task tracker application with a text input, an "Add Task" button, a list view for displaying tasks, and a "Delete Task" button.