第8章 图形用户界面设计概述

36
1 第8第 第第第第第第第第第第 第第第第第第第第第第第第第第第 第第第第第第第第第第第第第第 第第Java 第第第第第第第第第第第第第第第第第 Graphical User Interface,GUI )。 第第第第第 Java GUI 第第第AWT 第第第 第第第第 第第第第第 Java 第第第第第第第

Upload: luna

Post on 12-Jan-2016

98 views

Category:

Documents


3 download

DESCRIPTION

第8章 图形用户界面设计概述. 现代的应用程序早已进入图形时代,命令行程序只在特殊的时候才会使用。 Java 提供了丰富的类用来生成图形用户接口( Graphical User Interface,GUI)。 本章将讲述 Java GUI 的发展、 AWT 的构成、布局管理器的应用及 Java 的事件处理模型。. 8.1 AWT 概述. Java1.0 包含一个用于 GUI 编程的类库,叫 抽象窗口工具箱( Abstract Window Toolkit, AWT) 。 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: 第8章  图形用户界面设计概述

1

第 8 章 图形用户界面设计概述

现代的应用程序早已进入图形时代,命令行程序只在特殊的时候才会使用。

Java 提供了丰富的类用来生成图形用户接口( Graphical User Interface,GUI )。

本章将讲述 Java GUI 的发展、 AWT 的构成、布局管理器的应用及 Java 的事件处理模型。

Page 2: 第8章  图形用户界面设计概述

2

8.1 AWT 概述• Java1.0 包含一个用于 GUI 编程的类库,叫抽象窗口工具箱 (Abstract Window Toolkit, AWT) 。

• Java.awt 包中最核心的类是 Component 类,是构成 Java 图形用户界面的基础,所有其他组件都是从 Component 类派生出来的。

• 注意: Component 类是一个抽象类,不能直接使用。

• 在 Componen 类中定义了 AWT 组件具有的一般功能如大小和位置控制 ,外形控制,组件的状态控制等

Page 3: 第8章  图形用户界面设计概述

3

· 大小和位置控制一个组件的大小和位置可以通过组件提供的一些方法来指定,相应

的方法包括 setSize() 、 setLocation() 等。· 外形控制可以通过 getFont() 、 setFont() 、 setForeground() 等方法设置组件

中的字体、颜色等。· 基本绘画支持方法 repaint() 、 paint() 、 update() 用于在屏幕上绘制组件, AWT

绘图系统通过一个单独的线程控制程序何时进行组件的绘制。· 组件的状态控制提 供 的 有 关 组 件 状 态 控 制 方 面 的 方 法 有 :

setEnable() 、 isEnable() 、 isVisible() 等。从 Component 类派生出来的 Container 类用于表示 GUI 中的容器,

该类具有的功能是组件管理和布局管理。在组件管理中,包含的方法有 add() 、 remove() 、 getComponent()

等,分别用于添加组件、删除组件和获得某个组件。

Page 4: 第8章  图形用户界面设计概述

4

8.2 AWT 基本组件 为了方便大家进行图形用户界面设计,本节介

绍 AWT 基本组件。实际上一个图形用户界面就是由一些 AWT 基本组件组成的。

· 按钮( Button )按钮是 AWT 中最常见的一种组件,用户可以通过单击操作,

如果希望按钮响应用户的单击操作,就需要实现相关的鼠标单击事件, (8.5 节 )

按钮组件的生成方式如下:Button butobj = new Button ( " OK " )上面的语句生成了一个标记文字为 OK 的按钮。

Page 5: 第8章  图形用户界面设计概述

5

· 复选框( Checkbox )单选框( Radio Button )

复选框和单选框组件都提供简单的“ on/off” 开关

单选框之间同一时刻只能有一个被选中

一组复选框之间没有特定的约束关系,可以有任意个复选框被同时选中

Page 6: 第8章  图形用户界面设计概述

6

