Skip to main content

JavaFX Hello World

In this tutorial, we will explore JavaFX, a powerful framework for building desktop and mobile applications. We will start with an introduction to JavaFX, followed by its history and key features. Finally, we will walk through some Hello World examples to get you started.

Introduction to JavaFX​

JavaFX is a framework for creating rich graphical user interfaces (GUIs) for desktop and mobile applications using Java. It provides a set of application programming interfaces (APIs) that allow developers to create visually appealing and interactive user interfaces.

JavaFX was introduced by Sun Microsystems in 2007 as a replacement for Swing, the previous GUI toolkit for Java applications. It was designed to address the limitations of Swing and provide better support for modern UI design and multimedia integration.

History​

JavaFX has evolved significantly since its initial release. Here are some key milestones in its history:

  1. JavaFX 1.0 (2008): The first version of JavaFX was released, providing a new set of UI controls, animation capabilities, and media support.

  2. JavaFX 2.0 (2011): Oracle acquired Sun Microsystems and announced a major redesign of JavaFX. The new version introduced a new graphics engine, improved performance, and better integration with existing Java APIs.

  3. JavaFX 8 (2014): JavaFX became part of the Java Development Kit (JDK) with the release of Java 8. This made it easier for developers to use JavaFX without the need for additional libraries.

  4. JavaFX 11 (2018): Oracle announced that JavaFX would be decoupled from the JDK starting from Java 11. This allowed for more frequent updates and independent development of JavaFX.

Key Features​

JavaFX offers a wide range of features that make it a popular choice for GUI development. Some of its key features include:

  1. Rich UI Controls: JavaFX provides a comprehensive set of built-in UI controls, such as buttons, labels, text fields, tables, and more. These controls can be easily customized and styled to match the desired look and feel of the application.

  2. Layout Managers: JavaFX includes layout managers that simplify the arrangement of UI components within a container. These managers automatically handle resizing and positioning of components, making it easier to create responsive and dynamic layouts.

  3. CSS Styling: JavaFX supports cascading style sheets (CSS) for styling UI components. This allows developers to separate the visual presentation from the application logic, making it easier to maintain and update the UI design.

  4. Animation and Effects: JavaFX provides powerful animation and transition capabilities, allowing developers to create visually appealing and interactive UIs. It also includes a variety of built-in effects, such as shadows, blurs, and reflections, to enhance the visual appearance of the application.

  5. Media Integration: JavaFX supports multimedia integration, including playing audio and video files, capturing and rendering web content, and handling user input from cameras and microphones.

  6. FXML and Scene Builder: JavaFX includes FXML, a markup language for defining user interfaces, and Scene Builder, a visual layout tool. These tools simplify the process of designing UIs and separating the UI layout from the application logic.

Hello World Examples​

Now, let's dive into some Hello World examples to get a hands-on experience with JavaFX. Before we begin, make sure you have Java and JavaFX installed on your machine.

Example 1: Simple JavaFX Application​

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

public class HelloWorldApp extends Application {
    @Override
    public void start(Stage primaryStage) {
        // Create a label with the text "Hello, World!"
        Label label = new Label("Hello, World!");

        // Create a stack pane and add the label to it
        StackPane root = new StackPane();
        root.getChildren().add(label);

        // Create a scene with the stack pane as the root node
        Scene scene = new Scene(root, 300, 200);

        // Set the scene on the primary stage and show it
        primaryStage.setScene(scene);
        primaryStage.setTitle("Hello World");
        primaryStage.show();
    }

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

Example 2: JavaFX Application with CSS Styling​

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

public class StyledApp extends Application {
    @Override
    public void start(Stage primaryStage) {
        // Create a button with the text "Click Me!"
        Button button = new Button("Click Me!");

        // Apply CSS styling to the button
        button.getStyleClass().add("my-button");

        // Create a stack pane and add the button to it
        StackPane root = new StackPane();
        root.getChildren().add(button);

        // Create a scene with the stack pane as the root node
        Scene scene = new Scene(root, 300, 200);

        // Load the CSS file
        scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());

        // Set the scene on the primary stage and show it
        primaryStage.setScene(scene);
        primaryStage.setTitle("Styled App");
        primaryStage.show();
    }

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

In the above examples, we created JavaFX applications by extending the Application class and overriding the start method. We then constructed the UI components, added them to layout containers, and created a scene to display the UI. Finally, we set the scene on the primary stage and showed it.

In the second example, we applied CSS styling to the button by adding a custom CSS class and loading a CSS file using scene.getStylesheets().add().

For more detailed information and official documentation, you can visit the official JavaFX website.

Comparison with Alternatives​

JavaFX is not the only framework available for building GUI applications in Java. Here's a comparison with some of its alternatives:

  1. Swing: Swing is the predecessor of JavaFX and is still widely used. While Swing is mature and stable, JavaFX offers a more modern and visually appealing UI design and better integration with multimedia content.

  2. Java AWT: AWT (Abstract Window Toolkit) is the oldest GUI toolkit for Java. It provides basic UI components but lacks the advanced features and flexibility offered by JavaFX.

  3. Java Web Start: Java Web Start allows developers to deploy Java applications via web browsers. It is more suitable for web-based applications, whereas JavaFX is designed for desktop and mobile applications.

  4. JavaFX vs. Web Technologies: While web technologies like HTML, CSS, and JavaScript can be used to build cross-platform applications, JavaFX offers better performance, native UI integration, and access to system resources. It is a good choice for applications that require advanced UI capabilities and better performance.