JAVA.SWT/JFace: RCP应用篇之Eclipse表单（三）

《Eclipse SWT/JFACE 核心应用》 清华大学出版社 24 Eclipse表单

24.4.1 表格布局（TableWrapLayout）

表格布局（TableWrapLayout）是基于网格的布局，它与 SWT 的通用 GridLayout 非常类似，不同之处在于，布局规则更类似于 HTML 中的布局算法，可以支持文本的自动换行。

下面来比较一下 GridLayout 与 TableWrapLayout 两种布局的效果：



通过两种布局的比较可以看出，TableWrapLayout 可以将超出的文本折行显示，这是在 GridLayout 中所不能实现的。

与 GridLayout 对应的 GridData 类似，TableWrapLayout 对应 TableWrapData。下面就以一个复杂的示例程序来说明如何使用 TableWrapLayout 进行布局设置。

package com.testrcp.myrcp.forms;

import org.eclipse.swt.SWT;

import org.eclipse.swt.widgets.Label;

//import org.eclipse.ui.forms.IManagedForm;

import org.eclipse.ui.forms.IManagedForm;

import org.eclipse.ui.forms.editor.FormEditor;

import org.eclipse.ui.forms.editor.FormPage;

import org.eclipse.ui.forms.widgets.FormToolkit;

import org.eclipse.ui.forms.widgets.ScrolledForm;

import org.eclipse.ui.forms.widgets.TableWrapData;

import org.eclipse.ui.forms.widgets.TableWrapLayout;

public class FirstPage extends FormPage {

public static final String ID = "com.testrcp.myrcp.forms.FirstPage";

public FirstPage(FormEditor editor) {

// 构造方法，设置Form页的ID和名称

super(editor, ID, "第一页");

}

// 覆盖父类中的方法

// 在该方法中创建表单区域的各种控件

protected void createFormContent(IManagedForm managedForm) {

// 通过managedForm对象获得表单工具对象

FormToolkit toolkit = managedForm.getToolkit();

// 通过managedForm对象获得ScrolledForm可滚动的表单对象

ScrolledForm form = managedForm.getForm();

// 设置表单文本

form.setText("这是第一页，Hello, Eclipse 表单");

// 创建表格布局

TableWrapLayout layout = new TableWrapLayout();

layout.numColumns = 2;// 表格的列数

layout.bottomMargin = 10;// 下补白

layout.topMargin = 10;// 上补白

layout.leftMargin = 10;// 左补白

layout.rightMargin = 10;// 右补白

form.getBody().setLayout(layout);// 设置表格的布局

// 创建第一个标签

@SuppressWarnings("unused")

Label l1 = toolkit.createLabel(form.getBody(), "这是很长的一段文本文本1", SWT.WRAP);

// 创建第二个标签

Label l2 = toolkit.createLabel(form.getBody(), "这是文本2", SWT.WRAP);

// 创建一个TableWrapData对象，设置为水平和垂直充满式填充

TableWrapData td = new TableWrapData(TableWrapData.FILL_GRAB);

// 将布局数据应用到第二个标签

l2.setLayoutData(td);

Label l3 = toolkit.createLabel(form.getBody(), "这是文本3", SWT.WRAP);

// 第三个标签的布局数据

td = new TableWrapData();

td.colspan = 2;// 设置单元格的跨两列

l3.setLayoutData(td);

// 第四个标签的布局数据

Label l4 = toolkit.createLabel(form.getBody(), "这是文本4", SWT.WRAP);

td = new TableWrapData();

td.rowspan = 2;// 设置单元格跨两行

td.grabVertical = true;// 垂直抢占

l4.setLayoutData(td);

@SuppressWarnings("unused")

Label l5 = toolkit.createLabel(form.getBody(), "这是文本5", SWT.WRAP);

@SuppressWarnings("unused")

Label l6 = toolkit.createLabel(form.getBody(), "这是文本6", SWT.WRAP);

form.getBody().setBackground(form.getBody().getDisplay().getSystemColor(SWT.COLOR_WIDGET_BACKGROUND));

}

}

效果如下：



缩放后的效果如下：



24.4.2 列布局（ColumnLayout）

列布局（ColumnLayout）与 SWT 中的 RowLayout 布局类似，相对于 TableWrapLayout 布局简单的所。该种布局的列数可根据窗口的大小进行调整，总是试图使用更多的列来显示。当窗口宽度减小时，列数也随之减少。总之，列布局（ColumnLayout）的目的是为了使各个控件都均匀的分布在界面上。

