當(dāng)前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

JavaFX官方教程（七）之使用FXML创建用户界面

發(fā)布時間：2023/12/3 asp.net 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaFX官方教程（七）之使用FXML创建用户界面小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

翻譯自??使用FXML創(chuàng)建用戶界面

本教程展示了使用JavaFX FXML的好處，JavaFX FXML是一種基于XML的語言，它提供了構(gòu)建與代碼的應(yīng)用程序邏輯分開的用戶界面的結(jié)構(gòu)。

如果您從一開始就開始使用本文檔，那么您已經(jīng)了解了如何使用JavaFX創(chuàng)建登錄應(yīng)用程序。在這里，您使用FXML創(chuàng)建相同的登錄用戶界面，將應(yīng)用程序設(shè)計與應(yīng)用程序邏輯分離，從而使代碼更易于維護(hù)。您在本教程中構(gòu)建的登錄用戶界面如圖6-1所示。

圖6-1登錄用戶界面

本教程使用NetBeans IDE。確保您使用的NetBeans IDE版本支持JavaFX 8.有關(guān)詳細(xì)信息，請參閱Java SE下載頁面的“認(rèn)證系統(tǒng)配置”部分。

1、設(shè)置項目

您的第一個任務(wù)是在NetBeans IDE中設(shè)置JavaFX FXML項目：

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

在JavaFX應(yīng)用程序類別中，選擇JavaFX FXML Application。單擊下一步。

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

NetBeans IDE打開一個FXML項目，其中包含基本Hello World應(yīng)用程序的代碼。該應(yīng)用程序包括三個文件：

FXMLExample.java.?該文件負(fù)責(zé)FXML應(yīng)用程序所需的標(biāo)準(zhǔn)Java代碼。
FXMLDocument.fxml.?這是您在其中定義用戶界面的FXML源文件。
FXMLDocumentController.java.?這是用于處理鼠標(biāo)和鍵盤輸入的控制器文件。

重命名FXMLDocumentController.java為F，XMLExampleController.java以使該名稱對此應(yīng)用程序更有意義。

在“項目”窗口中，右鍵單擊“?FXMLDocumentController.java”，然后選擇“?重構(gòu)”，然后選擇“?重命名”。

輸入FXMLExampleController，然后單擊“?重構(gòu)”。

重命名FXMLDocument.fxml為fxml_example.fxml.

右鍵單擊FXMLDocument.fxml并選擇“?重命名”。

輸入fxml_example并單擊“?確定”。

2、加載FXML源文件

您編輯的第一個文件是FXMLExample.java文件。此文件包含用于設(shè)置應(yīng)用程序主類和定義舞臺和場景的代碼。更具體的FXML，該文件使用FXMLLoader該類，該類負(fù)責(zé)加載FXML源文件并返回結(jié)果對象圖。

在例6-1中進(jìn)行粗體顯示的更改。

例6-1 FXMLExample.java

@Overridepublic void start(Stage stage) throws Exception {Parent root = FXMLLoader.load(getClass().getResource("fxml_example.fxml"));Scene scene = new Scene(root, 300, 275);stage.setTitle("FXML Welcome");stage.setScene(scene);stage.show();}

一個好的做法是在創(chuàng)建場景時設(shè)置場景的高度和寬度，在本例中為300乘275;?否則場景默認(rèn)為顯示其內(nèi)容所需的最小尺寸。

3、修改導(dǎo)入語句

接下來，編輯該fxml_example.fxml文件。此文件指定應(yīng)用程序啟動時顯示的用戶界面。第一項任務(wù)是修改import語句，使代碼如例6-2所示。

示例6-2 XML聲明和導(dǎo)入語句

<?xml version="1.0" encoding="UTF-8"?><?import java.net.*?> <?import javafx.geometry.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <?import javafx.scene.text.*?>

與在Java中一樣，類名可以是完全限定的（包括包名），也可以使用import語句導(dǎo)入它們，如例6-2所示。如果您愿意，可以使用引用類的特定import語句。

4、創(chuàng)建GridPane布局

NetBeans生成的Hello World應(yīng)用程序使用AnchorPane布局。對于登錄表單，您將使用GridPane布局，因為它使您能夠創(chuàng)建靈活的行和列網(wǎng)格，以在其中布置控件。

刪除AnchorPane布局及其子項，并將其替換GridPane為示例6-3中的布局。

示例6-3 GridPane布局

在此應(yīng)用程序中，GridPane布局是FXML文檔的根元素，因此具有兩個屬性。fx:controller在標(biāo)記中指定基于控制器的事件處理程序時，該屬性是必需的。該xmlns:fx屬性始終是必需的，并指定fx命名空間。

