ch06 swing 的圖形介面元件 (ii)
DESCRIPTION
Ch06 Swing 的圖形介面元件 (II). 物件導向系統實務. 大綱. JPopupMenu 彈出式選單元件 JMenuBar 、 JMenu 與 JMenuItem 下拉式選單元件 JToolBar 工具列元件 JFileChooser 檔案選擇元件 JColorChooser 色彩選擇元件 多重視窗. 視窗功能表和工具列元件. Swing 套件提供功能強大的視窗功能表和工具列元件,可以輕鬆建立應用程式視窗上方的下拉式功能表、工具列和彈出式選單。 同樣的,視窗功能表和工具列元件也都是繼承自 JComponent ,其繼承架構如下圖所示:. - PowerPoint PPT PresentationTRANSCRIPT
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
M enu 屬 MenuComponent的延伸類別
13
以「記事本」為例說明選單及其相關元件
MenuBar
MenuMenuItem
CheckboxMenuItem
112/04/20 1414
M 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 的M 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
練習1• 參考範例2,範例3,範例4建立一個類似筆記本畫面的視窗
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){}}