幻灯片 1

Size: px

Start display at page:

Download "幻灯片 1"

判滨平
7 years ago
Views:

1 图形界面程序设计计算机信息系

2 课程引入说课提纲案例体验双击运行 FiveMain.jar 文件, 和同桌一起体验下这个五子棋游戏, 并观察下这个游戏有哪些部分组成?

3 课程引入说课提纲提出问题这个五子棋游戏和我们前几章完成的学生综合素质评测系统最大的区别是什么? 有什么优点或缺点吗? 1 图形用户界面是什么? 2 怎么用图形用户界面开发?

4 课程引入说课提纲任务任务名称总任务 : 完成单机版五子棋游戏的开发和实现. 本节课任务 : 完成单机版五子棋棋盘的绘制. 任务描述用 JPanel 作为五子棋盘的画布, 在 JPanel 上进行棋盘的绘制

5 图形用户界面课程基本情况 (GUI) 图形用户界面 (GUI) 是程序与用户交互的窗口, 是由菜单按钮等图形界面组件构成, 通过键盘和鼠标与程序交互在 Java 语言中,Java 的基础类 (JFC) 是开发 GUI 的 API 集, 它包括以下几个部分 : 抽象窗口工具包 (AWT):Java 开发用户界面最初的工具包, 是建立 JFC 的主要基础 ; 2D API: 实现高质量的二维图形 ; Swing 组件 : 建立在 AWT 之上, 新的功能更强大的图形组件包 ;

6 Java.lang.Object MenuComponent Component MenuBar MenuItem AWT 组件 (Button Label 等 ) Container Menu Window Panel Frame Dialog Applet FileDialog 图 1:Java GUI 容器类层次

7 课程基本情况 AWT 基础 AWT 的特点是简单稳定重量级 ( 依赖本地平台 ) 抽象窗口工具包 (AWT) 中包含了许多类来支持 GUI 设计, 由 Java 的 java.awt 提供用来容纳其他组件的容器类 ; 用来控制进行组件布局的各种布局管理器 ; 用来监听程序与用户进行交互的事件监听器 ; 用来维护图形界面的一套绘图机制

8 课程基本情况 AWT 基础用 AWT 创建图形界面步骤 : (1) 导入 AWT 包 (2) 设置顶层容器 (3) 设置按钮和标签等组件 (4) 将组件放到容器上 (5) 处理事件

9 说课提纲 AWT 案例示例采用 AWT 组建创建一个 Frame 面板, 并在面板中添加相关组件, 具体效果如下图所示

10 课程基本情况 Swing 基础 Swing 是基于 AWT 的, 它除了顶级组件是重量级的, 其他组件例如按钮文本框等还有布局都与操作系统无关, 是轻量级的相对 AWT 而言更为轻便, 更容易编程, 而且功能也更为灵活强大 Swing 增强了 AWT 组建功能, 这些增强组建命名通常在 AWT 组建名前加一个 J 字母

11 课程基本情况 Swing 基础所有的 Swing 组件都被封装在 javax.swing 这个包中, 在 javax.swing 中有很多类和接口在所有的 Swing 组件中, Jcomponent 类是最顶层的类, 它是大多数 Swing 组件的父类为了全面支持图形化,Swing 还包括其他许多包, 例如 : Javax.swing.border Javax.swing.colorchooser Javax.swing.event Javax.swing.filechooser Javax.swing.text Javax.swing.tree

12 课程基本情况 Swing 基础 javax.swing 中的组件 : JLabel ( 标签 ) 显示一行文字, 可带图标 JTextField ( 文本框 ) 用户让用户输入一行文字的构件 JButton ( 按钮 ) 用于点击执行命令 JCheckBox ( 多选按钮 ) 标记状态 JRadioButton( 单选按钮 ) 标记多状态 JCombox ( 下拉菜单 ) 下拉列表框供选取 JList ( 列表 ) 一组列表项供选择 JPanel 面板 JFrame 最顶窗体

13 课程基本情况 Swing 基础用 Swing 创建图形界面步骤 : (1) 导入 Swing 包 (2) 设置顶层容器 (3) 设置按钮和标签等组件 (4) 将组件放到容器上 (5) 处理事件