package com.testrcp.myrcp.forms;

import org.eclipse.swt.SWT;

import org.eclipse.swt.layout.GridLayout;

import org.eclipse.swt.widgets.Composite;

import org.eclipse.ui.forms.IManagedForm;

import org.eclipse.ui.forms.editor.FormEditor;

import org.eclipse.ui.forms.editor.FormPage;

import org.eclipse.ui.forms.events.ExpansionAdapter;

import org.eclipse.ui.forms.events.ExpansionEvent;

import org.eclipse.ui.forms.widgets.ColumnLayout;

import org.eclipse.ui.forms.widgets.FormToolkit;

import org.eclipse.ui.forms.widgets.ScrolledForm;

import org.eclipse.ui.forms.widgets.Section;

public class SecondPage extends FormPage {

public static final String ID = "com.testrcp.myrcp.forms.SecondPage";

public SecondPage(FormEditor editor) {

super(editor, ID, "第二页");

}

protected void createFormContent(IManagedForm managedForm) {

ScrolledForm form = managedForm.getForm();

form.setText("ColumnLayout");

//创建列布局

ColumnLayout layout = new ColumnLayout();

layout.topMargin = 0;//上补白

layout.bottomMargin = 5;//下补白

layout.leftMargin = 10;//左补白

layout.rightMargin = 10;//右补白

layout.horizontalSpacing = 10;//水平方向控件的距离

layout.verticalSpacing = 10;//垂直方向控件的距离

layout.maxNumColumns = 4;//最大的列数

layout.minNumColumns = 1;//最小的列数

form.getBody().setLayout(layout);//设置表单的布局为列布局

//创建四个内容区

for (int i = 0; i < 4; i++)

createSectionWithLinks(managedForm, "Section" + i, "This is Section " + i, i);

}

//创建内容区及其控件

private void createSectionWithLinks(IManagedForm mform, String title, String desc, int nlinks) {

//创建内容去面板

Composite client = createSection(mform, title, desc, 1);

FormToolkit toolkit = mform.getToolkit();

//创建内容区中的控件

for (int i = 1; i <= nlinks; i++)

toolkit.createHyperlink(client, "link" + i, SWT.WRAP);

}

//创建内容区的方法

private Composite createSection(IManagedForm mform, String title, String desc, int numColumns) {

final ScrolledForm form = mform.getForm();

FormToolkit toolkit = mform.getToolkit();

//创建内容区

Section section = toolkit.createSection(form.getBody(), Section.TWISTIE | Section.TITLE_BAR | Section.DESCRIPTION | Section.EXPANDED);

section.setText(title);

section.setDescription(desc);

Composite client = toolkit.createComposite(section);

GridLayout layout = new GridLayout();

layout.marginWidth = layout.marginHeight = 0;

layout.numColumns = numColumns;

client.setLayout(layout);

//设置内容区的面板

section.setClient(client);

section.addExpansionListener(new ExpansionAdapter() {

public void expansionStateChanged(ExpansionEvent e) {

form.reflow(false);

}

});

return client;

}

}

显示效果如下：



奇怪，上面的第二行显示在中间了，谁会调整的给我留言。

调整宽度后的效果：



24.5 表单的高级应用

表单的高级应用部分主要体现在提供了 Master/Details 模式的应用，通过表单可以轻松的实现这种模式。

24.5.1 Master/Details 模式

Master/Details 是 UI 设计中常见的一种模式。该种模式由一组（列表或成树状结构）Master 和一个被选中 Master 驱动的 Details 集组成。Master 是一些不同的对象，通过对 Master 的驱动，驱动 Details 的 UI 发生变化。Master/Details 非常适用于 Eclipse 表单编程。

例如，编辑 plugin.xml 文件的扩展页面时就是使用的该种模式。如下图，编辑扩展的左侧是所有的扩展列表，也就是 Master 部分。当单击左侧的不同扩展信息时，右侧会产生不同的详细信息，也就是Detail 部分。



24.5.2 实现 Master/Details 示例程序

下面就以一个具体的例子来说明如何使用 Eclipse 表单来实现 Master/Detail 的界面效果。

在这个示例程序中，作为 Master 的一个树界面，显示的是文件的结构目录，但左侧选中不同的文件或文件夹，右侧的 Detail 部分显示对应的详细信息。随着选中的不同，详细信息也不同。

显示文件夹时：



显示文件时：



选择“垂直布局”后的显示效果：



下面就来详细看一下如何实现这样的程序，步骤如下：

