基于Java的图形用户界面设计.docx

基于Java的图形用户界面设计.docx

《基于Java的图形用户界面设计.docx》由会员分享，可在线阅读，更多相关《基于Java的图形用户界面设计.docx（26页珍藏版）》请在冰豆网上搜索。

基于Java的图形用户界面设计

目录

一　引言1

二　图形用户界面1

（一）注重图形用户界面的设计1

（二）出色的图形用户界面设计2

１．为用户设计2

２．清楚一致的设计2

３．注意美学因素2

４．细节辅助2

三　JavaSwing简介2

（一）Swing的特性3

１．可插拔外观风格3

２．轻型组件3

３．如何使用Swing3

（二）Swing程序包和类4

（三）MVC体系结构5

１．模型5

２．视图5

３．控制器5

四　图像浏览器的设计与实现6

（一）需求分析6

１．功能需求6

２．环境配置7

（二）界面结构设计7

（三）组件的选用7

（四）主要模块功能及实现9

１.JImageViewer9

２.JImageFrame9

３.TreeExplorer10

４.JFancyButton10

５.LnFListener10

五　程序运行情况说明10

六　小结11

致谢12

参考文献12

附录13

基于Java的图形用户界面设计

摘　要　本文讨论了基于Java的图形用户界面设计。

对图形用户界面、Swing作了简单的介绍，给出了一个图像浏览器用Java语言实现的详细设计过程。

在这个图像浏览器中，使用到了Java开发工具包中的Swing库中的一些常用的标准或经扩展了的图形界面元素和处理图形界面的各种事件。

运行和程序测试结果表明：

这个浏览器运行良好，能打开gif、jpg、png格式的文件，完成前一张、后一张、放大、缩小等常用操作。

关键词　Java　Swing　图形用户界面　软件设计

一　引言

设计和构造用户界面，是软件开发中的一项重要工作。

用户界面是计算机的使用者－用户与计算机系统交互的接口，用户界面功能是否完善，使用是否方便，将直接影响到用户对应用软件的使用。

图形用户界面（GraphicsUserInterface）简称GUI，使用图形的方式，帮助用户方便地向计算机系统发出命令，启动操作，并将系统运行的结果同样以图形的方式显示给用户。

图形用户界面画面生动、操作简便，省去了字符界面用户必须记忆各种命令的麻烦，深受广大用户的喜爱和欢迎，已经成为目前几乎所有应用软件的既成标准。

所以，学习设计和开发图形用户界面，是应用软件开发人员必修的一课[1]。

Java语言中，为了方便图形用户界面的开发，设计了专门的java.awt类库来生成各种标准图形界面元素和处理图形界面的各种事件。

但是AWT的功能还不是很完全，Java程序的图形用户界面在不同的平台上（例如，在不同的浏览器中）可能会出现不同的运行效果，如窗口大小、字体效果将发生变化等[1]。

Swing是SunMicrosystems建立的下一代GUI工具包，它包含比AWT更多的图形组件。

Swing支持任意数量嵌套边框的镶边替代物，支持工具提示，可以任意地将键盘事件绑定到组件中，并且Swing中存在支持用来绘制自定义轻型组件的附加调试操作。

除了新的组件之外，Swing还对AWT做出了三个主要改进[2]，它们是轻型组件、可插拔的外观风格和采用MVC模式，这使得Swing在GUI的设计上表现更为灵活。

因此，鉴于学习设计和开发图形用户界面的重要性，和Java中Swing组件在表现图形界面上的优势，在这个课题中，我们选用Swing包中的J组件实现了一个图像浏览器。

二　图形用户界面

图形用户界面（ＧＵＩ）已成为用户界面的首选。

而图形用户界面的设计则成为一般的软件开发中必不可少并且重要的工作。

那么，好的图形用户界面能带来怎样的好处呢？

怎样的界面才是出色的呢？

下面，我们就来对这两方面作一个简单的介绍。

（一）注重图形用户界面的设计

用户界面是用户与系统间的桥梁，界面设计的好坏，直接影响用户对软件的使用和评价。

也许一个软件具有很强大的功能，但如果其界面不能使用户与系统间有良好、通畅的沟通，那么那些强大的功能也很难较好地发挥它的效用。

而一个具有良好界面的软件更容易被用户所接受、所欢迎。

一个连贯的具有清晰的视觉表达效果的图形界面（GUI），不仅能给用户带来正面的情绪反应，甚至能在一定程度上帮助用户去发现和理解软件的功能，戏剧般地提高其可用性。