代碼的其余部分控制網(wǎng)格窗格的對齊和間距。alignment屬性將網(wǎng)格的默認(rèn)位置從場景的左上角更改為中心。在gap性能管理行和列之間的間距，而padding物業(yè)管理圍繞網(wǎng)格窗格邊緣的空間。

在調(diào)整窗口大小時，網(wǎng)格窗格中的節(jié)點將根據(jù)其布局約束進(jìn)行調(diào)整大小。在此示例中，當(dāng)您增大或縮小窗口時，網(wǎng)格將保留在中心。填充屬性確保在使窗口變小時網(wǎng)格周圍有填充。

5、添加文本和密碼字段

回顧圖6-1，您可以看到登錄表單需要標(biāo)題“歡迎”以及用于從用戶收集信息的文本和密碼字段。例6-4中的代碼是GridPane布局的一部分，必須放在</GridPane>語句的上方。

示例6-4文本，標(biāo)簽，TextField和密碼字段控件

第一行創(chuàng)建一個Text對象并將其文本值設(shè)置為Welcome。的GridPane.columnIndex和GridPane.rowIndex屬性對應(yīng)的放置Text在網(wǎng)格控制。網(wǎng)格中行和列的編號從零開始，Text控件的位置設(shè)置為（0,0），這意味著它位于第一行的第一列中。該GridPane.columnSpan屬性設(shè)置為2，使歡迎標(biāo)題跨越網(wǎng)格中的兩列。當(dāng)您添加樣式表以將文本的字體大小增加到32磅時，您將在本教程后面需要這個額外的寬度。

下一行創(chuàng)建一個Label對象，其中第User Name0列，第1行為文本，第1列為第1行TextField，右側(cè)為對象。另一行Label和PasswordField對象以類似方式創(chuàng)建并添加到網(wǎng)格中。

使用網(wǎng)格布局時，可以顯示網(wǎng)格線，這對于調(diào)試非常有用。在這種情況下，通過在語句后添加語句gridLinesVisible來將屬性設(shè)置為。然后，當(dāng)您運行應(yīng)用程序時，您會看到網(wǎng)格列和行的行以及間隙屬性，如圖6-2所示。true<gridLinesVisible>true</gridLinesVisible><padding></padding>

圖6-2帶網(wǎng)格線的登錄表單

6、添加按鈕和文本

應(yīng)用程序所需的最后兩個控件是Button用于提交數(shù)據(jù)的Text控件和用于在用戶按下按鈕時顯示消息的控件。代碼在例6-5中。之前添加此代碼</GridPane>。

例6-5 HBox，Button和Text

HBox需要一個窗格來設(shè)置按鈕的對齊方式，該方框與應(yīng)用于GridPane布局中其他控件的默認(rèn)對齊方式不同。該alignment屬性設(shè)置為bottom_right，將空間底部的節(jié)點垂直放置，并在空間的右邊緣水平放置。該HBox窗格將添加到第1列第4行的網(wǎng)格中。

該HBox窗格有一個孩子，一個Button與text屬性設(shè)置為Sign in和onAction設(shè)置屬性handleSubmitButtonAction()。雖然FXML是定義應(yīng)用程序用戶界面結(jié)構(gòu)的便捷方式，但它并未提供實現(xiàn)應(yīng)用程序行為的方法。您可以handleSubmitButtonAction()在本教程的下一部分“?添加代碼來處理事件”中實現(xiàn)Java代碼中的方法行為。

分配一個fx:id值到一個元素，如在對所述代碼中所示Text的控制，創(chuàng)建在文檔的命名空間的變量，該變量可以參考從代碼的其他地方。雖然不是必需的，但定義控制器字段有助于闡明控制器和標(biāo)記的關(guān)聯(lián)方式。

7、添加代碼來處理事件

現(xiàn)在，Text當(dāng)用戶按下按鈕時，控件會顯示一條消息。你在FXMLExampleController.java文件中這樣做。刪除NetBeans IDE生成的代碼，并將其替換為例6-6中的代碼。

例6-6 FXMLExampleController.java

package fxmlexample;import javafx.event.ActionEvent; import javafx.fxml.FXML; import javafx.scene.text.Text;public class FXMLExampleController {@FXML private Text actiontarget;@FXML protected void handleSubmitButtonAction(ActionEvent event) {actiontarget.setText("Sign in button pressed");}}

該@FXML注釋被用于標(biāo)記非公共控制器成員字段和處理程序方法用于通過FXML標(biāo)記使用。該handleSubmtButtonAction方法將actiontarget變量設(shè)置為Sign in button pressed用戶按下按鈕時。