14 课程基本情况 Swing 基础 JFrame 框架 JFrame 是容器之一, 按钮标签等组件可以加载到框架上面去在 Swing 中利用 JFrame 类表述框架 JFrame 常用构造方法有以下几种 : JFrame() JFrame(String title) JFrame 常用成员方法有以下几种 : void settitile() String gettitile() void setsize(double w,double h) void setlocation(int x,int y) void pack() void setdefaultcloseoperation(int operation)

15 课程基本情况 Swing 基础 JFrame Java 中的框架是用来放置按钮菜单等组件的容器 JFrame 的内部包含一个内容面板 (content pane) 的容器向 JFrame 添加组件是添加到它的内容面板里去的内容面板是 Container 类的对象, 调用其 add() 方法可以添加组件这种添加组件的方式比较复杂

16 Swing 说课提纲案例示例采用 Swing 组建创建一个 JFrame 面板, 并在面板中添加相关组件, 具体效果如下图所示

17 课程基本情况 Swing 基础 JPanel 面板用来组织框架窗口中组件的布局, 是各种组件的底板将组件放置在底板上, 再将底板放到框架中 JPanel 不能独立存在, 必须依赖其他容器面板可以有自己的布局管理器 JPanel 常用构造方法如下 JPanel() JPanel(LayoutManager layout) 化时可以指定布局管理器 // 该构造方法初始 JPanel 的父类也是 Jcomponent, 所以也可以使用 add() 方法将按钮标签等组件加载上去

18 课程基本情况 Swing 基础 JPanel 利用 JPanel 进行 2D 图形绘制 2D 图形的绘制比较简单, 主要通过 JPanel 来绘图 JPanel 常用作容器来放置组件, 但是它的另一重要功能是绘图在面板上绘图需要创建一个类并继承 JPanel, 并覆盖 void paintcomponent(graphics g) 方法该方法是在 JComponent 中定义的 Graphics 是在调用显示组件方法时由 JVM( 虚拟机 ) 自动创建的这个 g 对象是对应特定组件的一个实例在调用或覆盖 paintcomponent 方法时, 要使用 super.paintcomponent(g) 来清理并初始化面板组件

19 课程基本情况 Swing 基础 JPanel Graphics 中定义了很多绘图方法, 常用方法如下 void setcolor(color c) // 设置画笔颜色 void setfont(color c) // 设置画笔字体 void drawstring(string text,int x,int y)// 从坐标 (x,y) 开始写字符串 void drawline(int xstart,int ystart,int xend,int yend)// 从起始位置 (xstart,ystart) 到终止位置 (xend,yend) 画直线 void drawrect(int x,int y,int w,int h)// 画非填充矩形,(x,y) 是左上角起始坐标,w 是宽度,h 是高度 void fillrect (int x,int y,int w,int h)// 画填充矩形 void drawoval(int x,int y,int w,int h)// 画非填充椭圆,(x,y) 是左上角坐标,w 是宽度,h 是高度 void filloval(int x,int y,int w,int h)// 画填充椭圆

20 Swing 说课提纲案例示例采用 Swing 组建创建一个 JPanel 面板, 并在面板中添加相关组件, 具体效果如下图所示

21 Applet 说课提纲案例示例采用 Applet 组建创建一个窗体, 并在面板中添加相关组件, 具体效果如下图所示

22 工作任务说课提纲五子棋用 JPanel 作为五子棋盘的画布, 在 JPanel 上进行棋盘的绘制具体效果如下图所示

23 说课提纲提出问题在上一节课中在往 Frame 或 JFrame 中添加组件的时候曾遇到过什么问题, 后来是怎么解决的?

24 课程引入说课提纲提出问题 1 Swing 的布局有哪些? 2 各种布局管理器有什么特点?

25 课程引入说课提纲任务任务名称本节课任务 : 设置单机版五子棋棋盘的布局任务描述选择合适的布局管理器设置单机版五子棋界面

