Java开发网 - 用Eclipse进行可视化Java界面设计

Java开发网

您没有登录

» Java开发网 » 技术文章库

打印话题 寄给朋友 订阅主题

作者

用Eclipse进行可视化Java界面设计

jerryjerry123

发贴: 58
积分: 12

于 2005-05-06 13:24

用Eclipse进行可视化Java界面设计

前言
　　最近，eclipse开源项目终于推出了期待已久的Visual Editor Project(VEP)。VE项
目使得功能强大的eclipse平台在java开发方面又增加了一个可视化java组件开发利器。
它让java开发者再也不用依赖其它的IDE产品来做GUI界面方面的工作。所有的开发，从应
用程序界面到业务逻辑的开发，现在都可以在eclipse平台上完成。本文将引导开发者如
何安装配置并使用Visual Editor。

关于Visual Editor
开始介绍之前，来看一个笔者用Visual Editor(以下简称VE)设计的一个java程序界面：

怎么样，其可视化的界面设计，一点也不逊于其它的Java可视化界面开发工具。
Visual Editor是一个开源的eclipse编辑器。它同JDT、PDE等其它eclipse的工具项目一
样，是一个全新的eclipse工具项目。它可以进行可视化的编辑java GUI程序，也能编辑
可视化的Java Bean组件。它能与eclipse的Java Editor集成在一起，当在Visual Editor
中编辑图形界面时，会立即反馈到java Editor中的代码。反之亦然。
VE是一个可视化开发的一个framework，当前版本的VE是0.5.0RC1版，本版本的VE支持
Swing和AWT的可视Java组件开发。由于这个 framework设计的具有通用性，它也可以很容
易的实现C++或其它语言下可视化开发。其将来的版本(从1.0开始)，将会支持SWT的开
发。更多的关于Visual Editor的信息，请看参考资料的相关链接。

下载与安装
由于Visual Editor是用纯java编写的，所以它应该可以在任何操作系统上运行。但当前
的VE版本是0.5.0RC1，只在windows和linux平台上经过测试。所以如果你使用的是这两种
操作系统之外的其它操作系统，你应该先阅读VE的readme文件，
安装和使用VE前，必须先安装以下版本的eclipse和相关支持类库：
Eclipse build 2.1.2 (build page) (download zip)
EMF build 1.1.1: (build page) (download zip)
GEF Build 2.1.2: (build page) (download zip)
为了方便中国的开发者，eclipse也提供了一个中文语言包，下载安装后，elcipse环境
将变成全中文的界面。在本文中，笔者用的eclipse也安装了此中文语言包。
之后就可以从以下地址下载Visual Editor了：
http://download.eclips.org/vep….
下载后的VE是一个zip档案，请将其压缩包中plugins和features目录下的内容解压到
eclipse安装目录的相应目录中即可。如果你的eclipse是运行着的，请关闭并重新启动
eclipse。

开始一个设计任务
现在，所有程序安装完成，笔者将用一个例子，来讲解Visual Editor的使用。在这个例
子中，笔者要设计一个邮件发送面板，下面是它的草图：

此面板包括发送人，接收人，邮件主题，邮件内容以及发送和清除按钮，

进入Visual Editor
启动eclipse平台。刚开始，你可能觉得eclipse并没有什么变化。先别急，请新建一个项
目，点击"文件"菜单下的"新建"子菜单，选择并建立一个新的"java项目"。然后在工具栏
上的"新建Java类" 图标上，点击右边的小箭头，将展开如下图的菜单：

在此菜单上，多了一个"Visual Calss"的子菜单,这就是进入Visual Editor的入口之
一。点击"Visual Class"，弹出如下的对话框：

在此对话框中，要求输入类的名称（如标记○1）位置），在这里我们输入
"MessagePanel"，以及你想要继承的可视类（如标记○2位置）。你可以选择继承来自
swing或AWT的任何界面组件，如要继承其它类型的类，请选择"other"并点击"浏览"按钮
来选择你要继承的类。在此处，我们选择 "panel"和Swing选项，继承JPanel，然后点击"
完成"按钮，大家就可以见到Visual Editor的界面了：

