JavaFX Tutorial

JavaFX Tutorial – Learn JavaFX with simplified JavaFX Examples and build rich content Java UI applications with CSS and FXML.

This JavaFX tutorial is a practical starting point for Java developers who want to create desktop GUI applications. It introduces the JavaFX application structure, common UI controls, layouts, event handling, CSS styling, FXML, and the modern setup note that JavaFX is usually added as a separate OpenJFX dependency when you use recent JDK versions.

What is JavaFX in modern Java?

JavaFX is a Java UI toolkit for building rich client applications. A JavaFX application is built with a scene graph: a Stage represents the window, a Scene holds the visual content, and controls or layout panes are added as nodes inside that scene.

In older Java 8 projects, JavaFX was commonly available with the JDK. In modern Java development, JavaFX is maintained through the OpenJFX project and is commonly added to a project through Maven, Gradle, or the JavaFX SDK. For the latest setup instructions, refer to the OpenJFX documentation and the Java learning material at dev.java JavaFX Fundamentals.

JavaFX tutorial learning path for beginners

A beginner-friendly JavaFX learning path should start with the application lifecycle and then move to controls, layouts, events, styling, and FXML. The following sequence works well when you are learning JavaFX from examples.

• Application structure: understand Application, start(), Stage, and Scene.
• JavaFX controls: use buttons, text fields, labels, sliders, date pickers, radio buttons, and image views.
• JavaFX layouts: place controls with panes such as VBox, HBox, BorderPane, GridPane, and StackPane.
• Event handling: respond to button clicks, text changes, selections, and keyboard or mouse events.
• JavaFX CSS: separate visual styling from Java code.
• FXML: define the UI in an XML file and connect it to a Java controller.

JavaFX Tutorial – JavaFX Examples

JavaFX package consists of controls that help us build UI components or layout the components and interact with them.

Following JavaFX Examples help you get started and build JavaFX applications.

1. Install JavaFX in Eclipse IDE
2. JavaFX Example Application
3. JavaFX Button
4. JavaFX TextField
5. JavaFX PasswordField
6. JavaFX ImageView
7. JavaFX Slider
8. JavaFX RadioButton
9. JavaFX DatePicker

JavaFX application structure: Application, Stage, Scene and Node

Every JavaFX program starts from a class that extends javafx.application.Application. The JavaFX runtime calls the start() method. Inside this method, you create the UI, place it inside a scene, set the scene on the stage, and show the stage.

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

public class HelloJavaFX extends Application {

    @Override
    public void start(Stage stage) {
        Button button = new Button("Click Me");

        button.setOnAction(event -> button.setText("Hello JavaFX"));

        StackPane root = new StackPane(button);
        Scene scene = new Scene(root, 400, 250);

        stage.setTitle("JavaFX Tutorial");
        stage.setScene(scene);
        stage.show();
    }

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

The example creates a button, listens for a click event, places the button in a StackPane, creates a scene, and displays the window. This small pattern appears in almost every basic JavaFX application.

JavaFX module declarations for modular projects

If your project uses the Java module system, add the JavaFX modules that your application needs in module-info.java. A simple controls-based application usually requires javafx.controls. If you use FXML, add javafx.fxml and open the controller package to it.

module com.tutorialkart.javafxdemo {
    requires javafx.controls;
    requires javafx.fxml;

