FXMLでレイアウトを定義する

前置き

自分がSwingからJavaFXへ移行する上で、一番の動機付けになっている変更点が、XMLでレイアウトを定義できるようになった所だった。
FXMLというXML形式のファイルに、コンテナにコントロールの配置を定義する。

FXMLはSceneBuilderというツールで、コントロールをドラッグアンドドロップして配置していく要領で、簡単に作成することができる。
これをクラスローダで読み込んで、コントロールに対し必要な処理部分を定義していく流れとなり、 WEBアプリケーションを作成するのに近くなったことで、MVCライクな設計が可能となる。
ということは、設計によってはWEBアプリケーションとGUIアプリケーションの資産を相互に流用することもできる。

準備

後述の手順でSceneBuilderを準備していく。

SceneBuilderインストーラーをダウンロードする

SceneBuilderをインストールする

SceneBuilderを起動すると文字化けしている

製造元のGitHubリポジトリからSceneBuilderApp_ja.propertiesをダウンロードする

ダウンロードしたSceneBuilderApp_ja.propertiesはUTF-8で保存する(必要に応じて)

C:\Program Files\SceneBuilder\app\scenebuilder-11.0.0-all.jarの拡張子をzipに変更して解凍する

解凍後のcom\oracle\javafx\scenebuilder\app\i18n\SceneBuilderApp_ja.propertiesをダウンロードしたSceneBuilderApp_ja.propertiesで置き換える

解凍したscenebuilder-11.0.0-allをzipで圧縮しなおして拡張子をjarに戻す

SceneBuilderを起動すると文字化が解消されている

ここまでいろいろと書いているが、この方の説明の方が遥かに分かり易いのでお勧め。

実装

SceneBuilderでコンテナにコントロールを配置していく。
操作が直感的に行えるので配置に関する説明は割愛するが、ポイントだけ押さえておく。

まずはfx:idについて。
コントロール毎に識別子を指定する。これがJava側でのフィールド名となる。
コントロールを選択して、右側のインスペクタからCodeを展開しfx:idにJavaでのフィールド名を指定する。

次に、Controllerクラスを指定する。
これはFXMLとJavaクラスをバインドさせるための指定で、左側のドキュメントからコントローラを展開し、 Controller classに、パッケージを含めたクラス名を指定する。

コントローラクラスに指定されたクラスは、javafx.fxml.Initializableインタフェースをimplementsする必要がある。
これによって、@FXMLアノテーションでfx:idとフィールド名をバインドさせることができる。
また、Initializableインタフェースには、initializeという抽象メソッドが用意されており、 FXMLで定義できないコントロールの処理や設定などを、文字通り初期化することができる。

以上、SceneBuilderで作成したFXMLファイルは、リソースフォルダに保存する。
コントローラクラスからgetResourceメソッドで読み込みを想定しているので、 コントローラクラスと同じパッケージを用意し、FXDemo.fxmlというファイル名で保存することにする。

FXDemo.fxml
<?xml version="1.0" encoding="UTF-8"?> <?import javafx.geometry.Insets?> <?import javafx.scene.control.Button?> <?import javafx.scene.control.TextArea?> <?import javafx.scene.control.TextField?> <?import javafx.scene.layout.BorderPane?> <?import javafx.scene.layout.FlowPane?> <BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo"> <top> <FlowPane hgap="5.0" BorderPane.alignment="CENTER"> <children> <TextField fx:id="txtInput" /> <Button fx:id="btnSend" mnemonicParsing="false" text="Button" /> </children> <BorderPane.margin> <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /> </BorderPane.margin> </FlowPane> </top> <center> <TextArea fx:id="taOutput" editable="false" prefHeight="373.0" prefWidth="600.0" BorderPane.alignment="CENTER" /> </center> </BorderPane>

FXDemo.java
package jp.ne.yonem; import javafx.application.Application; import javafx.fxml.FXML; import javafx.fxml.FXMLLoader; import javafx.fxml.Initializable; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.TextArea; import javafx.scene.control.TextField; import javafx.scene.layout.BorderPane; import javafx.stage.Stage; import java.io.IOException; import java.net.URL; import java.util.ResourceBundle; public class FXDemo extends Application implements Initializable { @FXML TextField txtInput; @FXML Button btnSend; @FXML TextArea taOutput; @Override public void start(Stage stage) throws IOException { // リソースフォルダの同じパッケージ内にある"FXDemo.fxml"を読み込んでコンテナをロードする BorderPane pane = FXMLLoader.load(getClass().getResource("FXDemo.fxml")); stage.setScene(new Scene(pane)); stage.setTitle("FXDemo"); stage.show(); } public static void main(String[] args) { launch(args); } @Override public void initialize(URL location, ResourceBundle resources) { txtInput.setText("ここに入力する"); btnSend.setText("送信"); taOutput.setText("ここに出力される"); } }

今回は、FXMLでは定義していない初期値やボタン名を、initializeメソッドで変更してみた。

実行結果