Eclipse RCP 組件整合 Web UI 技術（Dojo/Flex/OpenLaszlo）打造富客戶體驗

動機：為何在 Eclipse 中引入 Web UI？

Eclipse 標準 UI 框架（SWT/JFace/Draw2D）雖穩定但表現力有限：不支援 SVG、動畫實作困難、高階視覺效果（陰影、漸層）需自繪渲染器。Web 技術（Dojo、Adobe Flex、OpenLaszlo）原生支援豐富互動、向量圖形、動畫，且開發效率高。此外，Web UI 組件可輕鬆遷移至瀏覽器部署，擴展選擇彈性。

架構原理：SWT Browser Widget 作為橋樑

Eclipse 內建 org.eclipse.swt.browser.Browser 控件，可載入本地或遠端 HTML/Flash/Flex 應用。層級結構：
Workbench → Editor/View → SWT Browser → Web UI App

編輯器中嵌入 Browser 範例

public void createPartControl(Composite parent) {
    Browser browser = new Browser(parent, SWT.NONE);
    browser.setUrl("my.plugin.name/MyFirstWebUI.html");
}

雙向通訊機制

1. JavaScript 通道（同步、輕量）

• Eclipse → Web UI：browser.execute("jsFunction()")
• Web UI → Eclipse：透過 window.status 修改狀態列，Eclipse 掛載 StatusTextListener 監聽特定前綴（如 fromWebApp:cmd()）觸發邏輯。

Flex 應用需透過 HTML 代理

// HTML 中的 JavaScript 代理
var appName = "MyFlexApp";
function getFlexApp(appName) { /* 取得 Flex ExternalInterface 參考 */ }
function openDialog() { getFlexApp(appName).handleOpenDialog(); }

// Flex 端註冊回調
ExternalInterface.addCallback("handleOpenDialog", handleOpenDialogInFlex);
public function handleOpenDialogInFlex():void { Alert.show("hello world!"); }

2. HTTP Servlet 通道（異步、支援外部瀏覽器）

利用 Eclipse 內建 Jetty 註冊 Servlet（org.eclipse.equinox.http.registry.servlets），Web UI 發送 HTTP 請求（JS XMLHttpRequest 或 Flex HTTPService），Servlet 轉發至 Eclipse 核心邏輯。符合 MVC 模式：
Model=Eclipse Workbench, View=Web UI, Controller=HTTP Servlet。

通道對比

落地前的關鍵考量

• 無障礙存取：鍵盤操作、螢幕閱讀器、BiDi 文字、高對比度模式。
• 易用性：動畫/特效是否符合桌面應用慣性，避免干擾專業用戶。
• 國際化：選擇原生支援 i18n 的 Web 框架或自行實作。
• Eclipse 行為一致性：滑鼠按下/釋放選取、右鍵選單、焦點管理等需符合平台慣例。

結語

引入 Web UI 技術可大幅提升 Eclipse 組件視覺表現與開發效率，並保留遷移至 Web 部署的選項。但需在無障礙、易用性、國際化及平台一致性上謹慎評估，確保專業用戶體驗不受損。