Java 图形用户界面 (GUI) 编程初步

© 2005 iCarnegie, Inc.

© 2005 iCarnegie, Inc. 1
 GUI 应用的一般设计方法
 Java
GUI 应用的 一般设 计方 法
 创建窗 体
 设计界 面
 管理布 局
 绘制图 形
 使用组 件
 事件编 程
 要求重 点掌握 GUI 应用
 设计方 法
 编程技 巧

Object-Oriented Programme 2
 先看一下运行实例
 Java SwingSet
 Java 2D
 Java 3D (NetBean Project)

Object-Oriented Programme 3
 User Interface Evolution
- Kai Fu Lee in 2003
Natural
User Interface
Personal Assistant
Multimodal (speech, ink…)
Graphical Natural Language
User Interface Search Engines
Hyperlinks
Multiple Windows
Menus Digital Decade
XML
Command line Web Services
1995 Smart devices
Internet
1985 1990
PC GUI
Object-Oriented Programme 4
 1 GUI 编程基础
 图形用 户界面 （ GUI ）使用 户可 以和程 序进 行
可视化 交互。
 无论是 程序的 设计 者还是 使用 者都可 以通 过图形
用户界 面明显 “看 到”和 “感 觉”到 程序 的存在
。
 图形用 户界面 为不 同的应 用程 序提供 了感觉上 一
致的用 户界面 组件 ，可使
 用户在 记忆执 行功 能的复 杂命 令上花 费较 少时
间
 而花更 多的时 间通 过有效 的方 式来使 用程 序。

Object-Oriented Programme 5
 软件设计通常包括三大部分
 一个设 计良好 的软 件通常 包括 三大部 分（ 3层 /
多层结 构）
 表现层 的用户 界面 设计
 业务层 的逻辑 设计
 数据层 的数据 存取 设计

Object-Oriented Programme 6
 用户界面设计
 好的 用户 界面设计 对一个系 统的成 功是 至关重 要
（ SSD4: 用户界面 设计 与测试 ）
 用户界 面设 计的一 般性 原则 包括： 用户 熟悉、 一致 性
、意外 最小 化、可 恢复 性、 用户指 南、 用户差 异性 等
。
 一个 使用 起来困难 的界面
 轻者会 造成 用户操 作不 便
 重者引 起用 户反感
 不管系 统的 功能如 何而 拒绝 使用该 软件 系统
 如果 信息 的表达方 式是混乱 的或是 容易 误解的
 那么用 户可 能会误 解信 息的 涵义
 进行的 一系 列操作 就有 可能 破坏数 据
 甚至导 致灾 难性的 系统 失败
Object-Oriented Programme 7
 1.1 图形用户界面
 计算 机操 作界面的 发展
 从单调 的命 令行形 式到 图形 化窗口 形式 ，
 逐步形 成了 现在计 算机 用户 认可的 图形 用户界 面主 要
特征
 主要集 中在窗口、 图标、菜单 、指点、图 形等方面。
 图形 用户 界面包含 了许多独 立的显 示元 素，供 用户 交互
 它们由 程序 中的 GUI 组件组 成
 GUI 组件是 用户通 过键 盘或鼠 标进 行交 互的对 象， 常
见的
 菜单
 按钮
 文本域
 标签
 下拉列 表框等 Object-Oriented Programme 8
 1.2 Swing 和 ATW
 Java类库中 的 ATW 和 Swing 包提供 了大量 可视
化组件
 AWT 组件 是建立 在 ( 与 OS 平台 ) 对等 模型的
基础上 的重量 级组 件（不 同 OS 平台用 户感 官
不一致 ）
 Swing 组件则 是用 纯 Java 编写的 轻量级 组件
 Swing 带来 了以下 优势 ：
 更丰富 、更方 便的 用户界 面元 素集。
 对底层 平台依 赖更 少，与 平台 有关的 bug 也少
得多
 给不同 平台上 的用 户一致 的感 觉
Object-Oriented Programme 9
AWT 与 Swing 的结构关系及 Swing 的组件
关系

