本节我们将会创建如下图的登陆表单：
创建一个javaFX project
添加代码如下：
package com.chu.helloworld;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
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;
public class Form extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
//舞台名称
primaryStage.setTitle("JavaFX Welcome");
/*
* GridPane
* 登陆表单，使用一个GridPane布局，这样就会创建一个灵活的行列表格，我们可以在这些表格里添加控件。 也可以合并行列。
* 我们把GridPane的实例赋给grid变量。
* 1：改变排列方式为居中。
* 2：gap属性控制行和列的间距。
* 3：padding属性控制gridpane边缘的空间。Inset的顺序是上，右、下、左，这里都是25像素。
*
*/
GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));
Text scenetitle = new Text("Welcome");
scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1);
Label userName = new Label("User Name:");
grid.add(userName, 0, 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);
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);
final Text actiontarget = new Text();
grid.add(actiontarget, 1, 6);
btn.setOnAction(e -> {
actiontarget.setFill(Color.FIREBRICK);
actiontarget.setText("Sign in button pressed");
});
Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
代码解读：
GridPane
登陆表单，使用一个GridPane布局，这样就会创建一个灵活的行列表格，我们可以在这些表格里添加控件。 也可以合并行列。
创建GridPane：
我们把GridPane的实例赋给grid变量。
1：改变排列方式为居中。
2：gap属性控制行和列的间距。
3：padding属性控制gridpane边缘的空间。Inset的顺序是上，右、下、左，这里都是25像素。
使用grid面板作为跟节点创建了一个场景，这是非常常见的实践。因为窗口的大小是可变的，grid面板里的节点应该跟着他们的布局约束来改变。
在这个例子里。当窗口大小改变的时候grid面板会保持在中间。padding属性可以确保党窗口更小的时候grid面板周围依然存在空隙。我们设置场景的大小为300,275。如果不设置这个大小，场景的大小默认是能容纳它的内容的最小尺寸。
为面板添加内容：
创建一个不能编辑的Text对象，设置内容为“Welcome”。并把它赋给scenetitle。使用setFont方法设置字体样式。使用内联样式在这里是比较合适的。但是一个更好的技术是使用样式表。后面的学习中，我们会使用样式表来替换内联样式。
grid.add方法把scenetitle添加到布局grid。grid中的行列坐标从0开始， scenetitle添加到0行0列的位置。add最后两个参数是合并2列，合并1行。
在1行 0列 位置创建Label对象，内容为User Name。并在1行 1列的位置创建一个可编辑的文本框。密码框按照相似的方法添加到grid中。
下图，展示了代码的作用：
最后两个控件是提交表单的按钮和按下提交按钮时的显示。
首先，创建一个Button 文本为“Sign in”，然后创建了一个HBox布局面板，这是spacing为10像素。并设置HBox的排列位置为右下。
然后把HBox面板添加到grid的4行 1列。
添加一个Text，用来显示按下按钮时的消息。
最后为button这是点击事件。
运行应用，如下所示：
