JavaGUI之SWT框架【阶段练习】

文章目录

  • 效果展示
  • 选项卡界面创建
  • 划分右侧区域
  • 填充右侧上方Composite
  • 填充右侧下方Composite
  • 填充左侧Composite
  • 完整代码

SWT基础部分的内容以全部写完,现在让我们将以前学到的知识综合到一起,写一个小demo(无交互功能)

效果展示

JavaGUI之SWT框架【阶段练习】_第1张图片

选项卡界面创建

观察不难发现,整个GUI界面的基石部分是由TabFolder组成,所以我们先将该组件创建出来,后续界面将在此基础上划分编后写

import org.eclipse.swt.SWT;
import org.eclipse.swt.custom.SashForm;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.*;

public class Demo {
    private static Composite tabComposite;
    private static SashForm externalSashForm;
    private static SashForm internalSashForm;

    private static Composite rightUpComposite;
    private static Composite rightDownComposite;

    private static Group group;
    private static Composite leftComposite;

    private static GridLayout commonGridLayout;

    public static void main(String[] args) {
        Display display = new Display();
        Shell shell = new Shell(display);
        shell.setLayout(new FillLayout());
        shell.setSize(1000, 600);

        TabFolder tabFolder = new TabFolder(shell, SWT.NONE);
        TabItem tabItem = new TabItem(tabFolder, SWT.NONE);
        tabItem.setText("选项卡1");
        tabItem.setControl(createTabPage(tabFolder));

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

    /**
     * 创建选项卡控制Control
     * @param tabFolder
     * @return
     */
    private static Control createTabPage(TabFolder tabFolder) {
        tabComposite = new Composite(tabFolder, SWT.NONE);
        // 设置布局
        tabComposite.setLayout(new FillLayout());
        // 创建三列面板
        externalSashForm = new SashForm(tabComposite, SWT.NONE);
        externalSashForm.setLayout(new FillLayout());

        createLeftBody();
        new Composite(externalSashForm, SWT.NONE);
        createRightBody();
        
        externalSashForm.setWeights(new int[]{10, 1, 8});
        return tabComposite;
    }

    private static void createRightBody() {
        // 占位
        new Composite(externalSashForm, SWT.BORDER);
    }

    private static void createLeftBody() {
        // 占位
        new Composite(externalSashForm, SWT.BORDER);
    }
}

阶段性效果

JavaGUI之SWT框架【阶段练习】_第2张图片

这段程序中,我们创建了一个TabFolder选项卡,并创建由tabItem控制的界面。有关TabFolder的部分本文不在赘述,详见JavaGUI之SWT框架【面板容器类 选项卡TabFolder】
,我们主要讲解createTabPage函数。

通过对最终界面的观察,我们不难发现面板需要通过SashForm进行界面划分,问题是如何划分。我们不难发现整体呈现左右结构,我们可以将界面划分为两列,可两列中间如何出现留白呢?我们并没有学习过相关的api能够实现留白,划分两列的方式是无法复原我们想要的效果。实际上,我们可以将其划分为散列,通过控制面板宽度比例营造出留白的效果。这也就是createPage()中下面三段代码的含义

createLeftBody();
new Composite(externalSashForm, SWT.NONE);
createRightBody();

externalSashForm.setWeights(new int[]{5, 1, 4});

首先创建左侧身体部分,然后创建中间的缓冲区,最后创建右侧身体部分,最终设置三部分的宽度比例。

JavaGUI之SWT框架【阶段练习】_第3张图片

划分右侧区域

右侧区域我们依然可以使用SashForm进行划分,划分为上下结构

    private static void createRightBody() {
        // 创建两行
        internalSashForm = new SashForm(externalSashForm, SWT.VERTICAL);
        internalSashForm.setLayout(new FillLayout());

        // 创建右侧上方容器
        rightUpComposite = new Composite(internalSashForm, SWT.BORDER);
        GridLayout gridLayout = new GridLayout(4, true);
        rightUpComposite.setLayout(gridLayout);
        setRightUpComp();

        // 创建右侧下方容器
        rightDownComposite = new Composite(internalSashForm, SWT.BORDER);
        rightDownComposite.setLayout(new FillLayout());
        setRightDownComp();

        internalSashForm.setWeights(new int[]{2, 3});
    }

    /**
     * 设置rightUpComposite;
     */
    private static void setRightUpComp() {
    	// 占位
    	new Composite(internalSashForm, SWT.BORDER);
    }

