JavaFX: GUI作成ツールScene Builderは使いやすい！起動も速い！

2017/04/29

前回、JavaFXをちょっと触ってみた雑感を書きました。

非IT企業に勤める中年サラリーマンのIT日記

JavaFXをちょっと触った雑感とこれからのこと

http://pineplanter.moo.jp/non-it-salaryman/2017/04/27/java-fx-start/

3年前にJavaから離れてC#に転向しました。（詳しくは以下のブログを参照ください） Windowsデスクトップアプリは今後もC#で作っていくつもりではいますが、ここ最近、昔を思い出しながらJava関係のブログを投下したところ、なんだか懐かしくなって再開したくな...

ここで、FXML上の構文ミスがコンパイルではなく実行時に検出されることを書きました。よく読めばどこの行が間違っているかわかるのですが、コンパイルで引っ掛けられないという点がちょっと嫌だなーと思ってしまったんです。

なので、FXMLを使う場合はGUI作成ツールのScene Builderを使わざるを得ないだろうな、と思ったので、そのScene Builderをちょっと使ってみました。

ダウンロードはこちらからとなります。

ただ、正直GUIツールってEclipseのイメージがあったので、同じように起動がめちゃ遅いんだろうなーと覚悟はしていたのですが・・・。

・・・と思ったら起動速かった！

予想に反して起動速かったです。もちろんスパッと立ち上がるほどではないのですが、Eclipseより全然速く、個人的に許容範囲内です。これは意外でした。

こちらが、起動後の画面です。

ちなみに、こちらがバージョン情報。現時点（2017年4月28日現在）の最新版8.3.0です。

使ってみる

ちょっと使ってみました。

まずはベースとなるPaneを選びます。コントロールを自由にレイアウトできるAnchorPaneを選びました。（Swingにはこれが無かったんですよね。レイアウトには苦労しました。）

ドラッグアンドドロップで設置します。

設置するとこんな感じです。デフォルトの大きさになります。

作成するアプリケーションのサイズに合わせます。右サイドバーのLayoutの中から「Pref Width」「Pref Height」という項目があって、そこに任意のサイズを設定します。

次に、AnchorPaneにコントロール部品を配置します。

以下の例はラベル（Label）です。ドラッグアンドドロップでAnchorPaneに設置します。

Labelのカスタマイズは、右サイドバーのPropertiesの中で設定できます。ラベル内の文字列をHello Worldにして、文字サイズを大きくしました。

同じ要領でボタンも設置しました。

こいつをFXMLファイル形式で保存します。

メニューから、File – Save As… を選択します。

名前を付けて保存ダイアログが現れるので、適当な名前を付けて保存します。これでFXMLの作成は完了です。

プログラミングする

できあがったFXMLはこんな感じです。特に修正することはないのでこんな風に見る必要もないのですが。

<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>
  
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="100.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label layoutX="75.0" layoutY="33.0" text="Hello World">
         <font>
            <Font name="Meiryo UI" size="24.0" />
         </font>
      </Label>
      <Button layoutX="238.0" layoutY="32.0" mnemonicParsing="false" prefHeight="37.0" prefWidth="107.0" text="OK">
         <font>
            <Font name="Meiryo UI" size="18.0" />
         </font>
      </Button>
   </children>
</AnchorPane>

で、JavaFX側はこんなプログラムです。あくまでFXMLを呼び出して表示するだけのプログラムです。ボタンイベントもありません。

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
 
public class Hello extends Application {
   @Override
   public void start(Stage primaryStage) throws Exception{
      Parent root = FXMLLoader.load(getClass().getResource("Hello.fxml"));
      primaryStage.setTitle("Hello World");
      primaryStage.setScene(new Scene(root, 400, 100));
      primaryStage.show();
   }
 
   public static void main(String[] args) {
      launch(args);
   }
}

こいつをコンパイルして実行すると、以下のようになります。うまく行きました。

まとめ・雑感など

Scene Builderは予想外に速かったし、使い勝手も良さそう。
使っている最中にかつてのJBuilderを思い出した。あれはクソすぎた（笑）。
UI部分を別のファイルにまとめるのは確かにコードがスッキリして良い。
実行速度はどうなのか気になるけど。
過去、Swingをさんざん触ってきたけどJavaFXも面白そう。
しばらく、JavaFXで遊んでみます。