复选框对象的生成方法checkbox chbobj=new checkbox( " one

"、 null 、 true);

第一个参数是复选框的文本标签 ;

第二个参数为复选框的组名 ,

组名为空 , 表示生成的对象是复选框第三个参数代表复选框对象的状态 ,ture 表示生成的复选框对象为选中状态 ,false 表示非选中状态。

Page 7: 第8章  图形用户界面设计概述

7

CheckboxGroup cbgobj = new CheckboxGroup ();

Checkbox c1 = new Checkbox ( " one " ,cbgobj, true);

Checkbox c2 = new Checkbox ( " two " ,cbgobj, false);

文本标签:显示在对象上复选框组 : 组名不为空 , 表示生成的对象是单选框复选框对象状态 :ture 表示生成的复选框对象为选中状态 ,false 表示非选中状态。

单选框对象的生成方法生成复选框组对象

生成复选框对象

格式: Checkbox name= new Checkbox ( 文本标签 , 复选框组 , 复选框对象状态 );

Page 8: 第8章  图形用户界面设计概述

8

·下拉式菜单(Choice )下拉式菜单适用于有大量选项同时又需要节省窗口面积的情况,每次只能选择下拉式菜单中的一项。

下拉式菜单对象的生成方式如下:choice choiObj = new Choice ();choiObj.add( " class1 " );choiObj.add( " class2 " );choiObj.add( " class3 " );

以上生成了包含有 class1 、 class2 和 class3的下拉式菜单。 ·标签(Lable )标签可以说是最简单的一种组件,用于在界面上显示一行文字,生成方式如下:Label labObj = new Label ( " Book name " ) ;上面的语句生成了一个标记文字为Book name 的标签。

Page 9: 第8章  图形用户界面设计概述

9

单行文本输入区( TextField )的几种生成方法

// 生成一个空的单行文本输入区TextField tfObj1 = new TextField();

// 生成一个列数为 5 的单行文本输入区,TextField tfObj2 = new TextField(5);

// 生成一个文本内容为 name 的单行文本输入区TextField tfObj3 = new TextField( " name " );

// 生成一个文本内容为 name 且列数为 5 的单行文本输入区

TextField tfObj4 = new TextField( " name " ,5);

注意: TextField 只能显示一行

Page 10: 第8章  图形用户界面设计概述

10

· 文本输入区( TextArea )TextArea 用于显示多行多列的文本信息,生成方式如下:TextArea taObj = new TextArea ( " Hi " ,3,20);

在上面的语句中,第一个参数表示初始字符,第二个和第三个参数分别表示行数和列数。

· 列数( List )列表用于将多个文本选项显示在一个区域中,用户可以同时查看若干个选项。

List Lobj= new List (2,false);// 显示行数,是否允许多选。Lobj.add( " Sun " ); // 在 list 中添加选项 Sun

Lobj.add(“Moon”);// 在 list 中添加选项 Moon

Page 11: 第8章  图形用户界面设计概述

11

 · 滚动窗口( ScrollPane )是一种容器,不能单独使用,可以将其他组件添加到滚动窗口中。

Scrollpane spObj = new Scrollpane ();// 生成滚动窗口spObj.add (pObj);// 在滚动窗口中加入对象 pObj· 菜单( Menu )菜单和其他组件不同,不能直接添加到容器中某一位置,可以添加到菜单条或其他菜单中。

菜单条( MenuBar )是一种水平菜单,只能添加到Frame 对象中,作为菜单树的根基。

下面是菜单条对象生成和添加到 Frame 对象中的示例语句:

Frame frObj = new Frame ( " Frame title " );MenuBar mbObj = new Mew MenuBar ();frObj.setMenuBar (mbObj);

Page 12: 第8章  图形用户界面设计概述

12

在 Java 中,类 Mune 提供了标准的下拉菜单,生成的菜单对象可以被添加到菜单条和其他菜单中。

Frame frObj = new Frame ( " Frame title " );MenuBar mbObj = new MenuBar ();frObj.setMenuBar (mbObj):Menu mbObj1 = new Menu ( " File " );Menu mbObj2 = new Menu ( " Edit " );mbObj.add(mbobj1);mbObj.add(mbobj2);一个菜单通常包含多个菜单项,菜单项对象生成后,通常需要添加

到相应的菜单中,如下示:Memu mobj = new Menu ( " File " );MenuItem miobj1 = new MenuItem ( " Open " );MenuItem miobj2 = new MenuItem ( " Save " );mobj.add(miobj1);mobj.add(miobj2);

Page 13: 第8章  图形用户界面设计概述

13

8.3 AWT 容器 

容器( Container )是 Component 的子类因此容器本身也是一个组件,它具有组件的所有性质,而且还具有容纳其他组件和容器的功能。

本节将介绍 Java 中最常用的两种容器:Frame 和 Panel ,其他容器请参阅 java 的相关文档。

Page 14: 第8章  图形用户界面设计概述

14

8.3.1 Frame

Frame 类是 Window 类的子类它也是一种窗口,具有标题属性,可以按照常用窗口一样调整大小。

可以将组件和面板添加到其中。Java.lang.Object

――+ java.awt.Component

――+ java.awt.Container

――+ java.awt.Window

+―― java.awt.Frame

  图 8—1 Frame 类的继承关系层次图

Page 15: 第8章  图形用户界面设计概述

15

Frame 对象的生成可 以 通 过 Frame 类 的 构造方 法 Frame(String

strObj) 生成 Frame 对象, Frame 的标题由String 类型的参数 StrObj 指定,

注意,这种方法生成的 Frame 对象默认情况下是不可见的,初始大小为( 0 , 0 )。

可以通过 setVisible 和 setSize 方法设置 Frame 的可见性和大小。

下面的语句生成一个标题为“ Frame Example” 、大小为 260×160 的可见 Frame 。

Frame frObj = new Frame ( " Frame Example " );FrObj.setSize (260,160); fr.setVisible(true);

Page 16: 第8章  图形用户界面设计概述

16

8.3.2 Panel Panel 和 Frame 一样,都是容器,也可以将组件和其他面板添加到 Panel 中,

与 Frame 不同的是, Panel 对象必须被放入Window 和 Frame 中才能可见,通常是使用 add()方法将 Panel 添加到 Window 和 Frame 中。

Java.lang.Object ――+ java.awt.Component +―― java.awt.Container

+―― java.awt.Panel

图 8—2 Panel 类的继承关系层次图

Page 17: 第8章  图形用户界面设计概述

17

下面的语句将生成的 Panel 对象添加到 Frame 中,为了将两者区分开, Panel 对象的背景设置为红色。

Frame frObj = new Frame ( " Frame Example" ) ;

Panel pPbj = new Panel ();pPbj.setSize (100,80);pPbj.setBackground (Color.red );frobj.setSize (260,160);frObj.add (pObj ); frObj.setVisible (ture );

Page 18: 第8章  图形用户界面设计概述

18

8.4 布局管理器 布局管理器( layout manager )是用来安排容器中多个组件的位置及大小,以确保 GUI 中各组件能安排在适当的位置。

Java 中的布局类型包括以下几种:FlowLayout (流式布局) BorderLayout (边界布局) GridLayout (网格布局) CardLayout (卡片布局) BoxLayout (框布局) GridBagLayout (网格包布局)

Page 19: 第8章  图形用户界面设计概述

19

简单 GUI 程序 1. java.awt包 称为抽象窗口工具集 AWT( Abstract Window Toolkit),是使用 Java进行 GUI设计的基础。 2. javax.swing包 Swing组件存放在 javax.swing包中。几乎所

有 AWT组件对应有新功能更强的 Swing组件。另外还加入了一些全新的组件。 Swing组件在名称上前面多了一个字母“ J” 。

Page 20: 第8章  图形用户界面设计概述

20

简单 GUI 程序 设置 GUI应用程序的流程:( 1)引用需要的包和类。( 2)设置一个顶层的容器。( 3)根据需要为容器设置布局管理器或使用默认布局管理器。

( 4)将组件添加到容器内,位置自行设计。( 5)为响应事件的组件编写事件处理代码。

Page 21: 第8章  图形用户界面设计概述

21

容器、组件、布局和观感 1. 容器和组件 组件是可以用图形化的方式显示在屏幕上并能够与用户进行交互的对象。 容器是一种特殊的组件,一种能够容纳其他组件或容器的组件。2. 布局管理器 为了使图形用户界面具有良好的平台无关性,提供了专门用来管理组件在容器中的布局的工具。3.观感 决定应用程序的外观。

Page 22: 第8章  图形用户界面设计概述

22

8.4.1 FlowLayout

流布局管理器提供了一种非常简单的布局,用来将一群组件置于一行。它是 JPanel 的默认布局管理器。流布局管理器会将组件安排在同一行(由左向右排列)并维持组件原本所定义的大小,当此行已经排满时,他会将剩余的组件自动排列到下一行,而各行的组件会向中间对齐也可以通过使用常量 LEFT 、 CENTER 或

RIGHT 来改变默认地对齐方式

Page 23: 第8章  图形用户界面设计概述

23

FlowLayout 常用的构造函数FlowLayout(): 生成一个 FlowLayout 对象。FlowLayout(int align): 生成一个 FlowLayout 对象并指定对齐方式( LEFT , CENTER , RIGHT ),默认为 CENTER 。

FlowLayout(int align, int hgap, int vgap): 生成一个FlowLayout 对象并指定对齐方式、同一行各组件之间的间距(默认 5 像素)以及行间距(默认 5 像素)。FlowLayout 的一些常用的方法:

setAlignment(int align): 制定组件对齐的方式。setHgap(int gap): 指定同一行各组件的距离。setVgap(int gap): 指定各行之间的距离。

Page 24: 第8章  图形用户界面设计概述

24

例 8-1 流布局管理器

效果:设置祖父类( window )的默认构造函数为 window ( FlowLayout )

JFrame 类的getContentPane

Page 25: 第8章  图形用户界面设计概述

25

8.4.2 BorderLayout边框布局管理器可以将组件安置在 5 个不同的区域,它们 分 为 东 、 南 、 西 、 北 、 中 , 分 别 用 常 量EAST,SOUTH,WEST,NORTH 和 CENTER 表示。

注意,每个区域只能放置一个组件,若将组件置于已有组件的区域,则原组件将被取代。与流布局管理器不同的是,各区域的组件并不一定会维持原来定义的大小,而是会充满各区域所提供的空间。

常用的构造函数如下:BorderLayout() :生成一个 BorderLayout 对象。BorderLayout(int hgap,int vgap): 生成一个 BorderLayout并指定组件间的水平和垂直间距。

Page 26: 第8章  图形用户界面设计概述

26

例 8-2 边框布局管理器

Page 27: 第8章  图形用户界面设计概述

27

Page 28: 第8章  图形用户界面设计概述

28

8.4.3 GridLayout网格布局管理器会根据指定的行列数目将一个容器分割成几个一样大小的方形区域,每个区域只能放置一个组件,而每个组件会完全使用该区域所能使用的空间。

常用的构造函数如下:GridLayout(): 生成一个网格布局管理器,所有组件会排列于同一列,而组件间的间隔为零(默认值)。

GridLayout(int rows, int cols): 生成具有 rows行和 cols列的网格布局管理器。

GridLayout(int rows, int cols, int hgap, int vgap): 生成具有 rows 行和 cols 列并指定行间距为 hgap ,列间距为 vgap 的网格布局管理器。

Page 29: 第8章  图形用户界面设计概述

29

例 8-3 GridLayout.java

Pack():Causes this Window to be sized to fit the preferred size

and layouts of its subcompone

Page 30: 第8章  图形用户界面设计概述

30

8.4.4 CardLayout卡片布局管理器可以让一群组件使用相同的空间,如同一叠卡片,只有最上边的可以被看到。

常用的构造函数如下:CardLayout(): 生成一个卡片布局管理器。CardLayout(int hgap, int vgap): 生成一个卡片布局管理器,并指定卡片内组件之间的空间。

其他常用的方法如下:first(Container parent): 显示容器的第一个组件。last(Container parent): 显示容器的最后一个组件。next(Container parent): 显示容器的下一个组件。previous(Container parent): 显示容器的前一个组件。show(Container parent, String name): 显示容器中名字为 name 的组件。必须先指定各组件的名字。

Page 31: 第8章  图形用户界面设计概述

31

例 8-4

提问:为什么容器和面板要分别设定布局?

容器是什么?里面包含什么?面板是什么?里面包含什么?

Page 32: 第8章  图形用户界面设计概述

32

Page 33: 第8章  图形用户界面设计概述

33

8.4.5 BoxLayout框布局管理器也是用来将一群组件排列在一起,除了至左而右的排列方式,还提供由上而下的排列方式。

和流布局不同的是,当空间不够时,组件不会自动往下移。

框布局的构造函数:BoxLayout(Container target, int axis):

axis 是用来指定组件排列的方式( X_AXIS 水平排列; Y_AXIS垂直排列)。

可使用 3 种隐藏的组件做间隔:strut: 用来在组件之间插入固定的空间。glue: 用来控制一个框布局内额外的空间。ridid area: 用来生成一个固定大小的区域。

Page 34: 第8章  图形用户界面设计概述

34

例 8-5

Page 35: 第8章  图形用户界面设计概述

35

8.4.6 GridBagLayout网格袋布局管理器相对于其他布局管理器是非常有弹性的,相对使用上也是最复杂的。网格袋布局使用的基本单位为 cell ,一个组件可以占一个以上的 cell ,一个组件占有的区域称为该组件的显示区域。各组件的放置方式由限制决定,这些定义

在 GridBagConstraints 对象中

Page 36: 第8章  图形用户界面设计概述

36

例子 8-6