Eclipse Plug-in - How to toggle SWT Composite by selecting Radio option

這邊主要是說明如何隱藏及顯示所建立的表單項目，如Label、Text等，透過在表單點選不同

的Radio來切換需要登打的項目! 而特別注意的是，需要當下一起隱藏的元件需附加在同一個

Composite，而這個Composite是另外建立的跟其他不須隱藏的元件分開之!

在這邊以Dialog來展示，以繼承TitleAreaDialog建立之

主程式如下：

@Override
protected Control createDialogArea(Composite parent) {
   super.createDialogArea(parent);
  
   setTitle("Form Display");
   setMessage("* Required input option");
  
   Composite form = new Composite(parent, SWT.NONE);
   form.setLayout(new GridLayout(3, false));
   GridData grid = new GridData(GridData.FILL_BOTH);
   grid.heightHint = 150;
   form.setLayoutData(grid);
        
   createLabel(form, "*Type:", 5);
   createRadioGroup(form, new String[]{"Option1", "Option2"});
        
   createComboboxGroup(form, new String[]{"Option1_1", "Option1_2"});
        
   createCheckBoxGroup(form, new String[]{"Option2_1", "Option2_2"});
       
   createLabel(form, "Common:", 5);
   createCommonText(form);
        
   return form;
}

首先，先建立自己的Composite，並且劃分為三個column的排列，主因是從畫面可以知道

第一欄擺Label、再來主要以radio會有兩項，因此設大家的Composite為三欄

一、建立Type

private Composite comboxGroup;
private Composite checkGroup;

private GridData createGridLayout(int hori, int verti){
    return new GridData(SWT.LEFT, SWT.CENTER, false, false, hori, verti);
}

private void createLabel(Composite comp, String name, int indent){
    Label label = new Label(comp, SWT.NONE);
    label.setText(name);
    GridData grid = createGridLayout(1, 1);
    grid.horizontalIndent = indent;
    label.setLayoutData(grid);
}

private void togglePart(Composite comp, boolean hide){
    GridData grid = (GridData) comp.getLayoutData();
    grid.exclude = hide;
    comp.setVisible(!hide);
}

private void createRadioGroup(Composite comp, String radio[]){
    for(int i = 0 ; i < radio.length ; i++){
       Button option = new Button(comp, SWT.RADIO);
       option.setText(radio[i]);
       option.setData(radio[i]);
       GridData grid = createGridLayout(1, 1);
       grid.horizontalIndent = 10;
       option.setLayoutData(grid);
       option.addSelectionListener(new SelectionAdapter(){
          @Override
          public void widgetSelected(SelectionEvent e) {
             String data = (String) e.widget.getData();
             Composite parent = ((Button) e.widget).getParent();
             if(data.equals("Option2")){
                togglePart(comboxGroup, true);
                togglePart(checkGroup, false);
             }else{
                togglePart(checkGroup, true);
                togglePart(comboxGroup, false);
             }
             parent.pack();
         }
     });
   }
}

在這邊需要注意的是，radio option內的event事件

comboxGroup及checkGroup變數皆為全域變數，它們所對應到的分別為

當點選Option1時，顯示comboxGroup的項目、隱藏checkGroup項目；反之Option2剛好顛倒

而這兩個變數在呼叫createComboboxGroup()、createCheckBoxGroup()會建立之

至於togglePart method為這一篇的重點

當傳進來的第二個參數flag為true時，表示要針對第一個參數的composite進行hide

進行hide的時候需要呼叫setVisible，但是若僅呼叫此method會造成該composite雖然隱藏了

但是還會占用位置，因此勢必要設定該composite GridData的exclude為true

官方說明如下：

exclude informs the layout to ignore this control when sizing and positioning controls.

最後，還需要針對這個composite's parent進行pack()，重新resize目前的layout

二、建立Option1_1

private void createComboboxGroup(Composite comp, String option[]){
    comboxGroup = new Composite(comp, SWT.NONE);
    comboxGroup.setLayout(new GridLayout(2, false));
    comboxGroup.setLayoutData(createGridLayout(3, 1));
  
    createLabel(comboxGroup, "*Option1_1:", 0);
  
    Combo combo = new Combo(comboxGroup, SWT.READ_ONLY);
    combo.setItems(option);
    GridData grid = createGridLayout(1, 1);
    grid.widthHint = 110;
    combo.setLayoutData(grid);
}

這個項目的顯示會在點選Option1時顯示之

這裡需重新定義它自己的composite，如此一來利用這個新的composite來建立這個Label和

Combo後，操作這個composite的動作就會一起連動所有的項目!

三、建立Option2_1

private void createCheckBoxGroup(Composite comp, String check[]){
    checkGroup = new Composite(comp, SWT.NONE);
    checkGroup.setLayout(new GridLayout(check.length + 1, false));
    checkGroup.setLayoutData(createGridLayout(3, 1));

    createLabel(checkGroup, "*Option2_1:", 0);
  
    for(int i = 0 ; i < check.length ; i++){
       Button option = new Button(checkGroup, SWT.CHECK);
       option.setText(check[i]);
       option.setData(check[i]);
       option.setLayoutData(createGridLayout(1, 1));
    }
}

這個項目的顯示會在點選Option2時顯示之，過程同二

四、建立Common

private void createCommonText(Composite comp){
    Text text = new Text(comp, SWT.BORDER | SWT.MULTI);
    GridData grid = createGridLayout(2, 1);
    grid.horizontalIndent = 10;
    grid.widthHint = 300;
    grid.heightHint = 40;
    text.setLayoutData(grid);
}

這個項目的目的主要是要呈現當它上面的元件被隱藏或顯示時，它是否會有移動的效果!

DEMO如下