4 JavaFXでのフォームの作成

フォームの作成は、アプリケーション開発時の一般的なアクティビティです。このチュートリアルでは、画面レイアウトの基本、レイアウト・ペインへのコントロールの追加方法および入力イベントの作成方法について説明します。

このチュートリアルでは、JavaFXを使用して、図4-1に示すログイン・フォームをビルドします。

図4-1 ログイン・フォーム

この開始チュートリアルで使用するツールは、NetBeans IDEです。開始する前に、使用しているNetBeans IDEのバージョンでJavaFX 8がサポートされていることを確認します。詳細は、「Java SE Downloads」ページの「Certified System Configurations」ページを参照してください。

プロジェクトの作成

最初のタスクは、NetBeans IDEでJavaFXプロジェクトを作成し、Loginという名前を付けることです。

「ファイル」メニューから、「新規プロジェクト」を選択します。
「JavaFX」アプリケーション・カテゴリで、「JavaFXアプリケーション」を選択します。「次」をクリックします。
プロジェクトにLoginという名前を付け、「終了」をクリックします。

JavaFXプロジェクトを作成すると、NetBeans IDEによりHello Worldアプリケーションが開始点として提供されますが、これについてはHello Worldチュートリアルを実行した場合はすでに確認しています。
NetBeans IDEによって生成されたソース・ファイルからstart()メソッドを削除し、例4-1のコードに置き換えます。
例4-1 アプリケーション・ステージ
```
@Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("JavaFX Welcome");
        
        primaryStage.show();
    }
```

ヒント: サンプル・コードをNetBeansプロジェクトに追加した後、[Ctrl] (または[Cmd])キーと[Shift]キーを押しながら[I]キーを押して、必要なパッケージをインポートします。import文の選択肢がある場合は、javafxで始まるものを選択します。

GridPaneレイアウトの作成

ログイン・フォームではGridPaneレイアウトを使用しますが、これは、コントロールをレイアウトする、行および列の柔軟なグリッドを作成できるためです。グリッド内の任意のセルにコントロールを配置でき、必要に応じてコントロールが複数のセルにわたるようにすることができます。

例4-2に、GridPaneレイアウトを作成するコードを示します。このコードを行primaryStage.show();の前に追加します。

例4-2 gapおよびpaddingプロパティが設定されたGridPane

GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));

Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);

例4-2では、GridPaneオブジェクトが作成され、gridという名前の変数に割り当てられます。alignmentプロパティによって、グリッドのデフォルトの位置は、シーンの左上から中央に変更されます。gapプロパティによって行と列の間隔が管理され、paddingプロパティによってグリッド・ペインのエッジの周りの領域が管理されます。インセットの順序は、上、右、下、左です。この例では、それぞれの側に25ピクセルのパディングがあります。

シーンはグリッド・ペインをルート・ノードとして作成されますが、これはレイアウト・コンテナを使用する場合の一般的な手法です。したがって、ウィンドウがサイズ変更されると、グリッド・ペイン内のノードはレイアウト制約に従ってサイズ変更されます。この例では、ウィンドウを拡大または縮小したときに、グリッド・ペインは中央のままです。paddingプロパティによって、ウィンドウを小さくしたときにグリッド・ペインの周りにパディングができます。

このコードでは、シーンの幅と高さは300 x 275に設定されます。シーンの寸法を設定しない場合、シーンはデフォルトで、その内容を表示するために必要な最小サイズになります。

テキスト、ラベルおよびテキスト・フィールドの追加

図4-1を見ると、フォームには、タイトルのWelcomeと、ユーザーから情報を収集するテキストおよびパスワード・フィールドが必要なことがわかります。例4-3に、これらのコントロールを作成するコードを示します。このコードを、グリッドのpaddingプロパティを設定する行の後に追加します。

例4-3 コントロール

Text scenetitle = new Text("Welcome");
scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1);

Label userName = new Label("User Name:");
grid.add(userName, 0, 1);

TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);

Label pw = new Label("Password:");
grid.add(pw, 0, 2);

PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2);

最初の行では、編集できないTextオブジェクトが作成され、テキストがWelcomeに設定されて、scenetitleという名前の変数に割り当てられます。次の行では、setFont()メソッドが使用され、scenetitle変数のフォント・ファミリ、太さおよびサイズが設定されます。スタイルが変数にバインドされるインライン・スタイルの使用は適切ですが、ユーザー・インタフェースの要素をスタイル設定するためのさらによい手法は、スタイルシートを使用することです。次のチュートリアル「JavaFX CSSによる装飾的なフォーム」では、インライン・スタイルをスタイルシートに置き換えます。

grid.add()メソッドによって、scenetitle変数がレイアウトgridに追加されます。グリッド内の列および行の番号付けはゼロから始まり、scenetitleは列0、行0に追加されます。grid.add()メソッドの最後の2つの変数によって、列は2に、行は1にまでわたるように設定されます。