（1）该页面为编辑器页面的一个页面，首页首先要在对应的编辑器页面添加一个页面。在 MyMutiForm.java 类的源代码中，在 addPages 方法中添加一个页面，代码如下：

addPage(new MasterDetailPage(this));

（2）所添加的 MasterDetailPage 对象，即为本例所示的 Master/Detail 页面。与之前所学习的创建页面的方法相同，该类继承自 FormPage 类，以下为代码：

package com.testrcp.myrcp.forms;

import org.eclipse.ui.forms.IManagedForm;

import org.eclipse.ui.forms.editor.FormEditor;

import org.eclipse.ui.forms.editor.FormPage;

import org.eclipse.ui.forms.widgets.ScrolledForm;

import com.testrcp.myrcp.forms.advance.FileMasterDetailsBlock;

public class MasterDetailPage extends FormPage {

public static final String ID = "com.testrcp.myrcp.forms.MasterDetailPage";

// 声明MasterDetail页面部分对象

private FileMasterDetailsBlock block;

public MasterDetailPage(FormEditor editor) {

super(editor, ID, "Master/Detail页");

block = new FileMasterDetailsBlock(this);

}

/*

* ManagedForm封装了form元素的生命周期管理与各个form元素之间的事件通知

* ManagedForm本身并不是一个form，他包含了一个form并且可以注册IFormPart。

* 可以将ManagedForm看作是'viewers'，form和managed form之间的关系就好像

* Table与TableViewer的关系一样。

*/

protected void createFormContent(IManagedForm managedForm) {

// 获得表单对象

ScrolledForm form = managedForm.getForm();

// 设置表单的标题

form.setText("这是一个浏览文件的Master/Detail页面");

// 该方法非常重要，负责创建Master和Detail区域，尽量在最后调用

block.createContent(managedForm);

}

}

该页面与之前使用的编辑器页面不同，在构造方法中创建了一个 FileMasterDetailsBlock 对象，通过该对象的 createContent 方法可以创建 Master/Detail 页面中的各种控件。稍后详细讲述该类。

（3）具体创建页面控件的部分是在 FileMasterDetailsBlock 类中实现的。该类继承自 MasterDetailsBlock，具有 Master/Detail 模式的页面类都要继承自 MasterDetailsBlock 类，并实现该类的3个抽象方法。

◇ createMasterPart：在该方法中创建 Master 部分的控件，可以是表格、树或列表等。本例中使用的是 TreeViewer。

◇ createToolBarActions：创建页面的 Action 操作的方法，本例中创建两个按钮，可以设置垂直布局或是水平布局。

◇ registerPages：注册 Master 对应的 Detail 部分的控件，可同时注册多个 Detail 页面。实际上，一个 Master/Detail 页面是通过一个 SashForm 来布局的，Master 放置在 SashForm 的左侧或上侧，而 Detail 则放置在 SashForm 的右侧或下侧。

FileMasterDetailsBlock.java：

package com.testrcp.myrcp.forms.advance;

import java.io.File;

import myrcp.Activator;

import org.eclipse.jface.action.Action;

import org.eclipse.jface.viewers.*;

import org.eclipse.swt.SWT;

import org.eclipse.swt.graphics.Image;

import org.eclipse.swt.layout.*;

import org.eclipse.swt.widgets.*;

import org.eclipse.ui.*;

import org.eclipse.ui.forms.*;

import org.eclipse.ui.forms.editor.FormPage;

import org.eclipse.ui.forms.widgets.*;

