JavaFX- 1.2 JavaFX起步:简单示例应用（二）创建表单

使用JavaFX创建表单

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

在本教程中我们将创建一个如下图所示的登陆窗口
登陆窗口

创建工程

本系列教程均采用一个工程项目，每个项目以包的形式区分，并在Main方法中分别调用，因此不新建工程 ，工程创建移步上一篇教程。

1. 在上一篇教程中的src目录下创建包，命名JavaFX_LoginForm
2. 重命名sample包JavaFX_HelloWorld并删除Controller.java
   和sample.fxm
3. 重命名JavaFX_HelloWorld 中的Main.java 为 HelloWorld.java,并移除 public static void main(String[] args)方法
4. 在src文件夹下新建Main.java 并加入如下代码
   public static void main(String[] args) { launch(HelloWorld.class); }
5. 在包JavaFX_LoginForm中新建LoginForm类并继承Application，实现start方法 ，代码如下：

public class LoginForm extends Application {
   @Override
   public void start(Stage primaryStage) throws Exception {
      primaryStage.setTitle("JavaFX Welcome");
      //本教程代码在这里插入
      primaryStage.show();
    }
}

6. 自动导入需要的包，最后工程如下图所示
   每次教程在Main.java 的Main方法中加入对应的启动函数，并注释其他无用的启动函数比如
   // launch(HelloWorld.class); launch(LoginForm.class);

创建GridPane 布局

在登陆窗口中使用GridPane 布局可以灵活的将我们的控件布置于表格中的任意一个单元，并且可以根据需要设置每个单元格的跨度。
在 primaryStage.show();之前天下如下代码：
GridPane 的Gap 和Padding 属性

        GridPane gridPane = new GridPane();
        gridPane.setAlignment(Pos.CENTER);
        gridPane.setHgap(10);
        gridPane.setVgap(10);
        gridPane.setPadding(new Insets(25,25,25,25));
        Scene scene = new Scene(gridPane,300,275);
        primaryStage.setScene(scene);

上述代码首先创建一个名为gridPane 的GridPane 对象，并且设置其对齐方式为Pos.CENTER，该属性可以使gridPane处于父容器的中心位置。gap属性管理表格中单元格之间的间距，setPadding设置了gridPane 边缘的间距。Insets按顶部，右侧，底部和左侧的顺序排列。 在此示例中，每边有25个填充像素。

使用网格窗格作为根节点创建场景，这是使用布局容器时的常见做法。 因此，随着窗口大小的调整，网格窗格中的节点将根据其布局约束进行调整。 在此示例中，当您增大或缩小窗口时，网格窗格将保留在*。 填充属性可确保在缩小窗口时，网格窗格周围存在填充。

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

添加文本、标签、和文本域

如登陆窗口所示，我们需要一个显示“welcome”标题的文本和账号密码的输入框以及相应的标签。在设置padding代码后面添加如下代码

   Text sceneTitle = new Text("Welcome");
        sceneTitle.setFont(Font.font("Tahoma", FontWeight.NORMAL,20));
        gridPane.add(sceneTitle,0,0,2,1);
        Label userName = new Label("User Name:");
        gridPane.add(userName, 0, 1);

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

        Label pw = new Label("Password:");
        gridPane.add(pw, 0, 2);

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

代码第一行创建了一个Text对象，该对象不可编辑，并设置文本内容为“Welcome”。下一行使用setFont（）方法设置Scenetitle变量的字体系列，粗细和大小。 在将样式绑定到变量的情况下，使用内联样式是合适的，但是一种用于样式化用户界面元素的更好技术是使用样式表。 在下一个教程“带有JavaFX CSS的花式表单”中，您将用样式表替换内联样式。

grid.add（）方法将Scenetitle变量添加到布局网格中。 网格中列和行的编号从零开始，场景标题添加在第0列的第0行中。grid.add（）方法的最后两个参数将列跨度设置为2，将行跨度设置为1。

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

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

添加按钮和文本

最后需要添加一个按钮控件提交我们的信息以及在提交信息后显示消息的文本控件。

首先，创建按钮并将其放置在右下角，这是表单的动作按钮的常用位置。我们在后面继续添加如下代码

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

第一行创建一个名为btn的按钮，其标签为Sign in，第二行创建一个名为hbBtn的HBox布局窗格，其间距为10个像素。 HBox窗格为按钮设置的对齐方式与应用于网格窗格中其他控件的对齐方式不同。 alignment属性的值为Pos.BOTTOM_RIGHT，它将节点垂直放置在空间的底部，水平放置在空间的右边缘。 该按钮被添加为HBox窗格的子项，并且HBox窗格被添加到网格的第1列第4行。

现在，添加一个Text控件来显示消息。 将此代码添加到场景的代码之前。

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

现在我们运行下程序将看到下图窗口：

我们并看不见消息显示的内容 因为我们还需要给按钮添加事件处理方法进行消息的显示。

添加事件处理代码

最后我们添加事件处理代码在按下那妞的时候进行消息文本的显示：

        btn.setOnAction(event -> {
            text.setFill(Color.FIREBRICK);
            text.setText("Sign in button pressed");
        });

setOnAction（）方法用于注册事件处理程序，该事件处理程序将text对象设置为在用户按下按钮时按下的Sign in按钮。 text对象的颜色设置为砖红色。以及设置输出文本内容。

运行

完整代码

package JavaFX_LoginForm;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

/**
 * <h3>helloJavaFx</h3>
 * <p></p>
 *
 * @author : ZhouKun
 * @date : 2020-03-12 11:03
 **/
public class LoginForm extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("JavaFX Welcome");
        GridPane gridPane = new GridPane();
        gridPane.setAlignment(Pos.CENTER);
        gridPane.setHgap(10);
        gridPane.setVgap(10);
        gridPane.setPadding(new Insets(25,25,25,25));

        Text sceneTitle = new Text("Welcome");
        sceneTitle.setFont(Font.font("Tahoma", FontWeight.NORMAL,20));
        gridPane.add(sceneTitle,0,0,2,1);
        Label userName = new Label("User Name:");
        gridPane.add(userName, 0, 1);

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

        Label pw = new Label("Password:");
        gridPane.add(pw, 0, 2);

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

        Button btn = new Button("Sign in");
        HBox hbBtn = new HBox(10);
        hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
        hbBtn.getChildren().add(btn);
        gridPane.add(hbBtn, 1, 4);
        final Text text = new Text();
        gridPane.add(text, 1, 6);

        btn.setOnAction(event -> {
            text.setFill(Color.FIREBRICK);
            text.setText("Sign in button pressed");
        });

        Scene scene = new Scene(gridPane,300,275);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}