Java 入門指南 - GUI 的基本概念

圖形介面的元件有很多種，如標籤 (label) 、按鈕 (button) 、選單 (menu) 、文字方塊 (textfield) 等等




Java API 中有兩個套件，分別是 AWT 與 Swing ，兩者都可以製作圖形介面的程式。 AWT 為 Abstract Window Toolkit 的縮寫詞，這是 Java 1.1 版之前官方程式庫 (libiary) 提供的套件 (package) ，後來 1.2 版以後又採納 Swing 當第二個官方 GUI 的程式庫。


兩者的差別在於， AWT 採用作業系統 (operating system) 提供的視窗元件，所以利用 AWT 所設計的視窗圖形程式會跟作業系統原本的視窗風格一致， Swing 則是利用 Java 原生程式碼重新繪出視窗元件，因此利用 Swing 設計的程式在各平台間並無外觀上的差異。


兩者的差異還涉及佔用系統資源的多寡，以及其他一些議題，不過我們還不打算詳細討論那麼深。


AWT 在 java.awt 套件中， Swing 在 javax.swing 套件裡，我們以介紹 Swing 為主，以下列出常用的視窗元件
元件名稱類別名稱
視窗JFrame
面板JPanel
標籤JLabel
按鈕JButton
核取方塊JCheckBox
選取方塊JRadioButton
下拉式列表JComboBox
列表JList
捲動軸JScrollBar
滑動軸JSlider
文字方塊JTextField
密碼文字方塊JPasswordField
文字區域JTextArea
彈出式選單JPopupMenu
下拉式選單列JMenuBar
下拉式選單JMenu
下拉式選單項目JMenuItem
下拉式選單核取方塊JCheckBoxMenuItem
下拉式選單選取按鈕JRadioButtonMenuItem
工具列JToolBar
檔案選擇JFileChooser
色彩選擇JColorChooser
多重視窗JDesktopPane JInternalFrame
對話視窗JDialog


我們現在來看看怎麼樣用 Swing 設計圖形介面的視窗程式吧！首先，建立一個視窗物件 (object) ，也就是 JFrame 類別 (class) 的物件，然後才在視窗物件裡設置其他需要用到的元件，這是說，視窗物件屬於一種容器，任何視窗元件，例如顯示訊息的標籤或是觸發動作的按鈕，這些 JLabel 或 JButton 類別的物件都得放進視窗物件的容器裡囉！


下面的簡單例子示範 Swing 程式的基本概念
import java.awt.*;
import javax.swing.*;

public class GUIDemo1 { 
    public static void main(String[] args) { 
        JFrame demo = new JFrame();
        demo.setSize(400, 300);
        demo.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        
        JCheckBox checkbox = new JCheckBox("JCheckBox");
        JRadioButton radiobutton = new JRadioButton("JRadiobutton");
        JButton button = new JButton("JButton");
        JLabel label = new JLabel("JLabel");
        JTextArea textarea = new JTextArea("JTextArea");
        
        demo.getContentPane().add(BorderLayout.EAST, checkbox);
        demo.getContentPane().add(BorderLayout.WEST, radiobutton);
        demo.getContentPane().add(BorderLayout.SOUTH, button);
        demo.getContentPane().add(BorderLayout.NORTH , label);
        demo.getContentPane().add(BorderLayout.CENTER, textarea);
        
        demo.setVisible(true);
    }
}

/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名：GUIDemo1.java
    功能：示範 Java 程式 
    作者：張凱慶
    時間：西元 2011 年 4 月 */


編譯後執行



結果如下



GUIDemo 類別只有一個 main() 函數，我們直接在 main() 裡完成全部的 GUI 建置工作。第一件事，自然是宣告 JFrame 類別的物件
JFrame demo = new JFrame();


demo 是 JFrame 類別的物件，我們總共在 demo 上頭做了四件不同的工作，首先，設定視窗的大小，這是呼叫 setSize() 方法 (method)
demo.setSize(400, 300);


接著呼叫了 setDefaultCloseOperation 方法，這個方法是設定視窗標題列的關閉按鈕結束程式執行，提供 JFrame 類別的 staic 屬性 (field) EXIT_ON_CLOSE 當參數 (parameter)
demo.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);


然後，我們另外宣告建立 5 個不同的視窗元件，從上而下分別是核取方塊、選取方塊、按鈕、標籤與文字區域
JCheckBox checkbox = new JCheckBox("JCheckBox");
JRadioButton radiobutton = new JRadioButton("JRadiobutton");
JButton button = new JButton("JButton");
JLabel label = new JLabel("JLabel");
JTextArea textarea = new JTextArea("JTextArea");


我們在建構子 (constructor) 中提供的字串 (string) 會是該視窗元件預設顯示的訊息。


第三件工作便是將視窗元件放到 demo 中了，這裡， demo 呼叫 getContentPane() 方法取得 JFrame 的 contentPane 物件，然後由 contentPane 物件呼叫 add() 方法將視窗元件放進去
demo.getContentPane().add(BorderLayout.EAST, checkbox);
demo.getContentPane().add(BorderLayout.WEST, radiobutton);
demo.getContentPane().add(BorderLayout.SOUTH, button);
demo.getContentPane().add(BorderLayout.NORTH , label);
demo.getContentPane().add(BorderLayout.CENTER, textarea);


這是因為 JFrame 只是個視窗，像是



視窗元件要放到面板 (panel) 中才可以顯示在視窗上，實際上， contentPane 屬於 Container 型態的面板物件， Container 是在 java.awt 中所定義的類別，因此， add() 方法用的參數 BorderLayout.EAST 等，這些都在 java.awt 中。


所以我們在程式檔案的一開始，除了 import java.swing 之外，也 import java.awt 。
import java.awt.*;
import javax.swing.*;


其實 java.swing 的類別多半繼承 (inherit) 自 java.awt ，這是說 Swing 是由 AWT 延伸出的套件，因此兩者之間有很多地方可以互通， Swing 有些地方也需要用到 AWT 的東西，例如此例中的 BorderLayout.EAST 等。


JFrame 的 contentPane 預設的編排方式為東、西、南、北、中等五個區域，我們各自在一個區域中放入一個視窗元件。


最後， demo 的最後一件工作，就是呼叫 demo 的 setVisible() 方法，並設置成 true ，這樣才會顯示在螢幕上頭
demo.setVisible(true);


所以利用 Swing 設置 GUI 的步驟是先建立 JFrame 型態的物件，然後視窗元件再逐一放到 JFrame 物件裡頭，當然，視窗的排版配置也是重要的課題，接下來我們來看看 Swing 的排版管理員吧！


中英文術語對照
標籤label
按鈕button
選單menu
文字方塊textfield
程式庫libiary
套件package
作業系統operating system
物件object
類別class
方法method
屬性field
參數parameter
建構子constructor
字串string
面板panel
繼承inherit


您可以繼續參考
GUI 篇


相關目錄
回 Java 入門指南
回 Java 教材目錄
回首頁


參考資料
The JavaTM Tutorials: Getting Started
The JavaTM Tutorials: Learning the Java Language
The JavaTM Tutorials: Essential Classes
The Java Language Specification, Third Edition


本文於 2013 年 1 月訂正
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)