使用 Eclipse Forms 让应用程序获得新生

2007 年 11 月 05 日

Eclipse Forms 提供了一种改进 Eclipse 应用程序用户体验的方法。它为应用程序提供了一种 “Web 风格” 的外观，但并未使用嵌入式浏览器。本文的目的是简要介绍 Eclipse Forms 作为用户界面 (UI) 工具箱的特点，并提供了一个易于理解的示例帮助您入门。

背景

Eclipse Forms 是什么？在回答这个问题之前，我先向您展示一下 Eclipse Forms 的自然用法。您是否曾经使用 Eclipse 构建过插件？如果是，那么您可能认识下面这个整洁的用户界面。

图 1. PDE 的 manifest 编辑器

此编辑器是 Eclipse 插件开发环境（PDE）的一部分。它是第一个采用 Eclipse Forms 的编辑器，并且仍然是 Eclipse Forms 的一个范例实现。因此，我们得到了 Eclipse Forms 的一个视觉外观，那应该如何定义它呢？

Eclipse 为人熟知的原因在于能够让在它上面构建的应用程序具有原生应用程序的外观。这可能要归功于 Eclipse 的构建基础：Standard Widget Toolkit (SWT)。在其核心中，SWT 提供了一个可移植的轻量级原生 部件集，可以在不同的平台上运行。Eclipse Forms 的设计初衷是提供一种新风格的、常见于 HTML 创建工具中的用户交互。Eclipse Forms 的任务是跨所有 Eclipse 项目为创建可移植 Web 风格的 UI 提供支持。

Eclipse Forms 的历史 有关 Eclipse Forms 的详细历史，建议您阅读 “Eclipse Forms: Rich UI for the Rich Client”，它是 Dejan Glozic（Eclipse Forms 之父）在 Eclipse Corner 的一篇文章中提供的 Eclipse Forms 介绍。

现在可以开始介绍典型的 Hello World 示例了，后面对各种 Eclipse Forms 小部件进行描述，最后介绍一个更具体的真实示例。

Hello, Forms

开始学习新东西的好方法自然是通过一个简单的 Hello World 示例。关于 Eclipse Forms 需要了解的重要一点是，实际上您可以在能够使用 SWT 小部件的任何位置使用它的小部件。在这个简单的示例中，我们将在 Eclipse 视图中使用 Eclipse Forms。

图 2. Hello World



清单 1. Hello World — Eclipse Forms 版本（Snippet1.java）

                
public class FormView extends ViewPart {
	private FormToolkit toolkit;
	private ScrolledForm form;

	public FormView() {}

	public void createPartControl(Composite parent) {
		toolkit = new FormToolkit(parent.getDisplay());
		form = toolkit.createScrolledForm(parent);
		form.setText("Hello World");
	}
	
 	public void setFocus() {
  		form.setFocus();
 	}

 	public void dispose() {
  		toolkit.dispose();
  		super.dispose();
 	}
 }

在清单 1 中，我们拥有一个典型的 Eclipse 视图（扩展了 ViewPart）。但是，在 createPartControl(...) 方法中，我们创建了 FormToolkit 的一个新实例。FormToolkit 负责创建 SWT 控件并进行调整以便在 Eclipse Forms 环境中使用。使用 Eclipse Forms 时，您会频繁地使用这个工具类。在下一行中，我们创建了一个新表单（基于 ScrolledForm），该表单用作表单相关内容的容器。这就是使用 Eclipse Forms 的技巧。上面清单中使用的代码可以用作一个模板，以后实践 Eclipse Forms 时可以用到。

回页首

Forms 使用一览

Eclipse Forms 之旅的下一站是介绍它所提供的实际使用的小部件。我们将介绍每个小部件并提供一小段代码片段演示其用法。最后，我们还将讨论如何调整现有的小部件以便整合到基于 Eclipse Forms 的应用程序中。

org.eclipse.ui.forms.examples 除了本文中提供的样例代码外，Eclipse User Assistance 团队还维护了一个优秀的示例 Forms 插件，我发现在开始学习 forms 时该插件非常有用。可以在 Eclipse 的 CVS 存储库 org.eclipse.ui.forms.examples 中找到该插件。它包含大量的 样例代码。

Form 和 ScrolledForm

我们要讨论的前两种基本的小部件是 forms 类型：Form 和 ScrolledForm。这些 forms 小部件可看作 Eclipse Forms 的基础并充当内容的容器（见图 3）。它们拥有标题、可选图像、可选标题下拉菜单和其他一些有用的特性（见清单 2）。

图 3. Form 示例



