JavaFX 2.0でアプリケーション作成（その1）

JavaFX 2.0最初の一歩 - torutkのブログの続きです。第2歩がずいぶん遠のいてしまいました。今回は第2歩として開発環境を用意し最初のプログラム作成画面を実行するところまで進みます。なお、最初の画面は、思うようにレイアウトができない、ということろまでです。きれいにレイアウトするのは第3歩以降の課題です。

なお、開発環境は、Windows 7、JDK 7u3、NetBeans 7.1です。

JavaFX 2.0アプリケーション作成の準備

Java SE 7（JDK7）をインストールすると、Windowsの場合一緒にJavaFX 2.0もインストールされます。NetBeans 7.1では、デフォルトでJavaFXアプリケーション用プロジェクトが用意されています。

ただし、最初に設定が必要です。設定について画面キャプチャ付きで詳しく書かれた櫻庭さんのブログがあるのでそちらをご覧ください。

NetBeans で JavaFX (Windows 編) - JavaFX in the Box

最初のアプリケーション画面構成

id:torutk:20120226 の検証で作成したjava.util.concurrent.Semaphoreクラスの挙動を調べるアプリケーションです。画面上に操作ボタンと操作結果を表示するテキストフィールド、ラベルからなるものです。

プログラミング

NetBeans 7.1のJavaFX開発機能は、Swingのようなビジュアルデザインを提供していないので、JavaコードもしくはXML（FXML）で画面を構成します。今回は、Javaコードで構成します。

NetBeansのJavaFXアプリケーションプロジェクトを作成すると、mainメソッドを持つアプリケーションクラスが生成されます。

JavaFXアプリケーションクラス全体像

アプリケーションクラスの枠組みは以下です。

import javafx.application.Application;
import javafx.stage.Stage;

public class SemaphoreView extends Application {
    @Override
    public void start(Stage primaryStage) {
    }

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

JavaFX 2アプリケーションでは、javafx.application.Applicationクラスを継承したクラスを作成します。mainメソッドでは、Applicationクラスのstaticメソッドlaunchを呼び出し、コマンドライン引数を渡します。

そして、startメソッドにアプリケーションのGUI定義を記述していきます。

startメソッドのコード全体および画面

startメソッドを修正していきます。

まず、startメソッド全体のソースと、このソースで表示される画面を次に示します。
ソースの各部と画面構成の問題についてはその後に述べます。

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Semaphoreの動きを理解する");

        BorderPane borderPane = new BorderPane();
        Label topLabel = new Label("Semaphoreへの操作とその結果");
        borderPane.setTop(topLabel);

        GridPane semaphorePane = new GridPane();

        Label permitsLabel = new Label("利用可能な許可数:");
        semaphorePane.add(permitsLabel, 0, 0);
        
        TextField permitsField = new TextField();
        semaphorePane.add(permitsField, 1, 0);
        
        Button tryButton = new Button("Try acquire");
        semaphorePane.add(tryButton, 0, 1);
        
        TextField resultField = new TextField();
        semaphorePane.add(resultField, 1, 1);
        
        Button releaseButton = new Button("Release");
        semaphorePane.add(releaseButton, 0, 2);
        
        borderPane.setCenter(semaphorePane);

        primaryStage.setScene(new Scene(borderPane, 300, 250));
        primaryStage.show();
    }

左上にぎゅうぎゅうにつまった画面となってしまいました。

startメソッドの各部

まずメソッドの引数と最初のコードです。

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Semaphoreの動きを理解する");

画面全体、SwingではJFrameに相当するのが、startメソッドの引数で渡されてくるStageインスタンスです。ウィンドウのタイトルバーに表示する文字は、StageのsetTitleメソッドで設定します。

次に、画面上に複数の部品を配置するので、配置用のレイアウト部品を選択します。

        BorderPane borderPane = new BorderPane();

ここでは、Swing時代にレイアウトツールなしに直接プログラミングしていた時によく使用したBorderLayoutと同じ配置を行うBorderPaneを使用しました。JavaFX 2のBorderPaneは、配置領域を東西南北ではなく、上下右左としています。

続いて、画面上部（BorderPaneのTop領域）にLabelを貼ります。

        Label topLabel = new Label("Semaphoreへの操作とその結果");
        borderPane.setTop(topLabel);

本画面の主要機能である、ボタンおよびステータス表示用テキストフィールドは格子状の配置となるので、GridPaneを使用します。GridPaneは、SwingのGridLayoutとGridBagLayoutの中間のようなものでしょうか。

        GridPane semaphorePane = new GridPane();

GridPaneに順次ラベル、テキストフィールド、ボタンを貼っていきます。

まずは、ラベルから。GridPaneのaddメソッドで、座標（0, 0）を指定してラベルを貼ります。座標は、左方向／下方向の順で指定します（行、列ではないので注意）。

        Label permitsLabel = new Label("利用可能な許可数:");
        semaphorePane.add(permitsLabel, 0, 0);

同様に、テキストフィールド、ボタンなどを貼っていきます。

        TextField permitsField = new TextField();
        semaphorePane.add(permitsField, 1, 0);

        Button tryButton = new Button("Try acquire");
        semaphorePane.add(tryButton, 0, 1);

        TextField resultField = new TextField();
        semaphorePane.add(resultField, 1, 1);

        Button releaseButton = new Button("Release");
        semaphorePane.add(releaseButton, 0, 2);

一通り配置したGridPaneインスタンスを、最初に作成したBorderPaneの中央に貼ります。

        primaryStage.setScene(new Scene(borderPane, 300, 250));

最後に、ウィンドウを可視化（表示）します。

        primaryStage.show();

これでstartメソッドの実装は（レイアウトのみですが）終了です。

次回、レイアウトの見栄えをよくするため、ラベルの文字列をセンタリング、部品間の空白を追加、といった加工をしてみたいと思います。