JavaFX Script 入門教程（上）：聲明式語法、數據綁定與核心 UI 組件

聲明式 vs 過程式語法

JavaFX 提供聲明式語法構建 UI 對象圖，代碼更清晰、層次分明。對比：

// 過程式寫法
var win = new Frame();
win.title = "Hello World JavaFX";
win.width = 200;
var label = new Label();
label.text = "Hello World";
win.content = label;
win.visible = true;

// 聲明式寫法（推薦）
Frame {
    title: "Hello World JavaFX"
    width: 200
    content: Label { text: "Hello World" }
    visible: true
}

聲明式語法本質上構建對象圖，根節點為構造器表達式，屬性賦值可嵌套子對象構造。

數據綁定與 Model-View 分離

引入 bind 關鍵字實現屬性依賴與自動更新：

class HelloWorldModel {
    attribute saying: String;
}
var model = HelloWorldModel { saying: "Hello World" };

Frame {
    title: bind "{model.saying} JavaFX"
    content: TextField { value: bind model.saying }  // 雙向綁定
    visible: true
}

• 修改 model.saying → Label/TextField 自動更新
• 用戶在 TextField 輸入回車 → 模型更新 → 標題同步變化
• bind 表示增量更新：依賴屬性變化時自動重新求值

核心 UI 組件速覽

Border & Layout Manager

每種 Swing Layout 對應一個 JavaFX 面板類，Border 類似封裝。示例：GridPanel (GridLayout) + EmptyBorder 實現帶間距的網格佈局。

Menu 菜單

MenuBar → Menu → MenuItem。支持助記符、加速鍵、Action 綁定 Java 代碼（如 System.exit(0)）。

Label 支持 HTML 與超鏈接

Label 封裝 JEditorPane，支持完整 HTML/CSS、圖片（內置緩存支持 classpath 資源）、超鏈接。超鏈接使用 # 操作符生成指向操作的 URL：

Label {
    text: bind "<html><a href='{#(operation() { model.numClicks++; })}'>I'm a hyperlink!</a></html>"
}

購物車示例展示：bind 表達式動態生成 HTML 表格行、條件渲染、嵌入表達式 {item.id}、自動計算小計（attribute Cart.subTotal = bind sumItems(items)）。

GroupPanel、SimpleLabel、TextField

GroupPanel 封裝 GroupLayout，聲明行/列、對齊、可調整屬性。SimpleLabel 輕量級標籤（無超鏈接）。TextField 封裝 JFormattedTextField，支持 action (回車觸發) 與 onChange (值變化觸發)。

Button 按鈕

支持圖標、文本位置、助記符、工具提示、啟用狀態綁定模型。示例：三按鈕聯動啟用/禁用中間按鈕。

TabbedPane 標籤頁

動態綁定 tabPlacement (TOP/LEFT/BOTTOM/RIGHT)、tabLayout (WRAP/SCROLL)、tabCount、selectedTab。修改模型屬性即時更新 UI。

ListBox 列表框

聲明式構建：cells: bind foreach (emp in model.employees) ListCell { text: emp }。selection 雙向綁定模型索引。支持動態增刪（Fire/Hire 按鈕操作模型序列）。

SplitPane 分割面板

基於自定義組件（非 JSplitPane），支持多組件、水平/垂直分割、權重分配空間。示例：左側 ListBox (30%) + 右側圖片預覽 (70%)。

RadioButton / ToggleButton / ButtonGroup

ButtonGroup 提供單選模型，selection 綁定索引。Menu、GridPanel、ListBox 共享同一 ButtonGroup 實現跨組件單選同步。