我们都希望设计出功能很好的软件以满足用户需求，那么，为了让它能更方便地被使用，迎得更多的用户去使用自己的产品，我们有什么理由不在用户界面上下功夫呢？

（二）出色的图形用户界面设计

成功的ＧＵＩ设计具有很多共同的特征。

最重要的是，好的图形用户界面是凭直觉去使用的，直觉对于有目的的用户意味着容易理解。

那种界面一目了然，清晰以致于“透明”，因为界面不干涉它们本该完成的任务。

做到这点并不容易，这种界面用起来方便，设计起来却很困难。

需要在很多方面花时间和精力。

１．为用户设计

设计者不是用户，他需要设计出自己的界面来迎合用户的期望和精神模式，所以弄清楚谁是自己的用户是非常重要的。

例如，通过对用户的了解，可以知道用户最常用的操作是哪些，就把它们安排在界面上显眼的位置，不是很常用的可以隐含的深一点。

又如一个图标设计成何种形象，才会使用户一看便知那是什么功能。

２．清楚一致的设计

除了同一软件各模块中的术语、风格表达一致外，应该在程序中实现同用户以前使用过的其它成功软件一致的动作。

如一般软件中的剪切功能以“剪刀”形象标明，“ctrl+X”为快捷键，自己设计时就不要弄成“锤子”和“Ctrl+T”。

３．注意美学因素

开发一个图形化的用户界面组件意味着你必须掌握对视觉效果和情感响应的表达。

在界面的色彩、布局和图标的精致等方面要有所考究。

４．细节辅助

1提供可视反馈。

作为最一般的规则，当一个操作超过7～10秒的时候（时间的长短要根据用户类型和应用程序的特点来调整），大多数用户希望看到一个带有进度条的消息对话框。

2提供声音反馈。

尤其是在需要警告用户一个严重问题产生的地方，声音反馈是有用的。

但同时也应该允许用户取消声音反馈，除非错误不得不通知。

3提供键盘支持。

加速键可以给用户提供一种非常有效的操作方式来访问窗口中的指定菜单项和控件。

加速键应该易于使用并限制在一到两个键（如F3或者Ctrl+P）。

三　JavaSwing简介

浏览Java的主页（应用程序增色，首先就要对Swing有一个总体的认识。

（一）Swing的特性

１．可插拔外观风格

Swing类最让人激动的一个方面是能够规定每个组件的外观风格，甚至可以在运行时重新设置外观风格。

这种特性叫做“可插拔外观风格”（PluggableLook-and-Feel，或简称PLAF）。

Swing能够模拟几种外观风格，并且它目前支持Windows、UnixMotif和“本地”JavaMetal外观风格。

此外，Swing允许用户在运行时转换外观风格，而不必关闭应用程序。

这样，用户可以进行实验，通过即时反馈来查看哪一个外观风格是自己最喜欢的。

并且，用户甚至可以为每一个Swing组件建立自己的外观风格。

２．轻型组件

绝大多数Swing组件都是轻型的。

在最完美的情况下，这意味着这些组件并不依赖本地对等组件来绘制自己。

相反，它们使用简化的图形基本元素在屏幕上描绘自己，甚至允许部分图像是透明的。

只有少数顶层容器不是轻型的（如JFrame和JWindow）。

这个设计允许程序设计人员在运行时绘制（和重新绘制）自己的应用程序的外观风格，而不是对主机操作系统的外观风格进行这样的尝试。

此外，Swing组件的设计支持对组件行为进行随意修改。

例如，可以告诉几乎所有的Swing组件用户是希望接受输入焦点还是希望拒绝输入焦点，可以告诉它应该如何处理键盘输入。

３．如何使用Swing

不是人人都为了同一个原因而使用Swing。

实际上，因为有着各种级别的必须预先具备的知识，所以Swing库有许多使用级别。

以下是一些可能的用途：

①在打算建立自己的企业级应用程序时使用Swing组件。

第一种方法是大多数Swing组件所使用的方法。

在这时，使用Swing组件类似于使用AWT组件。

常见的组件、容器和布局管理器都可以从Swing程序包中获得，它们有助于建立并快速运行应用程序。

如果擅长使用AWT组件进行编程，只需要浏览对每个组件的粗略介绍，就可以开始使用了。

只有在使用一些更大并且更新的组件（如表和文本），或者打算将每个组件用作JavaBean进行可视编程时，才必须考虑更多的问题。

