第 14章　圖形介面 Swing

Java 2 程式設計入門與應用

2

目錄

14-1　Swing的簡介14-2　Swing的視窗元件14-3　Swing的繪圖與選擇視窗 溫故知新自我突破習題

3

14-1 　 Swing 的簡介

14-1.1 Swing 的架構14-1.2 JComponent 類別的函式

4

前言：

由於 AWT 在不同平台下執行有問題，而且缺乏一些基礎的元件來設計較複雜的圖形使用者介面，因此衍生出 Java 基礎類別（ Java Foundation Classes ，簡稱 JFC ）取代並包含 AWT ，主要的部分稱為「 Swing 」。

5

14-1.1　 Swing的架構

因為 Swing 是繼承自 AWT ，所以其元件仍然保有原本 AWT 元件的功能，為了區分 Swing元件與 AWT 元件的名稱，在每一種 Swing 元件的前面都加上一個大寫字母“ J” ，例如： JFrame 、 JButton 、 JLabel 、 JList 、 JCheckbox 、 JMenuBar 等元件。

6

Swing的繼承圖：

Swing 套件的相關元件皆定義在 javax.swing 類別庫中，其中大部分的元件都是 JComponent的子類別，下面為 Swing 的繼承圖：

7

下面為 Swing繼承圖的說明：

從上面的繼承圖可以得知， Swing 的元件都是繼承自 AWT 的 Container 類別，所以仍然可使用 AWT 元件的成員、版面配置、傾聽者類別、轉接器類別與事件函式。

在本章只介紹 Swing 元件新增的功能，繼承自AWT 的函式請參考第 13 章。

8

Swing 視窗元件常見的事件處理類別整理如下：

9

下表兩種事件是 Swing類別所新增的：

上面的事件處理類別幾乎都是第 13 章介紹過的，所以用法相同，只有下面兩種事件是 Swing 類別所新增的，這兩種事件類別都只有傾聽者，沒有轉接器可以使用：

在程式中處理上面兩種事件時，必須要載入 javax.swing.event ，才可以執行程式。

10

14-1.2　 JComponent類別的函式

利用 JComponent 類別的函式可以設定子物件的許多屬性，例如：背景顏色、邊框樣式、字型與提示文字等。

11

下面是 JComponent類別常見的函式：

12

下面是 Swing 套件的 BorderFactory 類別中建立 Border物件的函式：上面函式中出現的 Border 物件，可以利用 Swi

ng 套件的 BorderFactory 類別來建立，下面是該類別中建立 Border 物件的函式：

13

例如下面的程式碼，建立一個邊框樣式為凸起的按鈕：

14

14-2　 Swing的視窗元件

14-2.1 　視窗元件 JFrame14-2.2 　基本元件與文字元件14-2.3 　選擇元件 14-2.4 　捲軸元件與滑動軸元件14-2.5 　對話方塊元件14-2.6 　功能表選單與工具列元件

15

前言：

Swing 元件的用法與 AWT 大同小異，差別在於利用 Swing 撰寫的視窗程式外觀與 AWT 的不同，除了視窗預設背景顏色為淺灰色，視窗中的元件外觀也會顯得較柔和化。

16

14-2.1　視窗元件 JFrame

下面是 JFrame 類別常見的函式：

17

例如下面的程式碼：

18

19

上述程式碼分析如下：

第 8 行建立圖片物件 img ，然後在第 9 行設定視窗標題的圖示為 img ，則執行程式後，視窗左上角的圖示會從預設的 變成 。

在 AWT 中必須處理 WindowEvent 事件函式，才可以點選視窗右上角的 關閉鈕關閉視窗。而 Swing 只要利用 setDefaultCloseOperation 函式就可以將視窗關閉，並釋放視窗的記憶體空間（第 10 行）。

20

完成後，執行程式的畫面顯示如下：

21

14-2.2　基本元件與文字元件