Object-Oriented Programme 10
 1.3 窗体容器
 窗体 （也 叫 Windows ）是显 示在 用户终 端桌 面上 的图
形元 素。
 窗体 是充 当各种组 件和控件 的容器 。
 Java 中的窗 体类容 器可能 是一 个对话 框（ Dialog ）、
框架 （ Frame ）或者是 一个 面板（ Panel ）等。

Object-Oriented Programme 11
 Java 中的主要窗体类容器
 JApplet
 通过启用 Java 的 Web 浏览 器或 其他 Apple 查看器运 行
的程序。
 JDialog
 汇集用户 输入 的模式 或无 模式窗 口。
 JFrame
 顶层应用 程序 窗口。
 JPanel
 容纳部分 界面 的小型 容器 。反过 来， 该容器 又可 用于其 他
任何容器 中， 如 JFrame 、 JPanel 、 JApplet 或 JDialog
组件。
 AWT 窗体
 基于 AWT 的可 视窗 体。 AWT 窗体包括 Applet 、对话 框
、框架和 面板 。
Object-Oriented Programme 12
 窗体容器
 框架（ JFrame ）是—种 常用 的顶层 容器 。框架 的内 部
结构比 较复 杂，它 可以 划分 为 4 种窗格： 根窗 格（ Root
Pane ）、布 局窗 格（ Layered Pane ）、 内容 窗格
（ Content Pane ）和玻璃 窗格 （ Glass Pane ）。
 对 JFrame 添加组 件有两 种方 式：
1 、用 getContentPane 方法获得 JFrame 的内容窗格，再对其加入组
Title JFrame
 1件：、用 getContentPane() 获得 JFrame 的内容Root 窗格 ，
Pane

再对其 加入 组件； Menu

frame.getContentPane().add(childComponent); Layered Pane

 2 、建立 一个 JPanel 之类的中 间容 器，把 组件 添加到

MenuBar
2 、建立一个
容器中 ，用JPanel 之类的中间容器，把组件添加到容器中，用
setContentPane () 把该 容器 置为 Content
JFrame Pane
setContentPane 方法把该容器置为 JFrame 的内容窗格：
的内容 窗格 。
 面板（ JPanel contentPane=new
JPanel ）有一 个能 JPanel(
够在上 ); 面进 行绘 制的表 面， 而
……// 把其它组件添加到 JPanel 中 ;
且其本 身也 是容器 。因 此， 它除了 可以 绘制图 形、 文字
frame.setContentPane(contentPane);
，还能 // 把容纳 按钮、对象设置成为
contentPane 滑动 条等 frame其他用 户界 面元素 。Glass Pane
的内容窗格

Object-Oriented Programme 13
 2 图形与绘图
 Java中用于绘制文字、图形、图像的是 Graphics
类，并通过图形组件的 paintComponent 方法实现
绘制工作。
 通常把 Graphics 称为与 Swing 组件关联的图形上
下文（ graphic context ），
 它包含了各种绘图的方法。
 Graphics 是抽象类
 不能直接创建 Graphics 对象
 只能通过 JPanel 或 JComponent 的派生类得到
一个 Graphics 对象。

Object-Oriented Programme 14
 2.1 坐标系统
 图形上下文使用一个简单的坐标系统，这个坐标系统中的每
个图形元素（像素）用 x 和 y 的坐标来表示。
 坐标系统的原点，其坐标为（ 0 ， 0 ），位于组件的左
上角。
 x 坐标表示一个点与原点的水平距离，从左到右增大
y 坐标表示一个点与原点的垂直距离，从上到下增大

width 宽
原点

（0， （1， （2， x轴

0（）
0， 0（）
1， 0）
1（）
0， 1）
2）

height
高

（x，
y轴 y）
（坐标单位：像素）

Object-Oriented Programme 15
 2.2 颜色
 Java 中有专门处理颜色的类 Color 。
 Java 的颜色是根据 RGB 值来建立的。
 RGB 值是用于指定红色、绿色和蓝色这 3 个分