②建立自定义Swing组件――或者扩展已经存在的组件。

建立自定义组件或者扩展现有的组件需要更深入地了解Swing。

这时一定要了解Swing体系结构、事件和较低级别的类。

此外，如果决定细分Swing组件，则必须承担处理这个组件的责任，否则，新组件的执行情况就可能是不定的。

③为一个或者多个Swing组件覆盖或者建立一个新的外观风格。

最后，用户可能希望更改一个或者多个Swing组件的外观风格。

这是可以使用的３种方法中最复杂的一种方法，它要求全面了解每个组件的设计、体系结构基本原理和图形基本元素。

此外，用户必须了解如何使用Swing的UIManager和UIDefaults类来“设置”每个组件的外观风格。

（二）Swing程序包和类

Swing库中的程序包很多，只在此大致介绍在后面的图像浏览器的实现中用到的程序包。

其中用得最多的当然是javax.swing，另外有javax.swing.border、javax.swing.event、javax.swing.tree、javax.swing.filechooser。

以下给出了这些程序包的简短描述。

图１展示了Swing组件（类）间的继承关系。

1.javax.swing

包含核心Swing组件，其中包括绝大多数模型接口和支持类。

2.javax.swing.border

包含对抽象边框类的定义和８个预定义的边框。

边框不是组件，它们是特殊的图形元素，Swing将它们作为属性对待，并将它们放置在组件周围，用它们来代替镶边。

如果想建立自定义边框，则可以细分这个程包中某个现有的边框或者从头开始编写一个新的边框。

3.javax.swing.event

定义了几个Swing组件用来在类之间传达异步信息的新的监听器和事件。

为了建立自定义事件，可以细分这个程序包中的各种事件，或者编写自己的事件类。

4.javax.swing.filechooser

包含对JFileChooser组件的支持。

5.javax.swing.plaf

定义了为每个Swing组件建立可插拔外观风格的惟一元素。

其各种子程序包被用来在平台到平台基础上为每个组件绘制单独的外观风格。

Windows和Motif外观风格的具体实现在com.sun.java.swing.plaf的程序包中，MacOS外观风格在com.apple.mrj.swing下。

6.javax.swing.tree

定义了用于分层的树形组件的模型和视图，这种组件可以表现文件结构，或者表现一个事物具有一系列属性。

图１　Swing组件层次结构

（三）MVC体系结构

Swing使用模型－视图－控制器体系结构（MVC）作为它的每个组件的基本设计。

实质上，MVC将GUI组件拆分成三个元素。

每个元素都对组件的表现起着至关紧要的作用。

１．模型

模型包括每个组件的状态数据。

不同类型的组件有不同的模型。

例如，滚动条组件的模型可能包含有关可调整“滑尺”当前位置、最大值、最小值和滑尺宽度（与值的范围有关）的信息。

另一方面，菜单可能只包含一个用户用来从中进行选择的菜单项列表。

不论组件在屏幕上是如何被描绘的，这些信息总是相同的，模型数据总是独立于组件的可视表示。

２．视图

视图是指组件在屏幕上的表现形式。

可以参见两个不同GUI平台上的一个应用程序窗口，这是显示视图如何不同的一个好例子。

又如，几乎所有窗口框架都有一个位于窗口顶端的标题栏。

不过，标题栏的左边可能有一个关闭框（类似于MacOS平台），或者可能在标题栏的右边有一个关闭框（与Windows平台中的类似）。

３．控制器

控制器是用户界面的一部分，它指示组件如何与事件进行交互。

事件的形式有很多种，例如，鼠标单击、获得或者失去焦点、触发特定菜单命令的键盘事件，甚至是重新绘制某一部分屏幕的指示。

控制器决定了每个组件如何对事件作出反应。

图２　通过MVC体系结构进行通信

Swing通常使用一个叫做模型代理（model-delegate）的MVC设计的简化变体。

这个设计将视图和控制器对象合并到一个元素中，即UI代理，该元素将组件绘制到屏幕上，并处理GUI事件。

模型负责维护有关组件状态的信息。

使用Java语言捆绑图形功能和事件处理会容一些，因为许多事件处理是使用AWT的。

模型与UI代理之间的通信是双向的。

图３　对于Swing而言，视图和控制器被合并成一个UI代理对象中

四　图像浏览器的设计与实现

（一）需求分析

１．功能需求

①打开一个图像文件。

②通过树形结构，查看图像文件，并可选择，打开。

③打开多个图像后，可将其平铺显示。

