用Eclipse Visual Editor 开发SWT GUI

用Eclipse Visual Editor 开发SWT GUI

 

Developing Your SWT GUIs with Eclipse Visual Editor

 

IT小混混(haili.tian@gmail.com)

Nov.12, 2004 

 

Summary

1. 准备工作

2. 安装

    2.1. 安装JRE

    2.2. 安装Eclipse及其它工具

3. 配置

4. 开发SWT GUI

    4.1. 创建Java工程

    4.2. 新建Visual Class

    4.3. 完整VE环境

    4.4. 简单App

5. 运行SWT App

6. Conclusion

作者

 

 

Summary

       本文讲解如何用Eclipse Visual Editor开发Java GUI，重点讲解开发SWT GUI时的配置。

 

1. 准备工作

Eclipse的Visual Editor Plug-in需要用到EMF(Eclipse Modeling Framework)和GEF(Graphical Editing Framework)，当然你还必须有Eclipse SDK和Java JRE，所以确保安装之前你已经下载了它们。

我机器上的版本是：

Ø         Java JRE 1.4.1_02 & 1.5.0 (任选一版本)

Ø         Eclipse SDK v3.01

Ø         emf-sdo-xsd-SDK v2.0.1

Ø         GEF SDK v3.0.1

Ø         VE SDK v1.0

JRE到Sun的网站(http://java.sun.com)下载，Eclipse platform SDK以及Eclipse的其它项目的安装包到Eclipse网站(http://www.eclipse.org/)下载。

注意，版本问题，Eclipse的任何项目的某一发行版本都要求某特定版本的SDK和其它工具，看它的release notes或Readme。

 

2. 安装

2.1. 安装JRE

现在安装JRE非常简单，一路点击Next，即可。

2.2. 安装Eclipse及其它工具

       将Eclipse SDK包解压到你的工作目录。

然后把EMF,GEF和VE包里面feathers和plugins里面的内容分别全部拷贝到Eclipse的feathers和plugins目录里。

 

3. 配置

这样启动之后并不能直接看到与VE相关的View和New选项，还需要做如下配置。

 

Ø         点击Window菜单，选择Customize Perspective…。

Ø         Submenus栏目下选择New

Ø         Shortcut Categories下选择Java

Ø         Shortcuts中在Visual Class前划勾（图一）。

Ø         Submenus栏目下选择Show View

Ø         Shortcut Categories下选择Basic

Ø         Shortcuts中在Palette前划勾（图二）。

 

图一、选中 Visual Class

 

图二、选中 Palette View

 

4. 开发SWT GUI

       Visual Editor可以帮助开发AWT(Abstract Window Toolkit)、Swing、SWT(Standard Widget Toolkit)以及其它的GUI，但是本文只是针对SWT。

4.1. 创建Java工程

创建Java工程EclipseVE。

为了应用SWT，还必须包含SWT库，方法如下。

Ø         在Package Explore View里面右击EclipseVE，从弹出菜单中选中Properties。

Ø         在Properties窗口中，选中左边的Java Build Path；

Ø         在Properties窗口中，选中右边的Libraries Tab；

Ø         点击Add Library按钮；

Ø         选中Standard Widget Toolkit(SWT)，然后Next，Finish，即可。（如图三所示）

 

图三、加入SWT库

 

4.2. 新建Visual Class

创建Visual Class之前先新建一个Package org.eclipse.ve.test。

然后右击org.eclipse.ve.test，再从弹出菜单中选中New -> Visual Class，出现图四画面。

 

图四、创建 Visual Class

 

Name中，填入MyFirstVisualClass。

Style中选SWT/Application。

其它如图中选择或者填写就行。

点击Finish。

 

之后的界面如图五所示。

 

图五、初始界面

 

4.3. 完整VE环境

现在怎么没有WYSIWYG（所见即所得）里的Palette？仔细看上图的右边，原来Palette初始是隐藏的。

单击 ，Palette就出来了（也可以，通过菜单调出Palette：Window | Show View | Palette，还记得3.配置中选择了Palette么？）。

 

现在的界面就如同图六（一）或者图六（二）所示。

 

图六（一）、VE开发环境（一）

 

图六（二）、VE开发环境（二）

 

为了直接对Widget的各种属性操作，可以打开Properties View，那里可以直接操作。

 

打开Properties View方法：如果Properties View已经打开，直接单击它就行，否则从Menu打开，方法 Windows | Show View | Basic | Properties

 

现在的界面就如同图六（三）了。

 

图六（三）、VE完整开发环境（三）

 

4.4. 简单App

下面做一个简单的App

选中Shell，并在Properties View中将其text改为“My First VE Application”；

从Palette里选中一个Label放到Shell上，然后在Properties View中将其text改为“Hello, world!”

现在设计的结果就如同图七。

 

图七、第一个VE开发的程序

 

下面是VE自动生成的代码

 

5. 运行SWT App

运行刚才的SWT App从Run菜单选中Run…；

弹出的窗口中，Configurations中选择Java Application，点击New按钮；

在右边Arguments Tab中，VM arguments写入-Djava.library.path=<Your SWT PATH>

（比如我的<Your SWT PATH>是：F:/Eclipse-3.0.1/eclipse/plugins/org.eclipse.swt.win32_3.0.1/os/win32/x86）

如图八所示

图八、运行配置

点击Apply；

点击Run。

恭喜，呵呵，可爱的画面出现了

 

6. Conclusion

自动生成的代码还是很Ugly，不能完全代替人的劳动，不过其所见即所得的特性，可以很方便你布局那些Widget。

 

关于作者

田海立（IT小混混），系统分析师，2004年硕士毕业于南京大学（软件架构方向），主要兴趣：嵌入式系统应用架构，Java/Eclipse，Linux技术，攻读硕士之前和目前都从事嵌入式系统研发。您可以通过 haili.tian@gmail.com 与他联系，到 http://blog.csdn.net/thl789/ 或 http://spaces.msn.com/members/thl789/ 看他的文章。