量的数字组合，三基色混合在一起形成了最终的
颜色。
 Color 对象可以由代表红色、绿色和蓝色的 3 个
单独的 RGB 值创建， RGB 取值范围为 0 到 255
之间的整数。
 Color 类还定义了一些标准的颜色，作为类常量使
用。
 这些颜色可以用来直接定义新的 Color 对象

Color redColor=new Color(255,0,0);// 红色

Color redColor=Color.RED;// 红色
Object-Oriented Programme 16
 import javax.swing.*;
import java.awt.*;
public class Dao extends JFrame{

2.3 绘图 public Dao() {

setSize(width,height);// 设置框架大小
setTitle(" 道 ");// 设置框架标题
// 将框架显示在屏幕正中
 画线 Toolkit kit= Toolkit.getDefaultToolkit();
Dimension screenSize=kit.getScreenSize();
drawLine(int x1, int y1, int x2, int y2) int x=(screenSize.width-width)/2;
该方法将 用当前 的颜 色以（ x1,y1 ）为起 点，（ x2,y2 int）为终
y=(screenSize.height-height)/2;
点画一 条直 线。
setLocation(x,y);// 设置框架位置
 画矩形 setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
void drawRect(int x, int y, int width, int height)
void fillRect(int x, int y, int width, int height) public static void main(String args[]) {
drawRect 方法和 fillRect 方法 分别 可以用 来绘 制一个 Dao 矩形 frame=new Dao();
的轮廓 和一 个被填 充的矩 形。
绘制太极图的程序 Dao.java DrawPanel drawPanel=new DrawPanel( );
矩形的左 上角在 （ x, y ），矩 形的 大小由 参数 width //和把其它组件添加到面板中 height 来确定 ;
frame.setContentPane(drawPanel);
 画椭圆和圆 frame.setVisible(true);
void drawOval(int x, int y, int width, int height) }
int width=400;
原点 void（ 0,0fillOval(int
） x, int y, int width, int height)
width int height=300;
用 drawOval 方法可以 绘制 一个椭 圆。 而用 fillOval } 方法可以 填充 一个椭 圆。
d x轴 class DrawPanel extends JPanel{
椭圆被绘 制在一 个矩 形范围 内， 这个矩 形的 左上角 public 是 (x,y) ，而大 小由 参数 width 和 height 确
DrawPanel(){
（ x,y ） （ x+d/2,
定。 y+d/4 ）
setBackground(Color.GRAY);
}
绘制圆形 （ x, 时，我 们只 需指定 矩形 为一个 正方 形。 // 在面板中绘制太极图形 ;
y+d/4 ） public void paintComponent(Graphics g) {
 画圆弧 d/2
super.paintComponent(g);
heightvoid drawArc(int x, int y, int width, int height, int startAngle, g.setColor(Color.BLACK);
g.fillArc(x,y, d, d,0,180);
int sweepAngle) g.setColor(Color.WHITE);
void fillArc(int x, int y, int width, int height, int startAngle, g.fillArc(x,y, d, d,180,180);
g.setColor(Color.BLACK);
int （
sweepAngle)
x+d/4, y+d/2 ） （ x+d*3/4, g.fillArc(x+d/2, y+d/4, d/2, d/2,180,180);
圆弧被绘 y轴 制在一 个矩 形范围
y+d/2 ）内， 这个矩 形的 左上角 是 (x,y) 点，而 大小 由参数 width 和 height
g.setColor(Color.WHITE);
确定。 （坐标单位：像素） g.fillArc(x, y+d/4, d/2, d/2,0,180);
g.fillOval(x+d*3/4-5, y+d/2-5, 10,10);
圆弧是以 startAngle 为开始 的角 度， sweepAngle 为转过 的角度 而绘 制的。 这些 角是 以度为单
g.setColor(Color.BLACK);
位的。 g.fillOval(x+d/4-5, y+d/2-5, 10,10);
}
 画多边形
void drawPolygon(int x[ ], int y[ ], int numPoints) int x=100;
int y=40;
void fillPolygon(int x[ ], int y[ ],Object-Oriented
int numPoints)Programme
int d=200;
17
}
 Sample code
 TestDraw.java
 ShapesTest.java
 DrawRainbowTest.java
 DrawSmileyTest.java

Object-Oriented Programme 18
 3 事件处理模型
 事件是 由程序 检测 到的行 为和 动作。
 在一个 应用程 序中 ，程序 员通 常无法 预测 用户下
一个将 要执行 的动 作。
 用户可 能会选 择一 个菜单 项， 单击一 个按 钮或者
文本框 。
 为了解 决这个 问题 ，程序 员可 以编写 代码 来处理
感兴趣 的事件 ，而 不是编 写那 些全都 按照 一定顺
序执行 的代码 。
 许多流 行的应 用程 序之所 以称 为是事件驱 动的，
是因为 它们是 为响 应事件 而设 计的。

Object-Oriented Programme 19
 3.1 事件和 Java 事件模型

