[Day27] CH13：画出你的藏宝图——图形使用者介面

终於来到我们最後一个主题了，今天我们要介绍的是图形使用者介面（graphical user interface, GUI），不知道大家有没有听过，但大家一定都用过，他就是一种与应用程序互动的友善操作机制，Windows 作业系统本身就是一个常见的例子。

Java GUI 的元件有 Swing 和 AWT 两组，在早期的 Java 中，GUI 透过 java.awt 套件中的 Abstract Window Toolkit（AWT）的元件来建构。AWT 设计的视窗图形程序会跟作业系统原本的视窗风格一致， Swing 则是完全用 Java 来撰写、操作与显示，因此在各平台间并无外观上的差异。接下来，我们会着重在 Swing 的介绍：

Swing 元件

Java 的图形化介面由各式各样的「元素」组成，像是视窗、按钮、对话框等等，这些元素统一被称为元件（Component），依照不同功能，可分为顶层容器、中间容器、基本元件：

顶层容器

属於视窗类别元件，继承自 java.awt.Window，可以独立显示。

中间容器

中间容器当作基本元件的载体，不能独立显示，继承自 javax.swing.JComponent，可以添加多个基本元件，对容器内的组件进行管理。

基本元件

继承自 javax.swing.JComponent。

由於应用程序的 GUI 基本上属於应用程序，所以大部分的例子都会包含两个类别，一个 JFrame 子类别帮助展示新的 GUI 概念，另一个应用程序类别，其中的 main 方法会建立并显示应用程序的主要视窗。接着就来建立一个简单的视窗和元件：

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JButton;
import javax.swing.JTextField;

public class Frame extends JFrame{
    private final JLabel label;
    private final JButton button;
    private final JTextField textField;

    public Frame(){
        super("Hello Swing");   //建立标题名称
        super.setLayout(null);

        label = new JLabel("Enter your name:");
        label.setBounds(140, 50, 100, 30);  //设定x，y，宽，高
        add(label);

        button = new JButton("Click me!");
        button.setBounds(125, 200, 150, 25);
        add(button);

        textField = new JTextField(10); //设定10列
        textField.setBounds(140, 100, 120, 30);
        add(textField);
    }
}

import javax.swing.JFrame;

public class TestFrame {
    public static void main(String[] args) {
        Frame frame = new Frame();
        frame.setSize(400, 300);   //设定宽，长
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);    //设定预设的关闭视窗
        frame.setVisible(true);    //视窗预设是不可见的
    }
}

在使用每一个元件的时候，要记的先 import。在范例中可以看到有按钮，但是按下去却没有任何反应，这是当然的啦！因为我们还没告诉他要做什麽反应。当使用者与 GUI 元件互动时，此互动称为「事件」（Event），会驱动程序去执行任务。

明天我们就要针对这部分进行更详尽的说明，也会制作出一个小小的互动事件，在设计个过程中，也会增加你们对设计程序的能力，准备好要大显身手了吗？那我们明天再见罗！