在視窗程式中常用的基本元件，不外乎就是按鈕元件 JButton 與標籤元件 JLabel ，以及 JTextField 、 JPasswordField 與 JTextArea 等文字元件。

22

下面是基本類別常見的函式 -1：

23

下面是基本類別常見的函式 -2：

24

下面是基本類別常見的函式 -3：

25

下面是基本類別常見的函式 -4：

26

下面是基本類別常見的函式 -5：

27

下面是基本類別常見的函式 -6：

上述函式中，若要設定文字區域元件 JTextArea 顯示捲軸，必須建立一個捲軸元件 JScrollPane ，然後設定捲軸內容為 JTextArea 元件，其語法如下：

28

29

將元件加入 Swing視窗的步驟：

AWT 可以直接在 Frame 視窗中加入元件，但Swing 必須先利用 JFrame 類別的 getContentPane 函式建立一個 Container容器，然後將元件加入 Container容器中。

30

將元件加入 Swing 視窗的步驟可以分為下面四個部分：1. 載入 AWT 與 Swing 類別庫：因為 Container 類別定

義在 AWT 套件中，所以撰寫程式碼時必須同時載入java.awt 類別庫與 javax.swing 類別庫，才能夠執行成功。

2. 建立 JFrame 視窗物件。

3. 取得視窗的 ContentPane 物件：取得 JFrame 視窗物件的 ContentPane 物件，建立一個 Container容器。

4. 利用 add 函式將元件加入 Container容器中：利用 add 函式依序將元件加入 3. 建立的 Container容器中。

31

例如下面的程式碼：

32

33

34

上述程式碼分析如下：

1. 第 7 行利用 getContentPane 函式取得視窗 f 的 ContentPane 物件，Swing 視窗的元件必須要加入這個容器中才可以顯示出來。

2. 第 9 行建立 JButton 物件 b1 ，並在參數中傳遞一個 ImageIcon 物件，表示按鈕上顯示圖片 ch14_02_02.gif 。

3. 第 17 行建立 JScrollPane 物件，並同時指定捲軸物件的內容是文字區域 t3 。因為捲軸物件已經包含文字區域，所以直接設定捲軸物件的位置與大小，然後將捲軸物件加入 ContentPane 物件就可以了，文字區域的大小會隨著捲軸物件而自動調整。

4. 第 22 、 24 與 33 行分別設定按鈕 b1 、 b2 與文字區域 t3 的邊框樣式。

5. 第 34 行利用 setLineWrap 函式設定輸入文字區域的資料會自動換行，則輸入資料時，只會顯示垂直捲軸，而不會顯示水平捲軸。

6. 第 46~51 行做事件處理，當點選 鈕後，會在文字區域 t3 顯示文字。

35

完成後，畫面顯示如下：

完成後執行程式，發現在 JFrame 中，元件的座標位置也是從視窗的左上角開始計算，但是沒有包含視窗標題列的高度與邊框的寬度，畫面顯示如下：

36

14-2.3　選擇元件

JCheckBox 與 JRadioButton 元件是在設計視窗程式時，最常用於選擇題的選項設計，以供使用者選擇； JList 是可以從清單中選擇一個或多個資料的元件，而 JComboBox 則是只能選擇一種資料的下拉式選單。

37

下面是選擇類別常見的函式 -1：

38

下面是選擇類別常見的函式 -2：

39

下面是選擇類別常見的函式 -3：

40

下面是選擇類別常見的函式 -4：

41

下面是選擇類別常見的函式 -5：

42

下面是選擇類別常見的函式 -6：

43

下面是選擇類別常見的函式 -7：

44

例如下面的程式碼：

45

46

47

上述程式碼分析如下：

1. 第 17 行宣告字串陣列 s 中有 4筆資料，然後在第 19 行建立清單方塊時，設定清單方塊的選項為字串陣列 s 的元素。

2. 第 23~26 行新增 4 個項目到下拉式選單 combo 中。3. 第 29 與 30 行建立一個按鈕群組 group ，然後將單選的選項按鈕

