服务热线:13616026886

技术文档 欢迎使用技术文档,我们为你提供从新手到专业开发者的所有资源,你也可以通过它日益精进

位置:首页 > 技术文档 > JAVA > 新手入门 > 基础入门 > 查看文档

用eclipse进行可视化java界面设计(1)


   用eclipse进行可视化java界面设计(1)(图一)


  前言
  
  最近,eclipse开源项目终于推出了期待已久的visual editor project(vep)。ve项目使得功能强大的eclipse平台在java开发方面又增加了一个可视化java组件开发利器。它让java开发者再也不用依赖其它的ide产品来做gui界面方面的工作。所有的开发,从应用程序界面到业务逻辑的开发,现在都可以在eclipse平台上完成。本文将引导开发者如何安装配置并使用visual editor。
  
  关于visual editor
  
  开始介绍之前,来看一个笔者用visual editor(以下简称ve)设计的一个java程序界面:
   用eclipse进行可视化java界面设计(1)(图二)
  怎么样,其可视化的界面设计,一点也不逊于其它的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的使用。在这个例子中,笔者要设计一个邮件发送面板,下面是它的草图:
   用eclipse进行可视化java界面设计(1)(图三)
  此面板包括发送人,接收人,邮件主题,邮件内容以及发送和清除按钮,
  
  进入visual editor
  
  启动eclipse平台。刚开始,你可能觉得eclipse并没有什么变化。先别急,请新建一个项目,点击"文件"菜单下的"新建"子菜单,选择并建立一个新的"java项目"。然后在工具栏上的"新建java类" 图标上,点击右边的小箭头 用eclipse进行可视化java界面设计(1)(图四),将展开如下图的菜单:
   用eclipse进行可视化java界面设计(1)(图五)
  在此菜单上,多了一个"visual calss"的子菜单,这就是进入visual editor的入口之一。点击"visual class",弹出如下的对话框:
   用eclipse进行可视化java界面设计(1)(图六)
  在此对话框中,要求输入类的名称(如标记○1)位置),在这里我们输入"messagepanel",以及你想要继承的可视类(如标记○2位置)。你可以选择继承来自swing或awt的任何界面组件,如要继承其它类型的类,请选择"other"并点击"浏览"按钮来选择你要继承的类。在此处,我们选择"panel"和swing选项,继承jpanel,然后点击"完成"按钮,大家就可以见到visual editor的界面了:
   用eclipse进行可视化java界面设计(1)(图七)
  由于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"属性,如下图所示:
   用eclipse进行可视化java界面设计(1)(图八)
  图中显示了jpanel的预设layoutmanager。在"layout"属性的右边,可以通过点击组合框来指定不同类型的layoutmanager。不同的layoutmanager会在属性编辑器中显示不同的参数,如果选择gridlayout,属性编辑器中的layout属性将显示另外几种不同的参数,如下图如示:
  用eclipse进行可视化java界面设计(1)(图九)

扫描关注微信公众号