您現(xiàn)在可以運行該應(yīng)用程序以查看完整的用戶界面。圖6-3顯示了在兩個字段中鍵入文本并單擊“登錄”按鈕時的結(jié)果。如果您有任何問題，那么您可以將您的代碼與FXMLLogin示例進(jìn)行比較。

圖6-3 FXML登錄窗口

8、使用腳本語言處理事件

作為使用Java代碼創(chuàng)建事件處理程序的替代方法，您可以使用提供與JSR 223兼容的腳本引擎的任何語言來創(chuàng)建處理程序。這些語言包括JavaScript，Groovy，Jython和Clojure。

您可以選擇立即嘗試使用JavaScript。

在文件中fxml_example.fxml，在XML doctype聲明之后添加JavaScript聲明。

<?language javascript?>

在Button標(biāo)記中，更改函數(shù)的名稱，以使調(diào)用如下所示：

onAction="handleSubmitButtonAction(event);"

fx:controller從GridPane標(biāo)記中刪除屬性，并將JavaScript函數(shù)<script>直接添加到其下的標(biāo)記中，如例6-7所示。

例6-7 FXML中的JavaScript

<GridPane xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10"><fx:script>function handleSubmitButtonAction() {actiontarget.setText("Calling the JavaScript");}</fx:script>

或者，您可以將JavaScript函數(shù)放在外部文件（例如fxml_example.js）中，并包含如下腳本：

<fx:script source="fxml_example.js"/>

結(jié)果如圖6-4所示。

圖6-4使用JavaScript登錄應(yīng)用程序

如果您正在考慮使用FXML腳本語言，請注意IDE可能不支持在調(diào)試期間單步執(zhí)行腳本代碼。

9、使用CSS設(shè)置應(yīng)用程序樣式

最后的任務(wù)是通過添加層疊樣式表（CSS）使登錄應(yīng)用程序看起來很有吸引力。

創(chuàng)建樣式表。

在“項目”窗口中，右鍵單擊“源包”下的fxmlexample文件夾，然后選擇“?新建”，再選擇“?其他”。

在“新建文件”對話框中，選擇“?其他”，然后選擇“?層疊樣式表”，并單擊“?下一步”。

輸入Login并單擊Finish。

將Login.css文件的內(nèi)容復(fù)制到CSS文件中。該Login.css文件包含在可下載的LoginCSS.zip文件中。有關(guān)CSS文件中的類的說明，請參閱使用JavaFX CSS的花式表單。

通過右鍵單擊background.jpg文件并將其保存到fxmlexample文件夾，下載背景的灰色亞麻圖像。

打開fxml_example.fxml文件并在GridPane布局標(biāo)記結(jié)束之前添加樣式表元素，如例6-8所示。

例6-8樣式表

URL中樣式表名稱前面的@符號表示樣式表與FXML文件位于同一目錄中。

要使用網(wǎng)格窗格的根樣式，請將樣式類添加到GridPane布局的標(biāo)記中，如例6-9所示。

示例6-9設(shè)置GridPane的樣式

welcome-text為Welcome?Text對象創(chuàng)建一個ID，使其使用#welcome-textCSS文件中定義的樣式，如例6-10所示。

示例6-10文本ID

運行該應(yīng)用程序。圖6-5顯示了程式化的應(yīng)用程序。如果遇到問題，請查看可下載的FXMLExample.zip文件中包含的代碼

圖6-5樣式化登錄應(yīng)用程序

10、從這往哪兒走

既然您熟悉FXML，請查看FXML?簡介，它提供了有關(guān)構(gòu)成FXML語言的元素的更多信息。該文檔包含在API文檔的javafx.fxml包中。

您還可以通過fxml_example.fxml在Scene Builder中打開文件并進(jìn)行修改來試用JavaFX Scene Builder工具。此工具為JavaFX應(yīng)用程序的UI設(shè)計提供了可視化布局環(huán)境，并自動為布局生成FXML代碼。請注意，保存時可能會重新格式化FXML文件。有關(guān)此工具的更多信息，請參閱JavaFX Scene Builder入門。使用CSS進(jìn)行Skinning和JavaFX Scene Builder用戶指南的CSS Analyzer部分，還可以為您提供有關(guān)如何為FXML布局設(shè)置外觀的信息。

總結(jié)

以上是生活随笔為你收集整理的JavaFX官方教程（七）之使用FXML创建用户界面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：教你检查Windows是否是永久激活如何
下一篇： hive命令出现问题Failed wit