创建表单是开发应用程序时的常见活动。本教程将向您介绍屏幕布局的基础知识，如何向布局窗格添加控件以及如何创建输入事件。

在本教程中，您将使用JavaFX构建如图2-1所示的登录表单。

图2-1登录表单

javaFx for javafx form_java


“图2-1登录表”说明  

本入门教程中使用的工具是NetBeans IDE。开始之前，请确保您正在使用的NetBeans IDE版本支持JavaFX 2.有关详细信息，请参阅系统要求。 

创建项目

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

  1. 从文件菜单中，选择新建项目。
  2. 在JavaFX应用程序类别中，选择JavaFX Application。单击下一步。
  3. 命名项目登录并单击完成。
    当您创建JavaFX项目时，NetBeans IDE提供了一个Hello World应用程序作为起点，如果遵循Hello World教程，您已经看到。
  4. 删除start()NetBeans IDE生成的方法，并将其替换为示例2-1中的代码。
Example 2-1 Application Stage
@Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("JavaFX Welcome");
        
        primaryStage.show();
    }

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

创建一个GridPane布局

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

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

Example 2-2 GridPane with Gap and Padding Properties

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);

示例2-2创建一个GridPane对象并将其分配给名为的变量grid。对齐属性将网格的默认位置从场景的左上角更改为中心。间隙属性管理行和列之间的间距，而填充属性管理网格窗格边缘周围的空间。插图是顶部，右侧，底部和左侧的顺序。在这个例子中，25每侧都有一个填充像素。

场景是使用网格窗格作为根节点创建的，这是使用布局容器时的常见做法。因此，当窗口被调整大小时，根据它们的布局约束来调整网格窗格内的节点的大小。在此示例中，当您增长或缩小窗口时，网格窗格将保留在中心。填充属性确保当窗口更小时，网格窗格周围有一个填充。

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

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

综观图2-1，你可以看到，表格要求的标题是“欢迎“和文本和密码收集来自用户的信息字段。创建这些控件的代码在示例2-3中。在设置网格填充属性的行之后添加此代码。

第一行创建一个Text无法编辑的对象，将文本设置为Welcome，并将其分配给一个名为的变量scenetitle。下一行使用该setFont()方法设置scenetitle变量的字体系列，权重和大小。使用内联样式适合于将样式绑定到变量，但用于对用户界面的元素进行样式化的更好技术是使用样式表。在下一个教程中，使用JavaFX CSS的Fancy Forms，您将使用样式表替换内联样式。

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

下一行创建一个Label对象，其中文本User Name位于列0，行1和Text Field可编辑的对象。文本字段将添加到第1列第1行的网格窗格中。创建密码字段和标签，并以类似的方式将其添加到网格窗格中。

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

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

  1. “图2-2带网格线的登录表”

添加按钮和文本

应用程序所需的最后两个控件是Button用于提交数据的Text控件和用户按下按钮时显示消息的控件。

首先，创建按钮并将其放置在右下方，这是执行影响整个表单的操作的按钮的常见放置。代码在例2-4中。在该场景的代码之前添加此代码。

Example 2-4 Button

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

第一行创建一个btn以标签命名的按钮Sign in,，第二行创建一个以像素间距HBox命名的布局窗格。该窗格设置按钮即从在网格窗格施加到另一个控制的取向不同的取向。该属性具有一个值，它将一个节点垂直放置在空间的底部，并在水平的右边缘。该按钮作为窗格的子项添加，窗格将添加到第1列第4行的网格中。hbBtn10HBoxalignmentPos.BOTTOM_RIGHTHBoxHBox

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

 示例2-5文本

Example 2-5 Text

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

图2-3显示了现在的形式。在您完成本教程的下一部分“ 添加代码处理事件”之前，您将看不到短信。

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

javaFx for javafx form_表单_02


“图2-3登录表单按钮”说明  

添加代码来处理事件

最后，当用户按下该按钮时，使按钮显示文本消息。将示例2-6中的代码添加到场景的代码之前。

示例2-6按钮事件

Example 2-6 Button Event

btn.setOnAction(new EventHandler<ActionEvent>() {
 
    @Override
    public void handle(ActionEvent e) {
        actiontarget.setFill(Color.FIREBRICK);
        actiontarget.setText("Sign in button pressed");
    }
});

该setOnAction()方法用于注册在用户按下按钮时将actiontarget对象设置为的事件处理程序Sign in button pressed。actiontarget对象的颜色设置为耐火砖红色。

运行应用程序

右键单击“ 项目”窗口中的“ 登录”项目节点，选择“运行”，然后单击“登录”按钮。结果如图2-4所示。如果遇到问题，请查看Login.java文件中的代码。

 图2-4最终登录表单

javaFx for javafx form_控件_03


“图2-4最终登录表”