public class FileMasterDetailsBlock extends MasterDetailsBlock {

@SuppressWarnings("unused")

private FormPage page;

public FileMasterDetailsBlock(FormPage page) {

this.page = page;

}

//父类中的抽象方法，创建Master部分

protected void createMasterPart(final IManagedForm managedForm, Composite parent) {

FormToolkit toolkit = managedForm.getToolkit();

//创建一个内容区

Section section = toolkit.createSection(parent, Section.DESCRIPTION | Section.TITLE_BAR);

section.setText("浏览文件");

section.marginWidth = 10;

section.marginHeight = 5;

//创建内容区的面板

Composite client = toolkit.createComposite(section, SWT.WRAP);

//绘制该面板的边框，与表单的风格一致

toolkit.paintBordersFor(client);

GridLayout layout = new GridLayout();

layout.numColumns = 2;

layout.marginWidth = 2;

layout.marginHeight = 2;

client.setLayout(layout);

//创建一个树，使用toolkit对象创建

Tree tree = toolkit.createTree(client, SWT.NULL);

GridData gd = new GridData(GridData.FILL_BOTH);

gd.heightHint = 20;

gd.widthHint = 100;

tree.setLayoutData(gd);

section.setClient(client); // 书上没有这行，明明连tree都显示不了嘛。。。

/*

IFormPart管理了整个Part的dirty state, saving, commit, focus, selection changes等等这样的事件。

并不是表单中的每一个-空间站都需要成为一个IFormPart，最好将一组control通过实现IFormPart变成一个Part.

一般来说Section就是一个自然形成的组，所以Eclipse Form提供了一个SectionPart的实现，

它包含一个Section的对象。

*/

final SectionPart spart = new SectionPart(section);

//注册该对象到IManagedForm表单管理器中

managedForm.addPart(spart);

//将普通的树包装成MVC的树

TreeViewer viewer = new TreeViewer(tree);

//注册树的选择事件监听器

viewer.addSelectionChangedListener(new ISelectionChangedListener() {

//当单击树中某一个节点时

public void selectionChanged(SelectionChangedEvent event) {

//通过IManagedForm来发布IFormPart所对应的事件

managedForm.fireSelectionChanged(spart, event.getSelection());

}

});

//设置树的内容

viewer.setContentProvider(new MasterContentProvider());

//设置树的标签

viewer.setLabelProvider(new MasterLabelProvider());

//设置初始化输入的类

viewer.setInput(new File("E:\\Data"));

}

//注册详细页面部分

protected void registerPages(DetailsPart detailsPart) {

//将DirectoryDetailPage对象注册

detailsPart.registerPage(File.class, new DirectoryDetailPage());

}

//创建表单区的Action

protected void createToolBarActions(IManagedForm managedForm) {

final ScrolledForm form = managedForm.getForm();

//水平布局操作

Action hAction = new Action("horizon", Action.AS_RADIO_BUTTON) {

public void run() {

sashForm.setOrientation(SWT.HORIZONTAL);

form.reflow(true);

}

};

hAction.setChecked(true);

hAction.setToolTipText("水平布局");

hAction.setImageDescriptor(Activator.getImageDescriptor("icons/hor.gif"));

//垂直布局操作

Action vAction = new Action("vertical", Action.AS_RADIO_BUTTON) {

public void run() {

sashForm.setOrientation(SWT.VERTICAL);

form.reflow(true);

}

};

vAction.setChecked(false);

vAction.setToolTipText("垂直布局"); //$NON-NLS-1$

vAction.setImageDescriptor(Activator.getImageDescriptor("icons/ver.gif"));

//将这两个操作添加到表单的工具栏管理器中

form.getToolBarManager().add(hAction);

form.getToolBarManager().add(vAction);

}

public class MasterContentProvider implements ITreeContentProvider {

public Object[] getChildren(Object element) {

return ((File) element).listFiles();

}

public Object[] getElements(Object element) {

return ((File) element).listFiles();

}

public boolean hasChildren(Object element) {

Object[] obj = getChildren(element);

return obj == null ? false : obj.length > 0;

}

public Object getParent(Object element) {

return ((File) element).getParentFile();

}

public void dispose() {

}

public void inputChanged(Viewer viewer, Object oldInput, Object newInput) {

}

}

class MasterLabelProvider implements ILabelProvider {

public Image getImage(Object element) {

File file = (File) element;

if (file.isDirectory())

return PlatformUI.getWorkbench().getSharedImages().getImage(ISharedImages.IMG_OBJ_FOLDER);

else

return PlatformUI.getWorkbench().getSharedImages().getImage(ISharedImages.IMG_OBJ_FILE);

}

public String getText(Object element) {

String text = ((File) element).getName();

if (text.length() == 0) {

text = ((File) element).getPath();

}

return text;

}

public void addListener(ILabelProviderListener listener) {

}

public void dispose() {

}

public boolean isLabelProperty(Object element, String property) {

return false;

}

public void removeListener(ILabelProviderListener listener) {

}

}

}

通过以上代码可以看出，创建的 Master 部分其实就是之前学习的浏览文件的 TreeViewer。但注意所不同的是，单击树中的某一个节点事件处理部分，需要通过 IManagedForm 的 fireSelectionChanged 方法来发布事件。

作为接收的事件处理，需要在注册的 Detail 页面进行，所注册的详细信息的部分都在 registerPages 方法中实现。本例中 中注册了一个 Detail，如下：

detailsPart.registerPage(File.class, new DirectoryDetailPage());

当然也可以注册多个 Detail 页面。

