一、IDEA 創(chuàng)建 JavaFX 項目

??使用 IDEA 新建項目，Generators 選擇 JavaFx，此處選擇 kotlin 作為開發(fā)語言，Maven 進行項目構(gòu)建；點擊 Next 進行下一步選擇額外的一些依賴庫，不需要勾選，直接點擊 Finish 即可。

??項目創(chuàng)建成功之后，對應(yīng)的文件結(jié)構(gòu)如下，下面依次介紹下這些文件中的內(nèi)容。

.
├── pom.xml
└── src
    └── main
        ├── kotlin
        │   ├── com
        │   │   └── jinyx
        │   │       └── javafxdemo
        │   │           ├── HelloApplication.kt
        │   │           └── HelloController.kt
        │   └── module-info.java
        └── resources
            └── com
                └── jinyx
                    └── javafxdemo
                        └── hello-view.fxml

pom.xml

??導(dǎo)入 javafx 依賴，jdk8 之后，javafx 從 jdk 中移除，因此在高版本的 java 中使用 javafx 需要導(dǎo)入相關(guān)依賴庫。

<dependencies>
    <dependency>
        <groupId>org.openjfx</groupId>
        <artifactId>javafx-controls</artifactId>
        <version>19.0.2.1</version>
    </dependency>
    <dependency>
        <groupId>org.openjfx</groupId>
        <artifactId>javafx-fxml</artifactId>
        <version>19.0.2.1</version>
    </dependency>
</dependencies>

??build 插件，用于打包 javafx 項目；關(guān)于其配置參數(shù)可以查看javafx:jlink options說明。

<build>
    <plugins>
        <plugin>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-maven-plugin</artifactId>
            <version>0.0.8</version>
            <configuration>
                <mainClass>com.jinyx.javafxdemo/com.jinyx.javafxdemo.HelloApplication</mainClass>
                <launcher>appfx</launcher>
                <jlinkZipName>app</jlinkZipName>
                <jlinkImageName>app</jlinkImageName>
                <noManPages>true</noManPages>
                <stripDebug>true</stripDebug>
                <noHeaderFiles>true</noHeaderFiles>
                <compress>1</compress>
            </configuration>
        </plugin>
    </plugins>
</build>

HelloApplication.kt

??應(yīng)用程序主入口，繼承自 javafx.application.Application，并重寫 start 方法顯示主窗口；在 main 方法中需要調(diào)用 launch 方法啟動應(yīng)用。

import javafx.application.Application
import javafx.fxml.FXMLLoader
import javafx.scene.Parent
import javafx.scene.Scene
import javafx.stage.Stage

class HelloApplication : Application() {
    override fun start(stage: Stage) {
        val parent = FXMLLoader.load<Parent>(HelloApplication::class.java.getResource("hello-view.fxml"))
        val scene = Scene(parent, 320.0, 240.0)
        stage.title = "Hello!"
        stage.scene = scene
        stage.show()
    }
}

fun main(args: Array<String>) {
    Application.launch(HelloApplication::class.java, *args)
}

??注意 kotlin 需要調(diào)用 launch(Class<? extends Application> clazz, String... args) 方法，而調(diào)用 launch(String... args) 將會出現(xiàn)如下錯誤；java 代碼正常。

Error: class com.jinyx.javafxdemo.HelloApplicationKt is not a subclass of javafx.application.Application

??重寫的 start 方法中，通過 FXMLLoader 加載 fxml 頁面，在通過 stage.show 完成主窗口的顯示

hello-info.fxml

??頁面布局如下，采用 xml 標簽語言，格式和 Android 類似，不過對應(yīng)組件的樣式，需要配合使用 css；后續(xù)學習組件中再深入。

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<?import javafx.scene.control.Button?>
<VBox alignment="CENTER" spacing="20.0" xmlns:fx="http://javafx.com/fxml"
      fx:controller="com.jinyx.javafxdemo.HelloController">
    <padding>
        <Insets bottom="20.0" left="20.0" right="20.0" top="20.0"/>
    </padding>

    <Label fx:id="welcomeText" style="-fx-font-family: 'PingFang SC'"/>
    <Button text="Hello!" style="-fx-font-family: 'PingFang SC'" onAction="#onHelloButtonClick"/>
