SWT/JFace Group 分組控件樣式與表單應用：邊框效果與錯誤回報介面實作

Group 控件概述

org.eclipse.swt.widgets.Group 是一個帶有標題與邊框的容器控件，用於將相關控件視覺分組。它繼承自 Composite，可包含任意子控件並支援佈局管理器。

建構子：new Group(parent, style)。Style 位元組合決定邊框外觀：

• SWT.NULL：無邊框 (僅標題)
• SWT.SHADOW_ETCHED_IN：內凹蝕刻效果 (3D 內陷)
• SWT.SHADOW_ETCHED_OUT：外凸蝕刻效果 (3D 突出)
• SWT.SHADOW_IN：內陷邊框
• SWT.SHADOW_OUT：外凸邊框

範例一：六種邊框樣式對比展示

建立 6 個 Group 並排展示不同 Style 效果，第一個 Group 內放置 Label 示範無標題分組。

package swt_jface.demo9;

import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Group;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Shell;

public class GroupExamples {
    Display display = new Display();
    Shell shell = new Shell(display);

    public GroupExamples() {
        // Group 0: 無邊框，內含 Label
        Group group0 = new Group(shell, SWT.NULL);
        group0.setLayout(new FillLayout());
        Label label = new Label(group0, SWT.NULL);
        label.setAlignment(SWT.CENTER);
        label.setText("a group without title.");

        // Group 1-5: 不同陰影樣式
        Group group1 = new Group(shell, SWT.NULL); group1.setText("SWT.NULL");
        Group group2 = new Group(shell, SWT.SHADOW_ETCHED_IN); group2.setText("SWT.SHADOW_ETCHED_IN");
        Group group3 = new Group(shell, SWT.SHADOW_ETCHED_OUT); group3.setText("SWT.SHADOW_ETCHED_OUT");
        Group group4 = new Group(shell, SWT.SHADOW_IN); group4.setText("SWT.SHADOW_IN");
        Group group5 = new Group(shell, SWT.SHADOW_OUT); group5.setText("SWT.SHADOW_OUT");

        Group[] groups = {group0, group1, group2, group3, group4, group5};
        for (int i = 0; i < groups.length; i++) {
            groups[i].setBounds(10, 10 + i * 50, 300, 40); // 簡單絕對定位
        }

        shell.pack();
        shell.open();
        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) display.sleep();
        }
        display.dispose();
    }

    public static void main(String[] args) {
        new GroupExamples();
    }
}

範例二：實戰應用 - 錯誤回報表單

使用 GridLayout 佈局，兩個 Group 分別包裝「錯誤詳情」與「連線設定」，展示 Group 在表單區塊劃分中的實際應用。

package swt_jface.demo9;

import org.eclipse.swt.SWT;
import org.eclipse.swt.graphics.Image;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Combo;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Group;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Text;

public class BugReport {
    Display display = new Display();
    Shell shell = new Shell(display);

    public BugReport() {
        shell.setLayout(new GridLayout(1, true));
        shell.setImage(new Image(display, "C:/icons/bug.gif")); // 視窗圖示
        shell.setText("Bug report page");

        // 區塊 1: 錯誤詳情
        Group groupBug = new Group(shell, SWT.NULL);
        groupBug.setText("Bug details");
        groupBug.setLayout(new GridLayout(2, false));
        groupBug.setLayoutData(new GridData(GridData.FILL_BOTH)); // 填滿可用空間

        new Label(groupBug, SWT.NULL).setText("Priority");
        Combo combo = new Combo(groupBug, SWT.BORDER);
        combo.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));

        new Label(groupBug, SWT.NULL).setText("Details");
        Text text = new Text(groupBug, SWT.BORDER | SWT.MULTI);
        text.setLayoutData(new GridData(GridData.FILL_BOTH));

        // 區塊 2: 連線設定
        Group groupProxy = new Group(shell, SWT.NULL);
        groupProxy.setText("Connection setting");
        groupProxy.setLayout(new GridLayout(2, false));
        groupProxy.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));

        new Label(groupProxy, SWT.NULL).setText("Proxy host");
        Text textHost = new Text(groupProxy, SWT.SINGLE | SWT.BORDER);
        textHost.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
        new Label(groupProxy, SWT.NULL).setText("Proxy port");
        Text textPort = new Text(groupProxy, SWT.SINGLE | SWT.BORDER);
        textPort.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));

        // 提交按鈕
        Button button = new Button(shell, SWT.PUSH);
        button.setLayoutData(new GridData(GridData.HORIZONTAL_ALIGN_CENTER));
        button.setText("Submit bug report");

        shell.pack();
        shell.open();
        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) display.sleep();
        }
        display.dispose();
    }

    public static void main(String[] args) {
        new BugReport();
    }
}

Group 使用最佳實踐

1. 佈局管理器選擇

• GridLayout：最常用，適合表單式「標籤-輸入框」雙欄對齊，配合 GridData.FILL_HORIZONTAL 讓輸入框隨視窗縮放。
• FillLayout：單一子控件填滿 Group (如範例 1 的 Group 0)。
• FormLayout：精確控制邊距對齊，適合複雜對齊需求。

2. 視覺層級與無障礙

• 使用 setText(String) 設定標題，螢幕閱讀器可識別分組語意。
• 避免巢狀過深 (Group 包 Group 包 Group)，導致視覺雜訊與 Tab 鍵導航混亂。
• 標題文字建議簡潔明確，如「連線設定」優於「設定區塊 1」。

3. 動態顯示/隱藏

Group 可作為邏輯區塊的可見性開關：

groupProxy.setVisible(false); // 隱藏整個區塊
parent.layout(true); // 父容器重新佈局，空間自動收合/展開

4. 樣式跨平台一致性

SHADOW_ETCHED_IN/OUT 在 Windows/Linux/macOS 上渲染差異較大。若需統一品牌風格，建議統一使用 SWT.NULL 或 SWT.SHADOW_IN，並搭配 CSS (e4 RCP) 或自訂 PaintListener 繪製邊框。