基於 Java 的 UI 布局 DSL 設計與實作：從繁瑣座標到領域語言的躍遷

痛點：為什麼 UI 布局總是令人抓狂？

界面設計本應是創意工作，卻常淪為座標計算的苦力。根因在於設計概念（高層語義）與實作語言（低層座標）間存在巨大語義鴻溝：

• 設計師思維：「這組元素置中、等比縮放 10%、左右留白 20%」。
• 程式碼現實：手算每個元素的 x, y, width, height，調整一處牽動全身。

現有方案皆治標不治本：

1. 視覺化拖拉工具：生成的代碼仍是固定座標組合，語義未顯性化，難以維護。
2. Layout Manager（BorderLayout, GridBagLayout 等）：樣式固定、難擴展、複雜佈局配置極其痛苦。

解決方案：領域專用語言

我們不將設計概念「降級」為座標，而是構建一種直接表達高層布局語義的語言。設計師用代碼「寫出」布局規格，語言內部自動編譯為座標。

語言核心：三個原子與兩個組合子

原子元素 Component

• 基本佈局單元，可平移、縮放以匹配給定 Rectangle。
• 需指定物理 Container 才能顯示。
• 範例：Button().title("OK").at(0,0,100,30).in(panel)

特殊原子 Empty

佔位用，不渲染任何視覺內容，僅佔據空間，實現「留白」語義。

組合子 beside(left, right, ratio)

水平並排：left 佔 ratio 比例，right 佔 1-ratio。回傳新 Component（閉包性）。

組合子 above(up, down, ratio)

垂直堆疊：up 佔 ratio，down 佔 1-ratio。同樣回傳 Component。

從原語到高階樣式：漸進式抽象

利用 Java 方法封裝組合邏輯，構建可複用的「布局詞彙」：

置中樣式 center(comp, hRatio, vRatio)

public Component center(Component cp, float hRatio, float vRatio) {
    float s1 = (1 - 2*hRatio) / (1 - hRatio);
    float s2 = (1 - 2*vRatio) / (1 - vRatio);
    Component u = above(Empty(), above(cp, Empty(), s2), vRatio);
    return beside(Empty(), beside(u, Empty(), s1), hRatio);
}
// 使用：center(Button("OK"), 0.1f, 0.1f).at(0,0,200,50).in(panel);

序列樣式 h_seq / v_seq

public Component h_seq(Component[] cps) {
    if (cps.length == 1) return cps[0];
    return beside(cps[0], h_seq(tail(cps)), 1.0f/cps.length);
}
// 使用：h_seq(buttons).at(0,0,400,50).in(panel);

網格樣式 block / block_with_margin

public Component block(Component[] cps, int rows, int cols) {
    Component[][] grid = formalize(cps, rows, cols); // 不足補 Empty
    Component[] rowComps = new Component[rows];
    for (int i=0; i center(cp, h, v))
        .toArray(Component[]::new);
    return block(wrapped, r, c);
}

實戰：迷你計算機介面

Component[] keys = { 
    btn("0"), btn("1"), btn("2"), btn("+"),
    btn("3"), btn("4"), btn("5"), btn("-"),
    btn("6"), btn("7"), btn("8"), btn("*"),
    btn("9"), btn("="), btn("%"), btn("/")
};

Component opLayout = block_with_margin(keys, 4, 4, 0.02f, 0.02f); // 2% 留白

above(
    above( TextField(), 
           beside( btn("Backspace"), btn("C"), 0.5f ), 0.5f ),
    opLayout, 0.3f
).at(0,0,300,400).in(frame);

修改留白只需改一行：將 block 換成 block_with_margin —— 領域變更最小，代碼變更最小，健壯性體現無遺。

架構分層與實作細節

三層語言架構

1. 底層：Java Swing（JButton, JPanel...）。
2. 中層：位置描述語言（at, in, beside, above）。
3. 高層：樣式描述語言（center, h_seq, block...）。

每層只依賴下層提供的原語，修改某層不影響他層。

Fluent Interface 實作

所有 setter 回傳 this，方法命名服務於「句子流暢度」：

public class Button implements Component {
    private JButton btn = new JButton();
    public Component title(String t) { btn.setText(t); return this; }
    public Component at(int x,int y,int w,int h) { btn.setBounds(x,y,w,h); return this; }
    public Component in(Container c) { c.add(btn); return this; }
}

組合子實作

public class Beside implements Component {
    private Component left, right; private float ratio;
    public Beside(Component l, Component r, float ratio) { ... }
    public Component at(int x,int y,int w,int h) {
        left.at(x, y, (int)(w*ratio), h);
        right.at(x + (int)(w*ratio), y, w - (int)(w*ratio), h);
        return this;
    }
    public Component in(Container c) { left.in(c); right.in(c); return this; }
}

從佈局到完整應用：MVP 解耦

佈局語言僅負責「顯示」。為分離控制邏輯，引入擁有者概念：

Button().title("Submit").ownBy(submitController);

submitController 處理所有事件與狀態，佈局代碼零邏輯 —— 這是 MVP (Model-View-Presenter) 模式的自然落地。

設計反思：面向語言程式設計

• 不設計物件，設計語言：用 Java 作為元語言，構建貼近問題域的 DSL。
• 分層即健壯：領域小變化 → 代碼小變更。
• 動態語言更適合：Python 版實作更簡潔，元程式能力更強。

當布局變成可編程的語言，UI 開發才真正回歸創造本質。