26 Swing 课程基本情况的布局管理器概述布局管理器通过布局管理类 ( 该类位于 java.awt 包内 ) 使用布局管理器, 不仅可以有序排列各个 Swing 组件, 而且当窗体发生变化时, 布局管理器会根据新版面来配合窗口大小

27 Swing 课程基本情况的布局管理器类别 Java 中常用布局管理器有以下几种 : 边界型布局 (BorderLayout) 盒式布局 (BoxLayout) 卡片式布局 (CardLayout) 流式布局 (FlowLayout) 表格型布局 (GridLayout) 每一个容器都有其默认的布局管理器如 : JFrame -----BorderLayout, JPanel ---FlowLayout 设置自己所需要的布局管理器 frame.setlayout(new FlowLayout());

28 课程基本情况 BorderLayout 边界型布局 (BorderLayout) 是框架或对话框的内容窗格缺省的布局形式边界型对话框包括五个区域 : 北区南区西区东区中间区在采用边界型布局的内容窗格中添加组件时, 需要在 add 函数中添加一项参数, 指示组件放在窗格的哪个区

29 BorderLayout 说课提纲示例创建 BorderLayoutTest.java, 通过设置按钮组件的布局实现下图的效果

30 课程基本情况 BorderLayout 缺省情况下, 边界型布局的各区之间没有空隙, 组件彼此靠在一起, 可以指定区域间的水平间隙和垂直间隙 :

31 课程基本情况 BorderLayout 边界型布局的每个区中只能放一个组件, 如果在同一个区内放入第二个组件的话, 后者就会覆盖前者边界型布局的中间区域是调整区, 当主窗口变化时, 中间区域会随之改变 :

32 课程基本情况 BorderLayout 实际上, 常用的是上下排列, 或者左右排列两个组件的情况下图显示上下排列的边界型布局和左右排列的边界型布局在调整高度和宽度时的表现

33 课程基本情况 BorderLayout 缺省条件下, 框架的内容窗格是边界型布局如果我们在内容窗格中添加面板时使用缺省的 add 函数, 面板会放在中间区由于东南西北四个区都没有组件, 因此中间区占据了所有的面积, 由由于中间区是调整区, 当我们调整框架大小时, 面板也会自动调整到同样大小, 从而保证了面板随时都占据框架的所有内容区域

34 BorderLayout 说课提纲示例修改 BorderLayoutTest.java, 在中间添加 JPanel 和三个按钮实现下图的效果

35 课程基本情况 BorderLayout 用途 1: 我们也可以在内容窗格的顶头放置工具栏, 底部放置状态栏工具栏和状态栏的高度都是不变的, 但长度随框架大小而改变, 这正好是边界型布局的北区南区的特点因此, 北区和南区可以放置工具栏和状态栏, 同时会根据框架的大小自动调整面板工具栏和状态栏的大小

36 课程基本情况 BorderLayout 用途 2: 用于文字编辑器界面中特点 : 界面中最大的一块区域作为主工作区, 主工作区四周是辅助工具区 ( 可以放置按钮提示选项等等 ) 主工作区的大小是可变的, 用户最大化窗口时就可以得到最大的主工作区空间辅助工具区的大小是固定的, 因为其中的按钮提示是固定的, 不需要扩大

37 课程基本情况 BorderLayout 从 JDK 1.4 版开始, 四个区域更名 : 北区 : 页首 (PAGE_START) 南区 : 页尾 (PAGE_END) 西区 : 行首 (LINE_START) 东区 : 行尾 (LINE_END) 中间区仍然是 CENTER 原有的四区名称仍然可以使用, 更改目的是出于国际化的考虑, 适应自右向左的文字排列方式, 或者竖排方式

38 课程基本情况 BoxLayout 盒式布局 (BoxLayout) 将组件排成单个一行或一列, 下面的图显示的是将 5 个按钮排成一行或一列 : // 设置横排的盒式布局 panel.setlayout(new BoxLayout(panel, BoxLayout.LINE_AXIS)); // 设置竖排的盒式布局 panel.setlayout(new BoxLayout(panel, BoxLayout.PAGE_AXIS));

