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

　　前言

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

　　关于Visual Editor 字串4

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

字串4

　　 字串4

　　怎么样，其可视化界面设计，一点也不逊于其它Java可视化界面开发工具。

　　Visual Editor是一个开源eclipse编辑器。它同JDT、PDE等其它eclipse工具项目一样，是一个全新eclipse工具项目。它可以进行可视化编辑java GUI程序，也能编辑可视化Java Bean组件。它能与eclipseJava Editor集成在一起，当在Visual Editor中编辑图形界面时，会立即反馈到java Editor中代码。反之亦然。 字串6

　　VE是一个可视化开发一个framework，当前版本VE是0.5.0RC1版，本版本VE支持Swing和AWT可视Java组件开发。由于这个framework设计具有通用性，它也可以很容易实现C 或其它语言下可视化开发。其将来版本(从1.0开始)，将会支持SWT开发。更多关于Visual Editor信息，请看参考资料相关链接。 字串7

　　下载与安装 字串1

　　由于Visual Editor是用纯java编写，所以它应该可以在任何操作系统上运行。但当前VE版本是0.5.0RC1，只在windows和linux平台上经过测试。所以如果你使用是这两种操作系统之外其它操作系统，你应该先阅读VEreadme文件，安装和使用VE前，必须先安装以下版本eclipse和相关支持类库：

　　Eclipse build 2.1.2 (build page) (download zip) 字串6

　　EMF build 1.1.1: (build page) (download zip) 字串7

字串4

　　GEF Build 2.1.2: (build page) (download zip) 字串7

　　为了方便中国开发者，eclipse也提供了一个中文语言包，下载安装后，elcipse环境将变成全中文界面。在本文中，笔者用eclipse也安装了此中文语言包。之后就可以从以下地址下载Visual Editor了：

　　http://download.eclips.org/vep…. 字串6

　　下载后VE是一个zip档案，请将其压缩包中plugins和features目录下内容解压到eclipse安装目录相应目录中即可。如果你eclipse是运行着，请关闭并重新启动eclipse。

字串4

　　开始一个设计任务 字串9

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

　　 字串4

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

　　进入Visual Editor

字串4

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

字串4

　　 字串6

字串4

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

　　 字串1

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

　　

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

　　如图中1所示，是VE工具面板，提供"选取"、"框选"等选择工具。还有Swing组件，Swing容器，Swing菜单以及AWT控件设计工具。在面板下方有"Design"和"Source"两个页签，用来切换设计界面和Java源代码视图。

字串1

　　图中2是VE工具栏，包括工具面板中一些常用按钮。 字串3

　　图中3是"Java Beans"视图和"属性"视图，两个视图可以切换显示。"Java Beans"视图用树形结构即时显示设计中用到各种Java Bean组件层次。而"属性"视图显示显示当前所选中Java bean组件属性值列表，你可以在此列表中编辑各项Java Bean属性值。 字串3

字串1

　　图中灰色矩形区域即是我们最开始选择JPanel，所有工作就从它开始。

字串7

　　摆设Swing组件

　　做过Swing GUI界面设计人都知道，Java应用程序界面上元素位置是用LayoutManager来管理。JPanel预设布局管理器是FlowLayout。VE目前支持所有传统布局管理器（这里所指传统布局管理器是指JDK1.4之前布局管理器。可惜是VE目前还不支持从JDK1.4开始有SpringLayout）。 字串9

　　要设置JPanellayout，请先在设计界面中选中JPanel，再切换到"属性"视图，找到"layout"属性，如下图所示： 字串8

　　 字串3

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

　　

　　先前FlowLayout三个参数alignment, horizontal gap和vertical gap变成了GridLayout另外四种参数：columns, horizontal gap, rows, vertical gap。 字串2

　　为了方便设计，笔者在这个例子中将采用null，即不用任何LayoutManager来设计界面。

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

字串9

　　 字串6

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

　　

　　显示如下图视窗： 字串7

　　

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

　　

字串7

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

　　添加事件处理 字串8

　　经过前面步骤，VE可视化设计任务就基本上完成了。在我们设计界面中，有"Send"和"Clear"按钮。我们再来看看VE是如何为它们添加事件处理。

字串7

　　在设计界面"Send"按钮上点击鼠标右键，弹出菜单，如下图：

字串7

　　

字串5

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

　　

字串1

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

字串4

　　

　　在上图标记1代码区域，就是我们刚刚添加按钮事件。笔者在事件中调用了一个send方法，如图中标记2代码区域。具体发送邮件代码笔者在这里就不实现了。 字串9

　　同样方法，一样可以为另一个按钮"Clear"添加事件。 字串2

　　在程序中使用自定义组件 字串4

　　在前面我们设计了自己Java组件，现在我们来看看如何在自己程序中――一个窗口中来调用这个组件。

　　使用前面介绍方法，在工具栏上点击"新建Java类"按钮，建立一个JFrameVisual 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组件即安放到此位置。 字串3

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

字串3

　　定制VE环境 字串5

　　之前讲解，大家学到了如何用VE来进行可视化Java界面设计。为了适应不同开发者，VE也提供了一些选项来让开发者设计自己喜VE环境。 字串2

　　请打开菜单"窗口"->"首选项"->"Java"->"Visual Editor"，此时出现VE各种首选项界面。由于笔者安装eclipse中文语言包早于VE发布，所以此界面仍然是英文界面。在这里，VE首选项分为三类："Appearance"，"Code Generation"，"Pattern Style"。下面结合图形分别介绍： 字串7

　　1．外观(Appearance)设置： 字串7

　　

　　此面板中可以设置这此内容：

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

　　(2) 设置是否显示"属性"视图和"Java Beans"视图。 字串8

　　(3) 设置设计时Swing界面风格。

　　2．代码生成(Code Generation)设置

字串5

　　

字串9

　　此面板包括以下内容：

字串1

　　(1) 设置是否为新表达式生成注释和try{}…catch()块。

　　(2) 设置可视设计界面和代码编辑器之间代码同步时间。 字串5

　　3．代码模板风格(Pattern Style)设置 字串4

　　 字串3

字串2

　　此面板包括以下内容：

　　(1) VE所用存取Java Bean代码风格。

　　(2) VE初始化时尝试使用初始化方法。VE目前已提供了对Jbuilder、NetBean等其它IDE产品可视编辑器生成Java组件代码初始化方式支持。 字串2

　　总结

字串9

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

字串5