Eclipse Forms 進階 UI 組件深度解析：打造專業級豐富客戶端介面

Eclipse Forms 提供四大進階組件 —— ExpandableComposite、Section、Image Hyperlink、FormText，讓您輕鬆構建媲美 Web 的豐富桌面應用介面。本文逐一解析各組件用法、樣式參數、事件處理與佈局整合技巧。

1. ExpandableComposite：可摺疊展開容器

網頁常見的「點擊展開/收合內容」功能，Eclipse Forms 以 ExpandableComposite 實現。

建立與配置

ExpandableComposite ec = toolkit.createExpandableComposite(form.getBody(),
    ExpandableComposite.TREE_NODE |  // 樹狀箭頭按鈕
    ExpandableComposite.CLIENT_INDENT); // 內容與標題對齊
ec.setText("Expandable Composite title");

// 客戶區內容
String ctext = "We will now create a somewhat long text so that " +
    "we can use it as content for the expandable composite. " +
    "Expandable composite is used to hide or show the text using the " +
    "toggle control";
Label client = toolkit.createLabel(ec, ctext, SWT.WRAP);
ec.setClient(client);

// 佈局數據 (TableWrapLayout)
TableWrapData td = new TableWrapData();
td.colspan = 2;
ec.setLayoutData(td);

// 展開狀態變更監聽：必須 reflow form 更新佈局與捲動條
ec.addExpansionListener(new ExpansionAdapter() {
    public void expansionStateChanged(ExpansionEvent e) {
        form.reflow(true);
    }
});

樣式常數說明

關鍵機制

• 客戶組件必須是 ExpandableComposite 的直接子元素
• 展開/收合改變組件大小，父容器不知情，需手動呼叫 form.reflow(true) 觸發重新佈局
• 內部實作 ILayoutExtension，可直接放入使用 TableWrapLayout 的父容器

效果展示

收合狀態：

展開狀態：

2. Section：功能豐富的區塊組件

Section 繼承 ExpandableComposite，新增三大概念：

1. 分隔條：標題下可選水平線
2. 描述文字：標題下的補充說明
3. 標題欄：標題區背景欄 (與分隔條二擇一)

建立範例

Section section = toolkit.createSection(form.getBody(),
    Section.DESCRIPTION | Section.TITLE_BAR |
    Section.TWISTIE | Section.EXPANDED);

TableWrapData td = new TableWrapData(TableWrapData.FILL);
td.colspan = 2;
section.setLayoutData(td);

section.addExpansionListener(new ExpansionAdapter() {
    public void expansionStateChanged(ExpansionEvent e) {
        form.reflow(true);
    }
});

section.setText("Section title");
section.setDescription("This is the description that goes below the title");

// 客戶區可包含複雜佈局
Composite sectionClient = toolkit.createComposite(section);
sectionClient.setLayout(new GridLayout());
toolkit.createButton(sectionClient, "Radio 1", SWT.RADIO);
toolkit.createButton(sectionClient, "Radio 2", SWT.RADIO);
section.setClient(sectionClient);

效果展示

擁有標題欄、描述文字、TWISTIE 按鈕、初始展開、內含 GridLayout 排列的 Radio 按鈕。

3. Image Hyperlink：圖文超連結

Hyperlink 子類，在連結文字前添加圖片。支援正常、滑鼠懸停、點擊三種狀態的圖片設定。可作為純圖片按鈕 (不設文字) 或圖文混合連結。

應用實例：Eclipse 歡迎頁

Eclipse 歡迎頁大量使用 Image Hyperlink 構建圖文並茂的導航連結。

4. FormText：強大的富文本渲染引擎

當標籤、超連結、圖片、表格佈局混合需求複雜時 (如 PDE Manifest 編輯器)，單一組件難以勝任。FormText 提供類 HTML 渲染能力：

• 識別普通包裝文本
• 自動將 https:// 開頭文字轉為超連結
• 支援類 HTML 標記渲染
• 所有模式支援字串或 InputStream 輸入

模式 1：純文本渲染 (Label 模式)

FormText formText = toolkit.createFormText(form.getBody(), true);
TableWrapData td = new TableWrapData(TableWrapData.FILL);
td.colspan = 2;
formText.setLayoutData(td);

String text = "Here is some plain text for the text to render.";
formText.setText(text, false, false);  // 不解析 HTML、不展開 URL

模式 2：自動 URL 轉超連結

FormText formText = toolkit.createFormText(form.getBody(), true);
td = new TableWrapData(TableWrapData.FILL);
td.colspan = 2;
formText.setLayoutData(td);

String text = "Here is some plain text for the text to render; " +
    "this text is at https://www.eclipse.org web site.";
formText.setText(text, false, true);  // 不解析 HTML、但展開 URL

效果：

URL 自動變為可點擊超連結，且為包裝文本一部分，無需手動插入 Hyperlink 組件。

超連結事件處理

FormText 內建超連結支援，由 toolkit 建立時自動套用 toolkit 的超連結配置。可直接添加監聽器處理點擊事件。

複雜表單實例：PDE Manifest 編輯器

圖文、超連結、表單元素高度混合，展示 FormText 處理複雜富文本佈局的能力。

總結

Eclipse Forms 四大進階組件各司其職：

• ExpandableComposite：基礎摺疊容器
• Section：企業級區塊，含標題欄/描述/分隔條
• Image Hyperlink：圖文導航元素
• FormText：核心富文本引擎，支援類 HTML、自動 URL、事件處理

善用 TableWrapLayout 配合 form.reflow()，可構建動態響應、專業外觀的豐富客戶端應用。