r1 與 r2 加入該按鈕群組，這樣這兩個選項按鈕一次只能選取一個。

4. 第 32 行設定清單方塊為單選模式，第 33 與 34 行設定當選取清單方塊的選項時，選項的背景顏色為粉紅色，字體顏色為藍色。

5. 第 36 行設定清單方塊的寬度固定為 100 。6. 第 48~53 行做事件處理，當清單方塊上的選擇選項改變時，就會

在標籤上顯示文字，因為 ListSelectionEvent 屬於 Swing 類別的事件處理，所以必須在第 3 行載入 javax.swing.event 。

48

完成後，執行程式的畫面顯示如下：

49

50

51

14-2.4　捲軸元件與滑動軸元件

透過 JScrollBar 、 JSlider 與 JScrollPane 元件，不僅可以顯示元件的完整內容，也可製作出物件移動或頁面捲動的效果。

52

下面是 JScrollBar與 JSlider類別常見的函式 -1：

53

下面是 JScrollBar與 JSlider類別常見的函式 -2：

54

下面是 JScrollBar與 JSlider類別常見的函式 -3：

55

下面是 JScrollBar與 JSlider類別常見的函式 -4：

56

例如下面的程式碼：

57

58

59

上述程式碼分析如下：

1. 第 26 行設定視窗 f 為 BorderLayout 版面配置方式，在視窗的東、南、西、北、中分別加入垂直捲軸、水平捲軸、垂直滑動軸、水平滑動軸與文字區域。

2. 第 21 行設定顯示水平滑動軸的刻度，並在第 22 與 23 行設定主要刻度大小為 10 ，次要刻度大小為 5 。

3. 第 42~49 行做捲軸的事件處理，當捲動 scroll1 與 scroll2 物件時，就在文字區域中即時改變目前捲軸的數值。

4. 第 51~58 行做滑動軸的事件處理，當滑動 slider1 與slider2 物件時，就在文字區域中即時改變目前滑動軸的數值。

60

完成後，執行程式的畫面顯示如下：

61

14-2.5　對話方塊元件

透過 JOptionPane 對話方塊元件可以建立確定視窗、輸入視窗、訊息視窗與選單視窗等對話方塊。

62

下面只有介紹 JOptionPane 類別常見的對話方塊函式 -1：

63

下面只有介紹 JOptionPane 類別常見的對話方塊函式 -2：

64

下面只有介紹 JOptionPane 類別常見的對話方塊函式 -3：

65

下面只有介紹 JOptionPane 類別常見的對話方塊函式 -4：

66

下面建立一個 BorderLayout版面配置的視窗，其程式碼如下： 下面的程式碼建立一個 BorderLayout 版面配置的視窗，然後在視

窗的上面加入一個面板，面板中有 4 個功能按鈕，點選這些按鈕會跳出不同的對話方塊，配合事件處理函式 actionPerformed做出不同的反應：

67

68

69

70

上述建立一個 BorderLayout版面配置視窗的程式碼分析如下：1. 因為 JOptionPane 類別中的對話方塊都是透過靜態函

式產生的，所以不用建立 JOptionPane 物件，就可以直接利用 JOptionPane.靜態成員函式 (引數列…… )來建立對話方塊。

2. 第 37 行建立一個確認視窗，將點選的按鈕常數值設定給 select 變數，隨著點選不同的按鈕，分別在文字區域中顯示不同的訊息。

3. 第 46 行建立一個輸入視窗，將輸入的字串儲存在 s變數中。

4. 第 50 行建立一個訊息視窗，警告使用者即將關閉視窗。

5. 第 54 行宣告一個字串陣列 data ，第 55 行設定選項視窗中的選項為此字串陣列中的資料，當點選選項後會在文字區域中顯示訊息。

71

完成後，執行程式的畫面顯示如下 -1：

72

完成後，執行程式的畫面顯示如下 -2：

73

14-2.6　功能表選單與工具列元件