由于eclipse工作台高度的可定制性，读者现在看到的界面并非VE初始的布局，而是经过
笔者按喜好的方式重新布局过的透视图，但是这并不会影响读者理解本文内容。
如图中1所示，是VE的工具面板，提供"选取"、"框选"等选择工具。还有Swing组件，
Swing容器，Swing菜单以及AWT控件设计工具。在面板下方有"Design"和"Source"两个页
签，用来切换设计界面和Java源代码视图。
图中2是VE的工具栏，包括工具面板中的一些常用按钮。
图中3是"Java Beans"视图和"属性"视图，两个视图可以切换显示。"Java Beans"视图
用树形结构即时显示设计中用到的各种Java Bean组件层次。而"属性"视图显示显示当前
所选中的Java bean组件的属性值列表，你可以在此列表中编辑各项Java Bean的属性值。
图中灰色矩形区域即是我们最开始选择的JPanel，所有的工作就从它开始。

摆设Swing组件
做过Swing GUI界面设计的人都知道，Java应用程序界面上的元素位置是用
LayoutManager来管理的。JPanel的预设布局管理器是 FlowLayout。VE目前支持所有的传
统的布局管理器（这里所指的传统布局管理器是指JDK1.4之前的布局管理器。可惜的是VE
目前还不支持从 JDK1.4开始有的SpringLayout）。
要设置JPanel的layout，请先在设计界面中选中JPanel，再切换到"属性"视图，找到
"layout"属性，如下图所示：

图中显示了JPanel的预设LayoutManager。在"layout"属性的右边，可以通过点击组合
框来指定不同类型的 LayoutManager。不同的LayoutManager会在属性编辑器中显示不同
的参数，如果选择GridLayout，属性编辑器中的 layout属性将显示另外几种不同的参
数，如下图如示：

先前的FlowLayout的三个参数alignment, horizontal gap和vertical gap变成了
GridLayout的另外四种参数：columns, horizontal gap, rows, vertical gap。
为了方便设计，笔者在这个例子中将采用null，即不用任何LayoutManager来设计界面。

布局设置好后，就可以在JPanel上摆置各种Swing组件了。按照我们最开始设计的草
图，界面上要摆上四个Label：From, To, Subject, Message。以及四个文本组件，其第
四个应该是TextArea, 用于编辑多行文本。我们在工具面板上选好相关组件，然后在
JPanel上拖选出一个矩形，组件即按相应大小和位置显示在此矩形区域。再在"属性"视图
中编辑每个JLabel和JButton的"text"属性为相应的值。现在来看看下面笔者"画"出来的
界面：

看看，设计的如何？笔者不是画家，"画"出来的界面显得有些凌乱。没关系，VE也提供
一些工具按钮来让我们调整各个组件的位置。请点击VE工具栏上的"Show alignment
window"按钮：

显示如下图的视窗：

通过此视窗，可以将所选组件向上下左右各个方向对齐。还可以使所选组件具有相同高
度和宽度。来看看下图经过调整位置后的界面布局：

现在看起来是不是美观多了？

添加事件处理
经过前面的步骤，VE的可视化设计的任务就基本上完成了。在我们设计的界面中，有
"Send"和"Clear"按钮。我们再来看看VE是如何为它们添加事件处理的。]
在设计界面的"Send"按钮上点击鼠标右键，弹出菜单，如下图：

在"Event" 菜单项中，可以看到一个"actionPerformed"事件。如果要添加其它类型的事
件，可以点击"Add Events"选择其它类型的事件。我们点击"actionPerformed"事件后，
在"Java Beans"视图的"jButton-"Send""组件下面，多了一个"actionPerformed"事件类
型，如下图所示：

在"Java Beans"视图中，选中"actionPerformed"事件，再VE的窗口中，从"Design"切换
到"Source"视图。