次の行では、テキストがUser NameのLabelオブジェクトが列0、行1に作成され、編集可能なTextFieldオブジェクトが作成されます。テキスト・フィールドは、グリッド・ペインの列1、行1に追加されます。同様に、パスワード・フィールドおよびラベルが作成されてグリッド・ペインに追加されます。

グリッド・ペインで作業するときに、デバッグに有効なグリッド線を表示できます。この場合、パスワード・フィールドを追加する行の後にgrid.setGridLinesVisible(true)を追加できます。そうすると、アプリケーションを実行したときに、図4-2に示すように、グリッドの列および行とgapプロパティに対して線が表示されます。

図4-2 グリッド線が表示されたログイン・フォーム

「図4-2 グリッド線が表示されたログイン・フォーム」の説明

ボタンおよびテキストの追加

アプリケーションに必要な最後の2つのコントロールは、データを送信するためのButtonコントロールと、ユーザーがボタンを押したときにメッセージを表示するためのTextコントロールです。

最初に、ボタンを作成して右下に配置しますが、これはフォーム全体に影響するアクションを実行するボタンの一般的な配置です。例4-4に、コードを示します。このコードをシーンのコードの前に追加します。

例4-4 ボタン

Button btn = new Button("Sign in");
HBox hbBtn = new HBox(10);
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn);
grid.add(hbBtn, 1, 4);

最初の行では、btnという名前のボタンがラベルSign inで作成され、2番目の行では、hbBtnという名前のHBoxレイアウト・ペインが10ピクセルの間隔で作成されます。HBoxペインによって、グリッド・ペイン内の他のコントロールに適用される位置合せとは異なるボタンの位置合せが設定されます。alignmentプロパティの値はPos.BOTTOM_RIGHTであり、これによってノードは縦の領域の一番下、横の領域の右端に配置されます。ボタンはHBoxペインの子として追加され、HBoxペインはグリッドの列1、行4に追加されます。

次に、例4-5に示すように、メッセージを表示するためのTextコントロールを追加します。このコードをシーンのコードの前に追加します。

例4-5 テキスト

final Text actiontarget = new Text();
        grid.add(actiontarget, 1, 6);

図4-3に、現在のフォームを示します。チュートリアルの次の項「イベントを処理するコードの追加」を実行するまで、テキスト・メッセージは表示されません。

図4-3 ボタンのあるログイン・フォーム

「図4-3 ボタンのあるログイン・フォーム」の説明

イベントを処理するコードの追加

最後に、ユーザーがボタンを押したときにテキスト・メッセージが表示されるようにします。例4-6のコードをシーンのコードの前に追加します。

例4-6 ボタン・イベント

btn.setOnAction(new EventHandler<ActionEvent>() {
 
    @Override
    public void handle(ActionEvent e) {
        actiontarget.setFill(Color.FIREBRICK);
        actiontarget.setText("Sign in button pressed");
    }
});

setOnAction()メソッドは、ユーザーがボタンを押したときにactiontargetオブジェクトをSign in button pressedに設定するイベント・ハンドラを登録するために使用されます。actiontargetオブジェクトの色は赤レンガ色に設定されます。

アプリケーションの実行

「プロジェクト」ウィンドウでLoginプロジェクト・ノードを右クリックし、「実行」を選択して、「Sign in」ボタンをクリックします。図4-4に結果を示します。問題が発生した場合は、ダウンロード可能なLogin.zipファイルに含まれているLogin.javaファイルのコードを確認してください。

図4-4 最終的なログイン・フォーム

「図4-4 最終的なログイン・フォーム」の説明

次に実行すること

これで基本的なフォームのチュートリアルは終了ですが、引き続き、JavaFXアプリケーションの開発に関する次のチュートリアルを読むことができます。

「JavaFX CSSによる装飾的なフォーム」には、ログイン・フォームで背景イメージを追加し、テキスト、ラベルおよびボタンのスタイルを根本的に変更する方法に関するヒントがあります。
「FXMLを使用したユーザー・インタフェースの作成」では、ログイン・ユーザー・インタフェースを作成する別の方法が示されます。FXMLは、コードのアプリケーション・ロジックから切り離してユーザー・インタフェースをビルドするための構造を提供するXMLベースの言語です。
JavaFXでのレイアウトの操作では、組み込まれているJavaFXレイアウト・ペインと、それらを使用するためのヒントとテクニックが説明されています。

また、JavaFXのサンプルを試してみてください(http://www.oracle.com/technetwork/java/javase/downloads/の「Java SE Downloads」ページのJDKの「Demos and Samples」セクションからダウンロードできます)。Ensembleサンプルには、レイアウトの例とそのソース・コードが含まれています。