Swing 套件提供的 JPopupMenu 、 JMenuBar 、JMenu 、 JMenuItem 與 JToolBar 元件皆繼承自JComponent 類別，可以在視窗中建立功能表選單或工具列。

74

下面是功能表選單與工具列類別常見的函式 -1：

75

下面是功能表選單與工具列類別常見的函式 -2：

76

下面是功能表選單與工具列類別常見的函式 -3：

77

78

例如下面的程式碼：

79

80

81

82

83

84

上述程式碼分析如下：

1. 第 11~15 行建立快顯功能表，並建立 3 個選項按鈕項目與 1 個按鈕群組，然後在第 35~37 行將此 3 個選項按鈕項目加入同一個快顯功能表與按鈕群組。

2. 第 27 行建立工具列時指定方向為 1 ，將工具列的按鈕垂直排列。3. 第 34 行利用 getFont 函式取得標籤的字型，然後再利用 getName

函式取得標籤的字型名稱。4. 第 62~71 行建立滑鼠事件處理，然後在第 64 與 68 行利用 isPopup

Trigger 函式，判斷在視窗中是否已經按下快顯功能表（是否已經觸發）。

5. 第 73~111 行的 ActionListener 傾聽者類別，分別處理點選快顯功能表、功能表列與工具列選項時，程式會執行的動作。

85

完成後，執行程式的畫面顯示如下：

86

14-3　 Swing的繪圖與選擇視窗

14-3.1 Swing 的繪圖 14-3.2 顏色選擇器與檔案選擇器

87

前言：

Swing 與 AWT 的繪圖方式相同，差別在於要將 Frame宣告為 JFrame 、 Panel宣告成 JPanel…… 等等。

而 Swing 套件中新增的 JColorChooser 元件可以建立顏色選擇器， JFileChooser 元件可以建立檔案選擇器。

88

14-3.1　 Swing的繪圖 Swing 繪圖的函式可以參考 13-4 小節的說明，下面舉

一個繪圖的例子，只有粗體部分是 Swing 所新增的，其他寫法皆與 AWT 相同，程式碼如下：

89

90

91

完成後，畫面顯示如下：

完成後執行程式，點選 鈕就會在視窗中繪圖，畫面顯示如下：

完成後

92

93

14-3.2　顏色選擇器與檔案選擇器

Swing 提供的 JColorChooser 元件可以讓使用者自行選擇繪圖物件的顏色，而 JFileChooser元件則可以讓使用者執行開啟或儲存檔案等動作。

94

下面是 JColorChooser與 JFileChooser類別常見的函式 -1：

95

下面是 JColorChooser與 JFileChooser類別常見的函式 -2：

96

下面是 JColorChooser與 JFileChooser類別常見的函式 -3：

97

下面讓使用者自行開啟指定的文字檔，其程式碼如下： 下面的程式碼讓使用者自行開啟指定的文字檔，然後

在文字區域中顯示檔案的內容，顯示資料後可以設定文字的顏色，程式碼如下：

98

99

100

101

上述讓使用者自行開啟指定的文字檔的程式碼分析如下：1. 第 32 行判斷當點選 鈕時，就在第 34 行顯示開啟檔案的對話方塊，然後將使用者按下按鈕的常數值指定給變數 dialog 。

2. 第 35 行判斷若使用者選擇檔案後並點選 鈕後，就在第 36~45 行利用 FileReader 類別讀取檔案中的文字，然後輸出到文字區域中（做檔案處理時必須拋出 IOException 例外）。

3. 第 47~51 行判斷當點選 鈕時，就顯示一個顏色選擇視窗，使用者點選想要的顏色後，就將文字區域中的文字設成指定的顏色。

102

完成後，執行程式的畫面顯示如下 -1：

103

完成後，執行程式的畫面顯示如下 -2：

104

105

106

溫故知新 -1：

107

溫故知新 -2：

108

自我突破習題 -選擇題：

109

自我突破習題 -實作題：