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ドキュメント