39 课程基本情况 BoxLayout 盒式布局 (BoxLayout) 的组件的对齐方式 (Alignment) : 左对齐中间对齐右对齐对齐方式是组件本身的性质, 而不是布局管理器的性质因此, 你需要调用每个组件本身的 setalignmentx 函数来设定对齐方式 btn1.setalignmentx(component.left_alignment); btn1.setalignmentx(component.center_alignment); btn1.setalignmentx(component.right_alignment); 左对齐中间对齐和右对齐的程序界面 :

40 BorderLayout 说课提纲示例设置 BoxLayoutTest.java, 实现下图的效果

41 课程基本情况 CardLayout 卡片式布局是一种非常特殊的布局方式, 它所管理的不是组件, 而是面板采用卡片式布局的面板, 会同时拥有若干个与它大小相同的子面板, 但在界面上每次只显示其中一个子面板如同摞在一起的卡片一样, 每次只能显示最顶上的一张

42 课程基本情况 FlowLayout 流式布局管理器提供一种简单的布局方式 : 将组件排成一行, 每个组件按其最适合的大小放置, 如果容器的宽度不足以放下所有组件, 则分成多行放流式布局管理器是面板 (JPanel) 的缺省布局管理器

43 FlowLayout 说课提纲示例设置 FlowLayoutTest.java, 实现下图的效果

44 课程基本情况 FlowLayout 随着框架宽度逐渐减小, 一行容纳不下这么多按钮, 于是多余的按钮就放到下一行当宽度继续缩小, 两行也容纳不下时, 就放到第三行, 最终达到了 5 行, 也就是每个按钮占一行此时与垂直排列的盒式布局外观一样, 缺省情况下, 流式布局是居中排列的, 每个组件间有 5 个象素的空隙

45 课程基本情况 FlowLayout 流式布局的构造函数有 3 种形式 : public FlowLayout() public FlowLayout(int alignment) public FlowLayout(int alignment, int horizontalgap, int verticalgap) 第一种构造函数是按缺省形式布局第二种构造函数可以指定排列对齐方式 : 左对齐 (FlowLayout.LEADING) 居中对齐 (FlowLayout.CENTER) 靠右对齐 (FlowLayout. TRAILING)

46 课程基本情况 FlowLayout 1 为面板设置左对齐的流式布局排列 : panel.setlayout(new FlowLayout(FlowLayout.LEADING)); 2 为面板设置右对齐的流式布局排列 : panel.setlayout(new FlowLayout(FlowLayout.TRAILING)); 3 第三种构造函数形式不但可以指定排列方式, 还可以指定组件间的间隙大小 : panel.setlayout(new FlowLayout(FlowLayout.LEADING, 15, 15));

47 课程基本情况 GridLayout 表格型布局管理器将容器变成一个表格, 其中每一格的大小是完全相同的每个组件都放在其中一格中, 如果你拉大框架, 你会发现每一格和格里的组件也会相应变大

48 课程基本情况 GridLayout 为 panel 面板设定一个表格型布局管理器, 构造函数中需要指定表格的行数和列数 panel.setlayout(new GridLayout(0, 2));//2 列, 行数不限 panel.setlayout(new GridLayout(2, 0));//2 行, 列数不限 panel.setlayout(new GridLayout(3, 2));//3 行两列 panel.setlayout(new GridLayout(0, 2, 5, 5));//2 列, 行数不限, 行列间距为 5

49 课程基本情况 GridLayout 在构造函数中, 行列数至少指定一个, 但一般不鼓励同时指定行列数, 因为一旦添加的组件太多或太少, Java 会调整表格的行列数以符合组件数量, 这样可能导致产生的界面与设想的界面完全不同如果只指定行数或列数, 出现问题的可能性就小得多了

50 GridLayout 说课提纲示例设置 GridLayoutTest.java, 实现下图的效果

51 课程基本情况总结没有布局管理器, 这样失去了界面的缩放性, 它只能固定为我们设定它的大小在高分辨率下设计的程序界面, 拿到低分辨的系统下运行, 界面很可能超出桌面界面超出部分无法看到, 也无法使用因此, 我们建议, 用 Swing 设计任何图形界面程序都应当使用面板和布局管理器, 考虑好在不同分辨率不同界面大小情况下的布局

