やること

以前VSCodeでJavaFXを開発する環境を整えました。
その時の記事はこちらです。
JavaFX15を導入してVSCodeでGUI開発を行う

今回はその続きということで、SceneBuilderを導入してみたいと思います。

SceneBuilderとは
JavaFXでUIのデザインを行う際にあると便利なデザインツール。

それだけではなく、今回はVSCode上でFXMLファイルから直接SceneBuilderを開く設定もやっていきます。

ではやっていきましょう！

SceneBuilderの導入

まずはSceneBuilderの導入からです。

SceneBuilderのインストール

まずSceneBuilderのインストーラーを入手します。
ダウンロードはこちらから行うことができます。
https://gluonhq.com/products/scene-builder/

Scene Builder for Java 11のWindowsInstallerをダウンロードしました。

ダウンロードが終わったらインストーラーを起動してインストールをしてください。

文字化けしているので、英語版にする設定

SceneBuilderと言えばこの文字化け問題です。
もし起動時に文字化けしていたら、それは日本語版の設定ファイルが破損しているからです。

この破損ファイルを修正して日本語版にする方法もあるみたいですが、
わざわざ日本語にするのも面倒なので今回はしません。

英語版にするには簡単なのでその設定をやりましょう。

SceneBuilderインストール先の中にapp\SceneBuilder.cfgというファイルがあるはずです。
筆者の場合は次のパスにありました。
C:\Program Files\SceneBuilder\app\SceneBuilder.cfg

こちらのファイルをメモ帳などで開いてください。

開いたら次の行を追加編集します。

-Duser.language=en

これで英語版のSceneBuilderが使えるようになりました！

VSCodeでFXMLをSceneBuilderで開く設定

続いてVSCodeの設定に入ります。

まずはFXML Viewerという拡張機能をインストールします。

このように「fxml」などと検索すると出てくるFXML Viewerをインストールしてください。

次に拡張機能の設定を行います。

拡張機能の設定を開くにはこのように⚙→「Extension Settings」を選択して下さい。

すると次の画面になります。

このようにSceneBuilderの.exeがあるフルパスを入力します。

これでVSCodeの設定は完了です！

VSCodeでFXMLを開いてみる

最後に実際に開けるか試してみましょう。

対象のFXMLファイルを右クリックし、Open FXMLを選択します。

するとSceneBuilderが立ち上がりFXMLファイルを開くことができました！