「Eclipse可视化界面设计」

2０0５-04-01 １1:5８作者：陈先波出处:cｓdnblog责任编辑:方舟

前言

ﻫ 最近，Ｅclipse开源项目终于推出了期待已久的Vｉsuaｌ Ediｔor Pｒojeｃt(VEP)。VE项目使得功能强大的eclｉｐse平台在jａｖa开发方面又增加了一个可视化jaｖａ组件开发利器。它让ｊavａ开发者再也不用依赖其它的ＩDE产品来做GUI界面方面的工作。所有的开发，从应用程序界面到业务逻辑的开发，现在都可以在ｅclｉpse平台上完成。本文将引导开发者如何安装配置并使用Vｉsuａl Eｄiｔor。 ﻫ 关于Viｓuａl Ｅditoｒ

开始介绍之前,来看一个笔者用Visｕａl Ediｔor（以下简称ＶE）设计的一个java程序界面：

怎么样，其可视化的界面设计,一点也不逊于其它的Ｊaｖａ可视化界面开发工具。ﻫﻫ Visual Ediｔor是一个开源的ecｌipse编辑器。它同ＪDT、PＤE等其它eｃlipse的工具项目一样，是一个全新的ecｌipse工具项目。它可以进行可视化的编辑jａva GＵI程序,也能编辑可视化的Java Bｅan组件。它能与ｅclipse的Ｊaｖａ Edｉtｏr集成在一起,当在Vｉsuaｌ Ｅditｏr中编辑图形界面时，会立即反馈到jａva Eｄitor中的代码。反之亦然。 ﻫ VＥ是一个可视化开发的一个framｅwork，当前版本的VＥ是0.５．0RC1版,本版本的VＥ支持Ｓｗing和AWT的可视Jａva组件开发。由于这个framework设计的具有通用性，它也可以很容易的实现C+＋或其它语言下可视化开发。其将来的版本(从1.０开始），将会支持SWＴ的开发。更多的关于Vｉsual Ｅdｉｔｏr的信息，请看参考资料的相关链

接。ﻫ

下载与安装

ﻫ 由于Ｖiｓual Editor是用纯ｊava编写的,所以它应该可以在任何操作系统上运行。但当前的VE版本是0.5．0ＲＣ1,只在ｗｉndows和ｌinux平台上经过测试。所以如果你使用的是这两种操作系统之外的其它操作系统，你应该先阅读VE的readｍe文件,安装和使用VＥ前，必须先安装以下版本的ｅcliｐse和相关支持类库：

Ｅｃｌiｐse ｂuｉld 2．1．2 (bｕiｌd page） (downlｏad zｉp) EＭF builｄ 1.1.1： (bｕild ｐagｅ) (ｄoｗnload zip) ＧEＦ Ｂuiｌｄ 2．1.２: (buiｌd ｐage) (dｏwnload zｉp)ﻫﻫ 为了方便中国的开发者,ｅclipse也提供了一个中文语言包，下载安装后,ｅlｃipsｅ环境将变成全中文的界面。在本文中,笔者用的ｅcｌipｓe也安装了此中文语言包。之后就可以从以下地址下载Visual Edｉtor了:ﻫﻫvep….

ﻫ 下载后的VE是一个zip档案，请将其压缩包中plugins和feａtures目录下的内容解压到eclｉpsｅ安装目录的相应目录中即可。如果你的eclｉpse是运行着的，请关闭并重新启动eclｉpse。ﻫ

开始一个设计任务

现在,所有程序安装完成，笔者将用一个例子,来讲解Visｕal Eｄitor的使用。在这个例子中，笔者要设计一个邮件发送面板，下面是它的草图:

此面板包括发送人，接收人，邮件主题，邮件内容以及发送和清除按钮， ﻫ 进入Ｖisｕaｌ Editｏr

启动eclipsｅ平台。刚开始，你可能觉得eclipsｅ并没有什么变化。先别急,请新建一个项目，点击＂文件\"菜单下的\"新建\"子菜单，选择并建立一个新的\"java项目\"。然后在工具栏上的＂新建Ｊａva类\" 图标上,点击右边的小箭头

,将展开如下图的菜单:

ﻫ 在此菜单上，多了一个\"Visｕaｌ Calss＂的子菜单,这就是进入Viｓual Eｄｉtｏr的入口之一。点击\"Visual Class＂,弹出如下的对话框：

ﻫ 在此对话框中，要求输入类的名称(如标记○１）位置）,在这里我们输入\"MessagｅPanｅｌ\"，以及你想要继承的可视类（如标记○2位置)。你可以选择继承来自swiｎg或AWT的任何界面组件,如要继承其它类型的类，请选择\"otｈer＂并点击＂浏览\"按钮来选择你要继

承的类。在此处，我们选择＂paｎeｌ\"和Sｗing选项，继承JＰａnel,然后点击\"完成\"按钮，大家就可以见到Vｉsual Edｉtoｒ的界面了:

由于eclipse工作台高度的可定制性,读者现在看到的界面并非VE初始的布局,而是经过笔者按喜好的方式重新布局过的透视图，但是这并不会影响读者理解本文内容。

如图中1所示,是VE的工具面板，提供\"选取\"、\"框选\"等选择工具。还有Ｓｗinｇ组件,Ｓwiｎg容器,Sｗinｇ菜单以及AＷＴ控件设计工具。在面板下方有\"Ｄeｓiｇn\"和\"Sｏurce\"两个页签,用来切换设计界面和Java源代码视图。ﻫﻫ 图中2是VE的工具栏，包括工具面板中的一些常用按钮。ﻫ

图中3是\"Java Beans\"视图和\"属性\"视图，两个视图可以切换显示。\"Java Beans\"视图用树形结构即时显示设计中用到的各种Java Bean组件层次。而＂属性＂视图显示显示当前所选中的Jaｖa bean组件的属性值列表,你可以在此列表中编辑各项Javａ Beａn的属性值。ﻫ图中灰色矩形区域即是我们最开始选择的ＪＰanel，所有的工作就从它开始。ﻫ 摆设Ｓｗｉnｇ组件ﻫ

做过Ｓｗiｎg ＧUＩ界面设计的人都知道,Ｊaｖa应用程序界面上的元素位置是用LayoutＭanaｇer来管理的。JPaｎｅl的预设布局管理器是FｌｏwLａｙout。ＶE目前支持所有的传统的布局管理器(这里所指的传统布局管理器是指JDK1.４之前的布局管理器。

可惜的是VE目前还不支持从ＪＤK1.4开始有的SpｒingLａyｏut)。ﻫ

要设置JPanｅl的lａyout，请先在设计界面中选中JPanel,再切换到\"属性\"视图,找到\"layout\"属性，如下图所示：

图中显示了ＪPａｎel的预设ＬayoutManagｅr。在\"layout\"属性的右边,可以通过点击组合框来指定不同类型的ＬayoutＭanager。不同的LａyoutＭanager会在属性编辑器中显示不同的参数,如果选择ＧｒidLａyout,属性编辑器中的laｙout属性将显示另外几种不同的参数,如下图如示：

ﻫ 先前的FloｗLａyout的三个参数aｌignｍent， horizoｎｔａｌ gap和vertical ｇap变成了GridLayout的另外四种参数:cｏlｕmnｓ, horｉzoｎtal gap, rows, vertｉcａｌ gａｐ。ﻫ

为了方便设计，笔者在这个例子中将采用nｕll,即不用任何LaｙouｔＭanaｇｅr来设计界面。ﻫ

布局设置好后，就可以在JPanel上摆置各种Swing组件了。按照我们最开始设计的草图，界面上要摆上四个Lａbel：Fｒoｍ, To, Sｕbｊｅct, Messａge。以及四个文本组件,其第四个应该是TextＡｒea, 用于编辑多行文本。我们在工具面板上选好相关组件,然后在JPａｎel上拖选出一个矩形，组件即按相应大小和位置显示在此矩形区域。再在\"属性\"

视图中编辑每个ＪＬａbeｌ和JＢutｔon的\"tｅxｔ\"属性为相应的值。现在来看看下面笔者\"画＂出来的界面：

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

显示如下图的视窗:

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

ﻫ 现在看起来是不是美观多了？ ﻫ 添加事件处理

ﻫ 经过前面的步骤，ＶE的可视化设计的任务就基本上完成了。在我们设计的界面中，有\"Senｄ\"和\"Cｌear\"按钮。我们再来看看VＥ是如何为它们添加事件处理的。 ﻫ 在设计界面的\"Seｎｄ\"按钮上点击鼠标右键,弹出菜单，如下图:

ﻫ 在\"Evenｔ\"菜单项中，可以看到一个＂acｔionPeｒｆoｒmed\"事件。如果要添加其它类型的事件,可以点击\"Aｄd Ｅｖeｎtｓ＂选择其它类型的事件。我们点击＂actionPerfｏrmｅd＂事件后，在\"Jａｖa Bｅａｎs＂视图的\"jButton-＂Send\"＂组件下面，多了一个\"actionPｅrｆormed\"事件类型,如下图所示：

ﻫ 在\"Javａ Ｂeａns＂视图中,选中\"aｃtionＰerforｍｅd\"事件，再VＥ的窗口中，从＂Dｅsign＂切换到\"Source＂视图。

在上图标记1的代码区域,就是我们刚刚添加的按钮事件。笔者在事件中调用了一个ｓend方法，如图中标记2代码区域。具体的发送邮件的代码笔者在这里就不实现了。ﻫﻫ 同样的方法，一样可以为另一个按钮\"Clｅar＂添加事件。ﻫﻫ 在程序中使用自定义的组件ﻫ 在前面我们设计好了自己的Javａ组件，现在我们来看看如何在自己的程序中――一个窗口中来调用这个组件。

ﻫ 使用前面介绍的方法，在工具栏上点击\"新建Javａ类\"按钮，建立一个JFｒａｍｅ的

Viｓuａl Class类。你也可以在通过菜单\"文件\"->\"新建＂->\"Visual Claｓs\"来寻一个JFｒame类。在这里,我们将这个类命名为\"MyApp\"。ﻫ

当VE窗口出现时，可以看到一个空白的JFramｅ显示在设计视图中。此时,点击VＥ的工具面板上的\" Ｃｈｏose Bｅan\"按钮,然后在弹出的对话框中输入我们设计的Javａ组件的类名＂MesｓaｇePａne\"，再点击\"确定＂。这时,当我们的鼠标移到ＪＦrame上时，ＪFrame会用绿色的线条切分成五份,如下图所示：

ﻫ 这是因为ＪFrａmｅ的预设LayoutＭaｎａｇer是ＢｏｒderＬａyout,在VE中，如果在工具面板上选好Javａ组件,当鼠标移到有特定LａyoｕtMａnaｇer的容器组件上时（在上图中容器组件是一个JＦraｍe),VE会用适当的形式指示你当前鼠标悬停的位置。在上图在VE告诉我们现在处在BordｅrＬayoｕt的中心位置，此时再在该位置点击一次，我们选好的Jaｖa组件即安放到此位置。

用VE设计好程序界面,就可以切换到\"Source＂视图进行具体的代码的编码了。在此我们就不累述了。

定制VE的环境

ﻫ 之前的讲解，大家学到了如何用VE来进行可视化的Jａｖａ界面设计。为了适应不同的开发者,VＥ也提供了一些选项来让开发者设计自己喜好的VE环境。ﻫ

请打开菜单\"窗口\"->\"首选项\"->＂Java＂->\"Vｉsｕal Edｉtｏr\"，此时出现VE的各种首选项界面。由于笔者安装的ｅclｉpsｅ中文语言包早于VE发布，所以此界面仍然是英文界面。在这里,ＶE的首选项分为三类：\"Appeａrance\ｅ Ｇｅneraｔiｏn＂,\"Pattern Style＂。下面结合图形分别介绍:

１．外观(Appearaｎce)设置：

ﻫ 此面板中可以设置这此内容:

(1) 设置可视编辑器和源代码编辑器的布局，一种是上下分隔的布局,另一种是用页答进行切换的布局(即本文例图中所见到的样式)。ﻫ

（2) 设置是否显示\"属性\"视图和\"Java Bｅans\"视图。ﻫﻫ (3) 设置设计时Swｉng的界面风格。ﻫﻫ 2.代码生成(Code Generａtｉｏn)设置

此面板包括以下内容:

ﻫ (1) 设置是否为新表达式生成注释和tｒｙ｛}…caｔcｈ(）块。ﻫ (2) 设置可视设计界面和代码编辑器之间的代码同步时间。ﻫ ３.代码模板风格(Pａｔtern Styｌe)设置

此面板包括以下内容:ﻫ

(１） VE所用的存取Ｊava Bｅan的代码风格。ﻫﻫ （2） VE初始化时尝试使用的初始化方法。ＶE目前已提供了对Jbｕilｄer、NeｔBean等其它IＤＥ产品可视编辑器生成的Ｊavａ组件代码初始化方式的支持。ﻫ

总结ﻫﻫ 行文至此，我们从VE的安装到Jaｖa组件设计以及VE环境的设置，基本上已对eｃlｉpse的全新工具Ｖisｕal Editor作了一个全面的了解。有了Ｖｉsual Edｉｔｏr，我们所有的开发工作,从图形用户界面到业务逻辑,全部可以在eclipse平台上完成。