您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 相關知識

構建聲明性 XML UI 語言與 Java 框架：從設計到 Web 瀏覽器實戰

編輯：Java 相關知識

動機：分離 UI 描述與業務邏輯

傳統 GUI 程式碼混雜佈局、事件處理與業務邏輯，維護困難。聲明性 XML UI 僅描述「是什麼」（結構、屬性），不指定「如何做」（控制流），天然實現關注點分離，利於團隊協作與多視圖技術整合。

核心架構組件

驗證層：XML Schema (XSD) 定義元素順序、基數、數據類型
DOM 層：自定義 XUINode 樹，同步 XML 節點與 Swing 組件狀態
持久化：Marshalling (XML→內存) / Unmarshalling (內存→XML)
圖像資源：Base64 編碼嵌入 XML
Swing 映射：標準組件 (JFrame, JButton 等) 對應 XML 元素

XUI 語言設計 (節選)

範例：簡單視窗與按鈕

<?xml version="1.0" encoding="UTF-8"?>
<xui:XUI xmlns:xui="https://xml.bcit.ca/PurnamaProject/2003/xui">
  <xui:Window id="window_0" name="Hello World" width="300" height="300" x="426" y="282" visible="true">
    <xui:GridLayout width="1" height="1"/>
    <xui:Panel id="panel_0" x="0" y="0" width="1" height="1">
      <xui:GridLayout width="1" height="1"/>
      <xui:Button id="button_0" label="Press Me" enabled="true" orientation="horizontal"/>
    </xui:Panel>
  </xui:Window>
  <xui:Resource type="java" class="ButtonModel" uri="model.jar"/>
</xui:XUI>

XSD 關鍵結構

根元素 XUI：包含 0-128 個 Window 與 1 個 Resource
Window：7 個必填屬性，包含 GridLayout、容器選擇組、可選 MenuBar
Panel：中級容器，支援 15+ 原子組件 (Button, Table, Tree 等)
命名空間隔離：xmlns:xui 避免元素名稱衝突

Java 框架核心流程 (6 步驟)

XUIBuilder builder = XUIBuilderFactory.getInstance().getXUIBuilder(); // 1. 取得 Builder
builder.parse("browser.xml");                                          // 2. 驗證解析
XUI xui = builder.getXUIDocument();                                    // 3. 建立自定義 DOM
xui.visualize();                                                       // 4/5. 實例化 GUI 組件樹
xui.bind();                                                            // 6. 反射綁定業務模型 (Resource 指定 JAR 入口類)
xui.marshalXUI("output.xml");                                          // 額外：編組回 XML

關鍵實現細節

組件與節點雙向同步

每個 XUINode 對應一個 XUIComponent，再對應一個 Swing Peer
屬性修改 (如大小) 同步更新節點、Peer、佈局映射表

DOM 編組實現 (`XUINode.toString()`)

遞歸生成帶縮進、命名空間前綴的 XML 字串，支援巢狀結構序列化。

容器組件添加邏輯 (`XUIWindow.addComponent`)

類型檢查：僅允許 Panel、Dialog、MenuBar 等
座標驗證：確保組件在 GridLayout 範圍內
同步節點樹：win.addChildNode(node)

運行時綁定機制 (`BindingFactory.doBinding`)

解析 Resource URI (支援本地、HTTP、JAR 協議)
JarURLConnection + 自定義 XUIClassLoader 載入類
反射實例化入口類，調用 init(XUI) 方法
載入 JAR 內圖像資源至 XUIResources 單例

實戰案例：Web 瀏覽器

XML UI 結構亮點

主視窗含 HypertextPane、導航按鈕、多對話框 (開啟/儲存/退出確認/書籤)
MenuBar 整合快捷鍵 (Ctrl+X 退出、Ctrl+D 加書籤)
彈出式選單綁定 HypertextPane 右鍵事件

模型類 `BrowserModel` 實現

public class BrowserModel implements ActionModel, TextModel, WindowModel, ListActionModel {
    private XUI xui;
    public void init(XUI document) {
        xui = document;
        // 透過 ID 取得組件
        bookmarksList = (XUIList) xui.getXUIComponent("list_0");
        homeButton = (XUIButton) xui.getXUIComponent("button_1");
        // 動態建立書籤選單項並註冊監聽
        for (String url : bookmarksList.getItems()) {
            XUIMenuItem item = XUIComponentFactory.makeMenuItem(url);
            bookmarksMenu.addMenuItem(item);
            item.addEventListener(linkModel);
        }
        homeButton.addEventListener(this);
    }
    public void action(XUIComponent component) {
        // 統一事件分發：導航、檔案操作、書籤、退出確認等
    }
}