第 11 章 Swing 的圖形介面元件

第11章 Swing的圖形介面元件 • 11-1 基本圖形介面元件 • 11-2 JTextComponents文字元件 • 11-3 視窗功能表和工具列元件 • 11-4 檔案與色彩選擇元件 • 11-5 多重視窗介面JInternalFrame

11-1 基本圖形介面元件 • 11-1-1 JLabel與JButton標籤與按鈕元件 • 11-1-2 JCheckBox核取方塊元件 • 11-1-3 JRadioButton選項鈕元件 • 11-1-4 JComboBox下拉式清單元件 • 11-1-5 JList清單方塊元件 • 11-1-6 JScrollBar與JSlider捲動與滑動軸元件

11-1 基本圖形介面元件-說明 • Swing套件的圖形介面元件都是繼承自JComponent，各圖形元件類別的繼承架構，如下圖所示：

11-1 基本圖形介面元件-方法1 • JComponet類別關於圖形介面元件的相關方法，如下表所示：

11-1 基本圖形介面元件-方法2

11-1-1 JLabel與JButton標籤與按鈕元件-JLabel元件(說明) • JLabel元件繼承自JComponent類別，可以顯示一段文字內容或圖示（需要配合ImageIcon物件載入圖片），主要的目的是說明使用介面的欄位用途，或顯示訊息文字。例如：使用JLabel元件顯示文字欄位名稱”關閉”和red.gif圖片，如下所示： JLabel label = new JLabel("關閉"); JLabel label1 = new JLabel(new ImageIcon("red.gif"));

11-1-1 JLabel與JButton標籤與按鈕元件-JLabel元件(圖例)

11-1-1 JLabel與JButton標籤與按鈕元件-JButton元件(建立物件) • JButton元件繼承自AbstractButton類別，這是可以使用滑鼠按一下的按鈕元件，如下所示： JButton button1 = new JButton("切換(Alt_S)"); JButton button2 = new JButton(new ImageIcon("yellow.gif")); • 上述程式碼建立的JButton物件，其建構子參數分別為字串和圖形，字串是顯示在按鈕上的說明文字。

11-1-1 JLabel與JButton標籤與按鈕元件-JButton元件(事件處理) • JButton元件的目的是為了讓使用者按一下按鈕，所以JButton元件需要新增傾聽者物件進行事件處理，如下所示： button1.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent evt) { if ( flag == 0 ) label.setText("開啟"); else label.setText("關閉"); flag = 1 - flag; } });

11-1-2 JCheckBox核取方塊元件-說明 • JCheckBox核取方塊元件繼承自JToggleButton，屬於AbstractButton的子類別，這個元件是一個開關，按一下可以更改狀態值為true或false，顯示的外觀為是在核取方塊中打勾，其初始值為false，即沒有打勾。

11-1-2 JCheckBox核取方塊元件-範例 • 程式碼建立名為”綠色(G)”的核取方塊，選取核取方塊需要新增ItemListener傾聽者物件來進行處理。 JCheck Box greenBox = new JCheckBox("綠色(G)"); ……… greenBox.addItemListener(this);

11-1-3 JRadioButton選項鈕元件-說明 • JRadioButton選項鈕元件也是繼承自JToggleButton，屬於AbstractButton的子類別，通常為一組選項鈕的單選題，在一組選項鈕中，按一下選項鈕就可以更改狀態值為true或false，在一組選項鈕只能有一個選項鈕為true。

11-1-3 JRadioButton選項鈕元件-範例 • 選項鈕元件為一組，所以需要使用ButtonGroup物件建立這組選項鈕，如下所示： ButtonGroup buttonGroup = new ButtonGroup(); baby1Button = new JRadioButton("女寶寶(F)"); ……… baby1Button.addItemListener(this); buttonGroup.add(baby1Button); baby2Button = new JRadioButton("男寶寶(M)"); ……… baby2Button.addItemListener(this); buttonGroup.add(baby2Button);

11-1-4 JComboBox下拉式清單元件-說明 • JComboBox下拉式清單元件是繼承自JComponent，這種選擇元件只顯示一個項目（目前選擇的選項），需要按一下旁邊的向下箭頭，才會拉出整張選單的選項。

