翻譯自??在JavaFX中創建表單

在開發應用程序時，創建表單是一項常見活動。本教程將向您介紹屏幕布局的基礎知識，如何將控件添加到布局窗格以及如何創建輸入事件。

在本教程中，您將使用JavaFX構建如圖4-1所示的登錄表單。

圖4-1登錄表單

?

本入門教程中使用的工具是NetBeans IDE。在開始之前，請確保您使用的NetBeans IDE版本支持JavaFX 8.有關詳細信息，請參閱Java SE下載頁面的Certified System Configurations頁面。

?

1、創建項目

您的第一個任務是在NetBeans IDE中創建JavaFX項目并將其命名為Login：

從“?文件”菜單中，選擇“?新建項目”。

在JavaFX應用程序類別中，選擇JavaFX Application。單擊下一步。

將項目命名為Login，然后單擊Finish。

創建JavaFX項目時，NetBeans IDE提供了一個Hello World應用程序作為起點，如果您遵循Hello World教程，則已經看到了該應用程序。

刪除start()NetBeans IDE生成的方法，并將其替換為示例4-1中的代碼。

例4-1應用階段

@Overridepublic void start(Stage primaryStage) {primaryStage.setTitle("JavaFX Welcome");primaryStage.show();}

提示：將示例代碼添加到NetBeans項目后，按Ctrl（或Cmd）+ Shift + I導入所需的包。如果可以選擇import語句，請選擇以開頭語句開頭的語句javafx。

?

2、創建GridPane布局

對于登錄表單，請使用GridPane布局，因為它使您能夠創建靈活的行和列網格，以在其中布置控件。您可以將控件放在網格中的任何單元格中，并且可以根據需要使控件跨越單元格。

創建GridPane布局的代碼在例4-2中。在行之前添加代碼primaryStage.show();

示例4-2具有間隙和填充屬性的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屬性將網格的默認位置從場景的左上角更改為中心。gap屬性管理行和列之間的間距，而padding屬性管理網格窗格邊緣周圍的空間。插圖按照頂部，右側，底部和左側的順序排列。在此示例中，25每側都有填充像素。

使用網格窗格作為根節點創建場景，這是使用布局容器時的常見做法。因此，在調整窗口大小時，根據布局約束調整網格窗格內的節點的大小。在此示例中，當您增大或縮小窗口時，網格窗格將保留在中心。填充屬性確保在使窗口變小時網格窗格周圍有填充。

此代碼將場景寬度和高度設置為300乘以275.如果未設置場景尺寸，則場景默認為顯示其內容所需的最小尺寸。

?

3、添加文本，標簽和文本字段

查看圖4-1，您可以看到表單需要標題“歡迎”以及用于從用戶收集信息的文本和密碼字段。創建這些控件的代碼在例4-3中。在設置網格填充屬性的行之后添加此代碼。

例4-3控件

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);

第一行創建一個Text無法編輯的對象，將文本設置為Welcome，并將其分配給名為的變量scenetitle。下一行使用該setFont()方法設置scenetitle變量的字體系列，重量和大小。在樣式綁定到變量的情況下使用內聯樣式是合適的，但是使用樣式表更好地設置用戶界面元素的樣式。在下一個教程中，使用JavaFX CSS的Fancy Forms，您將使用樣式表替換內聯樣式。

該grid.add()方法將scenetitle變量添加到布局中grid。網格中列和行的編號從零開始，并scenetitle在第0列第0行中添加。grid.add()方法的最后兩個參數將列span設置為2，將行span設置為1。

下一行創建一個Label對象，其中包含第User Name0列，第1行的文本以及Text Field可以編輯的對象。文本字段將添加到第1列第1行的網格窗格中。將創建密碼字段和標簽，并以類似的方式將其添加到網格窗格中。

使用網格窗格時，可以顯示網格線，這對于調試非常有用。在這種情況下，您可以grid.setGridLinesVisible(true)在添加密碼字段的行之后添加。然后，當您運行應用程序時，您會看到網格列和行的行以及間隙屬性，如圖4-2所示。

圖4-2帶網格線的登錄表單

?

4、添加按鈕和文本

應用程序所需的最后兩個控件是Button用于提交數據的Text控件和用于在用戶按下按鈕時顯示消息的控件。

首先，創建按鈕并將其放在右下角，這是執行影響整個表單的操作的按鈕的常見位置。代碼在例4-4中。在場景代碼之前添加此代碼。

例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);

第一行創建一個以btn標簽命名的按鈕Sign in,，第二行創建一個HBox以像素hbBtn間距命名的布局窗格10。該HBox窗格設置按鈕的對齊方式，該對齊方式與應用于網格窗格中其他控件的對齊方式不同。該alignment屬性的值為Pos.BOTTOM_RIGHT，該節點在空間的底部垂直地和在該空間的右邊緣水平地定位節點。該按鈕被添加為HBox窗格的子項，HBox窗格將添加到第1列第4行的網格中。

現在，添加一個Text用于顯示消息的控件，如例4-5所示。在場景代碼之前添加此代碼。

例4-5文字

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

圖4-3現在顯示了表單。在完成教程的下一部分“?添加代碼以處理事件”之前，您不會看到文本消息。

圖4-3帶按鈕的登錄表單

?

5、添加代碼來處理事件

最后，當用戶按下按鈕時，使按鈕顯示文本消息。在場景代碼之前添加示例4-6中的代碼。

例4-6按鈕事件

btn.setOnAction(new EventHandler<ActionEvent>() {@Overridepublic void handle(ActionEvent e) {actiontarget.setFill(Color.FIREBRICK);actiontarget.setText("Sign in button pressed");} });

該setOnAction()方法用于注冊事件處理程序，該事件處理程序將actiontarget對象設置Sign in button pressed為用戶按下按鈕時。actiontarget對象的顏色設置為耐火磚紅色。

?

6、運行應用程序

在“項目”窗口中右鍵單擊“?登錄”項目節點，選擇“運行”，然后單擊“登錄”按鈕。圖4-4顯示了結果。如果遇到問題，請查看可Login.java下載的Login.zip文件中包含的文件中的代碼。

圖4-4最終登錄表單

?

7、從這往哪兒走

基本表單教程到此結束，但您可以繼續閱讀以下有關開發JavaFX應用程序的教程。

• 使用JavaFX CSS的Fancy Forms提供了有關如何添加背景圖像以及從根本上更改登錄表單中文本，標簽和按鈕樣式的提示。

• 使用FXML創建用戶界面顯示了創建登錄用戶界面的另一種方法。FXML是一種基于XML的語言，它提供了構建與代碼的應用程序邏輯分開的用戶界面的結構。

• 在JavaFX中使用Layouts解釋了內置的JavaFX布局窗格，以及使用它們的提示和技巧。

還可以試用JavaFX示例，您可以從Java SE下載頁面的JDK演示和示例部分下載該示例http://www.oracle.com/technetwork/java/javase/downloads/。Ensemble示例包含布局及其源代碼的示例。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的JavaFX官方教程（五）之在JavaFX中创建表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。