在上图标记1的代码区域，就是我们刚刚添加的按钮事件。笔者在事件中调用了一个send
方法，如图中标记2代码区域。具体的发送邮件的代码笔者在这里就不实现了。
同样的方法，一样可以为另一个按钮"Clear"添加事件。

在程序中使用自定义的组件
在前面我们设计好了自己的Java组件，现在我们来看看如何在自己的程序中——一个窗口
中来调用这个组件。
使用前面介绍的方法，在工具栏上点击"新建Java类"按钮，建立一个JFrame的Visual
Class类。你也可以在通过菜单"文件"->"新建"->"Visual Class"来寻一个JFrame类。在
这里，我们将这个类命名为"MyApp"。
当VE窗口出现时，可以看到一个空白的JFrame显示在设计视图中。此时，点击VE的工具
面板上的" Choose Bean"按钮，然后在弹出的对话框中输入我们设计的Java组件的类名
"MessagePane"，再点击"确定"。这时，当我们的鼠标移到 JFrame上时，JFrame会用绿色
的线条切分成五份，如下图所示：

这是因为JFrame的预设LayoutManager是BorderLayout，在VE中，如果在工具面板上选
好Java组件，当鼠标移到有特定 LayoutManager的容器组件上时（在上图中容器组件是一
个JFrame），VE会用适当的形式指示你当前鼠标悬停的位置。在上图在VE告诉我们现在处
在BorderLayout的中心位置，此时再在该位置点击一次，我们选好的Java组件即安放到此
位置。
用VE设计好程序界面，就可以切换到"Source"视图进行具体的代码的编码了。在此我们
就不累述了。

定制VE的环境
之前的讲解，大家学到了如何用VE来进行可视化的Java界面设计。为了适应不同的开发
者，VE也提供了一些选项来让开发者设计自己喜好的VE环境。
请打开菜单"窗口"->"首选项"->"Java"->"Visual Editor"，此时出现VE的各种首选项
界面。由于笔者安装的eclipse中文语言包早于VE发布，所以此界面仍然是英文界面。在
这里，VE的首选项分为三类："Appearance"，"Code Generation"，"Pattern Style"。下
面结合图形分别介绍：
1．外观(Appearance)设置：

此面板中可以设置这此内容：
(1) 设置可视编辑器和源代码编辑器的布局，一种是上下分隔的布局，另一种是用页答进
行切换的布局(即本文例图中所见到的样式)。
(2) 设置是否显示"属性"视图和"Java Beans"视图。
(3) 设置设计时Swing的界面风格。
2．代码生成(Code Generation)设置

此面板包括以下内容：
(1) 设置是否为新表达式生成注释和try{}…catch()块。
(2) 设置可视设计界面和代码编辑器之间的代码同步时间。
3．代码模板风格(Pattern Style)设置

此面板包括以下内容：
(1) VE所用的存取Java Bean的代码风格。
(2) VE初始化时尝试使用的初始化方法。VE目前已提供了对Jbuilder、NetBean等其它IDE
产品可视编辑器生成的Java组件代码初始化方式的支持。

总结
行文至此，我们从VE的安装到Java组件设计以及 VE环境的设置，基本上已对eclipse的全
新工具Visual Editor作了一个全面的了解。有了Visual Editor，我们所有的开发工作，
从图形用户界面到业务逻辑，全部可以在eclipse平台上完成。

参考资料
　　1．Visual Editor Project(VEP)的首页：http:/www.eclipse..org/vep，可以在这
找到Visual Editor的所有信息，包括程序及其源代码下载，FAQ，邮件列表等。

作者	Re:用Eclipse进行可视化Java界面设计 [Re:jerryjerry123]
Jove CJSDN高级会员发贴: 1228 积分: 194	于 2005-05-06 20:39 很老的文章了吧 ..Eclipse build 2.1.2...当前的VE版本是0.5.0RC1

已读帖子

新的帖子

被删除的帖子