Writing a JavaFX Application

JavaFX

JavaFX is the swing replacement as the standard java GUI library. It replaces its predecessor, whcih was written 20 years ago, and brings many new features. The purpose of this page is to introduce the library, its features and give the reader a complete overview. This is, by no means, a comprehensive guide, but rather a small tutorial to introduce the library. For a more in-depth guide, see the official Getting Started tutorial by Oracle.

For a non proffesional tutorial, but good enough to understand the library, you can use this youtube tutorial - the first 30 videos show the different containers and controls, while the last videos show how to work with FXML and the Scene Builder.

Installation

As of JDK 8, the JavaFX library is included in the official JDK. However, when installing java using the apt-get command, some issues might rise. To install the JavaFX library in such cases, run the following command in the terminal:

sudo apt-get install openjfx

Two Approaches For Writing JavaFX Applications

There are two main ways to build a JavaFX application:

• Using pure java code - this method is similar to developing Swing applications, in the sense that the application's design and logic are written in the code.
• Using FXML (an XML variation) to write the design, and java code to write the logic - this method decouples the design from the logic. Because of the nature of GUIs (which are usually represented as a tree node), the XML format is suitable for designing the GUI. Event handling (such as pressing buttons, selecting items in combo-boxes, etc...) is done by code and represents the logic of the application. We will be using this method in this wiki.

There are several advantages to using the second approach:

• Decoupling design from logic.
• Easier design by using a markup language (XML) more suitable for hierarchical design (instead of writing design in Java).
• Programs that allow the user to design the GUI are available. One of the most popular ones, which is mainated by Oracle, is called the Scene Builder. One of the many advantages of this program, is that it outputs an FXML file for the designed application.

Writing a Pure Java JavaFX Application

For a quick tutorial on how to write a JavaFX application using only java code, please go here.

Writing JavaFX Application Using FXML

For a quick tutorial on how to write a JavaFX application using FXML files, please go here.

Components of a JavaFX Application

Before we have a more in-depth talk about the components, lets see an example application using the JavaFX library. This example has been coded using the first approach (writing both the design and logic in Java).

package helloworld;
 
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
 
public class HelloWorld extends Application {
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Hello World!");
        Button btn = new Button();
        btn.setText("Say 'Hello World'");
        btn.setOnAction(new EventHandler<ActionEvent>() {
 
            @Override
            public void handle(ActionEvent event) {
                System.out.println("Hello World!");
            }
        });
        
        StackPane root = new StackPane();
        root.getChildren().add(btn);
        primaryStage.setScene(new Scene(root, 300, 250));
        primaryStage.show();
    }
}

The main components we can see here, and in almost every JavaFX application, are:

• The application - a user-defined class that extends the javafx.application.Application class. This is the core of the JavaFX application, here you write the code that should be executed when the application launches.
• The stage (javafx.stage.Stage) - the top level container of the application. Each application has a stage which is responsible for displaying a scene (will be explained in the next point). It is possible to switch scenes while the application is running using methods of the javafx.stage.Stage class.
• A scene (javafx.scene.Scene) - a scene (there may be several) contains all the elements of the GUI. It is possible to design several scenes and switch between them using the Stage.

JavaFX applications are designed using scene graphs - a hierarchy that specifies the relationships between the different elements in the GUI. Such a graph can be viewed as a tree, containing containers as nodes and controls as leaves. Let us explain the new expressions we were introduced to:

• Tree - yes.

• Control - controls are the basic elements of a GUI. Some examples might include labels, buttons, check-boxes, combo-boxes, text-fields and many others.

• Container - Containers, as their name suggests, contain other containers and controls. If their only purpose is to contain other stuff, one might wonder why are there so many types of containers. One of the main goals of containers, is to define the relationship between the elements found within them. To illustrate this claim, lets look at the following two containers:

  • HBox (javafx.scene.layout.HBox):
  • Vbox (javafx.scene.layout.VBox):

  although both containers include the exact same controls, and in the same order, the final result is completely different. That is because the elements in a VBox are organized from top to bottom, while the elements in an HBox are organized from left to right.