JavaFX 入門指南：從 Swing 遷移到現代富客戶端開發的核心優勢與實戰心得

JavaFX：新一代 Java 富客戶端平台的崛起

作為長期從事 JavaEE 開發的工程師，作者因專案需求接觸 JavaFX，並在兩個月內完成 PC 客戶端開發。本文總結 JavaFX 對比 Swing 的核心優勢、遷移心得與關鍵技術點。

為什麼選擇 JavaFX 而非 Swing？

核心架構組件

• FXML：XML 聲明式 UI 佈局，分離視圖與邏輯，支持 Scene Builder 可視化設計
• CSS：標準 CSS 樣式化，支持動畫、過渡、主題切換
• Property & Binding：StringProperty, IntegerProperty 等可觀察屬性，雙向綁定自動同步 UI 與模型
• WebView：基於 WebKit 的瀏覽器引擎，支持 WebEngine.executeScript() 雙向通信
• Media：內置音視頻播放支持

實戰關鍵技術點

1. FXML + Controller 模式

public class LoginController {
    @FXML private TextField usernameField;
    @FXML private PasswordField passwordField;
    
    @FXML void handleLogin() {
        String user = usernameField.getText();
        // 業務邏輯...
    }
}

2. WebView 與 Java 互調

WebView webView = new WebView();
WebEngine engine = webView.getEngine();
engine.load("https://example.com");

// Java -> JS
engine.executeScript("alert('Hello from Java')");

// JS -> Java (需配置 JSObject)
engine.getLoadWorker().stateProperty().addListener((obs, old, newState) -> {
    if (newState == Worker.State.SUCCEEDED) {
        JSObject window = (JSObject) engine.executeScript("window");
        window.setMember("javaBridge", new JavaBridge()); // 暴露 Java 對象
    }
});

public class JavaBridge {
    public void callFromJS(String msg) { System.out.println("JS 調用: " + msg); }
}

3. CSS 樣式化

/* style.css */
.root { -fx-font-family: "Microsoft YaHei"; -fx-base: #f0f0f0; }
.button { -fx-background-color: linear-gradient(#4287f5, #1e5fd8); -fx-text-fill: white; }
.button:hover { -fx-background-color: linear-gradient(#5a9bff, #3a7ae0); }

scene.getStylesheets().add(getClass().getResource("/style.css").toExternalForm());

打包與部署

• jpackage (JDK 14+)：生成原生安裝包 (exe, dmg, deb, rpm)，自包含 JRE，無需用戶安裝 Java
• Maven/Gradle 插件：javafx-maven-plugin、gradle-javafx-plugin 自動化構建
• 模塊化：需配置 module-info.java，requires javafx.controls; requires javafx.fxml; requires javafx.web;

遷移建議

1. 新專案直接選 JavaFX，Swing 僅維護存量
2. 利用 Scene Builder 快速搭建 UI 原型
3. 採用 MVVM 模式：FXML (View) + Controller (ViewModel) + Service (Model)
4. WebView 處理複雜 HTML/UI 交互，原生控件處理高性能交互
5. 注意 線程模型：JavaFX Application Thread 單線程處理 UI，耗時操作用 Task/Service 異步執行