Eclipse Plug-in - Set GridData to create Table Layout

在Eclipse Plug-in內,我們有機會建置一個視窗來擺放相關的UI操作介面,假設我們要設定三

欄來擺放,且第二欄內有幾個按鈕那要怎麼設定呢? 如下:


首先,我們可以先設定這個視窗composite的layout,然後assign進composite內的元件(ex. 

Button、List、Label、Text)就必須設定要跨幾個欄的部分了! 相關程式碼如下:

PS. 本範例是extends TitleAreaDialog的dialog example

您可以在其他頁面new自己建立的dialog class,然後利用object.open()即可以彈出這個視窗!

@Override
protected Control createDialogArea(Composite parent) {
    Composite composite = new Composite(parent, SWT.NONE | SWT.BORDER);
        
    GridLayout layout = new GridLayout(3, false);
    composite.setLayout(layout);

    Label label = new Label(composite, SWT.NONE);
    label.setText("Workspace set name");
    label.setLayoutData(new GridData(SWT.LEFT, SWT.TOP, false, false, 3, 1));
  
    Text inputSetName = new Text(composite, SWT.BORDER);
    inputSetName.setLayoutData(new GridData(SWT.FILL, SWT.TOP, false, false, 3, 1));
  
    label = new Label(composite, SWT.NONE);
    label.setText("Workspace Set content");
    label.setLayoutData(new GridData(SWT.LEFT, SWT.TOP, false, false, 3, 1));

    GridData grid = new GridData(SWT.LEFT, SWT.TOP, false, false, 1, 4);
    grid.widthHint = 200;
    grid.heightHint = 200;
    notgroupSets.setLayoutData(grid);
      
    setButtonInitialize(new Button(composite, SWT.NONE), "Add ->");
      
    List groupSets = new List(composite, SWT.SINGLE | SWT.BORDER | SWT.V_SCROLL);
    grid = new GridData(SWT.RIGHT, SWT.TOP, false, false, 1, 4);
    grid.widthHint = 200;
    grid.heightHint = 200;
    groupSets.setLayoutData(grid);

    setButtonInitialize(new Button(composite, SWT.NONE), "Add All ->");
      
    setButtonInitialize(new Button(composite, SWT.NONE), "<- Remove");
      
    setButtonInitialize(new Button(composite, SWT.NONE), "<- Remove All");
      
    return composite;
 }
 
 public void setButtonInitialize(Button btn, String name){
      GridData grid = new GridData(SWT.FILL, SWT.TOP, false, false, 1, 1);
      grid.widthHint = 100;
      grid.heightHint = 25;
      btn.setText(name);
      btn.setLayoutData(grid);
      btn.setEnabled(false);
 }

在這邊請注意new GridData部分,在第5、6的參數可以設定當下這個元件跨越的row, column

public GridData(int horizontalAlignment,
        int verticalAlignment,
        boolean grabExcessHorizontalSpace,
        boolean grabExcessVerticalSpace,
        int horizontalSpan,
        int verticalSpan)

以label而言,它只需設horizontal (column)為3, vertical (row) 為1

而左邊及右邊List選項須根據第二欄項目個數來設定vertical = 4, horizonal = 1

但是要注意建置順序,左邊List先建立、再來是中間第一個button、過來是右邊List

接著才是下面三個button。

好比網頁table的建置模式如下:



留言