Ch06 SwingCh06 Swing 的圖形介面元件的圖形介面元件(II) (II)

物件導向系統實務

112/04/20 2

• JPopupMenu 彈出式選單元件• JMenuBar 、 JMenu 與 JMenuItem 下拉式選單元件

• JToolBar 工具列元件• JFileChooser 檔案選擇元件• JColorChooser 色彩選擇元件• 多重視窗

大綱

112/04/20 3

視窗功能表和工具列元件• Swing 套件提供功能強大的視窗功能表和工具列元件，可以輕鬆建立應用程式視窗上方的下拉式功能表、工具列和彈出式選單。

• 同樣的，視窗功能表和工具列元件也都是繼承自JComponent ，其繼承架構如下圖所示：

112/04/20 4

JPopupMenu 彈出式選單元件 - 說明

• JPopupMenu 彈出式選單元件繼承自JComponent ，可以建立視窗應用程式滑鼠右鍵顯示的快顯功能表，內含選項的 JMenuItem 物件或 JSeparator 分隔線物件，如下圖所示：

112/04/20 5

JPopupMenu 彈出式選單元件 - 建立物件

• 在建立 JPopupMenu 物件後，使用 add() 方法新增選項的 JMenuItem 物件， addSeparator() 方法可以新增選單分隔線的 JSeparator 物件。

popup = new JPopupMenu();

popup.add(blue = new JMenuItem(" 藍色 "));

popup.add(yellow = new JMenuItem(" 黃色 "));

popup.add(green = new JMenuItem(" 綠色 "));

popup.addSeparator();

popup.add(" 紅色 ");

112/04/20 6

JPopupMenu 彈出式選單元件 - 事件處理

• 新增 MouseListener 傾聽者物件且實作mousePressed() 和 mouseReleased() 方法來顯示彈出式視窗，如下所示：

public void mousePressed(MouseEvent evt){ if (evt.isPopupTrigger()) popup.show(evt.getComponent(), evt.getX(), evt.getY());}public void mouseReleased(MouseEvent evt){ if (evt.isPopupTrigger()) popup.show(evt.getComponent(), evt.getX(), evt.getY());}

112/04/20 7

JPopupMenu 建構子與方法• 建構子：

– JPopupMenu()– JPopupMenu(String):參數 String 是標題文字

• 方法：– JMenuItem add(JMenuItem)– JMenuItem add(String)– void addSeparator()– void insert(Component, int)– void remove(JMenuItem)– void remove(int)– void removeAll()– void show(Component, int,

int)

112/04/20 8

範例 1: 使用 PopupMenu(1/4)• 建立 Popup Menu 的選擇項：

1. import javax.swing.*;2. import java.awt.*;3. import java.awt.event.*;4. // 繼承 JFrame 類別 , 實作 ActionListener 介面5. public class Ch09_01 extends JFrame6. implements ActionListener7. { private JPopupMenu popup;8. private JMenuItem blue, yellow, green;9. private Container c;10. // 建構子11. public Ch09_01()12. { super("JPopupMenu 元件範例 "); 13. c = getContentPane();14. c.setBackground(Color.pink); 15. popup = new JPopupMenu();16. popup.add(blue = new JMenuItem(" 藍色 "));17. blue.addActionListener(this);18. popup.add(yellow = new JMenuItem(" 黃色 "));19. yellow.addActionListener(this);20. popup.add(green = new JMenuItem(" 綠色 "));21. green.addActionListener(this);22. popup.addSeparator();23. popup.add(" 紅色 "); // 使用字串新增選項

112/04/20 9

範例 1: 使用 PopupMenu(2/4)• 傾聽者：

