JavaFXで作る簡単GUIアプリケーション

ソフトウェア開発

Javaの理解を深めたくて、最近GUIアプリケーションを作っています。学生の頃は確かAWTやSwingといったフレームワークを使った記憶があるのですが、最近はJavaFXが標準として採用されているようだったので初めて使ってみました。今回はその過程で学んだことや引っかかったポイントなどをシェアさせていただきます。

構成要素

Mainクラス以外のJavaFXの主な構成要素はControllerとFXMLになります。この2つをきちんと紐付けてアプリケーション動作を制御することで簡単な機能はほぼ実現できました。

FXML

JavaFXではXMLベースのマークアップ言語であるFXMLを使ってGUIのデザインを行なうことができます。土台になるPaneやその上に配置するボタンやラベル、テキストフィールドなどの配置を記述することになります。さらにJavaFX Scene Builderという設計ツールを使うと、これらのGUIコンポーネントをドラッグアンドドロップで設計・配置できるので、Swingなどと比べて直感的にデザインすることができ、コードも簡潔にすることができます。Scene BuilderはこちらからJavaのバージョンに合ったものをダウンロードしてください。

Scene Builder - Gluon
Drag & Drop,Rapid Application Development. Download Now   Integrated Scene Builder works with the JavaFX ecosystem – official controls, community projects, and ...

これによってFXMLファイルを間接的かつグラフィカルに編集することが可能になります。以下はScene Builderの画面例とそれに対応する.fxmlファイルです。

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane fx:id="inputPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/15.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="imageshuffle.Controller">
   <children>
      <Button layoutX="252.0" layoutY="68.0" mnemonicParsing="false" onAction="#selectImage" text="画像読み込み" />
      <TextField fx:id="imageTextIn" layoutX="173.0" layoutY="157.0" prefHeight="27.0" prefWidth="256.0" />
      <Button layoutX="253.0" layoutY="238.0" mnemonicParsing="false" onAction="#dataLoad" text="データロード" />
      <Button layoutX="275.0" layoutY="340.0" mnemonicParsing="false" onAction="#toTop" text="topへ" />
      <Label fx:id="fileName" layoutX="67.0" layoutY="108.0" prefHeight="17.0" prefWidth="466.0" />
   </children>
</AnchorPane>

Controller

Controllerクラスではアプリケーションの実際の動作を実装します。具体的にはFXMLをControllerクラスと紐付けることで、例えばボタンを押したときの動作やテキストフィールドに入力された文字列を取得することができます。ここで、FXMLの要素でfx:idに適当な名称を設定し、Controller側でそれと同一の変数名を定義することで両者の紐付けを行なうことができます。この変数定義の際に@FXMLのアノテーションを付ける必要があります。
またControllerのインスタンスはFXMLLoader.loadを呼び出したタイミングで作成されるので、画面遷移などで複数の.fxmlを利用してデータをやりとりする必要があれば、クラス変数を利用することで解決することができます。

サンプルコード

開発中のアプリケーションのコードをサンプルとして上げているので、上記の詳細を確認したい方はご参考いただければと思います。

GitHub - shsax12/ImageShuffle
Contribute to shsax12/ImageShuffle development by creating an account on GitHub.

まとめ

JavaFXを使った簡単なGUIアプリケーションの作成をする際のポイントを説明しました。AWTやSwingに慣れている方はあまり問題ないのかもしれないですが、StageやPaneといった階層構造なども初めは理解しづらいかもしれません。それでもScene Builderを触ったりして実際のアプリケーションのイメージができてくると一気に楽しくなってくると思うので、途中で諦めずに是非オリジナルのJavaアプリケーションを作ってみてください。

読んでいただきありがとうございました。

タイトルとURLをコピーしました