52 工作任务说课提纲五子棋结合布局管理器为游戏窗体添加菜单栏具体效果如下图所示

53 说课提纲提出问题 Java 能不能也能对按钮或菜单等组件添加功能呢?

54 课程引入说课提纲提出问题 1 事件处理机制是什么? 2 怎么实现处理事件处理?

55 课程引入说课提纲任务任务名称本节课任务 : 为棋盘面板添加鼠标移动事件任务描述当鼠标移动到棋盘上为手型, 移出时为指针形

56 课程基本情况事件处理机制概述发生事件处理事件 ( 也称事件处理器 ) -- 符合相应接口要求

57 课程基本情况事件处理机制事件监听器事件监听器是类库中的一组接口, 每种事件类都有一个负责监听这种事件对象的接口接口中定义了处理该事件的抽象方法接口只是一个抽象定义, 要想使用必须实现它所以每次对事件进行处理是调用对应接口的实现类中的方法当事件源产生事件并生成事件对象, 该对象将被送至事件处理器中, 处理器调用接口实现类对象中的相应方法来处理该事件要想启动相应的事件监听器必须在程序中注册它

58 事件处理机制说课提纲示例修改素材中的 SwingTest.java, 设置按钮事件, 当点击按钮时, 实现在标签中显示文本框输入的学号, 具体效果下图

59 课程基本情况事件处理机制事件种类 Java 处理事件响应的类和监听接口大多都位于 AWT 包中在 javax.swing.event 包中有专门用于 Swing 组件的事件类和监听接口 AWT 事件类继承自 AWTEvent, 它们的超类是 EventObject 在 AWT 事件中, 事件分为低级事件和语义事件语义事件是对某些低级事件的一种抽象概括, 是单个或多个低级事件的某些特例的集合

60 课程基本情况事件处理机制事件种类常用低级事件有以下几种 : KeyEvent // 按键按下和释放产生该事件 MouseEvent // 鼠标按下释放拖动移动产生该事件 FocusEvent // 组件失去焦点产生该事件 WindowEvent // 窗口发生变化产生该事件常用语义事件有以下几种 : ActionEvent // 当单击按钮选中菜单或在文本框中回车等产生该事件 ItemEvent // 选中多选框选中按钮或者单击列表产生该事件 TextEvent // 文本框值改变时产生该事件几种常用事件和事件监听器表见书 P196 表 7-1

61 事件处理机制说课提纲示例查看中的 mousetest.java, 设置鼠标事件, 当鼠标进入容器, 背景颜色变蓝色 ; 当鼠标离开容器, 背景颜色变绿色 ; 当鼠标点击容器时, 背景颜色变红色

62 课程基本情况事件处理机制事件适配器事件适配器其实就是一个接口的实现类实际上适配器类只是将监听接口中的方法全部是现成空方法这样在定义事件监听器时就可以继承该实现类, 并重写所需要的方法, 不必要实现覆盖所有的方法了

63 课程基本情况事件处理机制事件适配器常用的事件适配器类有以下几种 : MouseAdapter // 鼠标事件适配器 WindowAdapter // 窗口事件适配器 KeyAdapter // 键盘事件适配器 FocusAdapter // 焦点适配器 MouseMotionAdapter // 鼠标移动事件适配器 ComponentAdapter // 组件源事件适配器 ContanerAdapter // 容器源事件适配器

64 事件处理机制说课提纲示例修改 mousetest.java, 使用事件适配器来实现原有效果

65 工作任务说课提纲五子棋修改 ChessBoard 类使其实现 MouseMotionListener 接口, 并实现其中的 mousemoved() 和 mousedragged() 方法在 mousemoved() 方法中获取鼠标的坐标, 判断鼠标落点的范围如果在棋盘内则鼠标显示为手型, 在外面则为指针型

Chapter 9: Objects and Classes

Chapter 9: Objects and Classes (Swing) AWTEvent Font LayoutManager 1 Classes in the javax.swing package Heavyweight FontMetrics Object Color Panel Applet JApplet Graphics Component Container Window Frame JFrame * Dialog JDialog JComponent