    /**
     * 设置rightDownComposite
     */
    private static void setRightDownComp() {
        // 占位
    	new Composite(internalSashForm, SWT.BORDER);
    }

JavaGUI之SWT框架【阶段练习】_第4张图片

填充右侧上方Composite

右侧上方的Composite,其内部组件都没有特别需要注意的点。唯一需要强调的是GridDatarightUpComposite组件设置的布局方式是GridLayout,划分的时候我们创建了4列,并且每列的宽度一致。我们在rightUpComposite上添加组件时,可以用GridData控制组件横跨单元格数量等更为细粒度的布局格式,GridData详细的说明请见JavaGUI之SWT框架【GridLayout】。

/**
 * 设置rightUpComposite;
 */
private static void setRightUpComp() {
    Label label1 = new Label(rightUpComposite, SWT.NONE);
    label1.setText("第一行");
    Combo combo1 = new Combo(rightUpComposite, SWT.BORDER);
    combo1.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false, 3, 1));
    combo1.setItems(new String[]{"选项一", "选项二", "选项三"});


    Label label2 = new Label(rightUpComposite, SWT.NONE);
    label2.setText("第二行");
    List list2 = new List(rightUpComposite, SWT.BORDER);
    list2.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false, 2, 1));
    list2.setItems(new String[]{"列表一"});
    new Text(rightUpComposite, SWT.BORDER | SWT.READ_ONLY);

    Label label3 = new Label(rightUpComposite, SWT.NONE);
    label3.setText("第三行");
    for (int i = 0; i < 3; i++) {
        new Button(rightUpComposite, SWT.CHECK).setText("按钮" + i);
    }

    Label label4 = new Label(rightUpComposite, SWT.NONE);
    label4.setText("第四行");
    Text text4 = new Text(rightUpComposite, SWT.BORDER | SWT.READ_ONLY);
    text4.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false, 3, 1));
    text4.setText("这是SWT框架的阶段练习");
}

效果
JavaGUI之SWT框架【阶段练习】_第5张图片

我们可以设置GridLayout,控制划分单元格的水平间距和垂直间距,让组件分布更加均匀
gridLayout.horizontalSpacing = 10; gridLayout.verticalSpacing = 20;
JavaGUI之SWT框架【阶段练习】_第6张图片

填充右侧下方Composite

偷懒了,放个button意思意思

    /**
     * 设置rightDownComposite
     */
    private static void setRightDownComp() {
        new Button(rightDownComposite, SWT.PUSH).setText("放个button意思意思");
    }

这时候可能会有人感到疑惑,为什么button会填充满整个右下侧控件,想要解答这个疑惑,需要FillLayout相关的知识。有关这部分的内容详见JavaGUI框架之SWT【布局FillLayout】

JavaGUI之SWT框架【阶段练习】_第7张图片

填充左侧Composite

代码量偏大,但逻辑是一致的。下方代码给出了详细的注释,读者可自行查看。

    private static void createLeftBody() {
        group = new Group(externalSashForm, SWT.BORDER);
        group.setLayout(new FillLayout());
        group.setText("左侧模块");

        leftComposite = new Composite(group, SWT.NONE);
        leftComposite .setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));

        // 初始化通用网格布局
        commonGridLayout = new GridLayout();
        commonGridLayout.numColumns = 3;
        commonGridLayout.makeColumnsEqualWidth = true;
        commonGridLayout.horizontalSpacing = 40;
        commonGridLayout.verticalSpacing = 20;

        leftComposite .setLayout(commonGridLayout);

        setLeftComp();

    }

    private static void setLeftComp() {
        // 启用触发条件按钮
        Button triggerSwitchButton = new Button(leftComposite , SWT.CHECK);
        triggerSwitchButton.setLayoutData(new GridData(SWT.FILL, SWT.FILL, false, false, 3, 1));
        triggerSwitchButton.setText("启动条件");

        /*-----------------------------------开始板块-------------------------------------*/
        Composite startComp = new Composite(leftComposite , SWT.NONE);
        startComp.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false, 3, 1));
        startComp.setLayout(commonGridLayout);

        // 文本
        Text text1 = new Text(startComp, SWT.READ_ONLY | SWT.BORDER);
        text1.setText("swt阶段练习 启动触发条件");
        text1.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false, 3, 1));

        // 开始-按键触发
        Button startButton1 = new Button(startComp, SWT.RADIO);
        startButton1.setText("按键开始");
        Text startText1 = new Text(startComp, SWT.BORDER);
        startText1.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
        startText1.setText("快捷键");
        // 占位
        new Text(startComp, SWT.NONE);

        // 开始-信号触发
        Button startButton2 = new Button(startComp, SWT.RADIO);
        startButton2.setText("信号开始");
        Text startText2 = new Text(startComp, SWT.BORDER);
        startText2.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
        // 初始化editButton
        Button startEditButton1 = new Button(startComp, SWT.PUSH);
        startEditButton1.setText("编辑按钮");
        startEditButton1.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));

        // 开始-变量触发
        Button startButton3 = new Button(startComp, SWT.RADIO);
        startButton3.setText("变量开始");
        Text startText3 = new Text(startComp, SWT.BORDER);
        startText3.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
        Button startEditButton2 = new Button(startComp, SWT.PUSH);
        startEditButton2.setText("编辑按钮");
        startEditButton2.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));

        /*-----------------------------------停止板块-------------------------------------*/
        Composite endComp = new Composite(leftComposite , SWT.NONE);
        endComp.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false, 3, 1));
        endComp.setLayout(commonGridLayout);

        // 文本2
        Text text2 = new Text(endComp, SWT.READ_ONLY | SWT.BORDER);
        text2.setText("swt阶段练习 停止触发条件");
        text2.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false, 3, 1));

        // 结束-按键触发
        Button endButton1 = new Button(endComp, SWT.RADIO);
        endButton1.setText("按键停止");
        Text endText1 = new Text(endComp, SWT.BORDER);
        endText1.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
        endText1.setText("快捷键");
        // 占位
        new Text(endComp, SWT.NONE);

        // 结束-信号触发
        Button endButton2 = new Button(endComp, SWT.RADIO);
        endButton2.setText("信号停止");
        Text endText2 = new Text(endComp, SWT.BORDER);
        endText2.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
        Button endEditButton1 = new Button(endComp, SWT.PUSH);
        endEditButton1.setText("编辑按钮");
        endEditButton1.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));

        // 结束-变量触发
        Button endButton3 = new Button(endComp, SWT.RADIO);
        endButton3.setText("变量停止");
        Text endText3 = new Text(endComp, SWT.BORDER);
        endText3.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
        Button endEditButton2 = new Button(endComp, SWT.PUSH);
        endEditButton2.setText("编辑按钮");
        endEditButton2.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
    }

