第4章 Java图形用户界面设计.

Presentation on theme: "第4章 Java图形用户界面设计."— Presentation transcript:

1 第4章 Java图形用户界面设计

2 本章学习要点 1.掌握常用的GUI标准组件及图形界面的设计方法 2.掌握JAVA的事件处理机制和常用事件响应代码的编写方法；
3.掌握布局管理、对话框及菜单的设计方法 本章学习要点 2.掌握JAVA的事件处理机制和常用事件响应代码的编写方法；

3 目录 CONTENTS 4.1 概述 AWT和Swing组件 4.2 4.3 事件处理 4.4 布局管理器 4.5 对话框 4.6 菜单

4 4.1 概述

5 GUI—图形用户界面（Graphics User Interface）
4.1.1 基本概念 GUI—图形用户界面（Graphics User Interface） 图形用户界面（Graphical User Interface，简称 GUI，又称图形用户接口）是指采用图形方式显示的计算机操作用户界面。 Java通过java.awt 包和javax.swing 包中的类和接口来实现GUI。 JDK1.0 提供java.awt 包 JDK1.2 新增javax.swing 包

6 Abstract Window Toolkit（抽象窗口工具包）
4.1.1 基本概念 AWT Abstract Window Toolkit（抽象窗口工具包） 为了实现跨平台特性，AWT类库中的各种操作被定义成在一个并不存在的“抽象窗口”中进行。 Sun公司在JDK1.0中就提供了AWT。 Java中用来生成图形用户界面的基础类库是java.awt包，它是Java基本包中最大的一个，定义了所有GUI组件类和容器类，以及其它用于构造图形界面的类。

7 4.1.1 基本概念 GUI设计涉及到的类和接口 Component Java.lang.Object AWTEvent Font
Componet Container Panel Applet Window Frame Graphics MenuComponent 各种布局管理器类 Component GUI设计涉及到的类和接口

8 Component 组件是所有AWT组件的基类，提供了基本的显示和事件处理特征。
4.1.1 基本概念 Component Button Canvas Container Panel Applet ScrollPane Window Frame Dialog FileDialog Choice Checkbox TextComponent TextArea TextField Label Scrollbar List 组件名 容 器 Component 组件是所有AWT组件的基类，提供了基本的显示和事件处理特征。

9 Swing GUI组件=java.awt包的各种GUI组件+新功能
4.1.1 基本概念 Swing GUI组件 在最新的Java EE中，javax.swing包被列入Java的基础类库JFC。 Swing GUI组件=java.awt包的各种GUI组件+新功能 Swing包 特点 包含250多个类：支持类、组件类（都以 J 开头） 轻量组件（没有本地对等组件）代替了AWT的重量 组件（与本地对等组件相关联） Swing包含250多个类（有些是组件，有些是支持类，组件的名字都以 J 开头）， Swing提供了40多个组件，是AWT的4倍，用轻量组件（没有本地对等组件）代替了AWT的重量组件（与本地对等组件相关联）。 重量级组件是指组件的属性跟操作系统有关，轻量级组件跟操作系统无关，轻量级组件在不同平台下显示效果一样 。

10 4.1.1 基本概念 Swing包中类的层次结构： Object Component Window Container Panel
AWT Component 布局管理器位于AWT中 java.awt Window Container Panel Frame Dialog Applet Swing JApplet JFrame JDialog JComponent javax.swing AbstractButton JPanel Frame JLabel JMenuBar JMenuItem JFrame JTextComponent JButton JMenu JTextArea JTextField Swing包中有4个最重要的类： JApplet、JFrame、JDialog、JComponent  JComponent的所有子类都是轻量级组件，其它三个都是重量级组件，轻量级组件必须在这些重量容器中绘制自己。

11 Swing采用的设计范式： MVC（Model-View-Controller，模型-视图-控制器”）
4.1.1 基本概念 Swing采用的设计范式： MVC（Model-View-Controller，模型-视图-控制器”） 模型（Model）——用于存储定义该组件的数据； 视图（View）——用模型中的数据生成该组件的可视化表示（即显示出该组件）； 控制器（Controller）——响应用户对该组件的交互操作。 MVC是一种先进的组件设计模式。

12 4.1.1 基本概念 MVC结构示意图 视图 （组件外观） 模型 UI代表 （组件数据） （向组件提供外观和感觉） 控制器
（处理事件，更改模型或者视图）

13 4.1.1 基本概念 设计图形界面的步骤 1）根据需要创建界面元素，设计出界面的物理外观；
2） 定义界面元素对不同事件的响应，实现界面与用户的交互功能。

14 4.1.2 图形用户界面元素 组件 用户自定义成分 容器

15 4.1.2 图形用户界面元素 （1）容器（Container）
容器是用来组织其他界面成分和元素的单元，如窗体（Frame）、面板（Panel），可放置基本组件。顶层容器是 Container。 主要作用: 用容器可以分解图形界面的复杂性。 特点： 容器有一定的范围、位置、背景，容器里可以包含许多其他的界面元素，并按一定规则来排列所包含的元素，可以被用来完成某种交互功能，容器还可能被包含在其他容器中。

