2018/11/15 面向对象与多线程综合实验-GUI设计 教师：段鹏飞.

Presentation on theme: "2018/11/15 面向对象与多线程综合实验-GUI设计 教师：段鹏飞."— Presentation transcript:

1 2018/11/15 面向对象与多线程综合实验-GUI设计 教师：段鹏飞

2 实验 4-实验目的 了解Java图形界面程序的基本结构 掌握Java布局管理和常用组件的使用 掌握Java事件处理机制

3 实验内容 编写程序，将前面课程所编写的档案管理系统改编为图形用户界面。 要求：程序界面选用合适的布局，综合使用菜单、按钮、文本框、密码框、下拉列表、文件对话框等组件，实现良好的人机接口。

4 界面构成 1、登陆界面：包含用户名、密码等输入，以及登陆按钮等事件操作。 2、管理员、录入员、浏览员等不同对象的主界面：在主界面中实现菜单操作，以及相应地按钮功能（注意界面的布局）。 3、在文件上传的过程中实现文件选择对话框（参考JFileChooser）

5 图形用户界面的组成 容器 面板 窗口 单行文本框 标签 单选按钮 按钮 多行文本框 复选按钮 组合框 组件

6 4、Frame

7 窗口(Window)有两个主要组件：框架和对话框
java.lang.Object 窗口(Window)有两个主要组件：框架和对话框 在Java应用程序中，一般独立应用程序主要使用框架 (Frame)做容器，在框架上通过放置面板(Panel) 来控制图形界面的布局。 如果应用到浏览器中，则主要使用面板的一个子类 Applet来做容器，它能嵌入浏览器运行。 Java中有两种主要容器：窗口和面板 窗口(Window)是可以自由移动的，不依赖其他容器 而存在的容器 面板(Panel)与窗口类似，但不能独立存在，必须包含 在另外一个容器里，如包含在Frame或Web中 抽象窗口工具集AWT 颜 色 类 字 体 类 组 件 类 布 局 类 复选 框组 类 图 像 类 事 件 类 菜单 组件 类 图 形 类 java.awt包中的主要类 以及组件类的继承关系 组件(component)是具有一定功能、能够产生事件的 部件的统称。 例如：窗口，以及窗口上的文本框、按钮、 复选框、列表框、菜单等都是组件 组件类是Object的子类，是一个抽象类，是所有组件 的超类，它为其他子类定义了许多共同的属性， 如：位置、大小、字体、颜色等。 标 签 类 按 钮 类 容 器 类 复选 框 类 滚动 条 类 选择 框 类 画 布 类 文本 组件 类 列表 框 类 容器(container)是一组特殊的组件,它能容纳其他组件 容器类是组件类的子类 由于容器是组件，所以容器之上还可以再放置其他容 器，这样就可以创建出复杂的界面 面板类 窗口类 java.applet.Applet 框架类 对话框类 文件对话框类 NCEPU

8 以及组件类的继承关系 Component Container Panel Frame java.lang.Object
第一节 抽象窗口工具集AWT Component 颜 色 类 字 体 类 组 件 类 布 局 类 复选 框组 类 图 像 类 事 件 类 菜单 组件 类 图 形 类 java.awt包中的主要类 以及组件类的继承关系 标 签 类 按 钮 类 容 器 类 复选 框 类 滚动 条 类 选择 框 类 画 布 类 列表 框 类 文本 组件 类 Container 面板类 窗口类 Panel Frame 所有的可以显示出来的图形的东西都是Component Java的图形用户界面的最基本组成部分是Component，Component类及其子类的对象，用来描述以图形化的方式显示在屏幕上并能与用户进行交互的GUI元素，如，一个按钮、标签等 一般的Component对象不能独立的显示出来，必须将其“放在”某一Container对象中才可以显示出来。 Container是Component子类，Container子类对象可以“容纳”别的Component对象 Container对象可使用方法add（）向其中添加其他Component对象。 Container是Component的子类，因此Container对象也可以被当做Component对象添加到其他Container对象中。 有两种常用的Container： Window：其对象表示自由停泊的顶级窗口 Panel：其对象可作为容纳其他Component对象，但不能独立存在，必须被添加到其他Container中（如Window或Applet） java.applet.Applet 框架类 对话框类 文件对话框类

9 一般可按照下列流程进行 知识要点 - GUI设计流程 引入Java图形组件包 AWT、Swing 选择“外观和感觉” 设置窗体属性
设置组件布局 向窗体中添加组件 对组件进行事件处理 鼠标获得专利 – 40周年 微软win3.0(GUI) – 约20年

10 “交互”的实现 知识要点 – 实现GUI步骤示意 如何判断“按钮”变化 如何实现按下以后 的工作
窗体： Frame类对象 下拉菜单： Menu类对象 文本框： TextField类对象 “交互”的实现 如何判断“按钮”变化 如何实现按下以后 的工作 鼠标、键盘是人对计算机的输入(键盘、鼠标、按钮、菜单的等)； 程序后台处理是机器的对用户输入的处理； 显示的变化是机器的反馈； 共同构成了“人-机”交互，习惯上称之为“交互事件”。 举例，word的右键弹出菜单、选中文本等。 “今天学习Java“人-机”交互的机制和实现”。 按钮： Button类对象 内容面板： Panel类对象

11 知识要点 - 菜单 菜单组件 不能将菜单组件直接添加到一般的容器中 不能使用布局管理器对它们进行布局 AWT提供的菜单机制是这样的：一个容器包含一个菜单条，一个菜单条中包含多个菜单，一个菜单中包含多个菜单或菜单项 和菜单相关的组件有四个：MenuBar, Menu, MenuItem, CheckboxMenuItem.

