4：GUI
4.1 GUI概述
来，继续啊，下面呢我们来学习GUI相关的API。
首先呢，我们来说一下，什么是GUI：
- GUI：Graphical User Interface(图形用户接口)
- 用图形的方式，来显示计算机操作的界面
怎么理解呢？我们把后面要做的案例拿来举例说明一下：
看这里：
这是用户登录的案例，在这个界面上，有显示文本的标签，显示输入内容的文本框以及按钮。
再来看一个：
聊天室的案例，在这个界面上，有显示聊天内容的文本域，显示输入内容的文本框以及操作的按钮。
给出这样的界面，我们自己就能够看明白，非常的方便直观，这就是使用GUI相关的API来实现的。
而Java为GUI提供的API都存在java.awt和javax.Swing两个包中，我们分别来看一下这两个包：
java.awt 包：
- awt是这三个单词首字母的缩写，翻译过来是抽象窗口工具包，只不过这个包的API，需要调用本地系统方法实现功能，和本地系统有关联，不利于代码移植，属重量级控件
javax.swing 包：
- 它是在awt的基础上，建立的一套图形界面系统，提供了更多的组件，而且完全由Java实现。增强了移植性，属轻量级控件
所以，我们做图形界面开发使用的是swing包下的类。
这里出现了一个名词：组件。那什么是组件呢？
- 组件是具有图形表示的对象，该图形表示可以显示在屏幕上并且可以与用户交互
比如说，在用户登录中，文本框和按钮等，都是能够表示图形的对象，所以它们都称为组件。
最后，我们来说一下，我们会用到的常用组件，
看这里：
组件：
- 基本组件：具有图形表示的对象
- 容器组件：是可以添加组件的组件。也就是在容器中可以通过add方法添加组件，既可以添加基本组件，也可以添加容器组件。
我们先来看常用的基本组件：
- JButton，这是按钮
- JLabel，这是用来显示文本内容的，或者展示图片使用
- JTextFile，这是文本框，用来输入内容的
- JTextArea，这是文本域，用来输入多行多列的数据的
接着，我们再来看容器组件：
- 面板也是一个容器，我们常用JPanel，后面用到在具体讲解
- 窗体，下面是Frame，这是awt包下，而我们使用的是JFrame，这是swing包下。
看到这里，我要说一下，由于我们使用的都是swing包下的，所以将来使用的组件，都是以J开头的。
好了，GUI相关的基础知识我们就先讲到这里
4.2 常用组件
4.2.1 JFrame(初识窗体)
来，继续啊，下面我们来学习JFrame窗体类。
在学习JFrame之前，先说一下，在学习GUI相关的API的时候，我就不带着大家到帮助文档中查看了。
在资料中，我们会把要讲解的类的作用，构造方法，和成员方法给大家展示出来，简单的分析后，到IDEA中去实现。
首先，我们来看一下JFrame：
JFrame：
- 是一个顶层窗口
构造方法：
- JFrame()：构造一个最初不可见的新窗体
成员方法：
- void setVisible(boolean b)：显示或隐藏此窗体具体取决于参数b的值
- void setSize(int width, int height)：调整此组件的大小，使其宽度为width，高度为height，单位是像素
知道了JFrame的构造方法和成员方法后，我们到IDEA中去使用一下：
xxxxxxxxxximport javax.swing.*;/* 构造方法 JFrame()：构造一个最初不可见的新窗体 成员方法 void setVisible(boolean b)：显示或隐藏此窗体具体取决于参数b的值 void setSize(int width, int height)：调整此组件的大小，使其宽度为width，高度为height，单位是像素 */public class JFrameDemo01 { public static void main(String[] args) { //JFrame()：构造一个最初不可见的新窗体 JFrame jf = new JFrame(); //void setSize(int width, int height)：调整此组件的大小，使其宽度为width，高度为height，单位是像素 jf.setSize(400,300); //void setVisible(boolean b)：显示或隐藏此窗体具体取决于参数b的值 jf.setVisible(true); }}讲解完毕后，大家赶快动手练习一下吧。
4.2.2 JFrame(常用设置)
来，继续啊，下面呢，我们再来学习几个JFrame窗体的常用方法：
void setTitle(String title)：设置窗体标题
void setLocationRelativeTo(Component c)：设置位置，值为null，则窗体位于屏幕中央
void setDefaultCloseOperation(int operation)：设置窗体关闭时默认操作
- 整数3表示：窗口关闭时退出应用程序
void setAlwaysOnTop(boolean alwaysOnTop)：设置此窗口是否应始终位于其他窗口之上
了解了这几个方法后，我们到IDEA中去使用一下：
xxxxxxxxxximport javax.swing.*;/* void setTitle(String title)：设置窗体标题 void setLocationRelativeTo(Component c)：设置位置，值为null，则窗体位于屏幕中央 void setDefaultCloseOperation(int operation)：设置窗体关闭时默认操作(整数3表示：窗口关闭时退出应用程序) void setAlwaysOnTop(boolean alwaysOnTop)：设置此窗口是否应始终位于其他窗口之上 */public class JFrameDemo02 { public static void main(String[] args) { //创建窗体对象 JFrame jf = new JFrame(); //void setTitle(String title)：设置窗体标题 jf.setTitle("百度一下，你就知道"); //设置窗体大小 jf.setSize(400, 300); //void setDefaultCloseOperation(int operation)：设置窗体关闭时默认操作(整数3表示：窗口关闭时退出应用程序) jf.setDefaultCloseOperation(3); //void setLocationRelativeTo(Component c)：设置位置，值为null，则窗体位于屏幕中央 jf.setLocationRelativeTo(null); //void setAlwaysOnTop(boolean alwaysOnTop)：设置此窗口是否应始终位于其他窗口之上 jf.setAlwaysOnTop(true); //设置窗体可见 jf.setVisible(true); }}讲解完毕后，大家赶快动手练习一下吧。
4.2.3 JButton(窗口中添加按钮)
来，继续啊，下面我们来学习JButton，它是按钮的实现。
JButton：
- 按钮的实现
构造方法：
- JButton(String text)：创建一个带文本的按钮
成员方法：
- void setSize(int width, int height)：设置大小
- void setLocation(int x, int y)：设置位置(x坐标，y坐标)
知道了JButton的构造方法和成员方法后，我们到IDEA中去使用一下：
xxxxxxxxxximport javax.swing.*;/* 构造方法 JButton(String text)：创建一个带文本的按钮 成员方法 void setSize(int width, int height)：设置大小 void setLocation(int x, int y)：设置位置(x坐标，y坐标) */public class JButtonDemo { public static void main(String[] args) { //创建窗体对象 JFrame jf = new JFrame(); jf.setTitle("窗口中添加按钮"); jf.setSize(400, 300); jf.setDefaultCloseOperation(3); jf.setLocationRelativeTo(null); jf.setAlwaysOnTop(true); jf.setLayout(null); //取消窗体的默认布局 //JButton(String text)：创建一个带文本的按钮 JButton btn = new JButton("我是按钮");// //void setSize(int width, int height)：设置大小// btn.setSize(100,20);// //void setLocation(int x, int y)：设置位置(x坐标，y坐标)//// btn.setLocation(0,0);// btn.setLocation(100,100); btn.setBounds(100,100,100,20); JButton btn2 = new JButton("我是按钮2"); btn2.setBounds(100,120,100,20); jf.add(btn); jf.add(btn2); //设置窗体可见 jf.setVisible(true); }}演示完毕之后，回到资料再总结一下：
JButton：
- 按钮的实现
构造方法：
- JButton(String text)：创建一个带文本的按钮
成员方法：
- void setSize(int width, int height)：设置大小
- void setLocation(int x, int y)：设置位置(x坐标，y坐标)
- void setBounds(int x, int y, int width, int height)：设置位置和大小
和窗体相关操作：
- 取消窗体默认布局：窗体对象.setLayout(null);
- 把按钮添加到窗体：窗体对象.add(按钮对象);
讲解完毕后，大家赶快动手练习一下吧。
4.2.4 JLabel(显示文本和图像)
来，继续啊，下面呢，我们来学习JLable，它是用来做短文本字符串或图像的显示的。
JLable：
- 短文本字符串或图像的显示区域
构造方法：
JLabel(String text)：使用指定的文本创建 JLabel实例
JLabel(Icon image)：使用指定的图像创建 JLabel实例
ImageIcon(String filename)：从指定的文件创建ImageIcon
文件路径：绝对路径和相对路径
绝对路径：完整的路径名，不需要任何其他信息就可以定位它所表示的文件
- 例如：D:\IdeaProjects\javase_code\itheima-api-gui\images\mn.png
相对路径：必须使用取自其他路径名的信息进行解释
- 例如：itheima-api-gui\images\mn.png
成员方法：
- void setBounds(int x, int y, int width, int height)：设置位置和大小
知道了JLabel的构造方法和成员方法后，我们到IDEA中去使用一下：
xxxxxxxxxximport javax.swing.*;/* 构造方法 JLabel(String text)：使用指定的文本创建 JLabel实例 JLabel(Icon image)：使用指定的图像创建 JLabel实例 ImageIcon(String filename)：从指定的文件创建ImageIcon 成员方法 void setBounds(int x, int y, int width, int height)：设置位置和大小 */public class JLabelDemo { public static void main(String[] args) { //创建窗体对象 JFrame jf = new JFrame(); jf.setTitle("显示文本和图像"); jf.setSize(400, 300); jf.setDefaultCloseOperation(3); jf.setLocationRelativeTo(null); jf.setAlwaysOnTop(true); jf.setLayout(null); //JLabel(String text)：使用指定的文本创建 JLabel实例 JLabel jLabel = new JLabel("好好学习"); jLabel.setBounds(0,0,100,20); //JLabel(Icon image)：使用指定的图像创建 JLabel实例 //ImageIcon(String filename)：从指定的文件创建ImageIcon //D:\IdeaProjects\javase_code\itheima-api-gui\images\mn.png// ImageIcon imageIcon = new ImageIcon("D:\\IdeaProjects\\javase_code\\itheima-api-gui\\images\\mn.png");// JLabel jLabel2 = new JLabel(imageIcon);// JLabel jLabel2 = new JLabel(new ImageIcon("D:\\IdeaProjects\\javase_code\\itheima-api-gui\\images\\mn.png")); JLabel jLabel2 = new JLabel(new ImageIcon("itheima-api-gui\\images\\mn.png")); jLabel2.setBounds(50,50,100,143); jf.add(jLabel); jf.add(jLabel2); //设置窗体可见 jf.setVisible(true); }}讲解完毕后，大家赶快动手练习一下吧。
注意：在实际开发中，大家不用担心每个组件的位置和大小。因为这些都是前端人员设计好的。
4.3 案例
来，继续啊，下面呢，我们通过几个案例，来使用一下GUI中的常用组件。目前呢，我们仅仅是把界面做出来，下一次课呢，我们就要把最终的功能给实现了。首先，我们来看第一个案例。
4.3.1 案例1(用户登录)
需求：如图所示，做出界面
提示：给出的数据就是按照组件位置和大小给出的
首先，我们来简单的分析一下：
分析：
① 2个JLabel
② 2个JTextField
③ 1个JButton
分析完毕后，我们到IDEA中去实现一下：
xxxxxxxxxximport javax.swing.*;/* 用户登录 */public class UserLogin { public static void main(String[] args) { //创建窗体对象 JFrame jf = new JFrame(); jf.setTitle("用户登录"); jf.setSize(400, 300); jf.setDefaultCloseOperation(3); jf.setLocationRelativeTo(null); jf.setAlwaysOnTop(true); jf.setLayout(null); //显示用户名文本 JLabel usernameLable = new JLabel("用户名"); usernameLable.setBounds(50,50,50,20); jf.add(usernameLable); //用户名输入框 JTextField usernameField = new JTextField(); usernameField.setBounds(150,50,180,20); jf.add(usernameField); //显示密码文本 JLabel passwordLable = new JLabel("密码"); passwordLable.setBounds(50,100,50,20); jf.add(passwordLable); //密码输入框// JTextField passwordField = new JTextField();// passwordField.setBounds(150,100,180,20);// jf.add(passwordField); JPasswordField passwordField = new JPasswordField(); passwordField.setBounds(150,100,180,20); jf.add(passwordField); //登录按钮 JButton loginButton = new JButton("登录"); loginButton.setBounds(50,200,280,20); jf.add(loginButton); jf.setVisible(true); }}在讲解的过程中，引入了一个新的组件JPasswordField，用来表示密码框。
讲解完毕后，大家赶快动手练习一下吧。
4.3.2 案例2(聊天室)
需求：如图所示，做出界面
提示：给出的数据就是按照组件位置和大小给出的
首先，我们来简单的分析一下：
分析：
① 1个JTextArea
② 1个JTextField
③ 2个JButton
分析完毕后，我们到IDEA中去实现一下：
xxxxxxxxxximport javax.swing.*;/* 聊天室 */public class ChatRoom { public static void main(String[] args) { //创建窗体对象 JFrame jf = new JFrame(); jf.setTitle("聊天室"); jf.setSize(400, 300); jf.setDefaultCloseOperation(3); jf.setLocationRelativeTo(null); jf.setAlwaysOnTop(true); jf.setLayout(null); //显示聊天信息的文本域 JTextArea messageArea = new JTextArea(); messageArea.setBounds(10,10,360,200); jf.add(messageArea); //输入聊天信息的文本框 JTextField messageField = new JTextField(); messageField.setBounds(10,230,180,20); jf.add(messageField); //发送按钮 JButton sendButton = new JButton("发送"); sendButton.setBounds(200,230,70,20); jf.add(sendButton); //清空聊天按钮 JButton clearButton = new JButton("清空聊天"); clearButton.setBounds(280,230,100,20); jf.add(clearButton); jf.setVisible(true); }}讲解完毕后，大家赶快动手练习一下吧。
4.3.3 案例3(猜数字)
需求：如图所示，做出界面
提示：给出的数据就是按照组件位置和大小给出的
首先，我们来简单的分析一下：
分析：
① 1个JLabel
② 1个JTextField
③ 1个JButton
分析完毕后，我们到IDEA中去实现一下：
xxxxxxxxxximport javax.swing.*;/* 猜数字 */public class GuessNumber { public static void main(String[] args) { //创建窗体对象 JFrame jf = new JFrame(); jf.setTitle("猜数字"); jf.setSize(400, 300); jf.setDefaultCloseOperation(3); jf.setLocationRelativeTo(null); jf.setAlwaysOnTop(true); jf.setLayout(null); //提示信息 JLabel messageLable = new JLabel("系统产生了一个1-100之间的数据，请猜一猜"); messageLable.setBounds(70,50,350,20); jf.add(messageLable); //输入要猜的数字 JTextField numberField = new JTextField(); numberField.setBounds(120,100,150,20); jf.add(numberField); //猜数字的按钮 JButton guessButton = new JButton("我猜"); guessButton.setBounds(150,150,100,20); jf.add(guessButton); jf.setVisible(true); }}讲解完毕后，大家赶快动手练习一下吧。
4.3.4 案例4(手机日期和时间显示)
需求：如图所示，做出界面
提示：给出的数据就是按照组件位置和大小给出的
参照图：
我们要实现的图：
首先，我们来简单的分析一下：
分析：
① 4个JLabel
分析完毕后，我们到IDEA中去实现一下：
xxxxxxxxxximport javax.swing.*;/* 手机日期和时间显示 */public class ShowDateTime { public static void main(String[] args) { //创建窗体对象 JFrame jf = new JFrame(); jf.setTitle("手机日期和时间显示"); jf.setSize(400, 300); jf.setDefaultCloseOperation(3); jf.setLocationRelativeTo(null); jf.setAlwaysOnTop(true); jf.setLayout(null); //提示日期 JLabel dateLable = new JLabel("日期"); dateLable.setBounds(50,50,100,20); jf.add(dateLable); //按照格式显示日期的字符串 JLabel showDateLable = new JLabel("xxxx年xx月xx日"); showDateLable.setBounds(50,80,200,20); jf.add(showDateLable); //提示时间 JLabel timeLable = new JLabel("时间"); timeLable.setBounds(50,150,100,20); jf.add(timeLable); //按照格式显示时间的字符串 JLabel showTimeLable = new JLabel("xx:xx"); showTimeLable.setBounds(50,180,200,20); jf.add(showTimeLable); jf.setVisible(true); }}讲解完毕后，大家赶快动手练习一下吧。
4.3.5 案例5(考勤查询)
需求：如图所示，做出界面
提示：给出的数据就是按照组件位置和大小给出的
首先，我们来简单的分析一下：
分析：
① 3个JLabel
② 2个JTextField
③ 1个JButton
分析完毕后，我们到IDEA中去实现一下：
xxxxxxxxxximport javax.swing.*;/* 考勤查询 */public class AttendanceQuery01 { public static void main(String[] args) { //创建窗体对象 JFrame jf = new JFrame(); jf.setTitle("考勤查询"); jf.setSize(400, 300); jf.setDefaultCloseOperation(3); jf.setLocationRelativeTo(null); jf.setAlwaysOnTop(true); jf.setLayout(null); //显示考勤日期的文本 JLabel dateLable = new JLabel("考勤日期"); dateLable.setBounds(50,20,100,20); jf.add(dateLable); //显示开始时间文本 JLabel startDateLable = new JLabel("开始时间"); startDateLable.setBounds(50,70,100,20); jf.add(startDateLable); //开始时间输入框 JTextField startDateField = new JTextField(); startDateField.setBounds(50,100,100,20); jf.add(startDateField); //显示结束时间文本 JLabel endDateLable = new JLabel("结束时间"); endDateLable.setBounds(250,70,100,20); jf.add(endDateLable); //结束时间输入框 JTextField endDateField = new JTextField(); endDateField.setBounds(250,100,100,20); jf.add(endDateField); //确定按钮 JButton confirmButton = new JButton("确定"); confirmButton.setBounds(250,180,60,20); jf.add(confirmButton); jf.setVisible(true); }}讲解完毕后，大家赶快动手练习一下吧。
4.3.6 案例5(考勤查询之日历控件)
需求：用日历控件改进考勤查询的日期字符串填写
来，继续啊，下面我们来学习考勤查询之日历控件
首先，我们看一下需求：用日历控件改进考勤查询的日期字符串填写
什么意思呢？我们刚在做的考勤查询系统，是需要手动输入日期字符串的，而在实际开发中，我们一般会选择使用日历控件来实现，
也就是下面这个样子的，我们点击一下，就会出现日历控件，我们选择日期就可以了。
这个相信大家有见过。
知道了要做什么之后，下面我们来说一下，怎么做。
我们可以自己写这个日历控件，也可以使用别人写好的日历控件。鉴于目前所学知识有限，我们先使用别人提供的日历控件。
这里呢，我准备好了一个日历控件类(DateChooser.java)，我们到IDEA中一起去看一下如何使用：
xxxxxxxxxxpublic static void main(String[] args) { //创建窗体 JFrame jf = new JFrame(); //设置窗体大小 jf.setSize(400, 300); //设置窗体标题 jf.setTitle("日历控件"); //设置位置，值为null，则窗体位于屏幕中央 jf.setLocationRelativeTo(null); //设置窗体关闭时默认操作，窗口关闭时退出应用程序 jf.setDefaultCloseOperation(3); //设置此窗口是否应始终位于其他窗口之上 jf.setAlwaysOnTop(true); //取消窗体默认布局：窗体对象.setLayout(null); jf.setLayout(null); //创建日期选择器对象，指定日期字符串格式 DateChooser dateChooser = DateChooser.getInstance("yyyy-MM-dd"); JTextField showDateField = new JTextField("单击选择日期"); showDateField.setBounds(50, 50, 100, 20); //把日历控件和文本框进行绑定 dateChooser.register(showDateField); jf.add(showDateField); jf.setVisible(true);}了解了如何使用日历控件后，我们把开始写的代码改进一下：
xxxxxxxxxximport javax.swing.*;/* 考勤查询 */public class AttendanceQuery02 { public static void main(String[] args) { //创建窗体对象 JFrame jf = new JFrame(); jf.setTitle("考勤查询"); jf.setSize(400, 300); jf.setDefaultCloseOperation(3); jf.setLocationRelativeTo(null); jf.setAlwaysOnTop(true); jf.setLayout(null); //显示考勤日期的文本 JLabel dateLable = new JLabel("考勤日期"); dateLable.setBounds(50,20,100,20); jf.add(dateLable); //显示开始时间文本 JLabel startDateLable = new JLabel("开始时间"); startDateLable.setBounds(50,70,100,20); jf.add(startDateLable); DateChooser dateChooser1 = DateChooser.getInstance("yyyy/MM/dd"); DateChooser dateChooser2 = DateChooser.getInstance("yyyy/MM/dd"); //开始时间输入框 JTextField startDateField = new JTextField(); startDateField.setBounds(50,100,100,20); dateChooser1.register(startDateField); jf.add(startDateField); //显示结束时间文本 JLabel endDateLable = new JLabel("结束时间"); endDateLable.setBounds(250,70,100,20); jf.add(endDateLable); //结束时间输入框 JTextField endDateField = new JTextField(); endDateField.setBounds(250,100,100,20); dateChooser2.register(endDateField); jf.add(endDateField); //确定按钮 JButton confirmButton = new JButton("确定"); confirmButton.setBounds(250,180,60,20); jf.add(confirmButton); jf.setVisible(true); }}讲解完毕后，大家赶快动手练习一下吧。
4.4 事件监听机制
来，继续啊，目前呢，我们做好了几个GUI的界面，但是具体的功能，我们没法实现。因为要想实现功能，就必须要学习一下事件监听机制。
这里，我们一起来说一下事件监听机制的组成：
事件源：事件发生的地方。可以是按钮，窗体，图片等
事件：发生了什么事情。例如：鼠标点击事件，键盘按下事件等
事件绑定：把事件绑定到事件源上，当发生了某个事件，则触发对应的处理逻辑
- 事件源对象. addXXXListener(事件);
GUI中的事件比较多，这里呢，我们先告诉一下大家如何给按钮添加事件，能够把我们前面的案例给实现就可以了。至于其他事件，后面我们用到的时候再去学习。
了解了如何给按钮添加事件后，我们到IDEA中去体验一下：
xxxxxxxxxximport javax.swing.*;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;/* 事件监听机制 */public class ActionListenerDemo { public static void main(String[] args) { //创建窗体对象 JFrame jf = new JFrame(); jf.setTitle("事件监听机制"); jf.setSize(400, 300); jf.setDefaultCloseOperation(3); jf.setLocationRelativeTo(null); jf.setAlwaysOnTop(true); jf.setLayout(null); //创建按钮 JButton jButton = new JButton("你点我啊"); jButton.setBounds(0, 0, 100, 100); jf.add(jButton); jButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { System.out.println("你点我啊"); } }); jf.setVisible(true); }}讲解完毕后，大家赶快动手练习一下吧。