一、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 {
    @Override
    public 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>