目
录
一 引言 ......................................................................................................................................... 1
二 图形用户界面........................................................................................................................1
(一)注重图形用户界面的设计 ............................................................................................1
(二)出色的图形用户界面设计 ............................................................................................2
1.为用户设计................................................................................................................ 2
2.清楚一致的设计........................................................................................................ 2
3.注意美学因素 ............................................................................................................ 2
4.细节辅助 .................................................................................................................... 2
三 Java Swing 简介..................................................................................................................2
(一)Swing 的特性................................................................................................................. 3
1.可插拔外观风格........................................................................................................ 3
2.轻型组件 .................................................................................................................... 3
3.如何使用 Swing......................................................................................................... 3
(二)Swing 程序包和类......................................................................................................... 4
(三)MVC 体系结构 ................................................................................................................. 5
1.模型 ............................................................................................................................ 5
2.视图 ............................................................................................................................ 5
3.控制器........................................................................................................................ 5
四 图像浏览器的设计与实现.................................................................................................6
(一)需求分析 ........................................................................................................................ 6
1.功能需求 .................................................................................................................... 6
2.环境配置 .................................................................................................................... 7
(二)界面结构设计 ................................................................................................................ 7
(三)组件的选用 .................................................................................................................... 7
(四)主要模块功能及实现 .................................................................................................... 9
1. JImageViewer............................................................................................................ 9
2. JImageFrame.............................................................................................................. 9
3. TreeExplorer.......................................................................................................... 10
4. JFancyButton.......................................................................................................... 10
5. LnFListener............................................................................................................ 10
五 程序运行情况说明............................................................................................................ 10
六 小结........................................................................................................................................ 11
致谢................................................................................................................................................. 12
参考文献........................................................................................................................................ 12
附录................................................................................................................................................. 12
基于 Java 的图形用户界面设计
摘 要 本文讨论了基于 Java 的图形用户界面设计。对图形用户界面、Swing 作了简单的
介绍,给出了一个图像浏览器用 Java 语言实现的详细设计过程。在这个图像浏览器中,使
用到了 Java 开发工具包中的 Swing 库中的一些常用的标准或经扩展了的图形界面元素和处
理图形界面的各种事件。运行和程序测试结果表明:这个浏览器运行良好,能打开 gif、jpg、
png 格式的文件,完成前一张、后一张、放大、缩小等常用操作。
关键词 Java Swing 图形用户界面 软件设计
一 引言
设计和构造用户界面,是软件开发中的一项重要工作。用户界面是计算机的使用者-用
户与计算机系统交互的接口,用户界面功能是否完善,使用是否方便,将直接影响到用户对
应用软件的使用。图形用户界面(Graphics User Interface)简称 GUI,使用图形的方式,帮
助用户方便地向计算机系统发出命令,启动操作,并将系统运行的结果同样以图形的方式显
示给用户。图形用户界面画面生动、操作简便,省去了字符界面用户必须记忆各种命令的麻
烦,深受广大用户的喜爱和欢迎,已经成为目前几乎所有应用软件的既成标准。所以,学习
设计和开发图形用户界面,是应用软件开发人员必修的一课[1]。
Java 语言中,为了方便图形用户界面的开发,设计了专门的 java.awt 类库来生成各种标
准图形界面元素和处理图形界面的各种事件。但是 AWT 的功能还不是很完全,Java 程序的
图形用户界面在不同的平台上(例如,在不同的浏览器中)可能会出现不同的运行效果,如
窗口大小、字体效果将发生变化等[1]。
Swing 是 Sun Microsystems 建立的下一代 GUI 工具包,它包含比 AWT 更多的图形组件。
Swing 支持任意数量嵌套边框的镶边替代物,支持工具提示,可以任意地将键盘事件绑定到
组件中,并且 Swing 中存在支持用来绘制自定义轻型组件的附加调试操作。除了新的组件之
外,Swing 还对 AWT 做出了三个主要改进 [2],它们是轻型组件、可插拔的外观风格和采用
MVC 模式,这使得 Swing 在 GUI 的设计上表现更为灵活。
因此,鉴于学习设计和开发图形用户界面的重要性,和 Java 中 Swing 组件在表现图形
界面上的优势,在这个课题中,我们选用 Swing 包中的 J 组件实现了一个图像浏览器。
二 图形用户界面
图形用户界面(GUI)已成为用户界面的首选。而图形用户界面的设计则成为一般
的软件开发中必不可少并且重要的工作。那么,好的图形用户界面能带来怎样的好处呢?怎
样的界面才是出色的呢?下面,我们就来对这两方面作一个简单的介绍。
(一)注重图形用户界面的设计
用户界面是用户与系统间的桥梁,界面设计的好坏,直接影响用户对软件的使用和评价。
也许一个软件具有很强大的功能,但如果其界面不能使用户与系统间有良好、通畅的沟通,
那么那些强大的功能也很难较好地发挥它的效用。而一个具有良好界面的软件更容易被用户
1
所接受、所欢迎。一个连贯的具有清晰的视觉表达效果的图形界面(GUI),不仅能给用户带
来正面的情绪反应,甚至能在一定程度上帮助用户去发现和理解软件的功能,戏剧般地提高
其可用性。我们都希望设计出功能很好的软件以满足用户需求,那么,为了让它能更方便地
被使用,迎得更多的用户去使用自己的产品,我们有什么理由不在用户界面上下功夫呢?
(二)出色的图形用户界面设计
成功的GUI设计具有很多共同的特征。最重要的是,好的图形用户界面是凭直觉去使
用的,直觉对于有目的的用户意味着容易理解。那种界面一目了然,清晰以致于“透明”,
因为界面不干涉它们本该完成的任务。做到这点并不容易,这种界面用起来方便,设计起来
却很困难。需要在很多方面花时间和精力。
1.为用户设计
设计者不是用户,他需要设计出自己的界面来迎合用户的期望和精神模式,所以弄清楚
谁是自己的用户是非常重要的。例如,通过对用户的了解,可以知道用户最常用的操作是哪
些,就把它们安排在界面上显眼的位置,不是很常用的可以隐含的深一点。又如一个图标设
计成何种形象,才会使用户一看便知那是什么功能。
2.清楚一致的设计
除了同一软件各模块中的术语、风格表达一致外,应该在程序中实现同用户以前使用过
的其它成功软件一致的动作。如一般软件中的剪切功能以“剪刀”形象标明,“ctrl+X”为
快捷键,自己设计时就不要弄成“锤子”和“Ctrl+T”。
3.注意美学因素
开发一个图形化的用户界面组件意味着你必须掌握对视觉效果和情感响应的表达。在界
面的色彩、布局和图标的精致等方面要有所考究。
4.细节辅助
1 提供可视反馈。
作为最一般的规则,当一个操作超过 7~10 秒的时候(时间的长短要根据用户类型
和应用程序的特点来调整),大多数用户希望看到一个带有进度条的消息对话框。
2 提供声音反馈。
尤其是在需要警告用户一个严重问题产生的地方,声音反馈是有用的。但同时也应
该允许用户取消声音反馈,除非错误不得不通知。
3 提供键盘支持。
加速键可以给用户提供一种非常有效的操作方式来访问窗口中的指定菜单项和控
件。加速键应该易于使用并限制在一到两个键(如 F3 或者 Ctrl+P)。
三 Java Swing 简介
浏览 Java 的主页(http://java.sun.com/)时,可以找到对 Swing 的说明,它被描述成一组
可定制的图形组件,可以在运行时指定这些组件的外观风格。不过,Swing 实际上不只这些,
它允许使用 Java 语言进行企业级开发。程序员可以使用 Swing 建立包含许多功能强大的组
2
件的大型 Java 应用程序,并且可以更容易地扩充或者修改这些组件以控制它们的外观和行
为。那么,为了能较好地发挥 Swing 的优势来为自己的 Java 应用程序增色,首先就要对 Swing
有一个总体的认识。
(一)Swing 的特性
1.可插拔外观风格
Swing 类最让人激动的一个方面是能够规定每个组件的外观风格,甚至可以在运行时重
新设置外观风格。这种特性叫做“可插拔外观风格”(Pluggable Look-and-Feel,或简称 PLAF)。
Swing 能够模拟几种外观风格,并且它目前支持 Windows、Unix Motif 和“本地”Java Metal
外观风格。此外,Swing 允许用户在运行时转换外观风格,而不必关闭应用程序。这样,用
户可以进行实验,通过即时反馈来查看哪一个外观风格是自己最喜欢的。并且,用户甚至可
以为每一个 Swing 组件建立自己的外观风格。
2.轻型组件
绝大多数 Swing 组件都是轻型的。在最完美的情况下,这意味着这些组件并不依赖本地
对等组件来绘制自己。相反,它们使用简化的图形基本元素在屏幕上描绘自己,甚至允许部
分图像是透明的。只有少数顶层容器不是轻型的(如 JFrame 和 JWindow)。这个设计允许程
序设计人员在运行时绘制(和重新绘制)自己的应用程序的外观风格,而不是对主机操作系
统的外观风格进行这样的尝试。此外,Swing 组件的设计支持对组件行为进行随意修改。例
如,可以告诉几乎所有的 Swing 组件用户是希望接受输入焦点还是希望拒绝输入焦点,可以
告诉它应该如何处理键盘输入。
3.如何使用 Swing
不是人人都为了同一个原因而使用 Swing。实际上,因为有着各种级别的必须预先具备
的知识,所以 Swing 库有许多使用级别。以下是一些可能的用途:
①在打算建立自己的企业级应用程序时使用 Swing 组件。
第一种方法是大多数 Swing 组件所使用的方法。在这时,使用 Swing 组件类似于使
用 AWT 组件。常见的组件、容器和布局管理器都可以从 Swing 程序包中获得,它们有助
于建立并快速运行应用程序。如果擅长使用 AWT 组件进行编程,只需要浏览对每个组件
的粗略介绍,就可以开始使用了。只有在使用一些更大并且更新的组件(如表和文本),
或者打算将每个组件用作 JavaBean 进行可视编程时,才必须考虑更多的问题。
②建立自定义 Swing 组件――或者扩展已经存在的组件。
建立自定义组件或者扩展现有的组件需要更深入地了解 Swing。这时一定要了解
Swing 体系结构、事件和较低级别的类。此外,如果决定细分 Swing 组件,则必须承担
处理这个组件的责任,否则,新组件的执行情况就可能是不定的。
③为一个或者多个 Swing 组件覆盖或者建立一个新的外观风格。
最后,用户可能希望更改一个或者多个 Swing 组件的外观风格。这是可以使用的3
种方法中最复杂的一种方法,它要求全面了解每个组件的设计、体系结构基本原理和图
3
形基本元素。此外,用户必须了解如何使用 Swing 的 UIManager 和 UIDefaults 类来“设
置”每个组件的外观风格。
(二)Swing 程序包和类
Swing 库中的程序包很多,只在此大致介绍在后面的图像浏览器的实现中用到的程序
包。其中用得最多的当然是 javax.swing,另外有 javax.swing.border、javax.swing.event、
javax.swing.tree、javax.swing.filechooser。以下给出了这些程序包的简短描述。图1
展示了 Swing 组件(类)间的继承关系。
1.javax.swing
包含核心 Swing 组件,其中包括绝大多数模型接口和支持类。
2.javax.swing.border
包含对抽象边框类的定义和8个预定义的边框。边框不是组件,它们是特殊的图形元
素,Swing 将它们作为属性对待,并将它们放置在组件周围,用它们来代替镶边。如果想建
立自定义边框,则可以细分这个程包中某个现有的边框或者从头开始编写一个新的边框。
3.javax.swing.event
定义了几个 Swing 组件用来在类之间传达异步信息的新的监听器和事件。为了建立自
定义事件,可以细分这个程序包中的各种事件,或者编写自己的事件类。
4.javax.swing.filechooser
包含对 JFileChooser 组件的支持。
5.javax.swing.plaf
定义了为每个 Swing 组件建立可插拔外观风格的惟一元素。其各种子程序包被用来在
平台到平台基础上为每个组件绘制单独的外观风格。Windows 和 Motif 外观风格的具体实现
在 com.sun.java.swing.plaf 的程序包中,Mac OS 外观风格在 com.apple.mrj.swing 下。
6.javax.swing.tree
定义了用于分层的树形组件的模型和视图,这种组件可以表现文件结构,或者表现一
个事物具有一系列属性。
4
图1 Swing 组件层次结构
说明:
表示抽象类
表示类
实线 表示继承关系
(三)MVC 体系结构
Swing 使用模型-视图-控制器体系结构(MVC)作为它的每个组件的基本设计。实质上,
MVC 将 GUI 组件拆分成三个元素。每个元素都对组件的表现起着至关紧要的作用。
1.模型
模型包括每个组件的状态数据。不同类型的组件有不同的模型。例如,滚动条组件的模
型可能包含有关可调整“滑尺”当前位置、最大值、最小值和滑尺宽度(与值的范围有关)
的信息。另一方面,菜单可能只包含一个用户用来从中进行选择的菜单项列表。不论组件在
屏幕上是如何被描绘的,这些信息总是相同的,模型数据总是独立于组件的可视表示。
2.视图
视图是指组件在屏幕上的表现形式。可以参见两个不同 GUI 平台上的一个应用程序窗
口,这是显示视图如何不同的一个好例子。又如,几乎所有窗口框架都有一个位于窗口顶端
的标题栏。不过,标题栏的左边可能有一个关闭框(类似于 Mac OS 平台),或者可能在标题
栏的右边有一个关闭框(与 Windows 平台中的类似)。
3.控制器
控制器是用户界面的一部分,它指示组件如何与事件进行交互。事件的形式有很多种,
例如,鼠标单击、获得或者失去焦点、触发特定菜单命令的键盘事件,甚至是重新绘制某一
5
部分屏幕的指示。控制器决定了每个组件如何对事件作出反应。
模 型
模型将数据传给
视图以进行绘制
视 图
控制器根据接收
的事件更新模型
控制器
视图决定传给控制器
的事件
图2 通过 MVC 体系结构进行通信
Swing 通常使用一个叫做模型代理(model-delegate)的 MVC 设计的简化变体。这个设计
将视图和控制器对象合并到一个元素中,即 UI 代理,该元素将组件绘制到屏幕上,并处理
GUI 事件。模型负责维护有关组件状态的信息。使用 Java 语言捆绑图形功能和事件处理会
容一些,因为许多事件处理是使用 AWT 的。模型与 UI 代理之间的通信是双向的。
视 图
控制器
模 型
组件
UI 代理
图3 对于 Swing 而言,视图和控制器被合并成一个 UI 代理对象中
四 图像浏览器的设计与实现
(一)需求分析
1.功能需求
①打开一个图像文件。
②通过树形结构,查看图像文件,并可选择,打开。
③打开多个图像后,可将其平铺显示。
④对打开的所有图像窗口,可同时全部关闭。
⑤能进行前一页,后一页的操作,使当前处于活动状态的图像窗口显示与当前图像
文件相邻的其它图像文件。
⑥能进行对图像的放大缩小操作。
⑦图像被改变后,能重新加载图片。
⑧能选择用户界面的外观。
6
2.环境配置
1 安装 JDK1.4.2(在 D 盘下)。
2 配置环境变量。
在 windows XP 操作系统下,选择“我的电脑”(右键),高级,环境变量。在“用户
变量”--->“新建”,变量名中输入:include,变量值中输入:d:\ j2sdk1.4.2_05\include;
新建变量 lib,值设置为:d:\ j2sdk1.4.2_05\lib;新建变量 path,值设置为:d:\
j2sdk1.4.2_05\bin;然后确定。配置完后,要重新启动计算机,环境变量才能有效。
(二)界面结构设计
欢迎屏幕出现3秒后,显示用户界面,大致布局如下:
①操作区
④图像窗口
②树形
查看区
③图像浏览区
1.操作区
图4 界面结构图
接收用户的大部分操作命令。其中包括一个菜单栏和一个工具栏。
2.树形查看区
以树的形式查看文件,有打开文件的操作。
3.图像浏览区
没有任何操作,只是供显示打开的图像窗口的载体。
4.图像窗口
没有任何操作,当有打开图像文件的命令时,在图像浏览区新建一个图像窗口,显
示图像。
(三)组件的选用
欢迎屏幕,以无边框的窗口显示。自定义类 JSplashWindow,它作为标准组件 JWindow
的子类。并实现接口 Runnable,以控制程序刚启动时,只显示欢迎屏幕,主线程休眠3秒。
主界面由主类 JImageViewer 实现,继承 JFrame,实现 ActionListener 接口,对界面
中简单的“退出”(退出程序)、“关于”命令作出响应。
操作区 JPanel,内加载 JMenuBar,菜单栏能完成所有操作。其中有一菜单实现用户界
7