效果
JavaGUI之SWT框架【阶段练习】_第8张图片

完整代码

import org.eclipse.swt.SWT;
import org.eclipse.swt.custom.SashForm;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.*;

public class Demo {
    private static Composite tabComposite;
    private static SashForm externalSashForm;
    private static SashForm internalSashForm;

    private static Composite rightUpComposite;
    private static Composite rightDownComposite;

    private static Group group;
    private static Composite leftComposite;

    private static GridLayout commonGridLayout;

    public static void main(String[] args) {
        Display display = new Display();
        Shell shell = new Shell(display);
        shell.setLayout(new FillLayout());
        shell.setSize(1000, 600);

        TabFolder tabFolder = new TabFolder(shell, SWT.NONE);
        TabItem tabItem = new TabItem(tabFolder, SWT.NONE);
        tabItem.setText("选项卡1");
        tabItem.setControl(createTabPage(tabFolder));

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

    /**
     * 创建选项卡控制Control
     * @param tabFolder
     * @return
     */
    private static Control createTabPage(TabFolder tabFolder) {
        tabComposite = new Composite(tabFolder, SWT.NONE);
        // 设置布局
        tabComposite.setLayout(new FillLayout());
        // 创建三列面板
        externalSashForm = new SashForm(tabComposite, SWT.NONE);
        externalSashForm.setLayout(new FillLayout());

        createLeftBody();
        new Composite(externalSashForm, SWT.NONE);
        createRightBody();
        
        externalSashForm.setWeights(new int[]{10, 1, 8});
        return tabComposite;
    }

    private static void createRightBody() {
        // 创建两行
        internalSashForm = new SashForm(externalSashForm, SWT.VERTICAL);
        internalSashForm.setLayout(new FillLayout());

        // 创建右侧上方容器
        rightUpComposite = new Composite(internalSashForm, SWT.BORDER);
        GridLayout gridLayout = new GridLayout(4, true);
        gridLayout.horizontalSpacing = 10;
        gridLayout.verticalSpacing = 20;
        rightUpComposite.setLayout(gridLayout);
        setRightUpComp();

        // 创建右侧下方容器
        rightDownComposite = new Composite(internalSashForm, SWT.BORDER);
        rightDownComposite.setLayout(new FillLayout());
        setRightDownComp();

        internalSashForm.setWeights(new int[]{2, 3});
    }

    /**
     * 设置rightUpComposite;
     */
    private static void setRightUpComp() {
        Label label1 = new Label(rightUpComposite, SWT.NONE);
        label1.setText("第一行");
        Combo combo1 = new Combo(rightUpComposite, SWT.BORDER);
        combo1.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false, 3, 1));
        combo1.setItems(new String[]{"选项一", "选项二", "选项三"});