 图形用 户界面 是事 件驱动 的。

 事件是由程 序检测 到的 行为和 动作 。
 导致该 事件 发生的 对象 称为事件源 。
 事件处 理程 序是处 理事 件和执 行任 务的方 法
，它与 所触 发的事 件关 联。

Object-Oriented Programme 20
 Java 事件处理模型
 Java 事件处 理模型 一般 包括用 户事 件和系 统事
件 。
 Java 事件模 型是一 种“ 源 - 监听 器”模 型。
 事件监 听器： 实现 了专门 的监 听器接 口
 事件源 ：注册 监听 器，并 向他 们发送 事件
 当事件 源产生 某个 事件时 ，它 会向注 册在那 个事
件上的 所有监 听器 发送事 件通 知，以 便执行 相应
的事件 处理程 序。

Object-Oriented Programme 21
 3.2 事件处理实例分析
 一个 Java 事件处 理模型 的具 体步骤 如下 ：
1. 创建 事件 监听器 private class ColorActionListener implements ActionListener {
public void actionPerformed(ActionEvent event){
2. 注册 事件 监听器 }
setColor();

3. 创建 事件 对象 }……
4. 通知 事件 发生 colorButton.addActionListener(new ColorActionListener());
监听器

5. 执行 事件 处理程 序 panel:ColorPanel
ColorActionListener

5 actionPerformed() colorButton

1 4

setColor()
addActionListener()
2

ActionEvent
3
容器

事件源

Object-Oriented Programme 22
 3.3 内部类
 内部类
 在一个类 内部 声明的 类。
 匿名内brighterButton.addActionListener(new
部类 ActionListener() {
 没有为其public void actionPerformed(ActionEvent event) {
取名 并建立 引用 变量 的内部类 。
setBrighter();
 这种类的} 创建 通常不 与外 界发生 关系 ，仅供 一次性 使用 。
});
 这种编程 方法 对于即 时创 建对象 ，处 理监听 任务 是合适 的。

 如果类 B 被定义在 类 A 的内 部
 类 B 称为 类 A 的内部类 ，类 A 称为 类 B 的 包围 类
 类 B 仅为 类 A 所知，仅 限类 A 所用 。
 内部类 B 可以访 问包围 类 A 的所有 成员 ，包括 私有 成员；
 反之不行 ，因 为内部 类的 成员仅 限其 内部使 用， 不能被 其
外部的任 何类 使用。

Object-Oriented Programme 23
 3.4 常用组件的事件