16 4.1.2 图形用户界面元素 （2）组件（Component）
组件是图形界面的最小单位，里面不能再包含其他成分。如：命令按钮、文本域、标签等。组件的作用完成与用户的一次交互，如接受用户指令、向用户显示文本等。 所有的组件都必须存在于容器之中。 使用组件的步骤：创建组件对象、确定属性→布局到容器中→注册事件监听者→重写事件处理方法。 TextField input=new TextField(6); add(input); input.addActionListener(this); public void actionPerformed(ActionEvent e){ if(e.getSource()==input) output.setText(input.getText()+“,欢迎你！”); }

17 4.1.2 图形用户界面元素 常用的GUI组件 包： java.awt.* Label、Button、 List、TextField…
Frame、Panel、 Container 包：javax.swing.* JLabel、JButton 、Jlist、 JTextField… JFrame、JPanel AWT Swing 建议：不要在容器中混合使用AWT和Swing组件

18 JTextField、JTextArea、
4.1.2 图形用户界面元素 常用的swing组件 组件类名 描述 JLabel 标签 JTextField、JTextArea、 JPasswordField 可编辑的单行文本框/多行文本域/密码框 JButton 按钮 JCheckBox 复选框 JRadioButton 单选框 JComboBox、JList 组合框（下拉列表框）、列表框 JPanel 面板 JFrame 框架

19 4.1.2 图形用户界面元素 （3）用户自定义图形界面成分
用户自定义成分是指利用Java类库中的类及其方法来绘制符合用户特定要求的图形界面成分,也可以将已经存在的图形、动画等加载到当前程序中来。 1) 绘制图形 Graphics类——绘制直线、各种矩形、多边形、圆和椭圆等 Point类——表示一个象素点 Dimension类——表示宽和高 Rectangle类——表示一个矩形 Polygon类——表示一个多边形 Color类——表示颜色

20 Java中用一个Font类的对象来表示一种字体显示效果，包括字体类型、字型和字号。
4.1.2 图形用户界面元素 2) 显示文字 Java中用一个Font类的对象来表示一种字体显示效果，包括字体类型、字型和字号。 Font.PLAIN ——正常 字型常量 Font.BOLD ——粗体 Font.ITALIC ——斜体 创建字体对象 Font MyFont=new Font(“TimesRoman”,Font.BOLD,12); 使用字体对象 g.setFont(MyFont); //Graphics对象 btn.setFont(MyFont); //某个名为btn的按钮对象 可以用getFont（）方法返回当前对象使用字体的情况。

21 4.1.2 图形用户界面元素 3) 控制颜色 每个Color对象代表一种颜色，用户可以直接使用系统定义好的13种颜色常量，也可以通过红、绿、蓝三色比例来创建自己的Color对象。 Color类的构造函数 public Color(int Red,int Green,int Blue); // 每个参数的取值范围在0-255之间。 public Color(float Red, float Green, float Blue); // 每个参数的取值范围在0-1.0之间 public Color(int RGB); // 指明RGB三色的比例，这个参数的0-7比特代表红色的比例，8-15比特代表绿色的比例，16-23比特代表蓝色的比例。

22 4.1.2 图形用户界面元素 例： 创建自己的颜色： Color blueColor= new Color(0,0,255);
g.setColor(blueColor); 利用系统的颜色常量： g.setColor(Color.cyan); GUI控件的颜色设置方法 public void setBackground(Color c); //设置背景颜色 public Color getBackground(); //取得背景颜色 public void setForeground(Color c); //设置前景颜色 public Color getForeground(); //取得前景颜色

23 Java中可以利用Graphics类的drawImage（）方法显示图象。显示图象涉及3个方法：
4.1.2 图形用户界面元素 4) 显示图象 Java中可以利用Graphics类的drawImage（）方法显示图象。显示图象涉及3个方法： drawImage（参数1，参数2，参数3） 参数1——Image对象，可以用系统为Applet类定义的getImage（）方法获得。 参数2、参数3——显示时图象左上角的X.Y坐标 getImage（参数1，参数2 ） 参数1——图象文件所在的URL地址 参数2——图象文件的文件名 getDocumentBase（） 获取含有该Applet的HTML文件的URL地址。

24 4.1.2 图形用户界面元素

25 4.1.2 图形用户界面元素 5) 实现动画效果 用Java实现动画的原理与放映动画片类似，取若干相关的图象或图片，顺序、连续地在屏幕上先显示，后擦除，循环往复就可以获得动画的效果。

26 选用适合主题的色调和风格，简洁明快，重在协调
4.1.3 设计图形界面的一般原则 保持风格的一致性 背景颜色耐看，避免黑、大红、艳绿、明黄 采用统一字体，颜色对比清晰、字号大小合理 布局统一，组件尺寸恰当、外观一致 注重操作的友好性 必要的操作提示与信息反馈 考虑用户的普遍习惯 选用适合主题的色调和风格，简洁明快，重在协调 多浏览国外著名公司的网站 参考大公司开发的专业产品 商业经典色系：蓝色、灰色、蓝白、蓝灰 界面的边界一般设为不可调整大小，以免影响布局