JavaFXを使ったGUIアプリ(2) カウンタアプリを作成する
目次
- JavaFXを使ったGUIアプリ(1) 開発環境を構築する
- JavaFXを使ったGUIアプリ(2) カウンタアプリを作成する（本記事）
- JavaFXを使ったGUIアプリ(3) 加減乗除アプリを作成する
- JavaFXを使ったGUIアプリ(4) 電卓アプリを作成する
- JavaFXを使ったGUIアプリ(5) 電卓アプリのスタイルを設定する
はじめに
この記事では、前回の記事で構築したJavaFX(OpenJFX)の開発環境を用いた簡単なカウンタアプリケーションの作成を通じて、JavaFXアプリケーションの基本的な構造と部品の使用方法を説明します。なお、読者はJavaのプログラミングに関する基本知識があることを前提とします。
今回作成するカウンタアプリケーションは、以下のような画面を表示するプログラムです。
ユーザが画面下部の「+1」ボタンをクリックするたびに、画面中央部のテキストフィールドに表示されている数値が１ずつ加算されていきます。
JavaFXアプリケーションの基本構造
すべてのJavaFXアプリケーションは、Applicationクラス(javafx.application.Application) のサブクラスとして実装します。アプリケーションのソースコードは以下のような構造になります。
import javafx.application.Application;
import javafx.stage.Stage;
public class UserApp extends Application {
@Override
public void start(Stage primaryStage) {
// アプリの中身を記述する
primaryStage.show(); // 画面を表示する
}
public static void main(String[] args) {
Application.launch(args); // アプリを起動する
}
}
上記のソースコードにおいて、アプリケーションの中身は抽象メソッドのstartをオーバライドすることにより記述します。mainメソッドからApplication.launchメソッドを呼び出すと、アプリケーションのインスタンスが生成され、続いてinitメソッドでメインのウインドウ（プライマリステージ）が生成され、さらにそのウインドウを引数としてstartメソッドに制御が渡されます。つまり、以下の流れでアプリケーションが起動されることになります。
このうち、利用者が実装するメソッドは、mainとstartです。通常、mainメソッドはlaunchメソッドを呼び出すだけで、他にすることは特にありません。なお、launchメソッドはアプリケーションのすべての処理が完了するまで待機します。
JavaFXアプリケーションのGUI
JavaFXアプリケーションのGUIは、単純なアプリケーションの場合に以下の５種類のJavaFXクラスで構成されます。
| クラスの分類 | 実際のクラス名 | 説明 |
|---|---|---|
| ステージ | Stage | 画面表示されるウインドウになる最上位のJavaFXコンテナ |
| シーン | Scene | ステージに表示するすべての内容を木構造で保持するコンテナ |
| ペイン | HBox, VBoxなど | 表示するノードのレイアウトを管理するコンテナ |
| コントロール | Label, Buttonなど | ユーザが画面上で操作できるノード |
| イベント | ActionEventなど | 主にユーザの操作によって発生するイベント |
各クラスの基本事項は以下の通りです。
- ステージはウインドウに対応するクラスで、１つのアプリケーションで複数のステージを開くことができます。なお、アプリケーション起動時にプライマリステージが生成されるので、１つのウインドウだけで処理が完結する場合は新たなステージを生成する必要はありません。
- シーンは、ステージに表示する内容をシーングラフと呼ばれる木構造で保持します。１つのステージに表示できるシーンは１つだけですが、別のシーンに切り替えることが可能です。
- ペインはレイアウトペインとも呼ばれ、表示するノードのレイアウトを制御します。なお、ノードはシーングラフの構成要素となるもので、ペインとコントロールはノードの下位クラスです。１つのシーンで複数のペインを使用できますが、木構造のルートとなるペインは１つだけです。
- コントロールは、エンドユーザが画面上で認識して、マウスやキーボードで操作できる部品の総称です。ラベル、ボタン、テキストフィールド、ポップアップリスト、メニューなど、非常に多くの部品があります。１つのペインに複数のコントロールを配置できます。
- エンドユーザがマウスでボタンをクリックしたり、キーボードから文字を入力したりするとイベントが発生します。ボタンやテキストフィールドにイベントハンドラと呼ばれるメソッドを定義しておくことにより、ユーザは発生したイベントを自由に処理できます。
ステージ、シーン、ペイン、コントロールの関係を図示すると以下のようになります。ソースコードを書く際は、コントロールからボトムアップで作成していき、最後にステージを完成させて表示するという流れが一般的です。
使用するJavaFXクラスの概要
今回作成するカウンタアプリケーションを理解するのに必要最低限な事項に限定して、JavaFXクラスのAPIを説明します。なお、APIの全体と詳細については以下の公式ドキュメントに記載されています。
- 英語（JavaFX 17対応）
https://openjfx.io/javadoc/17/ - 日本語（JavaFX 8対応）
https://docs.oracle.com/javase/jp/8/javafx/api/
Labelクラス(javafx.scene.control.Label)
ラベル(Label)は、エンドユーザが編集不可のテキスト表示します。
- コンストラクタ
- Label() --- 空のラベルを作成する
- Label(String text) --- 指定したテキストのラベルを作成する
- インスタンスメソッド
- void setText(String text) --- 指定したテキストをラベルに設定する
TextFieldクラス(javafx.scene.control.TextField)
テキストフィールド(TextField)は、エンドユーザが編集可能な１行の書式なしテキスト入力領域です。
- コンストラクタ
- TextField() --- 空のテキストフィールドを作成する
- TextField(String text) --- 指定した初期テキストのテキストフィールドを作成する
- インスタンスメソッド
- String getText() --- テキストフィールドに入力されたテキストを取得する
- void setText(String text) --- 指定したテキストでテキストフィールドを上書きする
- void setPrefColumnCount(int value) --- テキストフィールドの優先列数（領域の表示幅を決めるための基準値）を設定する
Buttonクラス(javafx.scene.control.Button)
ボタン(Button)は、エンドユーザがクリックするとアクションイベントが発生するコントロールです。
- コンストラクタ
- Button() --- 空の文字列が表示されるボタンを作成する
- Button(String text) --- 指定したテキストが表示されるボタンを作成する
- インスタンスメソッド
- void setText(String text) --- 指定したテキストをボタンに表示する
- void setOnAction(EventHandler<ActionEvent> value) --- ボタンがクリックされた際に実行するアクションを設定する（EventHandlerとActionEventについては別途説明）
VBoxクラス(javafx.scene.layout.VBox)
VBoxは、要素を縦方向の１列にレイアウトするペインです。
- コンストラクタ
- VBox() --- 空のVBoxレイアウトを作成する
- VBox(Node... children) --- 指定した１つ以上の要素を含むVBoxレイアウトを作成する
- インスタンスメソッド
- ObservableList<Node> getChildren() --- レイアウト内の要素のリストを取得する（ObservableListについては別途説明）
Sceneクラス(javafx.scene.Scene)
シーン(Scene)は、ステージに表示する内容をシーングラフと呼ばれる木構造で保持します。
- コンストラクタ
- Scene(Parent root) --- 指定したノードをルートとするシーングラフを作成する
- メソッド
- void setRoot(Parent root) --- シーングラフのルートを指定したノードに変更する
Stageクラス(javafx.stage.Stage)
ステージ(Stage)は、画面を表示するウインドウになります。
- コンストラクタ
- Stage() --- 新しいウインドウを作成する
- メソッド
- void setScene(Scene value) --- ウインドウに表示するシーンを設定する
- void setTitle(String text) --- 指定したテキストをウインドウのタイトルに設定する
- void show() --- ウインドウを表示する
- void close() または void hide() --- ウインドウを閉じる
カウンタアプリケーション
カウンタアプリケーションは以下の単純なシーングラフで構成されています。
ソースコードを以下に示します。ボトムアップに部品を積み上げていくだけなので、特別な説明は不要だと思います。なお、カウンタ値はテキストフィールドに表示されている値を使用するので、テキストフィールドの値を直接書き換えることにより、カウンタの初期値を変更できます。
// Counter Application
package pkg1;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class CounterApp extends Application {
@Override
public void start(Stage primaryStage) {
// ラベルを作成する
Label label = new Label("CounterApp");
// テキストフィールドを作成する
TextField textField = new TextField("0");
// テキストフィールドの優先桁数を20に設定する
textField.setPrefColumnCount(20);
// ボタンを作成する
Button button = new Button("+1");
// ボタンのアクションを登録する
button.setOnAction((ActionEvent event) -> {
// テキストフィールドの内容を取得して、数値に変換する
int value = Integer.parseInt(textField.getText());
// 数値を更新して、テキストフィールドに書き込む
textField.setText(Integer.toString(++value));
});
// VBoxペインを作成し、作成した部品を配置する
VBox vbox = new VBox(label, textField, button);
// シーンを作成し、ペインに入れる
Scene scene = new Scene(vbox);
// ステージにVBoxペインを入れる
primaryStage.setScene(scene);
// ステージのタイトルバーを設定する
primaryStage.setTitle("CounterApp");
// ステージを表示する
primaryStage.show();
}
public static void main(String[] args) {
// アプリケーションを起動する
Application.launch(args);
}
}
おわりに
この記事では、JavaFXアプリケーションの基本的な構造と部品の使用方法を説明しました。GUIアプリケーションを比較的容易に作成できることがお分かりいただけたと思います。次の記事では、カウンタアプリをもとにした四則計算アプリの作成を通して、今回説明できなかったイベントとレイアウトについて述べます。
Discussion