 在 Java 里，所有 的事件都

用 java.util.EventObject 类
的一个 派生类来表 示。
 GUI 界面上 发生的事 件，即
AWT 事件， 作为
java.awt.AWTEvent 的一个
派生类 来定义，
java.awt.AWTEvent 是
EventObject 的一个派生类
。
 虽然对 AWT 与 Swing 类来
说，事 件模型是相 同的，但
Swing 包引入 了许多额 外的
事件。
Java 事件对象的层次结构

Object-Oriented Programme 24
 4 使用 Swing 组件
 使用 Swing 组件 可以 快速构 建用 户图形 界面， 为用 户
操作 提供 更多的便 利性。
 MVC 模型
 布局管 理
 Swing 组件编 程

Object-Oriented Programme 25
 4.1 MVC 模型
 MVC 是面向对 象设 计中 经典模 型之一，用 该模 型设计 的
组件可 以从 三个独 立的 方面 来观察 ：
 它在什 么状 态（模 型， Model ）
 它看起 来是 什么模 样（ 视图 ， View ）以及
 它做些 什么 （控制 器， Controller ）
 这种设 计的 主要优 点在 于模 型、视 图与 控制器 之间 的无
关性， 并实 现不同 观感 的即 插即用 。
 Swing 使用了 模型— 视图 —控制 器（ Model – View
-Controller ， MVC ）模型 ，把图 形组 件的外 观与 其内 容
和操控 分离 开，可 以实 现不 同的观 感。

按钮的 MVC 模型

Object-Oriented Programme 26
 4.2 布局管理
 Java 图形界面 编程 中使用 灵活 的布局 管理 器来组 织和
管理 一个 容器里界 面元 素的 布局。 它执 行的任 务有 ：决
定容 器的 全面尺寸 、决 定容 器里每 个元 素的大 小、 决定
元素 之间 的间隔、 决定 元素 的位置 。
 Java 编程中使 用的 布局管 理器 有：
FlowLayout 、 BorderLayout 、 GirdLayout 、 BoxLay
out 、 CardLayout 、 GridBagLayout 、 OverlayLayout
。其 中前 三种最常 用。
 一些 常见 的 Swing 容器类有 着自 己的缺 省布局 ，例 如：
JFrame 、 JWindow 、 JDialog 、 JApplet 的缺省布 局
是 BorderLayout ； JPanel 的缺省布 局是
FlowLayout ； Box 的缺省 布局是 BoxLayout 。

Object-Oriented Programme 27
 4.3 Swing 组件编程
Swing 组件从功 能上 分可 分为：
 顶层容器 有 JFrame 、 JApplet 、 JDialog 、 JWindow 共
4 个。
常用的基本 GUI 组件如下：
 中间容器 有
 标签（
JPanel JLabel ） 、 JSplitPaneGUI
、 JScrollPane 、
程序设计的一般流程：
JToolBar 、 Box 等
1 、引 入 Swing 等相关 的包
。 2 、选 择观 感
文本域（ JTextField ）
 特殊容器 在 GUI 上起 特殊作 用的（中间层 ，例 如：
LookAndFeel ）
 文本区（ JTextArea
JInternalFrame ）
、 JLayeredPane 、 3JRootPane
、设 置顶 层容器 。
4 、声 明和 创建 GUI 组件
  按钮（实现
基本组件 JButton
GUI 交互的组
） 件， 例如：
5 、设 置 GUI 组件
JButton 、 JComboBox 、
 单选框（ JRadioButton ）
JList 、 JTextField
6 、添 加边 框
等。
 不可编辑 信息 的组件 向用 户显示 不可 7 、向编辑信
容器 中添加息的 组件
组件， 例
及管理
如： JLabel 、 JCheckBox
 复选框（ JProgressBar）。 布局
可编辑信 息的 组件 向用户 显示能 8 、进 行事 件处理
  下拉框（ JComboBox ） 被编 辑的格 式化 信息的 组
件，例如 ：
 列表框（ JList ）
JColorChooser 、 JFileChooser 、 JTable 、 JTextArea 。

Object-Oriented Programme 28
 illustrations
 See : A Visual Guide to Swing Components
 对比一 下 microsoft windows 的窗 口控件 ，如 在
Powerpoint 中 , 甚至 所有的 窗口 程序中
 下学期 在 ssd4 中将学 习， visual studio 2005
vb.net 编程 （ demo ）

Object-Oriented Programme 29