Java SE 入門教學 - 圖形介面開發

更新時間：12/26/2018

前言

人是視覺動物(誤) 感性的物種，擁有獨自的喜好，看順眼與不順眼都很主觀，但唯一相同的是直覺性地操作工具，當接觸到未知的工具時，總是從看得見得開始摸索，並慢慢發覺隱藏在背後的功能，最後可以非常靈活使用工具。

程式設計師生產出來的產品也是一樣，如果一個系統只能使用文字介面操作，那它的使用對象一定是"工程師"，一般使用者可不買單這種純文字的操作，操作一個功能還要查找要使用那個命令，這實在是太麻煩了！

圖形使用者介面(Graphical User Interface, GUI)是指採用圖形方式顯示的電腦操作用戶介面。與早期電腦使用的命令列介面相比，圖形介面對於使用者來說在視覺上更易於接受，以「各種美觀、而不單調的視覺訊息」提示使用者「狀態的改變」，勢必比純文字來得精彩。

一、Swing 簡介

Swing 是 Java 為圖形介面應用開發提供的一組工具包，是 Java 基礎類別的一部分。Swing 包含了建構圖形介面(GUI)的各種元件，如：視窗、標籤、按鈕、文字框等。

Swing 提供了許多比 AWT(使用C語言開發) 更好的螢幕顯示元素，使用純 Java 實現，能夠更好的兼容跨平台運行。

為了和 AWT 元件區分，Swing 元件在 javax.swing.* 套件包下，類別名稱均以 J 開頭，例如：JFrame、JLabel、JButton 等。

二、Swing 元件

一個 Java 的圖形介面由各種不同類型的「元素」組成，例如：視窗、選單、對話框、標籤、按鈕、文字框等，這些元素統一被稱為元件(Component)。元件按照不同的功能，可分為頂層容器、中間容器、基本元件。一個簡單視窗的組成，如下層級結構所示：

• 頂層容器

• 選單

• 中間容器

• 基本元件

元件類型的繼承關係：

• 頂層容器 屬於視窗類別元件，繼承自 java.awt.Window。
• 中間容器和基本元件繼承自 javax.swing.JComponent。

頂層容器

頂層容器屬於視窗類別元件，可以獨立顯示，一個圖形介面至少需要一個視窗，例如：

元件	描述
JFrame	一個普通的視窗(絕大多數 Swing 圖形介面程序使用 JFrame 作為頂層容器)
JDialog	對話框

中間容器

中間容器充當基本元件的載體，不可獨立顯示。中間容器可以添加若干基本元件(也可以嵌套添加中間容器)，對容器內的組件進行管理，類似於給各種複雜的元件進行分組管理。最頂層的一個中間容器必須依托在頂層容器(視窗)內。

常用的中間容器(面板)：

元件	描述
JPanel	一般輕量級面板容器元件
JScrollPane	滾動窗格，可以水平和垂直滾動的面板元件
JSplitPane	分隔窗格
JTabbedPane	標籤式窗格
JLayeredPane	分層窗格

基本元件

基本元件是直接實現人機交互的元件。

常用的簡單的基本元件：

元件	描述
JLabel	標籤
JButton	按鈕
JRadioButton	單選按鈕
JCheckBox	複選框
JToggleButton	開關按鈕
JTextField	文字框
JPasswordField	密碼框
JTextArea	文字區塊
JComboBox	下拉式選單
JList	清單(列表)
JProgressBar	進度條
JSlider	滑動條

選取器元件：

元件	描述
JFileChooser	文件選取器
JColorChooser	顏色選取器

其他較為複雜的基本元件：

元件	描述
JTable	表格
JTree	樹

三、佈局管理器

把 Swing 的各種元件(JComponent)添加到面板容器中(JPanel)，需要給面板容器指定佈局管理器(LayoutManager)。

常用的佈局管理器：

元件	描述
FlowLayout	流動式的版面，按元件加入的順序，按水平方向排列，排滿一行換一行繼續排列
GridLayout	網格的版面，把 Container 按指定行列數分隔出若干網格，每一個網格按順序放置一個元件
GridBagLayout	可合併的網格版面，按網格劃分 Container，每個元件可占用一個或多個網格，可將元件垂直、水平或沿它們的基準線對齊
BoxLayout	盒(箱)式版面，將 Container 中的多個元件按水平或垂直的方式排列
GroupLayout	分組版面，將元件按層次分組(串行或並行)，分別確定元件組在水平和垂直方向上的位置
CardLayout	卡片版面，將 Container 中的每個元件看做一張卡片，一次只能顯示一張卡片，默認顯示第一張卡片
BorderLayout	邊界版面，把 Container 按方位分為 5 個區域(東、西、南、北、中)，每個區域放置一個元件
SpringLayout	彈性版面，通過定義元件四條邊的座標位置來實現佈局
null	絕對版面，通過設置元件在 Container 中的座標位置來放置元件

