【插件開發】—— 5 SWT控件以及布局使用

 

前文回顧：

1 插件學習篇

2 簡單的建立插件工程以及模型文件分析

3 利用擴展點，開發透視圖

4 SWT編程須知

 

　　經過前幾篇的介紹，多少對SWT又有了一些認識，那么這篇繼續來看一下一些控件的組合使用。

　　首先是幾種簡單的控件，Label,Text,Button,Combo這些都是些常用的簡單框架，但是為了能夠構造出整齊的布局，還是要多花些心思的。

　　除了這些簡單的控件外，還有點復雜的控件，比如Table和樹、選項卡和菜單等等，這里就先不做介紹了。

 

　　為了整個這些控件，經常要使用兩個組合控件以及多種布局。

　　1 【Group 組】，這個組可以為我們生成一個帶有線的框，這樣可以把雜亂的控件放到一個規整的容器內。

　　2 【Composite 組合控件】，它是為了拼接一些簡單的控件，形成具有復雜功能的整合控件。

　　比如文件路徑的瀏覽，往往就需要一個文件瀏覽的按鈕，和一個文本框。

 

　　這里先放出一段代碼，代碼中使用到了簡單的布局模型GridLayout(),以及組和組合控件，還有一些簡單的控件。形成一個登陸界面，並且單擊按鈕可以出發響應事件。效果圖如下：

　　登錄前：

　　登陸后：

　　實現代碼如下：

package com.xingoo.plugin.swttest.test;

import org.eclipse.swt.SWT;
import org.eclipse.swt.events.SelectionAdapter;
import org.eclipse.swt.events.SelectionEvent;
import org.eclipse.swt.layout.FillLayout;
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.Composite;
import org.eclipse.swt.widgets.Group;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.MessageBox;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Text;

import com.xingoo.plugin.swttest.Abstract.AbstractExample;

public class Test extends AbstractExample{
    private Label infoLabel;
    private Text usernameText;
    private Text passwordText;
    private Combo roleCombo;
    
    public static void main(String[] args) {
        new Test().run();
    }
    public void todo(Shell shell) {
        Group testGroup = new Group(shell,SWT.NONE);
        testGroup.setText("User Login");
        GridLayout layout = new GridLayout();
        layout.numColumns = 2;
        layout.marginWidth = 30;
        layout.marginHeight = 10;
        testGroup.setLayout(layout);
        testGroup.setLayoutData(new GridData(GridData.FILL_HORIZONTAL)); 
        {
            Composite composite = new Composite(testGroup,SWT.NONE);
            GridLayout layoutComposite = new GridLayout();
            layoutComposite.numColumns = 2;
            layoutComposite.marginHeight = 1;
            composite.setLayout(layoutComposite);
            composite.setLayoutData(new GridData(SWT.FILL,SWT.FILL,true,true,2,2));
            
            infoLabel = new Label(composite,SWT.NONE);
            infoLabel.setText("請輸入用戶名 密碼");
            infoLabel.setLayoutData(new GridData(GridData.FILL_BOTH));
            infoLabel.setAlignment(SWT.RIGHT);
        }
        {
            Label usernameLabel = new Label(testGroup,SWT.NONE);
            usernameLabel.setText("username:");
            
            usernameText = new Text(testGroup,SWT.BORDER);
            usernameText.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
        }
        {
            Label passwordLabel = new Label(testGroup,SWT.NONE);
            passwordLabel.setText("password:");
            
            passwordText = new Text(testGroup,SWT.BORDER | SWT.PASSWORD);
            passwordText.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
        }
        {
            Label roleLabel = new Label(testGroup,SWT.NONE);
            roleLabel.setText("role:");
            
            roleCombo = new Combo(testGroup,SWT.DROP_DOWN);
            roleCombo.setItems(new String[]{"Admin","custom"});
            roleCombo.select(1);
        }
        {
            new Label(testGroup,SWT.NONE);
            
            Button rememberPWBtn = new Button(testGroup,SWT.CHECK);
            rememberPWBtn.setText("記住密碼");
        }
        {
            new Label(testGroup,SWT.NONE);
            
            Button autoLoginBtn = new Button(testGroup,SWT.CHECK);
            autoLoginBtn.setText("自動登錄");
        }
        {
            new Label(testGroup,SWT.NONE);
            
            Button loginBtn = new Button(testGroup,SWT.PUSH);
            loginBtn.setText("登錄");
            
            loginBtn.addSelectionListener(new SelectionAdapter() {
                public void widgetSelected(SelectionEvent evt){
                    infoLabel.setText("登陸成功");
                    
                    usernameText.setText("");
                    usernameText.setEnabled(false);
                    
                    passwordText.setText("");
                    passwordText.setEnabled(false);
                    
                    roleCombo.setEnabled(false);
                }
            });
        }
    }
}

　　注意其中的一些技巧：

　　30-36行：我們創建了一個組控件，並且使用了網格布局，設置每行有兩列。並且設置了組內填充邊界，marginWidth以及marginHeight。

　　39-49行：我們創建了一個組合對象，使他占有了兩個列元素。並且設置組內為兩列的網格布局。

　　

　　關於事件的監聽，之后也會搜集整理出一些常用的事件。

　　剩下的就比較好理解了，當沒有空間元素填補的時候，為了防止布局錯亂，創建了一個空的Label對象用來占位。

　　new Label(testGroup,SWT.NONE);

　　

　　這里面使用到了一個前文提到的抽象類，這里再貼出來一次。

package com.xingoo.plugin.swttest.Abstract;

import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

public abstract class AbstractExample{
    public void run(){
        Display display = new Display();
        Shell shell = new Shell(display);
        shell.setText("shell example");
        shell.setBounds(200,200,400,280);
        shell.setLayout(new FillLayout());
        todo(shell);
        shell.open();
        
        while(!shell.isDisposed()){
            if(!display.readAndDispatch())
                display.sleep();
        }
        //dispose the resource
        display.beep();
        display.dispose();
    }
    public abstract void todo(Shell shell);//extension something here
}

　　后續將會更新，復雜控件以及布局模型的介紹。