文章目录
- 效果展示
- 选项卡界面创建
- 划分右侧区域
- 填充右侧上方Composite
- 填充右侧下方Composite
- 填充左侧Composite
- 完整代码
SWT基础部分的内容以全部写完,现在让我们将以前学到的知识综合到一起,写一个小demo(无交互功能)
效果展示
选项卡界面创建
观察不难发现,整个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);
}
}
阶段性效果
这段程序中,我们创建了一个TabFolder选项卡,并创建由tabItem控制的界面。有关TabFolder的部分本文不在赘述,详见JavaGUI之SWT框架【面板容器类 选项卡TabFolder】
,我们主要讲解createTabPage
函数。
通过对最终界面的观察,我们不难发现面板需要通过SashForm进行界面划分,问题是如何划分。我们不难发现整体呈现左右结构,我们可以将界面划分为两列,可两列中间如何出现留白呢?我们并没有学习过相关的api能够实现留白,划分两列的方式是无法复原我们想要的效果。实际上,我们可以将其划分为散列,通过控制面板宽度比例营造出留白的效果。这也就是createPage()
中下面三段代码的含义
createLeftBody();
new Composite(externalSashForm, SWT.NONE);
createRightBody();
externalSashForm.setWeights(new int[]{5, 1, 4});
首先创建左侧身体部分,然后创建中间的缓冲区,最后创建右侧身体部分,最终设置三部分的宽度比例。
划分右侧区域
右侧区域我们依然可以使用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);
}
填充右侧上方Composite
右侧上方的Composite,其内部组件都没有特别需要注意的点。唯一需要强调的是GridData
。rightUpComposite
组件设置的布局方式是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框架的阶段练习");
}
效果
我们可以设置GridLayout,控制划分单元格的水平间距和垂直间距,让组件分布更加均匀
gridLayout.horizontalSpacing = 10; gridLayout.verticalSpacing = 20;
填充右侧下方Composite
偷懒了,放个button意思意思
/**
* 设置rightDownComposite
*/
private static void setRightDownComp() {
new Button(rightDownComposite, SWT.PUSH).setText("放个button意思意思");
}
这时候可能会有人感到疑惑,为什么button会填充满整个右下侧控件,想要解答这个疑惑,需要FillLayout
相关的知识。有关这部分的内容详见JavaGUI框架之SWT【布局FillLayout】
填充左侧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));
}
效果
完整代码
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));
}
}