範例：先建立一個視窗，並加入其它視窗元件

建立 CtoF 類別，繼承 JFrame 類別。

import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JTextField; /** * * @author Ethan */ class CtoF extends JFrame{ private JLabel lb1, lb2; private JTextField tf1; private JButton btn1; public CtoF(){ // 設定標題 super.setTitle("攝氏轉華氏溫度"); // 設定佈局 super.setLayout(null); // 建立標籤 lb1 = new JLabel("請輸入攝氏溫度"); lb1.setBounds(5, 5, 100, 20); // 設定絕對座標 super.add(lb1); // 將元件加入版面 // 建立文字框 tf1 = new JTextField("0"); tf1.setBounds(107, 5, 100, 20); // 設定絕對座標 super.add(tf1); // 將元件加入版面 // 建立按鈕 btn1 = new JButton("求華氏溫度"); btn1.setBounds(5, 27, 100, 20); // 設定絕對座標 super.add(btn1); // 將元件加入版面 // 建立標籤 lb2 = new JLabel("[]"); lb2.setBounds(5, 49, 200, 40); // 設定絕對座標 super.add(lb2); // 將元件加入版面 // 設定版面大小 super.setSize(400, 400); // 顯示視窗 super.setVisible(true); } }

建立 SwingDemo 類別，啟動圖形介面。

/** * * @author Ethan */ public class SwingDemo{ public static void main(String[] args) { CtoF window = new CtoF(); // JFrame 關閉視窗的設定，有這一行才能結束程式 window.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE); } }

建立出一個視窗，裡頭有標籤、文字框和按鈕元件。目前此按鈕是沒有任何作用的，我們需要加入監聽事件才能有反應。

四、監聽事件

Java 的事件處理是採用「委派模式(delegation pattern)」，委派事件是指當事件發生時，產生事件的物件會把此訊息轉給「事件傾聽者(Event Listener)」處理的方式。

事件處理模式：

(i) 事件來源(Event Source)：視窗、按鈕、選單等等
(ii) 事件(Event)：此類別有提供相關動作以了解事件來源的相關資訊
(iii) 事件傾聽者(Event Listener)：對每個明確事件的發生，都相應地定義一個明確的 Java 方法
(iv) 事件處理物件(Event Handler)：必須包含處理事件的動作設計

▼ 委派事件模式的運作流程

下表為事件類別、事件傾聽者介面與傾聽者介面裡所提供的方法：

事件類別	傾聽者介面	傾聽者介面所提供的事件處理者
ActionEvent	ActionListener	actionPerformed(ActionEvent e)
AdjustmentEvent	AdjustmentListener	adjustmentValueChanged(AdjustmentEvent e)
ItemEvent	ItemListener	ItemStateChanged(ItemEvent e)
KeyEvent	KeyListener	KeyTyped(KeyEvent e) KeyPressed(KeyEvent e) KeyReleased(KeyEvent e)
MouseEvent	MouseListener MouseMotionListener	mouseClicked(MouseEvent e) mouseEntered(MouseEvent e) mouseExited(MouseEvent e) mousePressed(MouseEvent e) mouseReleased(MouseEvent e) mouseDragged(MouseEvent e) mouseMoved(MouseEvent e)
TextEvent	TextListener	textValueChanged(TextEvent e)
WindowEvent	WindowListener	windowActivated(WindowEvent e) windowClosed(WindowEvent e) windowClosing(WindowEvent e) windowDeactivated(WindowEvent e) windowDeiconified(WindowEvent e) windowIconified(WindowEvent e) windowOpened(WindowEvent e)

下表為元件可能觸發事件類別的對應關係：

事件來源者	發生事件的類別型態
JButton	ActionEvent
JCheckBox	ActionEvent ItemEvent
JComponent	ComponentEvent FocusEvent KeyEvent MouseEvent
MenuItem	ActionEvent
Scrollbar	AdjustmentEvent
TextArea	ActionEvent
TextField	ActionEvent
Window	WindowEvent

範例：為按鈕註冊 ActionListener 事件傾聽者，計算攝氏溫度轉華氏溫度

增加事件傾聽者至 CtoF 類別，且「不繼承 JFrame 類別」創建圖形介面。

import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JOptionPane; import javax.swing.JTextField; /** * * @author Ethan */ class CtoF{ private JFrame frame; private JLabel lb1, lb2; private JTextField tf1; private JButton btn1, btn2; public CtoF(){ // 建立 JFrame 物件，同時設定標題 frame = new JFrame("攝氏轉華氏溫度"); // 設定佈局 frame.setLayout(null); // 建立標籤 lb1 = new JLabel("請輸入攝氏溫度 : "); lb1.setBounds(5, 5, 100, 20); // 設定絕對座標 frame.add(lb1); // 將元件加入版面 // 建立文字框 tf1 = new JTextField("0"); tf1.setBounds(107, 5, 100, 20); // 設定絕對座標 frame.add(tf1); // 將元件加入版面 // 建立"確認"按鈕 btn1 = new JButton("求華氏溫度"); btn1.setBounds(5, 37, 100, 20); // 設定絕對座標 frame.add(btn1); // 將元件加入版面 btn1.addActionListener(new ActionListener() { // 註冊事件，使用匿名類別的匿名物件 // 處理觸發的事件 @Override public void actionPerformed(ActionEvent e) { double c = 0, f = 0; try{ c = Double.parseDouble(tf1.getText()); // 取得文字框的文字，並轉換成 Double f = 9.0 / 5.0 * c + 32; lb2.setText("華氏溫度 " + f + " 度"); btn2.setEnabled(true); // 啟用 btn2 按鈕 btn1.setEnabled(false); // 不啟用 btn1 按鈕 }catch(Exception ex){ // JOptionPane 可以輕鬆彈出一個標準對話框 // showMessageDialog(parentComponent, message, title, messageType) JOptionPane.showMessageDialog(null, "請輸入數字", "輸入錯誤", JOptionPane.ERROR_MESSAGE); } } }); // 建立"清除"按鈕 btn2 = new JButton("清除"); btn2.setBounds(107, 37, 100, 20); // 設定絕對座標 btn2.setEnabled(false); // 不啟用 btn2 按鈕 frame.add(btn2); // 將元件加入版面 btn2.addActionListener(new ActionListener() { // 註冊事件，使用匿名類別的匿名物件 // 處理觸發的事件 @Override public void actionPerformed(ActionEvent e) { tf1.setText(""); // 將文字框清除 lb2.setText(""); // 將 lb2 標籤清除 btn1.setEnabled(true); // 啟用 btn1 按鈕 btn2.setEnabled(false); // 不啟用 btn2 按鈕 } }); // 建立標籤 lb2 = new JLabel("[]"); lb2.setBounds(5, 59, 200, 40); // 設定絕對座標 frame.add(lb2); // 將元件加入版面 // 設定版面大小 frame.setSize(350, 150); // 顯示視窗 frame.setVisible(true); // JFrame 關閉視窗的設定，有這一行才能結束程式 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } }

修改 SwingDemo 類別，只使用匿名物件

/** * * @author Ethan */ public class SwingDemo{ public static void main(String[] args) { new CtoF(); } }

五、總結

簡單介紹 Swing 圖形介面，其內容真的很多，只能自己多實作相關的圖形使用者介面(Graphical User Interface, GUI)慢慢增進對 Swing 的瞭解。

Swing 圖形介面分為「頂層容器」、「中間容器」和「基本元件」，並使用佈局管理器(LayoutManager)設定版面。一個頁面是一個頂層容器，而中間容器內可以塞入很多個中間容器或基本元件，而基本元件不能再塞入任何元件。

監聽事件是圖形介面與使用者中間互動的橋樑，圖形介面中如果沒有監聽事件，那麼這個頁面就是靜態的(純文字頁面)，如果有監聽事件，那麼它是動態的，有生命力的！

「JAVA SE 入門教學」在此篇文章中告一段落，這些文章都是我成為 Java 程式設計師的養分，在這些基礎的概念上，一而再、再而三的閱讀，地基打穩後就可以往上開始蓋高樓大廈啦！

上一篇：Java SE 入門教學 - 執行緒(2)