11-1-4 JComboBox下拉式清單元件-建立 • 建立JComboBox元件是使用字串陣列新增選項。JComboBox元件在實作上需要新增ActionListener或ItemListener傾聽者物件來進行處理。 String[] items={"使用現金","使用信用卡","直接轉帳","使用支票"}; JComboBox list = new JComboBox(items);

11-1-4 JComboBox下拉式清單元件-可編輯 • JComboBox元件擁有2種不同形式，在前述建立的JComboBox元件是不可編輯選項，如需編輯，請加上下列程式碼，如下所示： list.setEditable(true); • 上述程式碼設定JComboBox元件的選項是可編輯的，如果沒有所需的選項，可以如同文字欄位一般自行輸入和新增選項。

11-1-5 JList清單方塊元件-說明 • JList清單方塊元件也是繼承自JComponent，這個元件可以顯示整張清單選項，而且允許複選，如下圖所示：

11-1-5 JList清單方塊元件-唯讀 • 程式碼使用字串陣列建立JList元件的清單方塊，建構子預設建立的JList元件並不能新增、刪除和取代選項，JList元件需要使用JScrollPane來新增清單方塊的捲動軸。 String[] names = {"陳會安", "江小魚", "劉得華", "郭負成"}; JList fixedList = new JList(names); JScrollPane scroll1 = new JScrollPane(fixedList);

11-1-5 JList清單方塊元件-可編輯 • 建立允許新增、刪除和取代選項的清單方塊JList元件，請使用DefaultListModel物件建立JList元件，如下所示： DefaultListModel dlistModel = new DefaultListModel(); for (int i = 0; i < names.length; i++) dlistModel.addElement(names[i]); nameList = new JList(dlistModel); • 上述程式碼在建立好DefaultListModel物件後，使用addElement()方法新增選項。

11-1-6 JScrollBar與JSlider捲動與滑動軸元件-說明 • JScrollBar與JSlider元件的操作十分相似，都是調整捲動軸中的方塊或滑動軸的指標來取得使用者選擇的比例值，只不過JScrollBar元件多了2個方向箭的調整鈕。

11-1-6 JScrollBar與JSlider捲動與滑動軸元件-JScrollBar元件 • JScorllBar元件繼承自JComponent元件，在建立好JScrollBar元件後，只需調整捲動軸就可以傳回指定範圍的值，如下所示： JScrollBar s3 = new JScrollBar(JScrollBar.HORIZONTAL,50,10,0,100); • 上述程式碼建立水平捲動軸，最後2個參數指出範圍值是0~100，目前值為50，因為可見區域為10，所以實際的捲動值需刪除可見區域10，所以是0~90。

11-1-6 JScrollBar與JSlider捲動與滑動軸元件-JSlider元件 • JSlider元件是繼承自JComponent元件，在建立好JSlider元件後，只需調整滑動軸中間的指標就可以傳回指定範圍的值，如下所示： JSlider s4 = new JSlider(JSlider.HORIZONTAL, 0, 100, 50); • 上述程式碼建立水平滑動軸，中間2個參數指出範圍值是0~100，最後1個參數是目前值為50。

11-2 JTextComponent文字元件 • 11-2-1 JTextField與JPasswordField文字方塊元件 • 11-2-2 JTextArea文字區域元件

11-2 JTextComponent文字元件 • Swing套件的文字元件可以讓使用者輸入文字內容，在本節說明的文字元件是繼承自JTextComponent，其繼承架構，如下圖所示：

11-2-1 JTextField與JPasswordField文字方塊元件-說明 • JTextField文字方塊元件是用來輸入或顯示一行可捲動的文字內容，JPasswordField也是相同，只是輸入的文字是使用替代字元顯示。

11-2-1 JTextField與JPasswordField文字方塊元件-程式碼 • JTextField文字方塊元件與JPasswordField的建構子參數是欄位寬度，如下所示： JTextField text = new JTextField(12); JPasswordField password = new JPasswordField(12);