④对打开的所有图像窗口，可同时全部关闭。

⑤能进行前一页，后一页的操作，使当前处于活动状态的图像窗口显示与当前图像文件相邻的其它图像文件。

⑥能进行对图像的放大缩小操作。

⑦图像被改变后，能重新加载图片。

⑧能选择用户界面的外观。

２．环境配置

1安装JDK1.4.2（在D盘下）。

2配置环境变量。

在windowsXP操作系统下，选择“我的电脑”（右键）,高级,环境变量。

在“用户变量”--->“新建”,变量名中输入：

include，变量值中输入：

d:

\j2sdk1.4.2_05\include;新建变量lib，值设置为：

d:

\j2sdk1.4.2_05\lib；新建变量path，值设置为：

d:

\j2sdk1.4.2_05\bin;然后确定。

配置完后，要重新启动计算机，环境变量才能有效。

（二）界面结构设计

欢迎屏幕出现３秒后，显示用户界面，大致布局如下：

图４　界面结构图

1．操作区

接收用户的大部分操作命令。

其中包括一个菜单栏和一个工具栏。

2．树形查看区

以树的形式查看文件，有打开文件的操作。

3．图像浏览区

没有任何操作，只是供显示打开的图像窗口的载体。

4．图像窗口

没有任何操作，当有打开图像文件的命令时，在图像浏览区新建一个图像窗口，显示图像。

（三）组件的选用

欢迎屏幕，以无边框的窗口显示。

自定义类JSplashWindow，它作为标准组件JWindow的子类。

并实现接口Runnable，以控制程序刚启动时，只显示欢迎屏幕，主线程休眠３秒。

主界面由主类JImageViewer实现，继承JFrame，实现ActionListener接口，对界面中简单的“退出”（退出程序）、“关于”命令作出响应。

操作区JPanel，内加载JMenuBar，菜单栏能完成所有操作。

其中有一菜单实现用户界面的外观风格的切换，只能有一种外观风格被选择，因此使用JRadioButtonMenuItem和ButtonGroup。

操作区内另有工具栏，使用JToolBar，为了让工具栏能更好地被拖出和放回原位，而不影响界面的布局，使用自定义的类JToolBarPanel，该类是JPanel的子类，并实现了ContainerListener接口，当容器内容因为有某一组件被加入或删除而发生改变时，该监听器的相关方法将被触发，以调整布局。

在工具栏上，用户能通过按钮完成常用的操作。

为了使用户界面更加整洁，美观，使用了由JButton扩展来的自定义类JFancyButton，该类实现的按钮，不仅具有其父类的可以设置一般状态、鼠标经过状态、鼠标点击状态的不同图标，还去掉了普通按钮具有的边框。

主界面除操作区的以下部分，为了使界面更加灵活，使用了JSplitPane，这样树形查看区就可以被收起，用户就有更大的图像浏览区。

树形区域使用自定义类TreeExplorer，为了在树中只列出gif、jpg、png格式的文件，使用自定义类ImageFilter（实现接口java.io.FileFilter）。

图像浏览区使用JDesktopPane，在其实例的最底层加入了JLabel的一个只带图标的对象，作为图像浏览区的背景。

图像窗口由JInternalFrame扩展的自定义类JImageFrame实现。

因为该窗口是用来打开图像文件的，所以此自定义类中用到了JScrollPane、File、Image。

另外，打开文件的对话框使用了JFileChooser，为了在选择文件中只显示gif、jpg、png格式的文件，使用了JDK1.4.2中demo/jfc下FileChooserDemo中的ExampleFileFilter（继承于javax.swing.filechooser.FileFilter）。

“关于”对话框的弹出直接用JOptionPane.showMessageDialog（）方法完成。

图５标明了以上所提组件在界面上的位置安排：

图５　图形界面详细布局安排（主类JImageViewer所使用组件）

（四）主要模块功能及实现

实现这个程序，共定义了９个类（不计内部类）。

它们分别是:

主类JImageViewer、JToolBarPanel、JFancyButton、JSplashWindow、ExampleFileFilter、TreeExplorer、JImageFrame、ImageFilter和ExampleFileFilter。

其中ExampleFileFilter是从JDK中demo/jfc/FileChooserDemo的源文件中借用的，JToolBarPanel则借鉴于JDK中demo/jfc/swingset2中的swingset2.java中定义的ToolBarPanel类。

它们之间的关系如图６所示：

图６　各模块关系图

说明：

上图中AB表示类A使用类B

