DOC-03-08 文本框(Text Field)

本章讨论Text Field组件的功能。

TextField类实现了一个接收和显示文本输入的UI组件。它提供了从用户接收文本输入的功能。这个类和另一个文本输入组件PasswordField一样，都继承自TextInput类。TextInput类是JavaFX

API中所有文本组件的超类。

图8-1显示了一个典型的Label加Text Field界面

图8-1 Label和Text Field

创建一个Text Field

例8-1中，Text Field通过和一个Label组合来指示在文本框中应该输入的内容类型。

例8-1创建一个Text Field

Java

Label label1 = new Label("Name:");

TextField textField = new TextField ();

HBox hb = new HBox();

hb.getChildren().addAll(label1, textField);

hb.setSpacing(10);

1

2

3

4

5

Labellabel1=newLabel("Name:");

TextFieldtextField=newTextField();

HBoxhb=newHBox();

hb.getChildren().addAll(label1,textField);

hb.setSpacing(10);

你可以如例8-1中所示的创建一个空的Text Field，或者创建一个带有指定文本数据的Text Field。要创建带有预定义文本的Text Field，使用TextField类如下的构造函数：TextField(“Hello

World!”)。你可以在任何时候通过 getText方法获取Text Field的值。

你可以使用TextInput类的setPrefColumnCount方法来设置Text Field的大小，这个大小是指同一时间可以显示的最大字符个数。

使用Text Field构建界面

一般TextField对象被用在表单中来创建多个Text Field。图8-2所示的应用程序显示了3个Text

Field，并处理用户在其中输入的数据。

图8-2 TextField样例应用程序

代码片段例8-2创建了那三个Text Field和两个Button，然后使用GridPane容器将他们添加到了应用程序的Scene中。这个容器在你要为UI组件实现一个灵活的布局时非常方便。

例8-2添加Text Field到Application

Java

//创建GridPane容器

GridPane grid = new GridPane();

grid.setPadding(new Insets(10, 10, 10, 10));

grid.setVgap(5);

grid.setHgap(5);

//定义Name Text Field

final TextField name = new TextField();

name.setPromptText("Enter your first name.");

GridPane.setConstraints(name, 0, 0);

grid.getChildren().add(name);

//定义Last Name Text Field

final TextField lastName = new TextField();

lastName.setPromptText("Enter your last name.");

GridPane.setConstraints(lastName, 0, 1);

grid.getChildren().add(lastName);

//定义Comment Text Field

final TextField comment = new TextField();

comment.setPromptText("Enter your comment.");

GridPane.setConstraints(comment, 0, 2);

grid.getChildren().add(comment);

//定义Submit Button

Button submit = new Button("Submit");

GridPane.setConstraints(submit, 1, 0);

grid.getChildren().add(submit);

//定义Clear Button

Button clear = new Button("Clear");

GridPane.setConstraints(clear, 1, 1);

grid.getChildren().add(clear);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

//创建GridPane容器

GridPanegrid=newGridPane();

grid.setPadding(newInsets(10,10,10,10));

grid.setVgap(5);

grid.setHgap(5);

//定义Name Text Field

finalTextFieldname=newTextField();

name.setPromptText("Enter your first name.");

GridPane.setConstraints(name,0,0);

grid.getChildren().add(name);

//定义Last Name Text Field

finalTextFieldlastName=newTextField();

lastName.setPromptText("Enter your last name.");

GridPane.setConstraints(lastName,0,1);

grid.getChildren().add(lastName);

//定义Comment Text Field

finalTextFieldcomment=newTextField();

comment.setPromptText("Enter your comment.");

GridPane.setConstraints(comment,0,2);

grid.getChildren().add(comment);

//定义Submit Button

Buttοnsubmit=newButton("Submit");

GridPane.setConstraints(submit,1,0);

grid.getChildren().add(submit);

//定义Clear Button

Buttonclear=newButton("Clear");

GridPane.setConstraints(clear,1,1);

grid.getChildren().add(clear);

现在花点时间来学习一下这段代码。name，lastName和commentText Field都是通过TextField 类的空构造方法创建的。不像例8-1，这段代码中没有伴随Text Field使用Label。替代方案是，提示说明可以提醒用户在Text Field中输入何种类型的数据。方法setPromptText定义了在应用程序启动时Text Field显示的字符串。把例8-2添加到应用程序后，其运行结果如图8-3所示。

图8-3三个带有提示信息的Text Field

提示文本和输入在Text Field中的文本的区别是提示文本无法通过getText方法取得。

在真实的应用程序中，输入到Text Field中的数据会根据应用程序特定业务需求的逻辑进行处理。下一节解释如何使用Text Field评估输入的数据并给用户产生一个反馈。

处理Text Field数据

如前面所说，用户输入在Text Field中的文本数据可以通过TextInput类的getText方法取出。

学习例8-3中如何处理TextField对象的数据。

例8-3为Submit和Clear按钮定义操作

Java

//添加一个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);

});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

//添加一个Label

finalLabellabel=newLabel();

GridPane.setConstraints(label,0,3);

GridPane.setColumnSpan(label,2);

grid.getChildren().add(label);

submit.setOnAction((ActionEvente)->{

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((ActionEvente)->{

name.clear();

lastName.clear();

comment.clear();

label.setText(null);

});

被添加到GridPane容器中的Label组件显示了应用程序对用户的反馈信息。当用户点击Submit按钮，setOnAction方法检查commentText Field。如果其包含了非空字符串，一个thank-you信息将会被显示。否则，应用程序会提示用户comment信息还没有填写，如图8-4所示。

图8-4未填写Comment Text Field

当用户点击Clear按钮，三个Text Field中的内容都会被清除。

看以下几个能用于Text Field的有用方法：

·copy()–将当前选中范围内的文本复制到剪切板，并保留选中的内容

·cut()–将当前选中范围内的文本复制到剪切板，并移除选中的内容

·selectAll()–选中Text Field中所有输入的文本

·paste()–将剪切板中的内容粘贴到这个Text Field中，并替换当前选中的内容

相关的API文档

·TextField

·TextInputControl

打赏一下

支付宝

微信