-
用Eclipse进行可视化Java界面设计
【Java开源代码栏目提醒】：网学会员,鉴于大家对Java开源代码十分关注，论文会员在此为大家搜集整理了“用Eclipse进行可视化Java界面设计 - 开发文档”一文，供大家参考学习!
前言 最近Eclipse开源项目终于推出了期待已久的Visual Editor ProjectVEP。
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组件了。
按照我们最开始设计的草图界面上要摆上四个LabelFrom 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的容器组件上时在上图中容器组件是一个JFrameVE会用适当的形式指示你当前鼠标悬停的位置。
在上图在VE告诉我们现在处在BorderLayout的中心位置此时再在该位置点击一次我们选好的Java组件即安放到此位置。
用VE设计好程序界面就可以切换到Source视图进行具体的代码的编码了。
在此我们就不累述了。
定制VE的环境 之前的讲解大家学到了如何用VE来进行可视化的Java界面设计。
为了适应不同的开发者VE也提供了一些选项来让开发者设计自己喜好的VE环境。
请打开菜单窗口-首选项-Java-Visual Editor此时出现VE的各种首选项界面。
由于笔者安装的eclipse中文语言包早于VE发布所以此界面仍然是英文界面。
在这里VE的首选项分为三类AppearanceCode GenerationPattern 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平台上完成-
相关文章 -
最新文件
-
-
特别推荐
2013-10-22
