afterburner.fx によるお手軽 JavaFX プログラミング (1) (ja)

この記事は JavaFX Advent Calendar 2017 の 2 日目です。昨日分は @aoetk さんの「JavaFXアプリケーションでJava 9のモジュールを使うときの注意点」です。

afterburner.fx はドイツの Java Champion である Adam Bien が開発した JavaFX アプリケーションの開発フレームワークです。Adam が開発した JavaFX アプリケーション (LightFish 等) を中心に、多くの開発者が愛用しています。

今回は第1回として afterburner.fx を使用してアプリケーションのスケルトンを作成してみます。第2回以降、様々な要素を追加して JavaFX の可能性についてみてゆきたいと思います。それではさっそく始めましょう。

1. プロジェクトの作成

Maven のプロジェクトを作成し、afterburner.fx を依存関係に含めます。afterburner.fx はそれ自身で完結しており、他に必要なライブラリはありません。本稿執筆時点での最新安定版は 1.7.0 です。

<dependency>
  <groupId>com.airhacks</groupId>
  <artifactId>afterburner.fx</artifactId>
  <version>1.7.0</version>
</dependency>

2. メイン・ウィンドウの作成

アプリケーションのメイン・ウィンドウを作成します。まず、名前を決めましょう。今回は Main とします。作成すべきファイルは以下の通りです。これらはすべて同じパッケージに置いてください。また、Maven では通常、Java のソースコード以外は src/main/resources ディレクトリに配置しますが、afterburner.fx では FXML ファイルとスタイルシートも src/main/java ディレクトリ以下に配置してください。作成は順不同でかまいません。

  • Main.fxml (FXML ファイル)
  • Main.css (スタイルシート)
  • MainPresenter クラス
  • MainView クラス

2.1. Main.fxml

Main.fxml はメイン・ウィンドウのデザインを記述する FXML ファイルです。ビジュアル開発ツール Scene Builder を使用すると簡単に作成できます。

create-main-fxml.png
figure 1 - Scene Builder で Main.fxml を編集する

今回はスケルトンですので、ベースに AnchorPane を選択し、標準サイズを 640 x 480 pixels に設定した程度で、ほとんど初期値のままとなっています。Controller には後述の MainPresenter クラスをパッケージ名付きで設定してください。

2.2. Main.css

JavaFX では見た目の細かい制御を、HTML 同様にスタイルシートで行います。スケルトンでは、とりあえず空のファイルで問題ありません。スタイルシートがないと実行時に afterburner.fx が警告を出しますが、動作に支障はありません。

2.3. MainPresenter クラス

MainPresenter クラスは、Main.fxml (および Main.css) で定義した画面のふるまいを記述するクラスです。JavaFX 一般で Controller と呼んでいるものに当たります。afterburner.fx の Presenter は、JavaFX の Controller と同じ役目を果たしますが、独自に CDI 対応がなされており、@Inject アノテーションによる DI が可能になっています。類似のフレームワークとして fx-guice もありますが、afterburner.fx の方がシンプルで自由度も高いです。

必要最小限の Presenter は、空のクラスです。フロントエンドである FXML も空でしたから、対応するバックエンドの Presenter が空になるのも当然ですね。

public class MainPresenter {

}

2.4. MainView クラス

Main 画面のローディングを担当するのが MainView クラスです。JavaFX では FXMLLoader クラスで FXML とそれに対応する Controller がロードされる仕組みになっていますが、その部分をカプセル化したものになります。afterburner.fx が提供する FXMLView クラスを継承しますが、ほとんどの場合追加の実装は必要ありません (上級テクニックとして、FXMLView クラスを継承しカスタマイズする方法もあります)。

public class MainView extends FXMLView {

}

2.5. ここまでのまとめ

afterburner.fx を用いた JavaFX アプリケーションでは、4 種類ある画面の基本的な構成要素がすべて同じ名前 (この例では Main) で始まっているのが特徴です。afterburner.fx は内部処理でこの名前を目印として使っており、ソースファイル上もどの画面の要素を示すのか一目瞭然です。フレームワーク実装上の制約と Adam が推奨するネーミングルールを上手く絡めた、良い設計だと思います。

2.6. 古いバージョンの afterburner.fx との違い

afterburner.fx は以前から日本でも数多く取り上げられ、ご存知の方も少なくないようですが、残念なことに情報が古いというのが難点です。例えば、古いバージョンの afterburner.fx では、FXML ファイルとスタイルシートの名前を小文字で始める必要がありました。しかし、afterburner.fx の規則に従っうと IDE が「先頭文字は大文字にせよ」と警告を出す場面も多々見られました。現在では FXML とスタイルシートの名前の先頭は大小文字ともに使用できるようになっています。

3. アプリケーションのエントリポイントの作成

アプリケーションのエントリポイント、すなわち main メソッドを含むクラスを作成します。

public class App extends Application {
  @Override
  public void start(Stage stage) throws Exception {
    MainView mainView = new MainView();
    Scene scene = new Scene(mainView.getView());

    stage.setScene(scene);
    stage.show();
  }

  public static void main(String[] args) {
    launch(args);
  }
}

start メソッドの後半は、標準的な JavaFX アプリケーションと全く同じ (Stage に Scene を設定して、show メソッドを呼び出す) です。FXMLLoader を使用する代わりに MainView クラスのインスタンスを作成し、mainView.getView メソッドで画面要素を Scene に設定していることがお分かりいただけるでしょう。

JavaFX と DI コンテナを併用する場合、FXMLLoader に対して DI コンテナを割り込ませるような処理を追加する必要があり、FXML をロードする部分が各フレームワーク独自のクラスに置き換わります。afterburner.fx では FXMLView クラスがそれに当たり、最終的な FXML とのマッピングをサブクラスのクラス名で行う仕組みになっています。

4. まとめ

今回は afterburner.fx を使用して JavaFX アプリケーションのスケルトンを作成してみました。この段階ではまだ afterburner.fx の効果が見えづらいと思いますが、他に交じりっ気のないアプリケーションのため、基本的な原理を知るにはうってつけだと思います。

今回作成したスケルトンは https://github.com/khasunuma/javafx-skelton にアップロードしています。Adam のサンプルよりもさらに内容を絞っていますので、臆せずに見てみてください。