清单 2. Form 示例（Snippet2.java）

                
...
public void createPartControl(Composite parent) {
	toolkit = new FormToolkit(parent.getDisplay());
	form = toolkit.createForm(parent);
	form.setText("Snippet2");
	TableWrapLayout layout = new TableWrapLayout();
	form.getBody().setLayout(layout);
	
	toolkit.createLabel(form.getBody(), "Snippet2");
}
...

ExpandableComposite

这个小部件是一个简单的复合程序，允许显示或隐藏（即，折叠或展开）其子元素。可以选择展开形状的样式（旋转或树形），您可以根据需要选用（见图 4 和清单 3）。

图 4. ExpandableComposite 示例



清单 3. ExpandableComposite 示例（Snippet3.java）

                
...
public void createPartControl(Composite parent) {
	toolkit = new FormToolkit(parent.getDisplay());
	form = toolkit.createScrolledForm(parent);
	form.setText("Snippet3");
	TableWrapLayout layout = new TableWrapLayout();
	form.getBody().setLayout(layout);
	
	ExpandableComposite composite = 
		toolkit.createExpandableComposite(
			form.getBody(), 
			ExpandableComposite.TREE_NODE|
			ExpandableComposite.CLIENT_INDENT);
	composite.setText("Expand Me");
	String text = "Lots of text, Lots of text," +
	Lots of text, Lots of text, Lots of text," +
	Lots of text, Lots of text, Lots of text," +
	Lots of text, Lots of text";
	Label label = toolkit.createLabel(composite, text, SWT.WRAP);
	composite.setClient(label);
	TableWrapData td = new TableWrapData();
	td.colspan = 1;
	composite.setLayoutData(td);
	composite.addExpansionListener(new ExpansionAdapter() {
		public void expansionStateChanged(ExpansionEvent e) {
			form.reflow(true);
		}
	});
}
...

Section

section 是一种特殊类型的可展开复合程序，用于添加标题下面的可选描述。Eclipse Forms 中使用 Section 对信息分组，它可能是 Eclipse Forms 中最常用的小部件。如果您需要使用描述区中的图像或超链接，您可以在描述区中使用控件。

图 5. Section 示例



清单 4. Section 示例（Snippet4.java）

                
...
public void createPartControl(Composite parent) {
	toolkit = new FormToolkit(parent.getDisplay());
	form = toolkit.createScrolledForm(parent);
	form.setText("Snippet4");
	TableWrapLayout layout = new TableWrapLayout();
	form.getBody().setLayout(layout);
		
	Section section = new Section(form.getBody(), Section.TITLE_BAR | Section.TWISTIE);
	section.setText("Snippet4");
	Label label = toolkit.createLabel(section, "Snippet4", SWT.WRAP);
	section.setClient(label);
	TableWrapData td = new TableWrapData();
	td.colspan = 1;
	td.grabHorizontal = true;
	section.setLayoutData(td);
}
...    	

Hyperlink 和 ImageHyperlink

Hyperlink 部件用于实现基于用户单击文本 — 或悬停在文本上 — 的操作。如果您曾经使用过 HTML，就会发现这与 <a> 标记的概念非常类似。在 Eclipse Forms 中，超链接可以与 HyperlinkGroup 关联，后者管理普通颜色或激活颜色之类的事件。

图 6. Hyperlink 示例



清单 5. Hyperlink 示例（Snippet5.java）

                
...
public void createPartControl(Composite parent) {
	toolkit = new FormToolkit(parent.getDisplay());
	form = toolkit.createScrolledForm(parent);
	form.setText("Snippet5");
	TableWrapLayout layout = new TableWrapLayout();
	form.getBody().setLayout(layout);
		
	HyperlinkGroup group = new HyperlinkGroup(parent.getDisplay());
	
	Hyperlink link = new Hyperlink(form.getBody(), SWT.NONE);
	link.setBackground(form.getBackground());
	link.setText("Snippet5");
	link.addHyperlinkListener(new HyperlinkAdapter() {
		public void linkActivated(HyperlinkEvent e) {
			System.out.println("Snippet5");
		}
	});
		
	ImageHyperlink imageLink = new ImageHyperlink(form.getBody(), SWT.NONE);
	imageLink.setBackground(form.getBackground());
	imageLink.setText("Snippet5");
	imageLink.setImage(Activator.getImageDescriptor("icons/sample.gif").createImage());
	imageLink.addHyperlinkListener(new HyperlinkAdapter() {
		public void linkActivated(HyperlinkEvent e) {
			System.out.println("Snippet5");
		}
	});
		
	group.add(link);
	group.add(imageLink);
}
...

FormText 和 ScrolledFormText

