8 テキスト・フィールド
この章は、テキスト・フィールド・コントロールの機能について説明します。
TextFieldクラスはテキスト入力を受け入れ、表示するUIコントロールを実装します。これはユーザーからのテキスト入力を受け入れる機能を提供します。このクラスは別のテキスト入力コントロール、PasswordFieldとともに、JavaFX APIで使用可能なすべてのテキスト・コントロールのスーパー・クラスであるTextInputクラスを拡張します。
図8-1に、ラベルのある一般的なテキスト・フィールドを示します。
テキスト・フィールドの作成
例8-1に、ラベルと組み合せ、フィールドに入力するコンテンツのタイプを表すテキスト・フィールドを示します。
例8-1 テキスト・フィールドの作成
Label label1 = new Label("Name:");
TextField textField = new TextField ();
HBox hb = new HBox();
hb.getChildren().addAll(label1, textField);
hb.setSpacing(10);
例8-1に示すように、空のテキストフィールドを作成するか、特定のテキスト・データのあるテキスト・フィールドを作成できます。事前定義されたテキストのあるテキスト・フィールドを作成するには、TextFieldクラスのコンストラクタ、TextField("Hello World!")を使用します。テキスト・フィールドの値は、getTextメソッドをコールするたびに取得できます。
TextInputクラスのsetPrefColumnCountメソッドを適用すると、一度に表示できる文字の最大数として定義したサイズにテキスト・フィールドを設定できます。
テキスト・フィールドのあるUIのビルド
通常、TextFieldオブジェクトは、複数のテキスト・フィールドを作成するフォームで使用されます。図8-2に示すアプリケーションでは、3つのテキスト・フィールドを表示し、そこにユーザーが入力したデータを処理します。
例8-2のコード・フラグメントでは、3つのテキスト・フィールドと2つのボタンを作成し、GridPaneコンテナを使用してそれをアプリケーションのシーンに追加します。このコンテナは、UIコントロールを柔軟にレイアウトする必要がある場合に特に役立ちます。
例8-2 アプリケーションへのテキスト・フィールドの追加
//Creating a GridPane container
GridPane grid = new GridPane();
grid.setPadding(new Insets(10, 10, 10, 10));
grid.setVgap(5);
grid.setHgap(5);
//Defining the Name text field
final TextField name = new TextField();
name.setPromptText("Enter your first name.");
GridPane.setConstraints(name, 0, 0);
grid.getChildren().add(name);
//Defining the Last Name text field
final TextField lastName = new TextField();
lastName.setPromptText("Enter your last name.");
GridPane.setConstraints(lastName, 0, 1);
grid.getChildren().add(lastName);
//Defining the Comment text field
final TextField comment = new TextField();
comment.setPromptText("Enter your comment.");
GridPane.setConstraints(comment, 0, 2);
grid.getChildren().add(comment);
//Defining the Submit button
Button submit = new Button("Submit");
GridPane.setConstraints(submit, 1, 0);
grid.getChildren().add(submit);
//Defining the Clear button
Button clear = new Button("Clear");
GridPane.setConstraints(clear, 1, 1);
grid.getChildren().add(clear);
コード・フラグメントを確認してください。TextFieldクラスの空のコンストラクタを使用して、name、lastName、およびcommentのテキスト・フィールドが作成されます。例8-1とは異なり、このコード・フラグメントのテキスト・フィールドにはラベルがありません。かわりに、テキスト・フィールドに入力するデータのタイプをユーザーに示すキャプションが表示されます。setPromptTextメソッドは、アプリケーションを開始したときにテキスト・フィールドに表示される文字列を定義します。例8-2がアプリケーションに追加されると、図8-3に示す出力が得られます。
プロンプト・テキストがテキスト・フィールドに入力したテキストと異なる点は、プロンプト・テキストは、getTextメソッドでは得られないということです。
実際のアプリケーションでは、テキスト・フィールドに入力されたデータは、特定のビジネス・タスクで必要なアプリケーション・ロジックに応じて処理されます。次の項では、入力されたデータの評価、およびユーザーへの応答の生成のためにテキスト・フィールドを使用する方法について説明します。
テキスト・フィールド・データの処理
前述のとおり、ユーザーがテキスト・フィールドに入力したテキスト・データはTextInputクラスのgetTextメソッドによって取得できます。
例8-3を参照し、TextFieldオブジェクトのデータをどのように処理するかを学習します。
例8-3 「Submit」ボタンと「Clear」ボタンのアクションの定義
//Adding a Label
final Label label = new Label();
GridPane.setConstraints(label, 0, 3);
GridPane.setColumnSpan(label, 2);
grid.getChildren().add(label);
submit.setOnAction((ActionEvent e) -> {
if (
(comment.getText() != null && !comment.getText().isEmpty())
) {
label.setText(name.getText() + " " +
lastName.getText() + ", "
+ "thank you for your comment!");
} else {
label.setText("You have not left a comment.");
}
});
clear.setOnAction((ActionEvent e) -> {
name.clear();
lastName.clear();
comment.clear();
label.setText(null);
});
GridPaneコンテナに追加されたLabelコントロールにより、ユーザーに対するアプリケーションの応答が表示されます。ユーザーが「Submit」ボタンをクリックすると、setOnActionメソッドがcommentテキスト・フィールドをチェックします。なんらかの文字列が含まれている場合、メッセージが表示されます。そうでない場合、アプリケーションは図8-4に示すように、コメント・メッセージが送信されていないことをユーザーに通知します。
ユーザーが「Clear」ボタンをクリックすると、3つのテキスト・フィールドの内容がすべて消去されます。
テキスト・フィールドで使用可能な、いくつかの有益なメソッドについて確認します。
-
copy()- テキスト内で現在選択されている範囲をクリップボードに転送して、選択はそのまま残します。 -
cut()- テキスト内で現在選択されている範囲をクリップボードに転送して、現在の選択を解除します。 -
selectAll()- テキスト入力のすべてのテキストを選択します。 -
paste()- クリップボードのコンテンツをこのテキストに転送し、現在の選択と置き換えます。
関連APIドキュメント
