Introduce JavaFX 15 and do GUI development with VS Code

Purpose

This is an environment construction memo for introducing JavaFX (ver.15) SDK and developing GUI with VS Code.

Prerequisites

It is a prerequisite that you can develop Java with VS Code. To do this, you need two things:

• Install JDK (ver.15, at least ver.11) and specify JAVA_HOME / PATH
• VSCode (Introduction of extension Java Extension Pack, specification of JAVA_HOME on VSCode)

Please refer to the separate explanation for how to build this environment. Introduction of Java 15 and VS Code environment settings

Introducing JavaFX SDK

Now let's introduce the JavaFX SDK.

** Reasons for introducing SDK ** Previously the JDK included JavaFX, but now it has been removed from the JDK. Therefore, it is necessary to install the JavaFX SDK separately.

SDK download

Download from this page. https://gluonhq.com/products/javafx/

This time, download the Latest JavaFX SDK 15.0.1. Furthermore, since the author is a Windows 10 64bit environment, select the one with Windows x 64.

SDK placement

Please unzip the zip after downloading. In addition, move the unzipped folder to an easy-to-understand location. I have moved to C: \ Program Files \.

VS Code settings

Now that the JavaFX SDK has been introduced, let's move on to VS Code settings.

Notes

It is necessary to set VS Code introduced this time for each Java project to be created. Please note that this is not a one-time setting.

Creating a Java project to check the operation

Create a Java project on VS Code for confirmation. Please use VS Code, which has Java development settings set in advance.

Press the Ctrl + Shift + P keys at the same time to display the next screen. Then enter Java. Then, Java: Create Java Project ... is displayed like this, so press the Enter key while it is selected.

You will then be asked about the build tools you will use in this way. Since we will not use build tools this time, select No build tools and press the Enter key.

Finally, you will be asked for the project name. Enter the project name and press the Enter key. This will create a Java project.

It was created like this. A Java file called App.java is included in the folder called src from the beginning. With this open, press the ▶ Execute button on the upper right.

If a terminal appears at the bottom and the execution result is output, it is successful.

Add JavaFX library to your project

On the screen of the created project, select + of "Referenced Libraries" below.

Then, the file selection screen will be displayed, so the transition to the JavaFX SDK folder introduced earlier will be displayed. There is a folder called lib in the SDK folder, so select all the .jar files in it.

You have now added the JavaFX library to your project. At this time, it is recommended to restart ** VS Code **. The library addition should have been applied correctly by rebooting.

Build settings

As you know, use the javac and java commands to execute Java on the command line without using an editor such as VSCode. At that time, use the following command to execute it as JavaFX.

javac --module-path "<JavaFX lib path>" --add-modules javafx.controls,javafx.fxml <.java file name>.java

java --module-path "<JavaFX lib path>" --add-modules javafx.controls,javafx.fxml <.java file name>

In this way, you need to call the JavaFX module together, not just run it.

The reason why I introduced the execution command is that ** VS Code also needs to call the JavaFX module at runtime **.

Settings such as calling a module at runtime can be done in launch.json. Since launch.json needs to be newly created, please create it with" create a launch.json file "on the following screen.

After creating it, launch.json will open, so continue editing. Add the following items in the following positions.

{
  "vmArgs": "--module-path \"C:\\Program Files\\javafx-sdk-15.0.1\\lib\" --add-modules javafx.controls,javafx.fxml"
}

Be careful not to forget to separate the items with , because it is a JSON file. For --module-path, specify the full path of the JavaFX SDK lib folder. Make sure to stack two \s into \\.

Save your launch.json changes and you're all set to build! You can now run JavaFX from "F5" or "▶"! !!

Sample program

Let's actually develop a JavaFX program with VS Code and execute it.

The following code is borrowed for the contents of the program code. https://github.com/openjfx/samples/blob/master/HelloFX/CLI/hellofx/HelloFX.java

Let's code!

App.java

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

public class App extends Application {
    public static void main(String[] args) throws Exception {
        launch();
    }

    @Override
    public void start(Stage stage) throws Exception {
        String javaVersion = System.getProperty("java.version");
        String javafxVersion = System.getProperty("javafx.version");
        Label l = new Label("Hello, JavaFX " + javafxVersion + ", running on Java " + javaVersion + ".");
        Scene scene = new Scene(new StackPane(l), 640, 480);
        stage.setScene(scene);
        stage.show();
    }
}

Let's execute ▶. It worked fine!