24. addMouseListener(new MouseAdapter()25. { public void mousePressed(MouseEvent evt)26. { if ( evt.isPopupTrigger() ) // 顯示選單27. popup.show(evt.getComponent(),28. evt.getX(), evt.getY());29. }30. public void mouseReleased(MouseEvent evt)31. { if ( evt.isPopupTrigger() ) // 顯示選單32. popup.show(evt.getComponent(),33. evt.getX(), evt.getY());34. }35. });36. }

112/04/20 10

範例 1: 使用 PopupMenu(3/4)

• 實作事件處理方法：37. public void actionPerformed(ActionEvent evt)

38. { if ( evt.getSource() == blue )

39. c.setBackground(Color.blue); // 藍色40. if ( evt.getSource() == yellow )

41. c.setBackground(Color.yellow); // 黃色42. if ( evt.getSource() == green )

43. c.setBackground(Color.green); // 綠色44. repaint(); // 重繪45. }

112/04/20 11

範例 1: 使用 PopupMenu(4/4)• 主程式：

46. public static void main(String[] args) 47. { // 建立 Swing 應用程式48. Ch09_01 app = new Ch09_01();49. // 關閉視窗事件 , 結束程式的執行50. app.addWindowListener(new WindowAdapter()51. { public void windowClosing(WindowEvent evt)52. { System.exit(0); }53. });54. app.setSize(300,200); // 設定尺寸55. app.setVisible(true); // 顯示視窗56. }57. }

112/04/20 12

Menu 屬 MenuComponent的延伸類別

12

Object

MenuBar

MenuItemMenuComponent Menu

CheckboxMenuItem

112/04/20 13

Ｍ enu 屬 MenuComponent的延伸類別

13

以「記事本」為例說明選單及其相關元件

MenuBar

MenuMenuItem

CheckboxMenuItem

112/04/20 1414

Ｍ enu屬MenuComponent的延伸類別Menu位於視窗標題列的下方使用選單時，框架（ Frame）會有一個選單列

（ MenuBar），選單列內有數個選單（ Menu）

每個Menu內會有多個選項（MenuItem）或核選式選項（ CheckboxMenuItem），選單是選項的容器選單也可以是另一個選單的容器

112/04/20 15

JMenuBar 、 JMenu 與 JMenuItem 下拉式選單元件 - 說明

• 在 JFrame 、 JInternalFrame 、 JApplet 和JDialog 等類別的視窗新增下拉式功能表選單，類別建構子需要使用JMenuBar 、 JMenu 和 JMenuItem 物件來建立下拉式功能表的物件。

112/04/20 16

JMenuBar 、 JMenu 與 JMenuItem 下拉式選單元件 - JMenuBar 元件

• JMenuBar 元件是視窗上方的功能表列，如下所示：JMenuBar jmb = new JMenuBar();

setJMenuBar(jmb);

• 上述程式碼建立 JMenuBar 物件後，預設是空的功能表列，然後使用 setJMenuBar()方法新增到 JFrame 視窗，換句話說，目前在視窗上方已經擁有一個空的功能表列。

112/04/20 17

JMenuBar 、 JMenu 與 JMenuItem 下拉式選單元件 -JMenu 元件

• 在建立好 JMenuBar 物件後，就可以新增功能表列下拉式子選單的 JMenu 物件，如下所示：

JMenu file = new JMenu(" 檔案 (F)");JMenuItem item;file.add(item = new JMenuItem(" 新增

(N)",KeyEvent.VK_N));file.add(item = new JMenuItem(" 開啟

(O)",KeyEvent.VK_O));JMenu setting = new JMenu(" 參數設定 ");file.add(setting);file.addSeparator();file.add(item = new JMenuItem(" 關閉

(X)",KeyEvent.VK_X));jmb.add(file);

112/04/20 18

JMenuBar 、 JMenu 與 JMenuItem 下拉式選單元件 -Item 元件

JMenuItem 、 JCheckBoxMenuItem 與JRadioButtonMenuItem 元件

• JMenuItem 、 JCheckBoxMenuItem 與JRadioButtonMenuItem 類別的建構子可以新增選單的選項、核取方塊和選項鈕選項。

112/04/20 19

範例 2: 建立 Menu(1/5)• 基本宣告：

1. /* 程式範例 : Ch09_02.java */2. import javax.swing.*;3. import java.awt.*;4. import java.awt.event.*;5. // 繼承 JFrame 類別 , 實作 ActionListener 介面6. public class Ch09_02 extends JFrame7. implements ActionListener8. { private JRadioButtonMenuItem red, green, blue;9. private JMenuItem openItem, newItem, exitItem, codeItem, typeItem;10. private JMenu setting;11. private Container c;12. // 建構子13. public Ch09_02()14. { super ("JMenuBar 元件範例 ");15. c = getContentPane();16. c.setBackground(Color.white);17. JMenuBar jmb = new JMenuBar();18. setJMenuBar(jmb);

112/04/20 20

範例 2: 建立 Menu(2/5)• 建立第一個 File 的Ｍ enu ：

19.　　 JMenu file = new JMenu(" 檔案 (F)");20. file.setMnemonic(KeyEvent.VK_F);21. openItem = new JMenuItem(" 新增 (N)", KeyEvent.VK_N);22. newItem = new JMenuItem(" 開啟 (O)",KeyEvent.VK_O);23. exitItem = new JMenuItem(" 關閉 (X)",KeyEvent.VK_X);24. setting = new JMenu(" 參數設定 ");25. codeItem = new JMenuItem(" 編碼 ");26. typeItem = new JMenuItem(" 字型 ");27. 28. openItem.addActionListener(this);29. newItem.addActionListener(this);30. exitItem.addActionListener(this);31. codeItem.addActionListener(this);32. typeItem.addActionListener(this);33. 34. file.add(openItem);35. file.add(newItem);36. setting.add(codeItem);37. setting.add(typeItem);38. file.add(setting);39. file.addSeparator(); // 分隔線40. file.add(exitItem);41. jmb.add(file); // 新增 file 選單

112/04/20 21

範例 2: 建立 Menu(3/5)• 建立第二個 Menu ：

42. JMenu choice = new JMenu(" 選項 (C)");43. choice.setMnemonic(KeyEvent.VK_C);44. JCheckBoxMenuItem check;45. check = new JCheckBoxMenuItem(" 切換 ");46. check.addActionListener(this);47. choice.add(check);48. ButtonGroup buttongroup = new ButtonGroup();49. red = new JRadioButtonMenuItem(" 紅色 ");50. choice.add(red);51. buttongroup.add(red);52. red.addActionListener(this);53. green = new JRadioButtonMenuItem(" 綠色 ");54. choice.add(green);55. buttongroup.add(green);56. green.addActionListener(this);57. blue = new JRadioButtonMenuItem(" 藍色 ");58. choice.add(blue);59. buttongroup.add(blue);60. blue.addActionListener(this);61. jmb.add(choice);62. }

112/04/20 22

範例 2: 建立 Menu(4/5)• 實作事件處理方法：

63. public void actionPerformed(ActionEvent evt)64. {65. if (evt.getSource() == exitItem)66. System.exit(0);67. if ( evt.getSource() == red )68. c.setBackground(Color.red);69. if ( evt.getSource() == green )70. c.setBackground(Color.green);71. if ( evt.getSource() == blue )72. c.setBackground(Color.blue);73. repaint(); // 重繪74. }

112/04/20 23

範例 2: 建立 Menu(5/5)• 主程式

76. public static void main(String[] args) 77. { // 建立 Swing 應用程式78. Ch09_02 app = new Ch09_02();79. // 關閉視窗事件 , 結束程式的執行80. app.addWindowListener(new WindowAdapter()81. { public void windowClosing(WindowEvent evt)82. { System.exit(0); }83. });84. app.setSize(300,200); // 設定尺寸85. app.setVisible(true); // 顯示視窗86. }87. }

112/04/20 24

JToolBar 工具列元件 - 說明• JToolBar 工具列元件繼承自 JComponent類別，可以建立視窗的工具列按鈕，它也屬於一種容器元件，在建立好 JToolBar 物件後，就可以新增 GUI 元件到工具列，如下圖所示：

112/04/20 25

JToolBar 工具列元件 - 建立物件

• 程式碼在建立好 JToolBar 元件後，使用 add() 方法新增 GUI 元件，最後只需將 JToolBar 元件視為 GUI 元件，新增到最上層容器物件即可。JToolBar toolBar = new JToolBar();

blue = new JButton(new ImageIcon("blue1.gif"));

yellow = new JButton(new ImageIcon("yellow1.gif"));

green = new JButton(new ImageIcon("green1.gif"));

toolBar.add(blue);

toolBar.add(yellow);

toolBar.add(green);

112/04/20 26

範例 3: 建立 toolbar(1/2)• 宣告及 toolbar 建立：

1. /* 程式範例 : Ch09_03.java */2. import javax.swing.*;3. import java.awt.*;4. import java.awt.event.*;5. // 繼承 JFrame 類別 , 實作 ActionListener 介面6. public class Ch09_03 extends JFrame implements ActionListener7. { private JButton blue, yellow, green;8. private Container c;9. // 建構子10. public Ch09_03()11. { super ("JToolBar 元件範例 ");12. c = getContentPane();13. c.setBackground(Color.white); 14. JToolBar toolBar = new JToolBar();15. blue = new JButton(new ImageIcon("blue.jpg"));16. blue.setToolTipText(" 藍色 ");17. blue.addActionListener(this);18. yellow = new JButton(new ImageIcon("yellow.jpg"));19. yellow.setToolTipText(" 黃色 ");20. yellow.addActionListener(this);21. green = new JButton(new ImageIcon("green.jpg"));22. green.setToolTipText(" 綠色 ");23. green.addActionListener(this);24. toolBar.add(blue);25. toolBar.add(yellow);26. toolBar.add(green);27. c.add(toolBar, BorderLayout.NORTH);28. }

112/04/20 27

範例 3: 建立 toolbar(2/2)• 實作事件處理方法及主程式：

29. public void actionPerformed(ActionEvent evt)30. { if ( evt.getSource() == blue )31. c.setBackground(Color.blue);32. if ( evt.getSource() == yellow )33. c.setBackground(Color.yellow);34. if ( evt.getSource() == green )35. c.setBackground(Color.green);36. repaint(); // 重繪37. }38. // 主程式39. public static void main(String[] args) 40. { // 建立 Swing 應用程式41. Ch09_03 app = new Ch09_03();42. // 關閉視窗事件 , 結束程式的執行43. app.addWindowListener(new WindowAdapter()44. { public void windowClosing(WindowEvent evt)45. { System.exit(0); }46. });47. app.setSize(300,200); // 設定尺寸48. app.setVisible(true); // 顯示視窗49. }50. }

112/04/20 28

檔案與色彩選擇元件 - 說明• Swing 套件擁有瀏覽檔案系統選取檔案或資料夾的 JFileChooser 和選取色彩的JColorChooser 元件 2 種選擇元件，這 2個元件都是繼承自 JComponent ，其繼承架構如下圖所示：

112/04/20 29

JFileChooser 檔案選擇元件 - 說明• JFileChooser 檔案選擇元件可以顯示對話方塊瀏覽檔案系統，以便讓使用者選取檔案或資料夾。

112/04/20 30

JFileChooser 檔案選擇元件 - 開啟檔案對話方塊

• 例如：開啟或儲存指定檔案，如下所示：JFileChooser jfc = new JFileChooser();

• 上述程式碼建立 JFileChooser 物件後，使用 showOpenDialog() 方法顯示開啟檔案對話方塊，如下所示：int n = jfc.showOpenDialog(Ch11_4_1.this);

if (n == JFileChooser.APPROVE_OPTION)

{ File file = jfc.getSelectedFile();

…… }

112/04/20 31

JFileChooser 檔案選擇元件 - 儲存檔案對話方塊

• 儲存檔案對話方塊是使用showSaveDialog() 方法來顯示，如下所示：int m = jfc.showSaveDialog(Ch11_4_1.this);if (m == JFileChooser.APPROVE_OPTION){ File file = jfc.getSelectedFile(); ……}

112/04/20 32

範例 4: 使用 FileChooser 元件 (1/3)• 基本宣告：

1. /* 程式範例 : Ch09_04.java */2. import java.io.*;3. import java.awt.*;4. import java.awt.event.*;5. import javax.swing.*;6. import javax.swing.filechooser.*;7. // 繼承 JFrame 類別8. public class Ch09_04 extends JFrame9. { // 建構子10. public Ch09_04()11. { super("JFileChooser 元件範例 ");12. Container c = getContentPane();13. // 建立擁有捲動軸的文字區域元件14. final JTextArea area = new JTextArea(15,30);15. JScrollPane scroll = new JScrollPane(area);16. // 建立 JFileChooser 元件17. final JFileChooser jfc = new JFileChooser();18. JPanel button = new JPanel(); // 按鈕的 JPanel

112/04/20 33

範例 4: 使用 FileChooser 元件 (2/3)• 新增兩個按鈕及傾聽者及事件處理方法：

1. 　　 JButton open = new JButton(" 開啟檔案 ");2. open.addActionListener(new ActionListener()3. { public void actionPerformed(ActionEvent evt)4. { int n = jfc.showOpenDialog(Ch09_04.this);5. if ( n == JFileChooser.APPROVE_OPTION )6. { File file = jfc.getSelectedFile();7. area.append(" 開啟檔案名稱 : ");8. area.append(file.getName() + "\n");9. }10. }11. });12. button.add(open);13. // 建立儲存檔案按鈕14. JButton save = new JButton(" 儲存檔案 ");15. save.addActionListener(new ActionListener()16. { public void actionPerformed(ActionEvent evt)17. { int m = jfc.showSaveDialog(Ch09_04.this);18. if ( m == JFileChooser.APPROVE_OPTION )19. { File file = jfc.getSelectedFile();20. area.append(" 儲存檔案名稱 : ");21. area.append(file.getName() + "\n");22. }23. }24. });25. button.add(save);26. c.add(scroll, BorderLayout.CENTER);27. c.add(button, BorderLayout.SOUTH);28. }

112/04/20 34

練習１• 參考範例２，範例３，範例４建立一個類似筆記本畫面的視窗

112/04/20 35

範例 4: 使用 FileChooser 元件 (3/3)• 主程式：

29.public static void main(String[] args) 30. { // 建立 Swing 應用程式31. Ch09_04 app = new Ch09_04();32. // 關閉視窗事件 , 結束程式的執行33. app.addWindowListener(new WindowAdapter()34. { public void windowClosing(WindowEvent evt)35. { System.exit(0); }36. });37. app.setSize(300,200); // 設定尺寸38. app.setVisible(true); // 顯示視窗39. }40. }

112/04/20 36

JColorChooser 色彩選擇元件 - 說明

• JColorChooser 色彩選擇元件提供多種標籤和調色盤的色彩選擇對話方塊，如果 Java 應用程式需要讓使用者選擇色彩，就可以使用 JColorChooser元件，如右圖所示：

112/04/20 37

JColorChooser 色彩選擇元件 - 建立物件

• JColorChooser 色彩選擇元件的建立，如下所示：JColorChooser jcc = new JColorChooser();

• 程式碼建立 JColorChooser 物件後，使用showDialog() 方法顯示色彩選擇對話方塊，如下所示：Color newColor =

jcc.showDialog(Ch11_4_2.this, " 選擇背景色彩 ", c.getBackground());

if (newColor != null) c.setBackground(newColor);

112/04/20 38

多重視窗介面 JInternalFrame- 說明• 一般來說，視窗應用程式都不會只有一個視窗，如果需要在 JFrame 視窗開啟其它視窗，就可以使用 JInternalFrame 類別在JFrame 視窗內建立多重視窗。其繼承架構如下圖所示：

112/04/20 39

多重視窗介面 JInternalFrame-JDesktopPane 和 JLayeredPane 類別

• JInternalFrame 物件是新增在JDesktopPane 物件（在使用上如同JFrame 的 ContentPane ），所以需要先建立 JDesktopPane 物件，如下所示：JDesktopPane jdesktop = new JDesktopPane();

• 上述程式碼建立 JDesktopPane 物件後， JInternalFrame 物件就是新增到此容器物件，因為 JDesktopPane 是JLayeredPane 的子類別，所以能夠建立多個重疊的內層視窗。

112/04/20 40

多重視窗介面 JInternalFrame- JInternalFrame 類別 ( 說明 )

JInternalFrame 類別• 在 JInternalFrame 類別部分，筆者準備直接繼承

JInternalFrame 建立 InternalFrame 類別。

112/04/20 41

多重視窗介面 JInternalFrame- JInternalFrame 類別 ( 範例 )

class InternalFrame extends JInternalFrame{ static int iframeCount = 0; static final int offsetX = 25; static final int offsetY = 25; public InternalFrame() { super(" 內層視窗 : " + (++iframeCount), true, // 可調整尺寸 true, // 可關閉 true, // 可最大化 true); // 可縮小成圖示 setSize(300,200); // 設定尺寸 // 設定位置 setLocation(offsetX*iframeCount, offsetY*iframeCount); }}

112/04/20 42

多重視窗介面 JInternalFrame- JInternalFrame 類別

(createInternalFrame() 方法 )

private void createInternalFrame(){ InternalFrame iframe = new InternalFrame(); iframe.setVisible(true); // 顯示內層視窗 jdesktop.add(iframe); // 加入上層視窗 try { iframe.setSelected(true); }catch(java.beans.PropertyVetoException e){}}