</VBox>

??fx:controller="com.jinyx.javafxdemo.HelloController" 指定需要綁定的 Controller，可以在控制器里面處理業(yè)務(wù)邏輯

HelloController.kt

??使用 @FXML 注解將組件和點擊事件與 fxml 之間進行綁定，從而獲取到 Label 組件以及提供 Button 點擊事件

package com.jinyx.javafxdemo

import javafx.fxml.FXML
import javafx.scene.control.Label

class HelloController {
    @FXML
    private lateinit var welcomeText: Label

    @FXML
    private fun onHelloButtonClick() {
        welcomeText.text = "Welcome to JavaFX Application!"
    }
}

module-info.java

module com.jinyx.javafxdemo {
    requires javafx.controls;
    requires javafx.fxml;
    requires kotlin.stdlib;


    opens com.jinyx.javafxdemo to javafx.fxml;
    exports com.jinyx.javafxdemo;
}

??使用關(guān)鍵字 module，其屬于 java9 的新特性；模塊名的命名規(guī)則同包名，如下的 com.jinyx.javafxdemo;生命的模塊主題可以為空，也可以包含如下指令:

• exports: 聲明指定的包可以被其他模塊訪問，也可以增加 to 指定其他模塊訪問
• requires: 指定需要依賴的模塊，例如上面指定需要的 javafx.controls、javafx.fxml、kotlin.stdlib
• provides
• uses
• opens: 對比 exports，允許在運行時可以使用反射訪問；而 exports 編譯期、運行期都只能訪問 public 成員，但是使用 opens 需要 exports 配合使用，否則引用模塊在編譯期找不到該包

二、運行程序

??打開右側(cè) Maven 面板，雙擊 Pugins —> javafx —> javafx:run 或者命令行運行 mvn javafx:run 即可啟動程序；
??如果出現(xiàn)如左邊的亂碼問題，可以在 fxml 中為組件指定字體，例如上面 fxml 代碼中的 style="-fx-font-family: 'PingFang SC'"。

三、打包應(yīng)用

??打開右側(cè) Maven 面板，雙擊 Pugins —> javafx —> javafx:jlink 或者命令行運行 mvn javafx:jlink；打包成功之后，將會在 target/app/bin 目錄下生成可執(zhí)行程序 appfx; 此處的 app 和 appfx 的名稱，分別對應(yīng)在 pom.xml 中，javafx-maven-plugin 插件定義的 jlinkImageName 和 launcher。

??但是此時打包生成的 appfx 可執(zhí)行程序，運行時會打開一個終端窗口，因此需要進一步將其打包成對應(yīng)平臺的安裝包或應(yīng)用程序，例如 Windows 平臺的 exe 程序、macOS 平臺的 dmg 安裝包；此處使用 jdk14 之后自帶的 jpackage 進行打包，打包指令如下：

jpackage --name appName --module com.jinyx/com.jinyx.DesktopAppKt --runtime-image ./target/app/ --icon /Users/jinyx/img_logo.icns --type app-image

• --name: 打包的應(yīng)用程序名
• --module: 對應(yīng) javafx-maven-plugin 中配置的 mainClass
• --runtime-image: jlink 打出的包
• --icon: 指定應(yīng)用圖標，macOS 測試需要 icns 類型圖標；png 轉(zhuǎn) icns
• --type: 指定打包類型；例如我當前系統(tǒng)可選的值有 {"app-image", "dmg", "pkg"}

??上面的參數(shù)以及其他參數(shù)說明都可以通過 jpackage -h 進行查看