11-2-2 JTextArea文字區域元件-說明 • JTextArea文字區域元件能夠輸入或顯示多行文字內容，使用”\n”、”\n\r”或”\r”符號換行（需視作業系統而定），如下圖所示：

11-2-2 JTextArea文字區域元件-說明 • JTextArea文字區域元件使用”\n”、”\n\r”或”\r”符號換行（需視作業系統而定），如下所示： JTextArea area = new JTextArea("等待輸入資料...\n", 15, 30); JScrollPane scroll = new JScrollPane(area); • 上述程式碼建立指定初始字串、寬和高的JTextArea物件，因為文字區域需要捲動，所以使用JScrollPane容器元件替文字區域加上捲動軸。

11-3 視窗功能表和工具列元件 • 11-3-1 JPopupMenu彈出式選單元件 • 11-3-2 JMenuBar、JMenu與JMenuItem下拉式選單元件 • 11-3-3 JToolBar工具列元件

11-3 視窗功能表和工具列元件 • Swing套件提供功能強大的視窗功能表和工具列元件，可以輕鬆建立應用程式視窗上方的下拉式功能表、工具列和彈出式選單。 • 同樣的，視窗功能表和工具列元件也都是繼承自JComponent，其繼承架構如下圖所示：

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

11-3-1 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("紅色");

11-3-1 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()); }

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

11-3-2 JMenuBar、JMenu與JMenuItem下拉式選單元件-JMenuBar元件 • JMenuBar元件是視窗上方的功能表列，如下所示： JMenuBar jmb = new JMenuBar(); setJMenuBar(jmb); • 上述程式碼建立JMenuBar物件後，預設是空的功能表列，然後使用setJMenuBar()方法新增到JFrame視窗，換句話說，目前在視窗上方已經擁有一個空的功能表列。

11-3-2 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);

11-3-2 JMenuBar、JMenu與JMenuItem下拉式選單元件-Item元件 JMenuItem、JCheckBoxMenuItem與JRadioButtonMenuItem元件 • JMenuItem、JCheckBoxMenuItem與JRadioButtonMenuItem類別的建構子可以新增選單的選項、核取方塊和選項鈕選項。

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

11-3-3 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);

11-4 檔案與色彩選擇元件 • 11-4-1 JFileChooser檔案選擇元件 • 11-4-2 JColorChooser色彩選擇元件

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

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

11-4-1 JFileChooser檔案選擇元件-開啟檔案對話方塊 • 例如：開啟或儲存指定檔案，如下所示： JFileChooser jfc = new JFileChooser(); • 上述程式碼建立JFileChooser物件後，使用showOpenDialog()方法顯示開啟檔案對話方塊，如下所示： int n = jfc.showOpenDialog(Ch11_4_1.this); if (n == JFileChooser.APPROVE_OPTION) { File file = jfc.getSelectedFile(); …… }

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

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

11-4-2 JColorChooser色彩選擇元件-建立物件 • JColorChooser色彩選擇元件的建立，如下所示： JColorChooser jcc = new JColorChooser(); • 程式碼建立JColorChooser物件後，使用showDialog()方法顯示色彩選擇對話方塊，如下所示： Color newColor = jcc.showDialog(Ch11_4_2.this, "選擇背景色彩", c.getBackground()); if (newColor != null) c.setBackground(newColor);

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

11-5 多重視窗介面JInternalFrame-JDesktopPane和JLayeredPane類別 • JInternalFrame物件是新增在JDesktopPane物件（在使用上如同JFrame的ContentPane），所以需要先建立JDesktopPane物件，如下所示： JDesktopPane jdesktop = new JDesktopPane(); • 上述程式碼建立JDesktopPane物件後，JInternalFrame物件就是新增到此容器物件，因為JDesktopPane是JLayeredPane的子類別，所以能夠建立多個重疊的內層視窗。

11-5 多重視窗介面JInternalFrame- JInternalFrame類別(說明) JInternalFrame類別 • 在JInternalFrame類別部分，筆者準備直接繼承JInternalFrame建立InternalFrame類別。

11-5 多重視窗介面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); } }

第 11 章 Swing 的圖形介面元件