12 容器对象.setLayout(布局策略); Panel p = new Panel();
Java在java.awt包中定义了5种布局，它们分别是：FlowLayout、BorderLayout、CardLayout、GridLayout、GridBagLayout。 设置布局的格式为： 容器对象.setLayout(布局策略); Panel p = new Panel(); p.setLayout(new BorderLayout());

13 布局管理器 FlowLayout（流式布局） 将组件逐个放到容器的一行上 一行放满后就重新起一个新行 BorderLayout（边界布局） 容器被划分为东(East)、南(South)、 西(West)、北(North)、中(Center)

14 布局管理器 GridLayout（网格式布局） 将容器分为大小相等的若干行乘若干列的网格，组件从左至右，从上到下放入网格中，每个组件占一格（表格式） CardLayout（卡片式布局） 将容器中的组件处理成一组卡片，每一时刻只显示一张卡片，可以在卡片间切换

15 浮动布局FlowLayout 浮动布局是按照组件的顺序，用add方法将组件从左至右在一行排列，一行放不下时就自动换行。 这是系统的默认的布局方式。 其设置的方法为： 　setLayout(new FlowLayout());

16 private Frame f; private Button b1, b2, b3;
输出为： import java.awt.*; public class MyFlow { private Frame f; private Button b1, b2, b3; public static void main (String args[]){ MyFlow mf = new MyFlow ( ); mf. go ( ); } public void go ( ) { f = new Frame ( "Flow Layout" ); f. setLayout (new FlowLayout ( ) ); b1 = new Button ( "OK" ); b2 = new Button ( "Open" ); b3 = new Button ( "Close" ); f. add ( b1 ); f. add ( b2 ); f. add ( b3 ); f. setSize ( 100, 100 ); f. setVisible ( true ); } } 第四节 布局管理器 NCEPU

17 BorderLayout类把容器划分成5个区域，分别标记为“North”、“South”、“West”、“East”和“Center”。
其设置的方法为： 　setLayout(new BorderLayout()); 北 中 西 东 南

18 边界布局示例 1. /* 边界布局示例 */ 2. import java.awt.*; 3. public class Example4_6 extends java.applet.Applet 4. { public void init(){ setLayout(new BorderLayout()); //将其他构件加入 add("East", new Button("East")); add("South", new Button("South")); add("West", new Button("West")); add("North", new Button("North")); add("Center", new Button("Center")); 13. } 14. }

19 网格布局GridLayout GridLayout类以矩形网格形式对容器中的组件进行布局。容器被分成大小相等的单元格，单元格的大小由最大的构件所决定，用add方法将组件一行一行地从左至右放置到布局的每个单元格中。 其设置的方法为： setLayout(new GridLayout(int row, int cols)); row是网格的行数，cols是网格的列数。

20 setLayout(new CardLayout());
这种布局包含几个卡片，在某一时刻只有一个卡片是可见的，而且第一个卡片显示的内容可用自己的布局来管理。 卡片布局设置的方法为： setLayout(new CardLayout());

21 知识要点 - 布局技巧 容器的嵌套 一个包含了多个组件的容器本身可以作为一个组件加到另一个容器中去，容器中再添加容器，这样就形成了容器的嵌套。 多面板技术 将窗口分割成多个独立的面板，每个面板独立布局（即为每个面板分别设置不同的布局管理器），然后再使用另一种布局管理器来组织这些面板。

22 知识要点 - 事件处理 实现事件处理的步骤 创建事件监听器类 创建事件监听器对象 注册事件监听器

23 2.1 事件机制的几个概念 事件源 描述人机交互中事件的来源 (EventSource) 通常是Java图形包中组件
事 件 事件源产生的交互内容，如“按下鼠标” (ActionEvent) 在 java.awt.event包中定义的类 事件监听器 接收事件并进行处理，由程序员编写 (ActionListener) 对应处理所监听事件源产生的事件 监听器接口 编写“事件监听器”的“规定” – “抽象方法” 必须在监听器类中实现这些方法完成事件处理 监听器注册 将事件监听器对象绑定到事件源，进行监听

24 知识要点 - 事件处理 设计自己的窗体类 按钮 事件源 注册监听器 主类 监听器类
import java.awt.*; import java.awt.event.*; class ButtonListener implements ActionListener { public void actionPerformed ( ActionEvent e ) { System.out.println ( “我知道你按下按钮啦“ ); } 按钮 窗体 主类 监听器 监听器类 class myButtonFrame extends Frame { Button btn; myButtonFrame(String s) { //构造函数 super(s); this.setSize(200,120); /* 创建按钮*/ btn = new Button("点击"); this.add(btn); // 事件监听器创建和注册 ButtonListener bl = new ButtonListener(); btn.addActionListener(bl); } 设计自己的窗体类 按钮 事件源 注册监听器 public class ActionEventTest { // 主类 public static void main(String args[]){ myButtonFrame frm = new myButtonFrame("ActionEventTest"); frm.show(); // 显示窗体 } 主类

25 知识要点 - 终端程序转化为GUI 1、借鉴改写计算器的思维，将原来的程序进行封装（之改写showmenu()） 2、借鉴MVC的思想，界面和控制进行分离。

26 知识要点 - 注意事项 1、设置边界时要使用swing（awt不支持setborder）; 2、注意使用e. getSource()和e. getActionCommand()来区分不同的对象； 3、在事件中使用适配器可以减少实现的方法。

27 2018/11/15 谢谢