第一篇、GUI编程基础

---

前言

在之前的学习中我们一起共同学习了java se的基础部分，但我们还没有过具体的实例，那么本篇我们将进行GUI编程的学习，同时也在学习的过程中去应用我们学习的Java部分，同时也去了解一下java框架的知识，为之后我们学习框架，打下良好的基础。

---

一、GUI编程

GUI编程即是图形界面编程，虽然GUI编程现在已经逐渐的被淘汰，但我们学习的目的是为了了解java的思想，以及对我们已经学习过的知识进行运用，并逐步了解一下今后将要学习的知识。那么我们怎么来学习GUI编程呢？

1. GUI编程
   1. 首先我们要了解它是什么？
   2. 它怎么使用？
   3. 该如何应用在实际应用中？
2. GUI组件
   1. 窗口
   2. 弹窗
   3. 面板
   4. 文本框
   5. 列表框
   6. 按钮
   7. 图片
   8. 监听事件
   9. 鼠标
   10. 键盘事件
   11. 外挂
   12. 破解工具
3. GUI简介
   1. 核心技术：Swing ，AWT
      1. 界面不美观
      2. 需要jre环境
   2. 为什么要学习？
      1. 可以写一写自己需要的小工具。
      2. 了解MVC框架，了解监听！

二、技术介绍

1.AWT

1.1AWT介绍

1. 包含了很多类和接口。
2. 有很多元素：窗口，文本框，按钮等。
3. 需要导入java.awt包。
4. 需要有组件和容器两部分，组件必须要放在容器中。
5. 容器包括Windows和panel两部分，window下的容器包含窗口（Frame）和弹窗（Dialog），panel下的容器包括applet。

1.2组件和容器

1.2.1框架Frame

1.生成第一个界面

代码示例：

public class TestFrame {
    public static void main(String[] args) {
        Frame frame = new Frame("我的第一个图形界面");
        //设置可见性
        frame.setVisible(true);
        //设置窗口大小
        frame.setSize(400,400);
        //设置背景颜色
        frame.setBackground(new Color(0,255,255));
        //设置弹出的初始位置
        frame.setLocation(500,250);
        //设置大小固定
        frame.setResizable(true);

    }
}

运行结果：

问题：窗口关不掉，需要停止程序运行。

2.回顾封装的应用

代码示例：

public class TestFrame02 {
    public static void main(String[] args) {
        //展示多个窗口 new
        MyFrame myFrame1 = new MyFrame(100,100,200,200, Color.cyan);
        MyFrame myFrame2 = new MyFrame(300,100,200,200,Color.blue);
        MyFrame myFrame3 = new MyFrame(100,300,200,200,Color.yellow);
        MyFrame myFrame4 = new MyFrame(300,300,200,200,Color.red);
    }
}
class MyFrame extends Frame{
    static  int id = 0;//可能需要多个窗口，设置一个窗口计数器
    public MyFrame(int x,int y,int w,int h,Color color){
        super("MyFrame"+(++id));
        setBounds(x, y, w, h);
        setBackground(color);
        setVisible(true);
    }
}

运行结果：

1.2.2 面板Panel

1.面板在框架中的使用

代码示例

//Panel面板，可以看成一个空间，但是不能单独存在。
public class TestPanel {
    public static void main(String[] args) {
        //创建框架
        Frame frame = new Frame();
        //布局的概念
        //创建布局
        Panel panel = new Panel();
        //设置布局
        frame.setLayout(null);
        //坐标
        frame.setBounds(300,300,500,500);
        frame.setBackground(new Color(0, 255, 0));
        //设置panel坐标，相对于frame
        panel.setBounds(100,100,300,300);
        panel.setBackground(new Color(255, 175, 175));
        //向frame中添加panel
        frame.add(panel);
        frame.setVisible(true);
        //监听事件，监听窗口关闭 System.exit(0)
        //适配器模式：
        frame.addWindowListener(new WindowAdapter() {
            //窗口关闭时要做的事情
            @Override
            public void windowClosing(WindowEvent e) {
                //关闭窗口
                System.exit(0);
            }
        });
    }
}