此部件是一个只读文本控件，可以通过解析特殊的 XML 标记（与 HTML 类似）呈现包装的文本。此外，它还允许将链接（即 http://www.eclipse.org）自动解析为超链接（如果您需要的话）。

图 7. FormText 示例



清单 6. FormText 示例（Snippet6.java）

                
...
public void createPartControl(Composite parent) {
	toolkit = new FormToolkit(parent.getDisplay());
	form = toolkit.createScrolledForm(parent);
	form.setText("Snippet6");
	TableWrapLayout layout = new TableWrapLayout();
	form.getBody().setLayout(layout);
	
	FormText text = toolkit.createFormText(form.getBody(), true);
	text.setText("Read http://planet.eclipse.org", false, true);
	TableWrapData td = new TableWrapData(TableWrapData.FILL);
	td.colspan = 1;
	text.setLayoutData(td);
}
...

FormDialog

此部件是托管表单的通用对话框。如果您希望在对话框中使用 Eclipse Forms，此类可为您提供帮助（见图 8 和清单 7）。

图 8. FormDialog 示例



清单 7. FormDialog 示例

                
...
	MyFormDialog dialog = new MyFormDialog(shell);
	dialog.create();
	dialog.getShell().setSize(800, 600);
	dialog.getShell
	dialog.open();
...

调整现有的小部件

Eclipse Forms 的一个初始设计目标是，实现对现有 SWT 控件的重用。在 Eclipse Forms 中表单主体没有什么特别之处。它不断地进行复合调整。

要使用自己的 SWT 部件（该部件如果不是使用 FormToolkit 轻松创建的话），您只需对其进行调整。调整部件通过使用 FormToolkit 类完成（见图 9 和清单 8）。

图 9. 调整部件的示例


清单 8. 调整部件的示例（Snippet7.java）

                
...
public void createPartControl(Composite parent) {
	toolkit = new FormToolkit(parent.getDisplay());
	form = toolkit.createScrolledForm(parent);
	form.setText("Snippet7");
	TableWrapLayout layout = new TableWrapLayout();
	form.getBody().setLayout(layout);
	
	Label label1 = new Label(form.getBody(), SWT.NONE);
	label1.setText("Snippet7 (not adapted)");
		
	// note, we could've just used toolkit.createLabel(...)
	Label label2 = new Label(form.getBody(), SWT.None);
	label2.setText("Snippet7 (adapted)");
	toolkit.adapt(label2, true, true);
}
...

回页首

Forms 示例

在一个更真实的示例中，我将使用一个 Eclipse 项目。在 Eclipse Communications Framework (ECF) 项目中，我们有一个显示在线联系人的 UI。在该 UI 中，我们希望支持一些优秀的工具提示。使用 Eclipse Forms 是完成此任务的首选方法。清单 9 演示了如何使用 Eclipse Forms 创建一个自定义的工具提示。

图 10. Forms ToolTip 示例


清单 9. Forms ToolTip 示例（Snippet8.java）

                
...
public void createPartControl(Composite parent) {
	toolkit = new FormToolkit(parent.getDisplay());
	form = toolkit.createScrolledForm(parent);
	form.setText("Snippet8");
	TableWrapLayout layout = new TableWrapLayout();
	form.getBody().setLayout(layout);

	Label label1 = new Label(form.getBody(), SWT.NONE);
	label1.setText("Snippet8");
		
	// create a tooltip
	ToolTip tooltip = new MyTooltip(label1);
	tooltip.setPopupDelay(200);
}
...
private class MyTooltip extends ToolTip {

	public MyTooltip(Control control) {
		super(control);
	}

	protected Composite createToolTipContentArea(Event event,
			Composite parent) {
		FormToolkit toolkit = new FormToolkit(parent.getDisplay());
		FormColors colors = toolkit.getColors();
		Color top = colors.getColor(IFormColors.H_GRADIENT_END);
		Color bot = colors.getColor(IFormColors.H_GRADIENT_START);

		// create the base form
		Form form = toolkit.createForm(parent);
		form.setText("Snippet8");
		form.setTextBackground(new Color[] { top, bot }, new int[] { 100 }, true);
		GridLayout layout = new GridLayout();
		layout.numColumns = 3;
		form.getBody().setLayout(layout);

		// create the text for user information
		FormText text = toolkit.createFormText(form.getBody(), true);
		GridData td = new GridData();
		td.horizontalSpan = 2;
		td.heightHint = 100;
		td.widthHint = 200;
		text.setLayoutData(td);

		text.setText(
			"<form><p7gt;snippet8</p><p>snippet8</p></form>", 
			true, 
			false);

		// create the picture representing the user
		td = new GridData();
		td.horizontalSpan = 1;
		td.heightHint = 100;
		td.widthHint = 64;
		FormText formImage = 
			toolkit.createFormText(form.getBody(), false);
		formImage.setText(
			"<form><p><img href=\"image\"/></p></form>", 
			true, false);
		formImage.setLayoutData(td);

		Image image = 
			Activator.getImageDescriptor("icons/sample.gif").createImage();
		formImage.setImage("image", image);

		return parent;
	}
}