（4）最后看一下如何实现本例中的 Detail 页面，注册的 DirecotryDetailPage 对象即为具体实现 Detail 部分。该类需要实现 IDetailsPage 接口，主要是在 createContents 方法中创建 Detail 所需使用的控件，并且在 selectionChanged 方法中处理当 Master 对象选中事件发生的代码，具体实现如下：

package com.testrcp.myrcp.forms.advance;

import java.io.File;

import java.util.Date;

import org.eclipse.jface.viewers.ISelection;

import org.eclipse.jface.viewers.IStructuredSelection;

import org.eclipse.swt.SWT;

import org.eclipse.swt.layout.GridLayout;

import org.eclipse.swt.widgets.Button;

import org.eclipse.swt.widgets.Composite;

import org.eclipse.swt.widgets.Text;

import org.eclipse.ui.forms.IDetailsPage;

import org.eclipse.ui.forms.IFormPart;

import org.eclipse.ui.forms.IManagedForm;

import org.eclipse.ui.forms.widgets.FormToolkit;

import org.eclipse.ui.forms.widgets.Section;

import org.eclipse.ui.forms.widgets.TableWrapData;

import org.eclipse.ui.forms.widgets.TableWrapLayout;

public class DirectoryDetailPage implements IDetailsPage {

private IManagedForm mform;

private File file;

private Section fileSection;

private Text fileName;

private Text filePath;

private Text lastModify;

private Button isRead;

private Button isWrite;

private Composite client;

@SuppressWarnings("deprecation")

public void createContents(Composite parent) {

//设置父类面板的布局

TableWrapLayout layout = new TableWrapLayout();

layout.topMargin = 5;

layout.leftMargin = 5;

layout.rightMargin = 2;

layout.bottomMargin = 2;

parent.setLayout(layout);

//获得表单工具对象

FormToolkit toolkit = mform.getToolkit();

//创建Detail的内容区

fileSection = toolkit.createSection(parent, Section.DESCRIPTION|Section.TITLE_BAR);

TableWrapData td = new TableWrapData(TableWrapData.FILL, TableWrapData.TOP);

td.grabHorizontal = true;

fileSection.setLayoutData(td);

//创建内容区的所设置的面板

client = toolkit.createComposite(fileSection);

fileSection.setClient( client );

GridLayout gridLayout = new GridLayout();

gridLayout.marginWidth = 0;

gridLayout.marginHeight = 0;

gridLayout.numColumns = 2;

gridLayout.horizontalSpacing=10;

client.setLayout(gridLayout);

//创建Detail部分具体的各种控件

toolkit.createLabel( client , "名称:");

fileName = toolkit.createText( client ,"");

toolkit.createLabel( client , "路径:");

filePath = toolkit.createText( client , "");

toolkit.createLabel( client , "最后修改:");

lastModify = toolkit.createText( client , file!=null?new Date(file.lastModified()).toLocaleString():"");

isRead = toolkit.createButton( client , "是否可读" ,SWT.CHECK);

isWrite = toolkit.createButton( client , "是否可写" ,SWT.CHECK);

}

public void initialize(IManagedForm form) {

this.mform = form ;

}

public void dispose() {

}

public boolean isDirty() {

return false;

}

public void commit(boolean onSave) {

}

public boolean setFormInput(Object input) {

return false;

}

public void setFocus() {

}

public boolean isStale() {

return false;

}

public void refresh() {

}

//当Master区域选中事件发生时

public void selectionChanged(IFormPart part, ISelection selection) {

//首先获得选中的对象

IStructuredSelection currentSelection = (IStructuredSelection)selection;

if (currentSelection.size()==1)

file = (File)currentSelection.getFirstElement();

//如果选中的对象不为null,则刷新控件所显示的值

if (file != null)

update();

}

//刷新值

@SuppressWarnings("deprecation")

public void update (){

//如果选中的为文件夹

if ( file.isDirectory()){

fileSection.setText("文件夹");

fileSection.setDescription("这是一个文件夹");

}else{//否则

fileSection.setText("文件");

fileSection.setDescription("这是一个文件");

}

//设置文件名

fileName.setText(file.getName());

//设置路径

filePath.setText(file.getAbsolutePath());

//设置上次修改

lastModify.setText(new Date(file.lastModified()).toLocaleString());

//设置是否只读

isRead.setSelection( file.canRead());

//设置是否可写

isWrite.setSelection( file.canWrite() );

}

}

这样，一个完整的 Master/Detail 模式实现的表单就完成了。