其中主要模块的功能及实现介绍如下（详细代码实现请见附录）：

１.JImageViewer　

建立用户界面外观，使用监听器LnFListener响应用户对界面外观的选择，实现ActionListener接口，对“退出”、“关于”操作作出响应。

另外，其中定义了内部类OpenListener、CloseallListener、TitleActionListener、BrowseListener、ScaleListener，它们都实现了ActionListener，分别处理“打开”（文件）、“关闭所有图像窗口”、“平铺窗口”、“前后翻页”和“放大缩小”的命令。

２.JImageFrame

显示图像，继承JInternalFrame，其结构如下：

属性：

Imageimage;　　//当前图像

　　Filefile;　　　　//当前图像文件

　　JScrollPanejsp;　//滚动窗，当图像过大时，可以滚动滚动条来查看

　　JLabeljlab;　　　　　　　　　　　//只含图标，显示图片

方法：

publicvoidsetImage（Filef）　　　//更新当前图片为图片文件f

　　　publicFilegetImage（）　　//得到当前图片，并返回

　　　publicvoidscaleImage（doublep）//按照参数p的比例更改图片大小

　　　publicvoidreLoad（）　　　　　　//重新加载当前图片文件

３.TreeExplorer

一个浏览面板，以树的形式浏览磁盘上的图像文件，继承JScrollPane。

其中定义了４个内部类：

①ＦileNode：

定义文件节点类。

包含了一个File成员对象，所有操作都是围绕着这个File对象来进行的。

其中的主要方法expand（），是对节点展开，获取子节点的具体实现。

②MyRenderer:

继承TreeCellRenderer（渲染器接口）的默认实现类DefaultTreeCellRenderer。

对树中节点的图标进行了设置，不同状态的节点使用不同的图标，同时增加了tooltip支持。

③MyExpansionListener：

节点展开事件监听器，实现TreeExpansionListener。

对节点展开事件进行了处理，因为展开节点，获取节点信息时，处理的时可能会比较长，为了不让界面的操作冻结，其中使用了线程。

④MySelectionListener：

选择事件监听器，实现TreeSelectionListener。

当树中节点被选中时，触发选择事件，将当前路径的文件，赋给属性currentfile，以便将当前树中选中的文件传递给其它类。

４.JFancyButton

无边框按钮，接收用户命令，触发监听器，继承JButton。

通过以下三条语句去掉按钮边框：

setBorderPainted（false）;

setBorder（newEmptyBorder（newInsets（0,0,0,0）））;

setContentAreaFilled（false）;

５.LnFListener

对外观进行设置，实现ActionListener接口，使用以下语句：

UIManager.setLookAndFeel（lnfName）;

SwingUtilities.updateComponentTreeUI（frame）;

五　程序运行情况说明

程序能正常运行，能完成即定的功能需求。

程序执行后，欢迎屏幕如图７；进入主界面，打开三幅图像后，进行“平铺”操作的效果如图８。

图８是在JavaMetal风格下，点击Face菜单中的选项可切换到Windows或MacOS的外观风格。

界面中对功能键都给出了相应的提示和快捷键。

程序在使用“树”获取磁盘文件信息时，运行有点慢，应该是由于Java是解释型语言所致。

另外，前后翻页的功能在代码实现上方法不太好，导致结果不是很稳定，不过还是能够达到按序浏览某文件夹内所有图像的效果，这个文件夹是当前得到焦点的图像窗口中所显示的图像文件所在的文件夹。

图７　欢迎屏幕

图８　Metal风格下的界面（平铺了三个图像窗口）

六　小结

本次毕业设计，讨论了图形用户界面设计的重要性，如何用JavaSwing设计一个良好的图形用户界面，并成功实现了一个图像浏览器。

这个图像浏览器运行良好，能打开gif、jpg、png格式的文件，完成前一张、后一张、放大、缩小等操作。

由于自己水平有限，这个图像浏览器功能比较简单，还有许多地方需要完善。

如对于树的选择事件，如果当用户打开其中某一文件夹节点时，在右边的图像浏览区能够显示出该文件夹内的所有图像的缩略图，双击缩略图，就能打开图像。

这样会更方便用户对文件的选择。

另外，打开文件的对话框，最好也能有预览的功能。

既然是图像浏览器，最好还附带一些对图像的处理功能。

致谢

参考文献

[1]印旻．Java语言与面向对象程序设计．北京：

清华大学出版社，2000．183～184

[2]MarcLoy，RobertEckstein，DaveWood等．