(翻譯)第十四回 JavaFX2.0 文本框TextField

原文位址http://download.oracle.com/javafx/2.0/ui_controls/text-field.htm

TextField類實作了一種可以接受和顯示文本輸入的UI控件，它提供了接受使用者輸入的功能。和另一個文本輸入控件

PasswordField一起都繼承了

TextInput這個類，

TextInput是所有文本控件的父類。 Figure 8-1  是一個帶有标簽的典型文本框。 Figure 8-1 Label and Text Field Description of "Figure 8-1 Label and Text Field"

建立Text Field

在 

Example 8-1

中，一個文本框和一個标簽被用來顯示輸入的内容類型。

Example 8-1 Creating a Text Field

Label label1 = new Label("Name:");
TextField textField = new TextField ();
HBox hb = new HBox();
hb.getChildren().addAll(label1, textField);
hb.setSpacing(10);
      

你可以像 

中那樣建立空文本框或者是建立帶有特定文本資料文本框。要建立帶有預定義文本的文本框，使用下面這個TextField類的構造方法：

TextField("Hello World!")。任何時候你都可以通過

getText

 方法獲得一個文本框的值。

可以使用

TextInput

 類的

setPrefColumnCount方法設定文本框的大小，定義文本框一次顯示的最多字元數。

用Text Field建構UI

一般地， 

TextField對象被用來建立幾個文本框。

Figure 8-2

中的應用顯示了三個文本框并且處理使用者在它們當中輸入的資料。

Figure 8-2 TextFieldSample Application

Description of "Figure 8-2 TextFieldSample Application" Example 8-2

 中的代碼塊建立了三個文本框和兩個按鈕，并把使用

GridPane

 容器他們加入到應用的螢幕上。當你要為你的UI控件實作靈活的布局時這個容器相當友善。

Example 8-2 Adding Text Fields to the Application

//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.");
name.setPrefColumnCount(10);
name.getText();
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.setPrefColumnCount(15);
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);
      

花點時間來研究下這塊代碼。 

name

, 

lastName

, 和

comment文本框使用了

TextField

 類的空構造方法來建立。和 

不同，這裡文本框沒有使用标簽，而是使用提示語提醒使用者在文本框中要輸入什麼類型的資料。

setPromptText方法定義了當應用啟動後顯示在文本框中的字元串。把

 中的代碼加入到應用中，運作效果如 

Figure 8-3

.

Figure 8-3 Three Text Fields with the Prompt Messages

Description of "Figure 8-3 Three Text Fields with the Prompt Messages"

文本框中的提示語和文本的差別是提示語不能通過

getText方法獲得。

實際應用中，文本框中輸入的文本是根據特定的業務任務決定的應用邏輯來處理的。 下一部分解釋了如何使用文本框處理使用者輸入并向使用者回報。

處理Text Field資料

 前面提到，使用者輸入文本框的内容能通過

TextInput

getText方法獲得。

研究

Example 8-3

 中的代碼學習怎麼處理

TextField對象的資料。

Example 8-3 Defining Actions for the Submit and Clear Buttons

//Adding a Label
final Label label = new Label();
GridPane.setConstraints(label, 0, 3);
GridPane.setColumnSpan(label, 2);
grid.getChildren().add(label);

//Setting an action for the Submit button
submit.setOnAction(new EventHandler<ActionEvent>() {

@Override
    public void handle(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.");
        }
     }
 });
 
//Setting an action for the Clear button
clear.setOnAction(new EventHandler<ActionEvent>() {

@Override
    public void handle(ActionEvent e) {
        name.setText("");
        lastName.setText("");
        comment.setText("");
        label.setText(null);
    }
});       

GridPane容器中的

Label控件用來顯示應用對使用者的回應。當使用者點選

Submit按鈕時，

setOnAction方法檢查

comment文本框。如果它是非空字元串，一條感謝資訊就顯示出來。否則，應用會提醒使用者還沒有添加評論。

見 

Figure 8-4

Figure 8-4 The Comment Text Field Left Blank

Description of "Figure 8-4 The Comment Text Field Left Blank"

當使用者點選Clear按鈕時，三個文本框的内容都将被清除。

.回顧一下你可能用到的文本框使用函數。

• copy()

  – 将目前選擇的文本範圍轉移到剪貼闆，保留選擇文本。

• cut()

  – 将目前選擇的文本範圍轉移到剪貼闆，删除選擇文本。

• paste()

  – 将剪貼闆内容轉移到文本中，取代目前選擇文本。