使用上面描述的示例，我们可以很轻松地将基于 Eclipse Forms 的工具提示集成到 ECF 中。

图 11. 工具提示正常工作

结束语

分享这篇文章……

	提交到 Digg
	发布到 del.icio.us
	提交到 Slashdot！

本文的目的是对 Eclipse Forms 做一个简要介绍并提供一些示例。通过一些易于理解的代码片段和一个可下载的样例项目，我已完成这一任务。我希望您现在能够将 Eclipse Forms 放入您的工具箱中，以便开发 Eclipse 应用程序时使用。

特别致谢 Dejan Glozic 和 User Assistance 团队，感谢他们对本文的审核。

参考资料

学习

• 您可以参阅本文在 developerWorks 全球站点上的 英文原文。
  
  
• 了解 Dejan Glozic 的早期 Eclipse Forms 文章的最初灵感：Eclipse Forms: Rich UI for the Rich Client。
  
  
• 查看 Europa release train。
  
  
• 获取 Eclipse 的文档、文章和下载，请访问 Eclipse.org。
  
  
• 想了解 Eclipse 社区中的最新事件么？请查看 PlanetEclipse。
  
  
• 在 Eclipse Plug-in Central 查看可用的 Eclipse 插件。
  
  
• 访问 EclipseLive 了解针对各项 Eclipse 技术的网上技术交流会 (webinar)。
  
  
• 想和 Eclipse 提交者面对面地交流了解 Eclipse 项目么？加入 EclipseCon，它是 Eclipse 的主要会议。
  
  
• 查看 “Eclipse 推荐读物列表”。
  
  
• 浏览 developerWorks 上的全部 Eclipse 文章和Eclipse 教程。
  
  
• Eclipse 新手请阅读 developerWorks 文章 “Get started with Eclipse Platform” 了解其起源和架构，以及如何使用插件扩展 Eclipse。
  
  
• 查看 IBM developerWorks 的 Eclipse 项目资源 扩展 Eclipse 技巧。
  
  
• 要收听针对软件开发人员的有趣访谈和讨论，一定要访问 developerWorks podcasts。
  
  
• 关于 Eclipse 平台的介绍，请查看 “Eclipse 平台入门”。
  
  
• 随时关注 developerWorks 的 技术事件和网络广播。
  
  
• 查看免费的 developerWorks On demand demos 观看并了解 IBM 及开源技术和产品功能。
  
  
• 查阅最近将在全球举办的面向 IBM 开放源码开发人员的研讨会、交易展览、网络广播和其他 活动。
  
  
• 访问 developerWorks 开放源码专区，获得丰富的 how-to 信息、工具和项目更新，帮助您用开放源码技术进行开发，并与 IBM 产品结合使用。
  
  

获得产品和技术

• 在 IBM alphaWorks 查看最新的 Eclipse 技术下载。
  
  
• 从 Eclipse Foundation 下载 Eclipse 平台和其他项目。
  
  
• 下载 IBM 产品评估版，并开始使用 DB2®、Lotus®、Rational®、Tivoli® 和 WebSphere® 的应用程序开发工具和中间件产品。
  
  
• 使用 IBM 试用软件 改进您的下一个开发项目，这些软件可以通过下载或从 DVD 中获得。

讨论

• 在 IRC 上与其他 Eclipse 开发人员和提交者进行交谈。
  
  
• Eclipse Platform 新闻组 应当是讨论关于 Eclipse 的问题的第一站（选择此链接将启动默认的 Usenet 新闻阅读器应用程序并打开 eclipse.platform）。
  
  
• Eclipse 新闻组 中有很多参考资料适用于对使用和扩展 Eclipse 感兴趣的人员。
  
  
• 通过参与 developerWorks blogs 加入 developerWorks 社区。
  
  

关于作者

		Chris Aniszczyk 是 IBM Lotus 的软件工程师，专门从事 OSGi 相关开发工作。他是开放源码的忠实拥护者，目前在开发 Gentoo Linux 发行版，他还是一些 Eclipse 项目（PDE、ECF、EMFT）的参与者。他十分 乐意与您讨论 关于开放源码和 Eclipse 方面的问题。