用Eclipse进行可视化JAVA界面设计.pdf

《用Eclipse进行可视化JAVA界面设计.pdf》由会员分享，可在线阅读，更多相关《用Eclipse进行可视化JAVA界面设计.pdf（13页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、样，其可视化的界面设计，一点也不逊于其它的 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 版，

3、本版本的 VE 支持 Swing和 AWT 的可视 Java 组件开发。由于这个 framework 设计的具有通用性，它也可以很容易的实现 C+或其它语言下可视化开发。其将来的版本(从 1.0 开始)，将会支持 SWT 的开发。更多的关于 Visual Editor 的信息，请看参考资料的相关链接。下载与安装 由于 Visual Editor 是用纯 java 编写的，所以它应该可以在任何操作系统上运行。但当前的 VE 版本是0.5.0RC1，只在 windows 和 linux 平台上经过测试。所以如果你使用的是这两种操作系统之外的其它操作系统，你应该先阅读 VE 的 readme 文件，

4、安装和使用 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.ecli

5、ps.org/vep.下载后的 VE 是一个 zip 档案，请将其压缩包中 plugins 和 features 目录下的内容解压到 eclipse 安装目录的相应目录中即可。如果你的 eclipse 是运行着的，请关闭并重新启动 eclipse。开始一个设计任务 现在，所有程序安装完成，笔者将用一个例子，来讲解Visual Editor 的使用。在这个例子中，笔者要设计一个邮件发送面板，下面是它的草图：此面板包括发送人，接收人，邮件主题，邮件内容以及发送和清除按钮，进入 Visual Editor 启动 eclipse 平台。刚开始，你可能觉得 eclipse 并没有什么变化。先别急，请新建

6、一个项目，点击文件菜单下的新建子菜单，选择并建立一个新的java 项目。然后在工具栏上的新建 Java 类 图标上，点击右边的小箭头，将展开如下图的菜单：在此菜单上，多了一个Visual Calss的子菜单,这就是进入 Visual Editor 的入口之一。点击Visual Class，弹出如下的对话框：在此对话框中，要求输入类的名称（如标记1）位置），在这里我们输入MessagePanel，以及你想要继承的可视类（如标记2 位置）。你可以选择继承来自 swing 或 AWT 的任何界面组件，如要继承其它类型的类，请选择other并点击浏览按钮来选择你要继承的类。在此处，我们选择panel和

7、 Swing 选项，继承 JPanel，然后点击完成按钮，大家就可以见到 Visual Editor 的界面了：由于 eclipse 工作台高度的可定制性，读者现在看到的界面并非 VE 初始的布局，而是经过笔者按喜好的方式重新布局过的透视图，但是这并不会影响读者理解本文内容。如图中 1 所示，是 VE 的工具面板，提供选取、框选等选择工具。还有 Swing 组件，Swing 容器，Swing 菜单以及 AWT 控件设计工具。在面板下方有Design和Source两个页签，用来切换设计界面和Java 源代码视图。图中 2 是 VE 的工具栏，包括工具面板中的一些常用按钮。图中 3 是Java B

8、eans视图和属性视图，两个视图可以切换显示。Java Beans视图用树形结构即时显示设计中用到的各种 Java Bean 组件层次。而属性视图显示显示当前所选中的 Java bean 组件的属性值列表，你可以在此列表中编辑各项 Java Bean 的属性值。图中灰色矩形区域即是我们最开始选择的 JPanel，所有的工作就从它开始。摆设 Swing 组件 做过 Swing GUI 界面设计的人都知道，Java 应用程序界面上的元素位置是用 LayoutManager 来管理的。JPanel 的预设布局管理器是 FlowLayout。VE 目前支持所有的传统的布局管理器（这里所指的传统布局管理

9、器是指 JDK1.4 之前的布局管理器。可惜的是 VE 目前还不支持从 JDK1.4 开始有的 SpringLayout）。要设置 JPanel 的 layout，请先在设计界面中选中 JPanel，再切换到属性视图，找到layout属性，如下图所示：图中显示了 JPanel 的预设 LayoutManager。在layout属性的右边，可以通过点击组合框来指定不同类型的 LayoutManager。不同的 LayoutManager 会在属性编辑器中显示不同的参数，如果选择 GridLayout，属性编辑器中的 layout 属性将显示另外几种不同的参数，如下图如示：先前的 FlowLayo

