本節我們將會建立如下圖的登陸表單：

建立一個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這是點選事件。

執行應用，如下所示：