JavaFX15を導入してVSCodeでGUI開発を行う

目的

JavaFX(ver.15)SDKを導入してVSCodeでGUI開発を行うための環境構築メモです。

前提条件

VSCodeでJava開発ができることが前提です。
そのためには次の2つが必要です。

• JDK(ver.15。少なくともver.11)のインストール及びJAVA_HOME・PATHの指定
• VSCode(拡張機能Java Extension Packの導入、VSCode上のJAVA_HOMEの指定)

この環境構築の方法については別途解説していますので、こちらをご参照ください。
Java15の導入とVSCode環境設定

JavaFX SDKの導入

では早速JavaFXのSDKを導入していきましょう。

SDKを導入する理由
以前はJDKにJavaFXが含まれていましたが、現在はJDKから削除されています。
従ってJavaFXのSDKを別途導入する必要があります。

SDKのダウンロード

こちらのページからダウンロードします。
https://gluonhq.com/products/javafx/

今回はLatestであるJavaFX SDK15.0.1をダウンロードします。
更に筆者はWindows10 64bitの環境なのでWindows x64のものを選択します。

SDKの配置

ダウンロード後はzipを解凍してください。
更に解凍したフォルダごとわかりやすい場所に移します。
筆者はC:\Program Files\の配下に移動しました。

VSCodeの設定

JavaFX SDKの導入が終わりましたので、続いてVSCodeの設定に入っていきます。

諸注意

今回紹介するVSCodeの設定はこれから作成するJavaプロジェクト毎に行う必要があります。
一回きりの設定ではないのでご留意ください。

動作確認用のJavaプロジェクトの作成

確認用でVSCode上でJavaプロジェクトを作成します。
あらかじめJava開発の設定が施されているVSCodeで行ってください。

Ctrl+Shift+Pキーを同時押しで次の画面を表示させます。
続いてJavaと入力してください。

するとこのようにJava:Create Java Project...と表示されますので選択された状態でEnterキーを押します。

次にこのように使用するビルドツールについて聞かれます。
今回はビルドツールは使用しないのでNo build toolsを選択しEnterキーを押します。

最後にプロジェクト名を聞かれます。
プロジェクト名を入力してEnterキーです。
これでJavaプロジェクトが作成されます。

このように作成されました。
srcというフォルダに初めからApp.javaというJavaファイルが入っています。
これを開いた状態で右上の▶実行ボタンを押してみましょう。

下部にターミナルが出現し実行結果が出力されていれば成功です。

JavaFXライブラリをプロジェクトに追加

作成したプロジェクトの画面で以下の「Referenced Libraries」の+を選択します。

するとファイル選択画面になりますので、先程導入したJavaFX SDKのフォルダまで遷移します。
SDKのフォルダにlibというフォルダがありますのでその中のすべての.jarファイルを選択して下さい。

これでJavaFXライブラリをプロジェクトに追加することができました。
この時、VSCodeの再起動を行うことをお勧めします。
再起動を行うことでライブラリの追加が正確に適用されているはずです。

ビルドの設定

ご存じの通り、Javaの実行にVSCodeなどのエディタを使用せずコマンドラインで実行するにはjavacやjavaコマンドを用います。
その際にJavaFXとして実行させるためには以下のコマンドを用います。

javac --module-path "<JavaFXのlibのパス>" --add-modules javafx.controls,javafx.fxml <.javaファイル名>.java

java --module-path "<JavaFXのlibのパス>" --add-modules javafx.controls,javafx.fxml <.javaファイル名>

このように、単に実行するだけではなくJavaFXモジュールを一緒に呼んであげる必要があります。

なぜ実行コマンドをわざわざ紹介したのかというと、VSCodeでも同様に実行時にJavaFXモジュールを呼んであげる必要があるからです。

このように実行時にモジュールを呼ぶような設定はlaunch.jsonで行うことができます。
launch.jsonは新規で作成する必要があるので以下の画面の「create a launch.json file」で作成しておいてください。

作成したらlaunch.jsonが開きますので続けて編集していきます。
次の位置に次の項目を追加してください。

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

JSONファイルなので項目を,で区切ることを忘れないようにご注意ください。
--module-pathにはJavaFX SDKのlibフォルダのフルパスを指定します。\は2つ重ねて\\とするようにしてください。

launch.jsonの変更を保存することでビルドの設定は完了です！
これで「F5」もしくは「▶」からJavaFXを実行できるようになりました！！

サンプルプログラム

実際にVSCodeでJavaFXプログラムを開発してみて実行してみましょう。

プログラムコードの内容は以下のコードを拝借いたします。
https://github.com/openjfx/samples/blob/master/HelloFX/CLI/hellofx/HelloFX.java

それではコーディングしてみましょう！

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();
    }
}

では▶実行してみましょう。

きちんと動作しました！