4 在JavaFX中创建表单

创建项目

您的第一个任务是在NetBeans IDE中创建一个JavaFX项目，并将其命名为Login：

1. 从文件菜单中选择新建项目。

2. 在JavaFX应用程序类别中，选择JavaFX应用程序。点击下一步。

3. 将项目命名为Login，然后点击完成。

   创建JavaFX项目时，NetBeans IDE会提供一个Hello World应用程序作为起点，如果您按照Hello World教程，您已经看到过了。

4. 删除NetBeans IDE生成的start()方法，并用示例4-1中的代码替换它。

   示例4-1 应用程序舞台

   @Override
       public void start(Stage primaryStage) {
           primaryStage.setTitle("JavaFX Welcome");
           
           primaryStage.show();
       }
   

提示：在将示例代码添加到NetBeans项目中后，按下Ctrl（或Cmd）+ Shift + I导入所需的包。当有多个导入语句可选时，请选择以javafx开头的那个。

创建GridPane布局

在开发应用程序时，创建表单是一项常见的活动。本教程将教你屏幕布局的基础知识，如何向布局面板中添加控件，以及如何创建输入事件。

对于登录表单，使用GridPane布局，因为它可以创建一个灵活的行列网格来布局控件。你可以将控件放置在网格的任何单元格中，并根据需要使控件跨越多个单元格。

创建GridPane布局的代码在示例4-2中。将代码添加到primaryStage.show();之前。

GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));

Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);

示例4-2创建了一个GridPane对象，并将其赋值给名为grid的变量。alignment属性将网格的默认位置从场景的左上角更改为中心。gap属性管理行和列之间的间距，而padding属性管理网格面板边缘的空间。insets的顺序是上、右、下、左。在这个示例中，每边有25像素的填充。

场景是以网格面板作为根节点创建的，这是使用布局容器时的常见做法。因此，当窗口调整大小时，网格面板中的节点会根据其布局约束进行调整大小。在这个示例中，当你放大或缩小窗口时，网格面板仍然保持在中心位置。填充属性确保在缩小窗口时，网格面板周围有填充。

这段代码将场景的宽度和高度设置为300x275。如果不设置场景的尺寸，场景将默认为显示其内容所需的最小尺寸。

添加文本、标签和文本字段

从图4-1中可以看到，表单需要标题“欢迎”以及用于收集用户信息的文本和密码字段。创建这些控件的代码在示例4-3中。将此代码添加到设置网格填充属性的行之后。

Text scenetitle = new Text("欢迎");
scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1);

Label userName = new Label("用户名:");
grid.add(userName, 0, 1);

TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);

Label pw = new Label("密码:");
grid.add(pw, 0, 2);

PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2);

第一行创建了一个不可编辑的Text对象，将文本设置为“欢迎”，并将其赋值给名为scenetitle的变量。下一行使用setFont()方法设置scenetitle变量的字体系列、粗细和大小。在绑定到变量的情况下，使用内联样式是合适的，但更好的技术是使用样式表来为用户界面的元素设置样式。在下一个教程JavaFX CSS高级表单中，您将用样式表替换内联样式。

grid.add()方法将scenetitle变量添加到布局grid中。网格中的列和行编号从零开始，scenetitle添加在列0，行0。grid.add()方法的最后两个参数将列跨度设置为2，行跨度设置为1。

接下来的几行创建了一个带有文本“用户名”的Label对象，位于列0，行1，以及一个可编辑的Text Field对象。文本字段添加到网格面板的列1，行1。类似地，创建了一个密码字段和标签，并以类似的方式添加到网格面板中。

在使用网格面板时，您可以显示网格线，这对于调试很有用。在添加密码字段的行之后，可以添加grid.setGridLinesVisible(true)。然后，当您运行应用程序时，您将看到网格列和行以及间隙属性的线条，如图4-2所示。

图4-2 带有网格线的登录表单

"图4-2带有网格线的登录表单"的描述

添加按钮和文本

在开发应用程序时，创建表单是一项常见的活动。本教程将教你屏幕布局的基础知识，如何向布局面板添加控件，以及如何创建输入事件。

首先，创建一个按钮控件用于提交数据，并创建一个文本控件用于在用户按下按钮时显示消息。代码在示例4-4中。在场景的代码之前添加此代码。

Button btn = new Button("登录");
HBox hbBtn = new HBox(10);
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn);
grid.add(hbBtn, 1, 4);

第一行创建了一个名为btn的按钮，标签为登录，第二行创建了一个名为hbBtn的HBox布局面板，间距为10像素。HBox面板设置了与网格面板中其他控件不同的按钮对齐方式。alignment属性的值为Pos.BOTTOM_RIGHT，将节点垂直放置在底部，并水平放置在右侧。按钮作为HBox面板的子节点添加，HBox面板添加到网格的第1列，第4行。

现在，添加一个Text控件用于显示消息，如示例4-5所示。在场景的代码之前添加此代码。

final Text actiontarget = new Text();
        grid.add(actiontarget, 1, 6);

图4-3显示了现在的表单。在完成教程的下一部分添加处理事件的代码之前，您将看不到文本消息。

图4-3 带有按钮的登录表单

"图4-3 带有按钮的登录表单"的描述