    opens com.tutorialkart.javafxdemo to javafx.fxml;
    exports com.tutorialkart.javafxdemo;
}

Common JavaFX modules include javafx.controls for UI controls, javafx.graphics for the scene graph, javafx.fxml for FXML loading, javafx.media for audio and video, and javafx.web for WebView-based content.

JavaFX controls and layouts used in real UI screens

JavaFX controls are visible UI components. Layout panes decide where those controls appear. A clean JavaFX screen normally combines both: for example, labels and text fields inside a GridPane, action buttons inside an HBox, and the whole form inside a VBox or BorderPane.

JavaFX topic	Used for	Common classes
Controls	Input and interaction	Button, TextField, PasswordField, RadioButton, DatePicker
Layout panes	Arranging controls	VBox, HBox, GridPane, BorderPane, StackPane
Events	Reacting to user actions	setOnAction(), listeners, event handlers
Styling	Changing visual appearance	JavaFX CSS, style classes, ids
FXML	Separating UI markup from Java logic	FXMLLoader, controller classes

JavaFX CSS example for styling buttons and labels

JavaFX supports a CSS-based styling model. You can style a control by setting a style class in Java and defining the style in a CSS file. This keeps layout and behavior in Java while moving visual rules into a separate stylesheet.

Button saveButton = new Button("Save");
saveButton.getStyleClass().add("primary-button");

.primary-button {
    -fx-font-size: 14px;
    -fx-padding: 8px 16px;
}

For larger JavaFX applications, prefer reusable style classes instead of setting long inline styles on each control.

JavaFX FXML usage for separating screen design and Java code

FXML lets you describe the user interface in an XML file and keep event-handling logic in a Java controller class. This is useful when the UI becomes large or when you want designers and developers to work on screen layout and Java logic separately.

<VBox spacing="10" xmlns:fx="http://javafx.com/fxml" fx:controller="com.tutorialkart.HelloController">
    <Label fx:id="messageLabel" text="Welcome to JavaFX" />
    <Button text="Show Message" onAction="#showMessage" />
</VBox>

public class HelloController {

    @FXML
    private Label messageLabel;

    @FXML
    private void showMessage() {
        messageLabel.setText("FXML button clicked");
    }
}

When using FXML, check that the controller package is accessible to javafx.fxml in modular projects and that method names in the FXML file exactly match the Java controller methods.

JavaFX features for desktop GUI application development

Following are the key JavaFX features commonly used while building desktop GUI applications:

• Java APIs
• FXML & Scene Builder
• WebView
• Swing Interoperability
• Builtin UI controls
• CSS
• Themes
• 3D Graphics Features
• Canvas API
• Printing API
• Rich Text Support
• Multitouch Support
• Hi-DPI support
• Hardware accelerated graphics pipeline
• High performance media engine
• Self contained application deployment model

JavaFX setup mistakes beginners should avoid

Many JavaFX errors come from setup mismatches rather than wrong UI code. Keep these points in mind while creating a new JavaFX project.

• Do not assume JavaFX is automatically available with every installed JDK. For recent JDKs, add JavaFX as an OpenJFX dependency or configure the JavaFX SDK.
• Use the JavaFX modules that match your code. For example, an FXML project needs javafx.fxml, while a WebView project needs javafx.web.
• Keep controller class names, FXML fx:id values, and event method names consistent.
• Update UI controls on the JavaFX Application Thread when using background tasks.
• Use layout panes instead of fixed coordinates for screens that must resize cleanly.

JavaFX FAQ for beginners

Is JavaFX included in the JDK?

JavaFX was commonly bundled with Java 8 distributions, but modern JavaFX development usually uses OpenJFX as a separate dependency or SDK. Check the setup instructions for your JDK, IDE, and build tool before creating a project.

What should I learn first in JavaFX?

Start with Application, Stage, Scene, layout panes, and simple controls such as Button, Label, and TextField. After that, learn event handling, CSS, and FXML.

What is the difference between JavaFX and Swing?

Swing is an older Java UI toolkit, while JavaFX is a newer client UI toolkit with a scene graph, CSS styling support, FXML, media APIs, WebView, and modern layout controls. Existing Swing applications can still be maintained, but new rich-client Java UI projects often choose JavaFX.

Can JavaFX applications use CSS and FXML together?

Yes. FXML can define the screen structure, Java controllers can handle behavior, and CSS files can style controls. This separation is helpful for larger JavaFX applications.

Which JavaFX modules are commonly used?

The most common modules are javafx.controls, javafx.graphics, and javafx.fxml. Depending on the application, you may also use javafx.media, javafx.web, or other JavaFX modules.

JavaFX tutorial editorial QA checklist

• Confirm that setup instructions do not incorrectly state that JavaFX is bundled with every modern JDK.
• Check that JavaFX examples include the required imports and extend Application where needed.
• Verify that modular examples include the correct requires, opens, and exports statements.
• Test event-handler names when an FXML file refers to a controller method.
• Make sure CSS examples use JavaFX CSS properties such as -fx-font-size and not browser-only CSS assumptions.

JavaFX tutorial next steps after controls and layouts

With the help of JavaFX examples, you can build Java UI applications using windows, scenes, controls, layouts, events, CSS, and FXML. After learning the basic controls listed above, continue with layout management, form validation, tables, menus, background tasks, packaging, and deployment for a complete JavaFX application workflow.