运行结果：

问题解决：解决了窗口无法关闭的问题

1.2.3布局管理器

1. 流式布局
2. 东西南北中
3. 表格布局

1.流式布局

代码示例：
TestFlowLyout类

public class TestFlowLayout {
    public static void main(String[] args) {
        Frame frame = new Frame();
        //组件：按钮
        Button button1 = new Button("button1");
        Button button2 = new Button("button2");
        Button button3 = new Button("button3");
        //设置为流式布局
//      frame.setLayout(new FlowLayout());
        frame.setLayout(new FlowLayout(FlowLayout.LEFT));
        frame.setSize(200,200);
        //添加按钮
        frame.add(button1);
        frame.add(button2);
        frame.add(button3);
        //设置可见
        frame.setVisible(true);
        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
}

运行结果：

2.东南西北中

代码示例：
TestBorderLyout类

public class TestBorderLayout {
    public static void main(String[] args) {
        Frame frame = new Frame("BordetLayout");

        Button east = new Button("East");
        Button west = new Button("West");
        Button south = new Button("South");
        Button north = new Button("North");
        Button center = new Button("Center");

        frame.add(east,BorderLayout.EAST);
        frame.add(west,BorderLayout.WEST);
        frame.add(south,BorderLayout.SOUTH);
        frame.add(north,BorderLayout.NORTH);
        frame.add(center,BorderLayout.CENTER);
    
        frame.setSize(300,300);
        frame.setVisible(true);

        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
}

运行结果：

3.表格布局

代码示例：
TestGridLyout类

public class TestGridLayout {
    public static void main(String[] args) {
        Frame frame = new Frame("GridLayout");

        Button btn1 = new Button("btn1");
        Button btn2 = new Button("btn2");
        Button btn3 = new Button("btn3");
        Button btn4 = new Button("btn4");
        Button btn5 = new Button("btn5");
        Button btn6 = new Button("btn6");

        frame.setLayout(new GridLayout(3,2));
        frame.add(btn1);
        frame.add(btn2);
        frame.add(btn3);
        frame.add(btn4);
        frame.add(btn5);
        frame.add(btn6);
        frame.pack();
        frame.setVisible(true);

        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
}

运行结果：

1.2.4练习

创建这样的布局

代码示例：

public class ExDome {
    public static void main(String[] args) {
        Frame frame = new Frame();
        frame.setLayout(new GridLayout(2,1));

        Panel panel1 = new Panel(new BorderLayout());
        Panel panel2 = new Panel(new GridLayout(2,1));
        Panel panel3 = new Panel(new BorderLayout());
        Panel panel4 = new Panel(new GridLayout(2,2));

        Button button1 = new Button("btn1");
        Button button2 = new Button("btn2");
        Button button3 = new Button("btn3");
        Button button4 = new Button("btn4");
        Button button5 = new Button("btn5");
        Button button6 = new Button("btn6");
        Button button7 = new Button("btn7");
        Button button8 = new Button("btn8");
        Button button9 = new Button("btn9");
        Button button10 = new Button("btn10");

        frame.add(panel1);
        frame.add(panel3);

        panel1.add(panel2,BorderLayout.CENTER);
        panel3.add(panel4,BorderLayout.CENTER);
        panel1.add(button1,BorderLayout.WEST);
        panel1.add(button2,BorderLayout.EAST);
        panel2.add(button3);
        panel2.add(button4);
        panel3.add(button5,BorderLayout.WEST);
        panel3.add(button6,BorderLayout.EAST);
        panel4.add(button7);
        panel4.add(button8);
        panel4.add(button9);
        panel4.add(button10);

        frame.setSize(300,300);
        frame.setVisible(true);

        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
}

运行结果：

---

总结

1. 总结：
   1. Frame是一个顶级的窗口。
   2. Panel无法单独显示，必须添加到一个容器中。
   3. 布局管理器
      1. 流式布局（FlowLayout）
      2. 东南西北中（BorderLayout）
      3. 表格布局（GridLayout）
   4. 属性：
      1. 大小
      2. 定位
      3. 背景颜色
      4. 可见性
      5. 监听