10、ut 的三个参数 alignment,horizontal gap 和 vertical gap 变成了 GridLayout 的另外四种参数：columns,horizontal gap,rows,vertical gap。为了方便设计，笔者在这个例子中将采用 null，即不用任何 LayoutManager 来设计界面。布局设置好后，就可以在 JPanel 上摆置各种 Swing 组件了。按照我们最开始设计的草图，界面上要摆上四个 Label：From,To,Subject,Message。以及四个文本组件，其第四个应该是 TextArea,用于编辑多行文本。我们在工具面板上选好相关组件，

11、然后在 JPanel 上拖选出一个矩形，组件即按相应大小和位置显示在此矩形区域。再在属性视图中编辑每个 JLabel 和 JButton 的text属性为相应的值。现在来看看下面笔者画出来的界面：看看，设计的如何？笔者不是画家，画出来的界面显得有些凌乱。没关系，VE 也提供一些工具按钮来让我们调整各个组件的位置。请点击 VE 工具栏上的Show alignment window按钮：显示如下图的视窗：通过此视窗，可以将所选组件向上下左右各个方向对齐。还可以使所选组件具有相同高度和宽度。来看看下图经过调整位置后的界面布局：现在看起来是不是美观多了？添加事件处理 经过前面的步骤，VE 的可视化设计

12、的任务就基本上完成了。在我们设计的界面中，有Send和Clear按钮。我们再来看看 VE 是如何为它们添加事件处理的。在设计界面的Send按钮上点击鼠标右键，弹出菜单，如下图：在Event菜单项中，可以看到一个actionPerformed事件。如果要添加其它类型的事件，可以点击Add Events选择其它类型的事件。我们点击actionPerformed事件后，在Java Beans视图的jButton-Send组件下面，多了一个actionPerformed事件类型，如下图所示：在Java Beans视图中，选中actionPerformed事件，再 VE 的窗口中，从Design切换到S

13、ource视图。在上图标记 1 的代码区域，就是我们刚刚添加的按钮事件。笔者在事件中调用了一个 send 方法，如图中标记 2 代码区域。具体的发送邮件的代码笔者在这里就不实现了。同样的方法，一样可以为另一个按钮Clear添加事件。在程序中使用自定义的组件 在前面我们设计好了自己的 Java 组件，现在我们来看看如何在自己的程序中一个窗口中来调用这个组件。使用前面介绍的方法，在工具栏上点击新建 Java 类按钮，建立一个 JFrame 的 Visual Class 类。你也可以在通过菜单文件-新建-Visual Class 来寻一个 JFrame 类。在这里，我们将这个类命名为MyApp。当

14、VE 窗口出现时，可以看到一个空白的 JFrame 显示在设计视图中。此时，点击 VE 的工具面板上的 Choose Bean按钮，然后在弹出的对话框中输入我们设计的 Java 组件的类名MessagePane，再点击确定。这时，当我们的鼠标移到 JFrame 上时，JFrame 会用绿色的线条切分成五份，如下图所示：这是因为 JFrame 的预设 LayoutManager 是 BorderLayout，在 VE 中，如果在工具面板上选好 Java组件，当鼠标移到有特定 LayoutManager 的容器组件上时（在上图中容器组件是一个 JFrame），VE 会用适当的形式指示你当前鼠标悬停

15、的位置。在上图在 VE 告诉我们现在处在 BorderLayout 的中心位置，此时再在该位置点击一次，我们选好的 Java 组件即安放到此位置。用 VE 设计好程序界面，就可以切换到Source视图进行具体的代码的编码了。在此我们就不累述了。定制 VE 的环境 之前的讲解，大家学到了如何用 VE 来进行可视化的 Java 界面设计。为了适应不同的开发者，VE 也提供了一些选项来让开发者设计自己喜好的 VE 环境。请打开菜单窗口-首选项-Java-Visual Editor，此时出现 VE 的各种首选项界面。由于笔者安装的 eclipse 中文语言包早于 VE 发布，所以此界面仍然是英文界面。

16、在这里，VE 的首选项分为三类：Appearance，Code Generation，Pattern Style。下面结合图形分别介绍：1外观(Appearance)设置：此面板中可以设置这此内容：(1)设置可视编辑器和源代码编辑器的布局，一种是上下分隔的布局，另一种是用页答进行切换的布局(即本文例图中所见到的样式)。(2)设置是否显示属性视图和Java Beans视图。(3)设置设计时 Swing 的界面风格。2代码生成(Code Generation)设置 此面板包括以下内容：(1)设置是否为新表达式生成注释和 trycatch()块。(2)设置可视设计界面和代码编辑器之间的代码同步时间。3代码模板风格(Pattern Style)设置