在开发应用程序时，创建一个表单是一种很常见的活动。介绍屏幕布局(Layout)的基本信息，添加控件到Layout面板( Pane)中，创建输入事件。

使用JavaFX来创建如图4-1所示的登录表单。

图4-1 登录表单

使用的工具是eclipse IDE。



创建工程

第一个任务是在IDE中创建一个JavaFX Project并且将其命名为Login：

1. 从”File”菜单中选择”New Project”。

2. 在”JavaFX”应用程序分类中，选择”JavaFX Application”。单击”Next”按钮。

3. 将Project命名为Login并且单击”Finish”。

4. 移除eclipse IDE自动生成的start()方法并且使用例4-1中的代码替换之。

例4-1 应用程序的Stage

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



创建一个GridPane Layout

在登录表单中可以使用GridPane布局，因为它允许你创建一个灵活的行列网格来对控件进行布局。你可以将控件放到网格中的任意一个单元格，也可以设置控件根据需要跨单元格(span)摆放。

用于创建GridPane的代码如例4-2所示。在代码行primaryStage.show()之前增加如下代码：

例4-2 带有Gap和Padding属性的GridPane

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属性将grid的默认位置从靠左上角对齐改为居中显示。gap属性管理行列之间的间隔，padding管理grid 面板边缘周围的间隔，insets分别指定了上、右、下、左四边的间隔，在本例中每边都设置了25像素的padding。

例4-2中，scene被创建并使用grid pane作为root节点，这在使用layout容器构建界面时是一种常见用法。因此当窗口的大小改变时，在gird pane中的节点也将随之根据布局的约束而改变。在本例中无论你怎样对窗体进行缩放操作，grid 面板将始终居中显示。padding属性将确保在窗口被缩小时gird 面板周围仍能留有间隔。

这段代码将scene的大小设置为了300*275。如果你没有设置scene的大小，默认情况下scene将使用能将其内部组件全部显示的最小大小。



增加文本(Text)、标签(Lable)和文本域(Text Field)

观察图4-1，你会看到表单具有一个”Welcome”标题，并且还有用于收集用户信息的文本框和密码框。用于创建这些控件的代码如例4-3所示。将这些代码添加到设置grid的padding属性的代码行之后。

例4-3 创建控件

Text scenetitle = new Text(“Welcome”);
       scenetitle.setFont(Font.font(“Tahoma”, FontWeight.NORMAL, 20));                
       grid.add(scenetitle, 0, 0, 2, 1);
 
       //创建Label对象，放到第0列，第1行
       Label userName = new Label(“User Name:”);
       grid.add(userName, 0, 1);
 
       //创建文本输入框，放到第1列，第1行
       TextField userTextField = new TextField();
       grid.add(userTextField, 1, 1);
 
       Label pw = new Label(“Password:”);
       grid.add(pw, 0, 2);
 
       PasswordField pwBox = new PasswordField();
       grid.add(pwBox, 1, 2);

第一行代码创建了一个创建不可编辑的Text对象，将其文本设置为”Welcome”，并且将其分配给了一个名为scenetitle的变量。第二行代码使用setFont方法来设置了scenetitle变量的字体、字重(粗细)和字号。当样式被绑定到一个变量上时使用内联样式是合适的，但更好的用户界面样式化技术是使用样式表。在下一章教程”使用JavaFX CSS美化表单”中，你将会使用样式表来替换内联样式。

grid.add()方法将scenetitle变量添加到grid布局之中。在grid中的行列号均从0开始，而scenetitle被添加到第0列、第0行。grid.add()方法的最后两个参数分别表示列跨度为2、行跨度为1。

下面代码行创建了一个带有”User Name”文本的Label对象，它被放到了第0列、第1行，还创建了一个可以编辑的Text Field对象。TextField被添加到grid面板中，放在第1列，第1行。另外以类似的方式创建了一个PasswordField和Label并将它们添加到grid面板中。

当使用GridPane时，为了便于调试，你可以显示网格线。在这种情况下你可以将代码grid.setGridLinesVisible(true)添加到增加了PasswordField的代码行之后。这样当你运行程序时，你将会看到网格的行列线和gap属性，如图4-2所示。

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



增加Button和Text

样例应用程序最后需要添加的两个控件是用于提交数据的Button控件和用于在用户点击按钮后显示信息的Text控件。

首先创建按钮并将其放到右下角，通常那些用于触发影响整个表单的事件的按钮都会放在这个位置。相关的代码如例4-4所示。将这些代码添加到创建scene的代码之前。

例4-4 按钮

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);//将HBox pane放到grid中的第1列，第4行

例4-5 文本

final Text actiontarget=new Text();//增加用于显示信息的文本
       grid.add(actiontarget, 1, 6);

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

javafx UI javafx ui设计_控件



增加事件处理代码

最后，增加代码使得用户点击按钮时显示文本信息。在创建scene的代码之前添加如例4-6所示的代码。

例4-6 按钮事件

btn.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent e) {
                actiontarget.setFill(Color.FIREBRICK);
                actiontarget.setText("Sign in button pressed");
            }
        });

setOnAction()方法用于注册一个事件处理器(Event Handler)，当用户点击按钮时会将actiontarget对象的文本设置为”Sign in button pressed”，颜色设置为砖红色。



运行程序

在IDE的Projects窗口中右键选择Login工程，选择”Run”，然后点击”Sign in”按钮。图4-4展示了运行结果。

图4-4 最终的登录表单

javafx UI javafx ui设计_控件