一、JavaFX 體系結構

JavaFX 場景圖(Scene Graph)是構建 JavaFX 應用程序的起點，一種樹狀數據結構，用于排列（和分組）圖形對象，以便于邏輯表示。

stage:舞臺，操作系統窗口的 JavaFX 表示，是所有節點的容器，是根節點

node:節點，場景圖中的單個元素被稱為節點，每個節點都有ID、樣式類、邊界體積。（Each node has an ID, style class, and bounding volume）

它還具有以下：

• Effects, such as blurs and shadows模糊或者陰影效果

• Opacity不透明度

• Transforms變換（位置、縮放、旋轉）

• Event handlers (such as mouse, key and input method)事件處理、鍵鼠輸入

• An application-specific state

JavaFX 場景圖除了包含控件、布局容器、圖像和媒體外，還包括圖形基元（如矩形和文本）。

一般來說JavaFX程序結構可以理解為：舞臺-》場景-》布局-》控件

以上圖片的代碼實現如下：

public class HelloApp extends Application {@Overridepublic void start(Stage stage) throws Exception {Text text = new Text("Hello World")//文本控件HBOX hbox =new HBOX();//橫向布局hbox.getchildren().add(text);//布局添加控件stage.setScene(new Scene(hbox, 300, 300);//新建場景，添加布局stage.show();//舞臺展示場景}public static void main(String[] args) {launch(args);}
}

二、FXML文件

FXML 是一種可編寫腳本的、基于 XML 的標記語言，用于構造 Java 對象圖。它為在過程代碼中構造此類圖形提供了一種方便的替代方法，并且非常適合于定義 JavaFX 應用程序的用戶界面，因為 XML 文檔的層次結構與 JavaFX 場景圖的結構非常相似。

FXML是一種以XML(Extensible Markup Language)的格式表示JavaFX界面對象的文件,FXML文件中的每一個元素可以映射到JavaFX中的一個類,每個FXML元素的屬性或者其子元素都可以映射為該對應JavaFXML類的屬性的文件，可以理解為界面的代碼表現形式

可以通過使用FXML簡化JavaFX 應用程序的開發

In FXML, an XML element represents one of the following: XML元素有以下：

• A class instance 實例類
• A property of a class instance 實例類屬性
• A "static" property 靜態屬性
• A "define" block 定義塊
• A block of script code?腳本代碼塊

三、Controller類文件?

用來綁定這個fxml文件用的，用于控制這個界面的一些操作，實現一些功能，這和我們開發web項目的時候的controller含義基本相同。

四、Scene Builder?

JavaFX Scene Builder 是一種可視化布局工具，可讓用戶快速設計 JavaFX 應用程序用戶界面，而無需編碼。用戶可以將 UI 組件拖放到工作區、修改其屬性、應用樣式表，并且他們正在創建的布局的 FXML 代碼將在后臺自動生成。結果是一個 FXML 文件，然后可以通過將 UI 綁定到應用程序的邏輯來與 Java 項目結合。

這個軟件的作用就是將我們拖拽產生的界面UI生成對應的前端代碼。這樣一來，后臺邏輯我們可以利用Java來寫，前臺頁面可以利用Scene Builder自動生成。

下載地址：Scene Builder - Gluon (gluonhq.com)

五、利用SceneBuilder設計界面實例

入門可以參考官方給出的教程第 II 部分：使用 Scene Builder 構建 JavaFX 應用程序（發行版 2） (oracle.com)

SceneBuilder軟件詳細說明可參考

JavaFX_二木成林的博客-CSDN博客

我這邊以設計登錄界面為例

截圖如下：

層次結構截圖如下：

當設計完界面之后需要

1）設置重要控件的fx:id

2）設置重要控件的觸發事件

3）綁定控制類

4）查看

設置重要控件的fx:id

在JavaFX中，fx:id是一個屬性，用于將FXML文件中的UI組件與Java控制器類中的成員變量進行綁定。通過這種綁定，可以在控制器類中直接訪問和操作FXML文件中的UI組件。

選中控件，可以在監控器界面的Code這里，看到fx:id，點擊之后可以進行設置。

設置重要控件的觸發事件

例如給登錄按鈕設置點擊觸發的登錄功能，需要在上圖的code這一欄中的On Action綁定Login事件，而這個事件的執行流程會在控制類中實現。

On Action屬性用于將UI組件的用戶操作與事件處理邏輯關聯起來，提供了一種方便的方法來響應用戶交互。在FXML文件中通過屬性直接指定處理方法

在控制類中寫Login方法時，需要被注解 @FXML 標記，表明它是一個FXML文件中的控件事件處理方法。當用戶點擊按鈕時，JavaFX 應用程序會自動調用該方法。

即如下：

綁定控制類

為了使設計頁面能執行編程邏輯需要與Controller類進行綁定

在下圖的位置填入java項目中類的位置即可。

在軟件中，也可以直接獲取controller代碼，view->Show Sample Controller Skeleton就可以復制對應的controller代碼

六、創建項目

參考：超詳細的JavaFX項目的創建、構建、打包教程_javafx教程-CSDN博客

因為JDK8中集成了JavaFX，所以在JDK8環境下創建JavaFX程序很簡單。只需像創建普通Java項目一樣創建項目，在代碼中導入JavaFX相關包即可編寫并直接運行即可運行JavaFX程序。

Java 8+:

在JDK8后的JDK版本不再集成JavaFX，我們需要自己向項目中引入JavaFX，所以創建JavaFX項目會復雜一些。

我們此處采用創建Maven或Gradle項目并引入依賴的辦法來引入JavaFX。如果不使用Maven，也可以在Project Structure中通過給項目添加依賴的方式，來使用和運行JavaFX程序。但是此種方式不利于管理項目，在后續打包過程中也會遇到許多困難與問題，所以不推薦。

pom.xml需要添加openjfx的依賴和插件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>org.example</groupId><artifactId>WrapSystem</artifactId><version>1.0-SNAPSHOT</version><properties><maven.compiler.source>11</maven.compiler.source><maven.compiler.target>11</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><dependencies><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.18</version></dependency><dependency><groupId>org.openjfx</groupId><artifactId>javafx-controls</artifactId><version>17.0.0.1</version></dependency><dependency><groupId>org.openjfx</groupId><artifactId>javafx-fxml</artifactId><version>17.0.0.1</version></dependency></dependencies><build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><version>3.10.1</version><configuration><source>11</source><target>11</target></configuration></plugin><plugin><groupId>org.openjfx</groupId><artifactId>javafx-maven-plugin</artifactId><version>0.0.8</version><executions><execution><!-- Default configuration for running with: mvn clean javafx:run --><id>default-cli</id><configuration><mainClass>main</mainClass><launcher>app</launcher><jlinkZipName>app</jlinkZipName><jlinkImageName>app</jlinkImageName><noManPages>true</noManPages><stripDebug>true</stripDebug><noHeaderFiles>true</noHeaderFiles></configuration></execution></executions></plugin></plugins></build>
</project>