        Label label2 = new Label(rightUpComposite, SWT.NONE);
        label2.setText("第二行");
        List list2 = new List(rightUpComposite, SWT.BORDER);
        list2.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false, 2, 1));
        list2.setItems(new String[]{"列表一"});
        new Text(rightUpComposite, SWT.BORDER | SWT.READ_ONLY);

        Label label3 = new Label(rightUpComposite, SWT.NONE);
        label3.setText("第三行");
        for (int i = 0; i < 3; i++) {
            new Button(rightUpComposite, SWT.CHECK).setText("按钮" + i);
        }

        Label label4 = new Label(rightUpComposite, SWT.NONE);
        label4.setText("第四行");
        Text text4 = new Text(rightUpComposite, SWT.BORDER | SWT.READ_ONLY);
        text4.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false, 3, 1));
        text4.setText("这是SWT框架的阶段练习");
    }

    /**
     * 设置rightDownComposite
     */
    private static void setRightDownComp() {
        new Button(rightDownComposite, SWT.PUSH).setText("放个button意思意思");
    }

    private static void createLeftBody() {
        group = new Group(externalSashForm, SWT.BORDER);
        group.setLayout(new FillLayout());
        group.setText("左侧模块");

        leftComposite = new Composite(group, SWT.NONE);
        leftComposite .setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));

        // 初始化通用网格布局
        commonGridLayout = new GridLayout();
        commonGridLayout.numColumns = 3;
        commonGridLayout.makeColumnsEqualWidth = true;
        commonGridLayout.horizontalSpacing = 40;
        commonGridLayout.verticalSpacing = 20;

        leftComposite .setLayout(commonGridLayout);

        setLeftComp();

    }

    private static void setLeftComp() {
        // 启用触发条件按钮
        Button triggerSwitchButton = new Button(leftComposite , SWT.CHECK);
        triggerSwitchButton.setLayoutData(new GridData(SWT.FILL, SWT.FILL, false, false, 3, 1));
        triggerSwitchButton.setText("启动条件");

        /*-----------------------------------开始板块-------------------------------------*/
        Composite startComp = new Composite(leftComposite , SWT.NONE);
        startComp.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false, 3, 1));
        startComp.setLayout(commonGridLayout);

        // 文本
        Text text1 = new Text(startComp, SWT.READ_ONLY | SWT.BORDER);
        text1.setText("swt阶段练习 启动触发条件");
        text1.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false, 3, 1));

        // 开始-按键触发
        Button startButton1 = new Button(startComp, SWT.RADIO);
        startButton1.setText("按键开始");
        Text startText1 = new Text(startComp, SWT.BORDER);
        startText1.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
        startText1.setText("快捷键");
        // 占位
        new Text(startComp, SWT.NONE);

        // 开始-信号触发
        Button startButton2 = new Button(startComp, SWT.RADIO);
        startButton2.setText("信号开始");
        Text startText2 = new Text(startComp, SWT.BORDER);
        startText2.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
        // 初始化editButton
        Button startEditButton1 = new Button(startComp, SWT.PUSH);
        startEditButton1.setText("编辑按钮");
        startEditButton1.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));

        // 开始-变量触发
        Button startButton3 = new Button(startComp, SWT.RADIO);
        startButton3.setText("变量开始");
        Text startText3 = new Text(startComp, SWT.BORDER);
        startText3.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
        Button startEditButton2 = new Button(startComp, SWT.PUSH);
        startEditButton2.setText("编辑按钮");
        startEditButton2.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));

        /*-----------------------------------停止板块-------------------------------------*/
        Composite endComp = new Composite(leftComposite , SWT.NONE);
        endComp.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false, 3, 1));
        endComp.setLayout(commonGridLayout);

        // 文本2
        Text text2 = new Text(endComp, SWT.READ_ONLY | SWT.BORDER);
        text2.setText("swt阶段练习 停止触发条件");
        text2.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false, 3, 1));

        // 结束-按键触发
        Button endButton1 = new Button(endComp, SWT.RADIO);
        endButton1.setText("按键停止");
        Text endText1 = new Text(endComp, SWT.BORDER);
        endText1.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
        endText1.setText("快捷键");
        // 占位
        new Text(endComp, SWT.NONE);

        // 结束-信号触发
        Button endButton2 = new Button(endComp, SWT.RADIO);
        endButton2.setText("信号停止");
        Text endText2 = new Text(endComp, SWT.BORDER);
        endText2.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
        Button endEditButton1 = new Button(endComp, SWT.PUSH);
        endEditButton1.setText("编辑按钮");
        endEditButton1.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));

        // 结束-变量触发
        Button endButton3 = new Button(endComp, SWT.RADIO);
        endButton3.setText("变量停止");
        Text endText3 = new Text(endComp, SWT.BORDER);
        endText3.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
        Button endEditButton2 = new Button(endComp, SWT.PUSH);
        endEditButton2.setText("编辑按钮");
        endEditButton2.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
    }
}

你可能感兴趣的:(GUI,SWT,Java,阶段练习)