javaFX8初探(登入表單)
本節我們將會建立如下圖的登陸表單:
建立一個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這是點選事件。
執行應用,如下所示: