實驗十四 第九組 張燕~楊蓉慶~楊玲 Swing圖形介面元件
實驗十四 Swing圖形介面元件
實驗時間 20178-11-29
理論知識
Swing和MVC設計模式
（1）設計模式（Design pattern）是設計者一種流行的 思考設計問題的方法，是一套被反覆使用，多數人 知曉的，經過分類編目的，程式碼設計經驗的總結。
（2）模型-檢視-控制器設計模式(Model –ViewController )是Java EE平臺下建立 Web 應用程式 的重要設計模式。
（3）MVC設計模式 – Model（模型）：是程式中用於處理程式資料邏 輯的部分，通常模型負責在資料庫中存取資料。
– View（檢視）：是程式中處理資料顯示的部分， 通常檢視依據模型存取的資料建立。
– Controller（控制器）：是程式中處理使用者互動 的部分。通常控制器負責從檢視讀取資料，控制 使用者輸入，並向模型傳送資料。
（4）Java元件有內容、外觀、行為三個主要元素；
佈局管理器
（1）佈局管理器是一組類。 – 實現 java.awt.LayoutManager 介面 – 決定容器中元件的位置和大小
Java.awt包中定義了5種佈局管理類，每一種布 局管理類對應一種佈局策略。
每個容器都有與之相關的預設佈局管理器。
（2）5種佈局管理器：（1）FlowLayout: 流佈局(Applet和Panel的預設 佈局管理器） （2）BorderLayout:邊框佈局( Window、Frame和 Dialog的預設佈局管理器） （3）GridLayout: 網格佈局 （4）GridBagLayout: 網格組佈局 （5）CardLayout :卡片佈局
3、GridLayout的建構函式如下：1、GridLayout():生成一個單行單列的網格佈局
2、GridLayout(int rows,int cols):生成一個設定行數 和列數的網格佈局
3、GridLayout(int rows,int columns,int hgap,int vgap)： 可以設定元件之間的水平和垂直間隔
文字輸入
（1）文字域(JTextField) : 用於獲取單行文字輸入。
（2）文字區（JTextArea）元件可讓使用者輸入多行文 本。生成JTextArea元件物件時，可以指定文字 區的行數和列數： textArea = new JTextArea(8, 40);
(3)文字區與文字域的異同相同之處： 文字域和文字區元件都可用於獲取文字輸入。
不同之處： 文字域只能接受單行文字的輸入； 文字區能夠接受多行文字的輸入。
(4)文字區JTextArea的常用API：Java.swing. JTextArea 1.2 – JTextArea(int rows, int cols)
構造一個rows行cols列的文字區物件 – JTextArea(String text，int rows, int cols)
用初始文字構造一個文字區物件 – void setRows(int rows)
設定文字域使用的行數 – void append(String newText)
將給定文字附加到文字區中已有文字的後面 – void setLineWrap(boolean wrap)
開啟或關閉換行
（5）標籤元件：標籤是容納文字的元件。它們沒有任何修飾（如沒有邊界 ），也不響應使用者輸入。
標籤的常用用途之一就是標識元件，例如標識文字域。其使用步驟如下：
1. 建立一個JLabel元件
2. 將標籤元件放置在距離被標識元件足夠近的地方。
（6）密碼域：密碼域是一種特殊型別的文字域。每個輸入的字 符都用回顯字元實現,典型的回顯字元為*。
– JPassWordField(String text, int columns） 構造一個密碼域物件
（7）滾動窗格：
Swing中文字區沒有滾動條，若需要滾動條。將文 本區放入一個滾動窗格中即可。
常用API—Java.swing. JScrollPane(教材340頁) – JScrollPane(Component c) 在元件c上新增滾動條，返回新增後的元件。
選擇元件
複選框 單選按鈕 邊框 組合框 滑動條
（1）複選框構造器 1.bold = new JCheckBox("Bold"); 複選框自動地帶有表示標籤。
2. JCheckBox(String label,Icon icon); 構造帶有標籤與圖示的複選框，預設初始未被選擇。
3.JCheckBox(String label,boolean state); 用指定的標籤和初始化選擇狀態構造一個複選框
（2）單選按鈕的構造器（教材492頁） 1.JRadioButton(String label,Icon icon); 建立一個帶標籤和圖示的單選按鈕
2.JRadioButton(String label,boolean state); 用指定的標籤和初始化狀態構造單選按鈕
（3）按鈕組：為單選按鈕組構造一個ButtonGroup的物件。 然後，再將JRadioButton型別的物件新增到按鈕 組中。按鈕組負責在新按鈕被按下的時，取消前一 個按鈕的選擇狀態。
（4）如果在一個視窗中 有多組複選框或單選按 鈕，就需要視覺化的形 式指明哪些按鈕屬於同 一組。Swing提供了一 組很有用的邊框
（5）如果有多個選擇項，使用單選按鈕佔據的螢幕空 間太大時，就可以選擇組合框。
faceCombo = new JComboBox()； faceCombo.setEditable(true);
讓組合框可編輯 faceCombo.addItem("Serif"); faceCombo.insertItemAt("Monospace",0);
增加組合框選項 faceCombo.removeItem("Monospace");
faceCombo.removeItemAt(0); 刪除組合框選項內容
（6）組合框的事件監聽：為了判斷組合框的哪個選項被選擇，可通過 事件引數呼叫getSource方法來得到傳送事件的組 合框引用，接著呼叫getSelectdeItem方法獲取當 前選擇的選項。
（7）滑動條：滑動條可以讓使用者從一組離散值中進行選擇 ，並且它還允許進行連續值得選擇。
選單
選單建立 選單項中的圖示 複選框和單選按鈕選單項 彈出選單 快捷鍵和加速器 啟用和禁用選單項 工具欄 工具提示
網格組佈局 (GridBagLayout):GridBagLayout與GridLayout有點相似，它也是 將元件排在格子裡，但是GridBagLayout在網格 的基礎上提供更復雜的佈局。
GridBagLayout允許單個元件在一個單元中不填 滿整個單元，而只是佔用最佳大小，也允許單個 元件擴充套件成不止一個單元，並且可以用任意順序 加入元件。
定製佈局管理器: 程式設計師可通過自己設計LayoutManager類來實現 特殊的佈局方式。
定製佈局管理器需要實現LayoutManager介面， 並覆蓋以下方法。
對話方塊
選項對話方塊 建立對話方塊 資料選擇 檔案對話方塊 顏色選擇器
(1)對話方塊是一種大小不能變化、不能有選單的容器視窗； 對話方塊不能作為一個應用程式的主框架，而必須包含在其 他的容器中。
(2)選項對話方塊:JOptionPane提供的對話方塊是模式對話方塊。當模 式對話方塊顯示時，它不允許使用者輸入到程式的 其他的視窗。使用JOptionPane，可以建立和自 定義問題、資訊、警告和錯誤等幾種型別的對 話框。
(3)資料交換:輸入對話方塊含有供使用者輸入文字的文字框、一個確認和取 消按鈕,是有模式對話方塊。當輸入對話方塊可見時,要求使用者 輸入一個字串。
(4)檔案對話方塊:專門用於對檔案（或目錄）進行瀏覽和選擇的對 話框，常用的構造方法: – JFileChooser()：根據使用者的預設目錄建立檔案對話方塊 – JFileChooser(File currentDirectory)：根據File型引數 currentDirectory指定的目錄建立檔案對話方塊
(5)顏色對話方塊: javax.swing包中的JColorChooser類的靜態方 法: public static Color showDialog(Component component, String title, Color initialColor)建立一個顏色對話方塊
(6)引數component指定對話方塊所依賴的元件，title 指定對話方塊的標題；initialColor 指定對話方塊返回 的初始顏色，即對話方塊消失後，返回的預設值。 顏色對話方塊可根據使用者在顏色對話方塊中選擇的顏 色返回一個顏色物件.
1、實驗目的與要求
(1) 掌握GUI佈局管理器用法；
(2) 掌握各類Java Swing元件用途及常用API；
2、實驗內容和步驟
實驗1： 匯入第12章示例程式，測試程式並進行組內討論。
測試程式1
l 在elipse IDE中執行教材479頁程式12-1，結合執行結果理解程式；
l 掌握各種佈局管理器的用法；
l 理解GUI介面中事件處理技術的用途。
l 在佈局管理應用程式碼處添加註釋；
package calculator; import java.awt.*; import java.awt.event.*; import javax.swing.*; /** * A panel with calculator buttons and a result display. */ public class CalculatorPanel extends JPanel { //屬性 private JButton display; private JPanel panel; private double result; private String lastCommand; private boolean start; //構造器 public CalculatorPanel() { setLayout(new BorderLayout());//設定新的邊框佈局管理器 result = 0; lastCommand = "="; start = true; // 新增display display = new JButton("0");//用來顯示完成算式計算結果 display.setEnabled(false);//使得使能屬性不能起作用 add(display, BorderLayout.NORTH);//將display新增到北部區域 //生成監聽器物件 ActionListener insert = new InsertAction(); ActionListener command = new CommandAction(); // 在4 x 4網格中新增按鈕 panel = new JPanel();//新建窗格元件 panel.setLayout(new GridLayout(4, 4));//設定4行4列的網格佈局管理器 //生成16個事件源，數字註冊的事件源是insert物件，運算子註冊的事件源是command物件 addButton("7", insert); addButton("8", insert); addButton("9", insert); addButton("/", command); addButton("4", insert); addButton("5", insert); addButton("6", insert); addButton("*", command); addButton("1", insert); addButton("2", insert); addButton("3", insert); addButton("-", command); addButton("0", insert); addButton(".", insert); addButton("=", command); addButton("+", command); add(panel, BorderLayout.CENTER);//將panel新增到中部區域 } /** * Adds a button to the center panel. * @param label the button label * @param listener the button listener */ //方法 private void addButton(String label, ActionListener listener) { JButton button = new JButton(label);//生成按鈕物件 button.addActionListener(listener);//註冊監聽器物件 panel.add(button);//將其新增到窗格中 } /** * This action inserts the button action string to the end of the display text. */ //內部類 private class InsertAction implements ActionListener { public void actionPerformed(ActionEvent event) { String input = event.getActionCommand(); if (start)//開始計算 { display.setText(""); start = false; } display.setText(display.getText() + input);//完成多個數字的輸入操作 } } /** * This action executes the command that the button action string denotes. */ //內部類 private class CommandAction implements ActionListener { public void actionPerformed(ActionEvent event) { String command = event.getActionCommand(); if (start)//開始計算還沒有輸入數字 { if (command.equals("-")) { display.setText(command);//顯示符號 start = false; } else lastCommand = command; } else { calculate(Double.parseDouble(display.getText()));//將數字字串轉化為數字 lastCommand = command; start = true; } } } /** * Carries out the pending calculation. * @param x the value to be accumulated with the prior result. */ //計算方法 public void calculate(double x) { if (lastCommand.equals("+")) result += x; else if (lastCommand.equals("-")) result -= x; else if (lastCommand.equals("*")) result *= x; else if (lastCommand.equals("/")) result /= x; else if (lastCommand.equals("=")) result = x; display.setText("" + result);//將數字轉化為數字字串輸出 } }
package calculator; import java.awt.*; import javax.swing.*; /** * @version 1.34 2015-06-12 * @author Cay Horstmann */ public class Calculator { public static void main(String[] args) { EventQueue.invokeLater(() -> { CalculatorFrame frame = new CalculatorFrame(); frame.setTitle("Calculator");//設定標題 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//關閉 frame.setVisible(true);//設定可見 }); } }
package calculator; import javax.swing.*; /** * A frame with a calculator panel. */ public class CalculatorFrame extends JFrame { public CalculatorFrame() { add(new CalculatorPanel()); pack(); } }
測試程式2
l 在elipse IDE中除錯執行教材486頁程式12-2，結合執行結果理解程式；
l 掌握各種文字元件的用法；
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式3
l 在elipse IDE中除錯執行教材489頁程式12-3，結合執行結果理解程式；
l 掌握複選框元件的用法；
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式4
l 在elipse IDE中除錯執行教材491頁程式12-4，執行結果理解程式；
l 掌握單選按鈕元件的用法；
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式5
l 在elipse IDE中除錯執行教材494頁程式12-5，結合執行結果理解程式；
l 掌握邊框的用法；
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式6
l 在elipse IDE中除錯執行教材498頁程式12-6，結合執行結果理解程式；
l 掌握組合框元件的用法；
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式7
l 在elipse IDE中除錯執行教材501頁程式12-7，結合執行結果理解程式；
l 掌握滑動條元件的用法；
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式8
l 在elipse IDE中除錯執行教材512頁程式12-8，結合執行結果理解程式；
l 掌握選單的建立、選單事件監聽器、複選框和單選按鈕選單項、彈出選單以及快捷鍵和加速器的用法。
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式9
l 在elipse IDE中除錯執行教材517頁程式12-9，結合執行結果理解程式；
l 掌握工具欄和工具提示的用法；
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
package toolBar; import java.awt.*; import javax.swing.*; /** * @version 1.14 2015-06-12 * @author Cay Horstmann */ public class ToolBarTest { public static void main(String[] args) { EventQueue.invokeLater(() -> { ToolBarFrame frame = new ToolBarFrame(); frame.setTitle("ToolBarTest");//設定標題 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true);//設定可見 }); } }
package toolBar; import java.awt.*; import java.awt.event.*; import javax.swing.*; /** * A frame with a toolbar and menu for color changes. */ public class ToolBarFrame extends JFrame { private static final int DEFAULT_WIDTH = 300; private static final int DEFAULT_HEIGHT = 200; private JPanel panel; public ToolBarFrame() { setSize(DEFAULT_WIDTH, DEFAULT_HEIGHT); // 新增顏色更改面板 panel = new JPanel(); add(panel, BorderLayout.CENTER); // 設定動作 Action blueAction = new ColorAction("Blue", new ImageIcon("blue-ball.gif"), Color.BLUE); Action yellowAction = new ColorAction("Yellow", new ImageIcon("yellow-ball.gif"), Color.YELLOW); Action redAction = new ColorAction("Red", new ImageIcon("red-ball.gif"), Color.RED); Action exitAction = new AbstractAction("Exit", new ImageIcon("exit.gif")) { public void actionPerformed(ActionEvent event) { System.exit(0); } }; exitAction.putValue(Action.SHORT_DESCRIPTION, "Exit"); //填充工具欄 JToolBar bar = new JToolBar(); bar.add(blueAction); bar.add(yellowAction); bar.add(redAction); bar.addSeparator(); bar.add(exitAction); add(bar, BorderLayout.NORTH); // populate menu JMenu menu = new JMenu("Color"); menu.add(yellowAction); menu.add(blueAction); menu.add(redAction); menu.add(exitAction); JMenuBar menuBar = new JMenuBar(); menuBar.add(menu); setJMenuBar(menuBar); } /** * The color action sets the background of the frame to a given color. */ class ColorAction extends AbstractAction { public ColorAction(String name, Icon icon, Color c) { putValue(Action.NAME, name); putValue(Action.SMALL_ICON, icon); putValue(Action.SHORT_DESCRIPTION, name + " background"); putValue("Color", c); } public void actionPerformed(ActionEvent event) { Color c = (Color) getValue("Color"); panel.setBackground(c); } } }
測試程式10
l 在elipse IDE中除錯執行教材524頁程式12-10、12-11，結合執行結果理解程式，瞭解GridbagLayout的用法。
l 在elipse IDE中除錯執行教材533頁程式12-12，結合程式執行結果理解程式，瞭解GroupLayout的用法。
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式11
l 在elipse IDE中除錯執行教材539頁程式12-13、12-14，結合執行結果理解程式；
l 掌握定製佈局管理器的用法。
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式12
l 在elipse IDE中除錯執行教材544頁程式12-15、12-16，結合執行結果理解程式；
l 掌握選項對話方塊的用法。
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式13
l 在elipse IDE中除錯執行教材552頁程式12-17、12-18，結合執行結果理解程式；
l 掌握對話方塊的建立方法；
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式14
l 在elipse IDE中除錯執行教材556頁程式12-19、12-20，結合執行結果理解程式；
l 掌握對話方塊的資料交換用法;
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式15
l 在elipse IDE中除錯執行教材556頁程式12-21、12-22 12-23，結合程式執行結果理解程式；
l 掌握檔案對話方塊的用法;
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式16
l 在elipse IDE中除錯執行教材570頁程式12-24，結合執行結果理解程式；
l 瞭解顏色選擇器的用法。
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
實驗2：組內討論反思本組負責程式，理解程式總體結構，梳理程式GUI設計中應用的相關元件，整理相關元件的API,對程式中元件應用的相關程式碼添加註釋。
我們組這次所分析的是工具欄和工具提示的用法方面的知識，工具欄(Toolbar Test)是在程式中提供的快速訪問常用命令的按紐欄，它可以隨意的移動安放，可以用JToolBar bar=new JToolBar();來建立工具欄。但工具欄有缺點，為了便利使用者能快速明白小按鈕的含義，使用者介面設計者發明了工具提示toooltips,示例程式說明了如何將一個Action物件新增到選單和工具欄中。
實驗3：組間協同學習：在本班課程QQ群內，各位同學對實驗1中存在的問題進行提問，提問時註明實驗1中的測試程式編號，負責對應程式的小組需及時對群內提問進行回答。