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

2017/04/29

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

3年前にJavaから離れてC#に転向しました。（詳しくは以下のブログを参照ください） Windowsデスクトップアプリは今後もC#で作っていくつもりではいますが、ここ最近、昔を思い出しながらJava関係のブログを投下したところ、なんだか懐かしくなって再開したくなりました。Javaをやめる際に、SNSで外人からJavaFXをやれ！と絡まれたことを思い出し（当時は絡まれたけどスルー）、C#も飽きたことだしJavaFXをちょっとやってみようかなと思った次第です。で、ちょっと触ってみた際の雑感を書いておきます。まだ十分に使いこなし...

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

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

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

Gluon

Scene Builder - Gluon

Drag & Drop,Rapid Application Development. Download Now Integrated Scene Builder works with the JavaFX ecosystem – official controls, community projects, and Gluon offerings including Gluon Mobile, Gluon Desktop, and Gluon CloudLink. Simple Drag & Drop user interface design allows for rapid iteration. Separation of design and logic files allows for team members to quickly and …

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

[ad#top-1]

1 ・・・と思ったら起動速かった！
2 使ってみる
3 プログラミングする
4 まとめ・雑感など

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

予想に反して起動速かったです。もちろんスパッと立ち上がるほどではないのですが、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);
   }
}

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