用Eclipse Visual Editor 开发SWT GUI

摘自:http://blog.csdn.net/thl789/archive/2004/11/12/179215.aspx

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时的配置。

[@more@]

1. 准备工作

EclipseVisual Editor Plug-in需要用到EMF(Eclipse Modeling Framework)GEF(Graphical Editing Framework),当然你还必须有Eclipse SDKJava 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

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

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

2. 安装

2.1. 安装JRE

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

2.2. 安装Eclipse及其它工具

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

然后把EMF,GEFVE包里面feathersplugins里面的内容分别全部拷贝到Eclipsefeathersplugins目录里。

3. 配置

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

Ø 点击Window菜单,选择Customize Perspective…

Ø Submenus栏目下选择New

Ø Shortcut Categories下选择Java

Ø Shortcuts中在Visual Class前划勾(图一)。

Ø Submenus栏目下选择Show View

Ø Shortcut Categories下选择Basic

Ø Shortcuts中在Palette前划勾(图二)。Config01.jpg

Config01.jpg
图一、选中
Visual Class


Config02.jpgConfig02.jpg
图二、选中
Palette View

4. 开发SWT GUI

Visual Editor可以帮助开发AWT(Abstract Window Toolkit)SwingSWT(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),然后NextFinish,即可。(如图三所示)

Config03.jpgConfig03.jpg
图三、加入
SWT

4.2. 新建Visual Class

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

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

Config04.jpg

Config04.jpg

图四、创建 Visual Class

Name中,填入MyFirstVisualClass

Style中选SWT/Application

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

点击Finish

之后的界面如图五所示。

Config05.jpgConfig05.jpg
图五、初始界面

4.3. 完整VE环境

现在怎么没有WYSIWYG(所见即所得)里的Palette?仔细看上图的右边,原来Palette初始是隐藏的。

单击Palette就出来了(也可以,通过菜单调出PaletteWindow | Show View | Palette,还记得3.配置中选择了Palette么?)。

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

Config06.jpgConfig06.jpg
图六(一)、
VE开发环境(一)

Config06_2.jpgConfig06_2.jpg
图六(二)、
VE开发环境(二)

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

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

现在的界面就如同图六(三)了。

Config06_3.jpgConfig06_3.jpg
图六(三)、
VE完整开发环境(三)

4.4. 简单App

下面做一个简单的App

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

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

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

Config07.jpgConfig07.jpg
图七、第一个
VE开发的程序

下面是VE自动生成的代码
code.jpgcode.jpg


5. 运行SWT App

运行刚才的SWT AppRun菜单选中Run…

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

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

(比如我的是:F:Eclipse-3.0.1eclipsepluginsorg.eclipse.swt.win32_3.0.1oswin32x86

如图八所示

Config08.jpgConfig08.jpg

图八、运行配置


点击
Apply

点击Run

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

Config09.jpg

Config09.jpg

6. Conclusion

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

关于作者

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

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/778728/viewspace-913428/,如需转载,请注明出处,否则将追究法律责任。

转载于:http://blog.itpub.net/778728/viewspace-913428/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值