Scene Biulder の基本的な使い方

FXML を使った GUI (グラフィカルユーザーインターフェイス) を作成するには、Scene Builder (シーンビルダー) を利用するのが大変便利でおすすめです。

ここでは Eclipse を用いて基本的な Scene Builder の使い方を紹介します。

まず JavaFX プロジェクトを作成します。

File > New > Project を選択します。

プロジェクトの種類の中から JavaFX Project を選択し Next をクリックします。

プロジェクト名を適当に決めて (ここでは "FxTest1" にしました)、Next > をクリックします。

続けて Java Settings はデフォルトを受け入れて Next > をクリックして次へ行きます。

この画面では Language で FXML を選択します。また、ファイル名は Test1、コントローラ名は Test1Controller としました。もし変更した場合は適当に読み替えてください。

Finish をクリックしてウィザードを終了します。

プロジェクトが作成されたら、左側のツリーを展開して、Test.fxml を右クリックします。

表示されたコンテキストメニューから Open with Scene Builder (Scene Builder で開く) を選択します。

Scene Builder が表示されたら、左側の Container のセクションから VBox をひとつドラッグアンドドロップします。

そして、VBox を選択した状態で、右側の Layout セクションにて Pref Width を 400 に設定します。

次に VBox の上に TextField をドラッグアンドドロップします。

TextField のレイアウトにて、マージンを 20 に設定します。

ひとつめのマージンを入力して、その隣の小さな矢印をクリックすると・・・

残りの三つの入力フィールドに値がコピーされます。

TextField の Code セクションにて id を textField1 としておきます。

左側の Controls セクションからボタンをひとつ VBox の上にドラッグアンドドロップします。

ここで設定したのは、ボタンのプロパティにて Text を OK に変更。

レイアウトセクションにて、左側のマージンを 20 に設定。

コードセクションにて、id を button1 に設定し、 On Action のハンドラ名を onButton1Action に設定しました。

以上でファイルを保存します。

Scene Builder の Preview メニューから Show Preview in Window を選択することで、 画面のプレビューを確認することができます。

Scene Builder の View メニューの Show Sample Controller Skelton を選択すると、 コントローラのスケルトンコードが表示されます。

右下の Full にチェックを入れてから、Copy をクリックします。これで、 クリップボードにスケルトンコードがコピーされます。Eclipse の画面にて Test1Controller.java に先ほどコピーしたスケルトンコードをペーストします。

Test1Controller.java の onButton1Action を以下のように編集します。(念のため Test1Controller.java の全体を掲載します)

package application;

import java.net.URL;
import java.util.Optional;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Alert;
import javafx.scene.control.Alert.AlertType;
import javafx.scene.control.Button;
import javafx.scene.control.ButtonType;
import javafx.scene.control.TextField;

public class Test1Controller {

    @FXML
    private ResourceBundle resources;

    @FXML
    private URL location;

    @FXML
    private TextField textField1;

    @FXML
    private Button button1;

    @FXML
    void onButton1Action(ActionEvent event) {
    	Alert alert = new Alert(AlertType.CONFIRMATION);
    	alert.setTitle("Title!");
    	alert.setHeaderText("Header!");
    	alert.setContentText("You entered: " + textField1.getText());
    	Optional<ButtonType> result = alert.showAndWait();
    	if (result.isPresent() && result.get() == ButtonType.OK) {
    		System.out.println("You clicked OK");
    	}
    }

    @FXML
    void initialize() {
        assert textField1 != null : "fx:id=\"textField1\" was not injected: check your FXML file 'Test1.fxml'.";
        assert button1 != null : "fx:id=\"button1\" was not injected: check your FXML file 'Test1.fxml'.";
    }
}

以上で、プログラムを実行すると次のような画面が表示されるはずです。

テキストフィールドに文字を入力して、OK をクリックすると Alert ダイアログボックスが表示され、テキストフィールドに入力した内容が、コンテントエリアに表示されるはずです。

以上で、Scene Builder で JavaFx プログラムの GUI をデザインし、コントローラのスケルトンコードを利用する、基本的な方法を紹介しました。