第十四周java實驗作業
實驗十四 Swing圖形介面元件
實驗時間 20178-11-29
1、實驗目的與要求
(1) 掌握GUI佈局管理器用法；
在java中的GUI應用 程式介面設計中，佈局控制通過為容器設定佈局管理器來實現的。
佈局管理器是一組類，實現java.awt.LayoutManger介面
決定容器中元件的位置和大小
Java.awt包中定義了五種佈局管理器，每一種佈局管理類對應一種佈局策略。
每個容器都有與之相關的預設佈局管理器。
(2) 掌握各類Java Swing元件用途及常用API；
5種佈局管理器
FLowLayout：流佈局（Panel的預設佈局管理器）
BorderLayout：邊框佈局（Window、Frame和Dialog的預設佈局管理器）
GirdLayout：網格佈局
GirdBagLayout：網格組佈局
CardLayer：卡片佈局
流佈局管理器(FlowLayout)
用於對元件逐行進行定位，每完成一行，新的一行便又開始。與其他佈局管理器不同的是，流佈局管理器不限制他所管的組建的大小，允許他們有自己的最佳大小。
建構函式有
FlowLayout()：生成一個預設的流式佈局物件
FlowLayout(int align):設定每一行元件的對齊方式
（FlowLayout.LEFT,FlowLayout.CENTER,FlowLayout.RIGHT）
FlowLayout(int align,int hgap,int vgap)可以設定元件間的水平和垂直距離（預設時元件之間沒有空隙）
邊框佈局管理器(BorderLayout)
是JFrame的內容窗格的預設佈局管理器，
可以選擇將空間放在內容窗格的東、南、西、北、中。 且將元件加入其中時，元件會充滿其對應的整個區域，如果在這個方位再加入一個元件，會覆蓋原本存在的元件。當頂層視窗縮放時，東南西北的元件不會隨之變化，中部的元件會等比例變化。
向容器中加入元件時，若使用兩個引數得add()方法，第二個引數必須說明加入元件的放置位置。
frame.add(new JButton("Yes"),BorderLayout.SOUTH);
網格佈局管理器(Grid Layout );
網格佈局器按行列排列所有的元件
佈局類似於表格，每個單元大小一致，當頂層視窗縮放時元件大小也隨之變化，但是尺寸比例保持一致。
在網格佈局物件的構造器中，需要指定行數和列數
panel.setLayout(new GridLayout(6,10));
frame.SetLayout(new GridLayout(4,4));//形成4x4的網格
放置元件的每個單元具有相同的尺寸。
新增元件，從第一行和第一列開始，然後是第一行的第二列，以此類推。
frame.add(new JButton("1"));
frame.add(new JButton("2"));
GridLayout()生成一個單行單列的網格佈局
GridLayout(int rows,int cols) 生成一個設定行數和列數的網格佈局，引數之一可以為0，但是不能同時為0
GridLayout(int rows,int cols,int hgap,int vgap) 可以設定元件之間的水平和垂直間距，hgap表示單元之間的水平間距，vgap表示單元之間的垂直間距
（3）文字輸入
文字域：用於獲取單行文字輸入
文字域的使用方法：
Jpanel panel = new JPanel();
JTextField = new JTextField("Default input",20);
panel.add(textField);
第一個引數"Default input"：將文字域的預設顯示值為Default input
第二個引數為20：表示文字域顯示寬度為20列。
若要重新設定列數，可使用setColumns方法
用於文字輸入的元件擴充套件於JTextComponent的JTextField和JTextArea
JTextField和JTextArea都用於文字輸入，其中JTextField接收單行文字的輸入，而JTextArea可接收多行文字的輸入。
列數為文字域的寬度，如果希望文字域最多能輸入N個字元，則將寬度設定為N
JTextField text = new JTextField("Input Here",20);
第二個建構函式可以指定文字區顯示的行數和列數。如果需要設定滾動條，則需要將文字區加入JScrollPane中，再講JScrollPane插入容器。
JTextArea area = new TextArea(4,10);
JScrollPane pane = new JScrollPane(area);
panel.add(pane);
.擴充套件於JTextField的JPasswordField
接受單行輸入，輸入字元被特殊字元掩蓋
JLabel
沒有任何修飾，不能響應使用者輸入，只是容納文字的元件。可以設定標籤的顯示文字、圖示以及對其方式
其中對其方式是SwingConstants裡的常量，如LEFT/RIGHT/CENTER等
JLabel label = new JLabel("User Name:",SwingConstants.RIGHT);
（4）選擇元件
.JCheckBox
複選框自動帶有標籤和圖示，在構造時可以提供，當用戶選中複選框時會觸發動作事件。
JCheckBox box = new JCheckBox("Bold");
box.setSelected(true);
單選鈕(JRadioButton)
自帶標籤和圖示。單選鈕只能多選其一，要打到這種效果需要把所有的單選鈕加入ButtonGroup的物件裡，從而使得新按鈕被按下時，取消前一個選中的按鈕的狀態。ButtonGroup直接擴充套件於Object類，所以單選鈕需加入容器中進行佈局，ButtonGroup和容器(如JPanel)是相互獨立的。
選中時觸發動作事件。
邊框(Border)
任何繼承自JComponent的元件都可以使用邊框(void setBorder(Border b))。常用的方法是將元件放入容器中，然後容器使用邊框。是通過呼叫BorderFactory的靜態方法構建邊框。
同時可以為邊框設定標題：
Border etch = BorderFactory.createEtchedBorder();
Border title = BorderFactory.createTitleBorder(etch,"Title");
panel.setBorder(title);
組合框
JComboBox< T>是泛型類，構建時需注意。
組合框不僅有下拉選擇的功能，還具有文字框編輯的功能。
獲得當前選中內容：
combo.getItemAt(combo.getSelectedIndex());
//Object getItemAt(int index)
當用戶從組合框中選中一個選項時，組合框就會產生一個動作事件。
滑動條(JSlider)
滑動條在構造時預設是橫向，如果需要縱向滑動條：
JSlider s = new JSlider(SwingConstants.VERTICAL,min,max,initialValue);
當滑動條滑動時，會觸發ChangeEvent，需要呼叫addChangeListener()並且安裝一個實現了ChangeListener介面的物件。這個介面只有一個StateChanged方法
//得到滑動條的當前值
ChangeListener listen = event ->{
JSlider s = (JSlider)event.getSource();
int val = s.getValue();
...
};
如果需要顯示滑動條的刻度，則setPaintTicks(true);
如果要將滑動條強制對準刻度，則setSnapToTicks(true);
如果要為滑動條設定標籤，則需要先構建一個Hashtable< Integer,Component>，將數字與標籤對應起來，再呼叫setLabelTable(Dictionary label);
（5）複雜的佈局管理
5-1.GridBagLayout（網格組佈局）
即沒有限制的網格佈局，行和列的尺寸可以改變，且單元格可以合併
過程：
1）建議一個GridBagLayout物件，不需要指定行列數
2）將容器setLayout為GBL物件
3）為每個元件建立GridBagConstraints物件，即約束元件的大小以及排放方式
4）通過add(component,constraints)增加元件
使用幫助類來管理約束會方便很多。
不使用佈局管理器
frame.setLayout(null);
JButton btn = new JButton("Yes");
frame.add(btn);
btn.setBounds(10,10,100,30);
//void setBounds(int x,int y,int width,int height)//x,y表示左上角的座標，width/height表示元件寬和高，Component類的方法
5-3.元件的遍歷順序（焦點的順序）：從左至右從上到下
component.setFocusable(false);//元件不設定焦點
（6）選單
分為JMenuBar/JMenu/JMenuItem，當選擇選單項時會觸發一個動作事件，需要註冊監聽器監聽
（7）.對話方塊
對話方塊分為模式對話方塊和無模對話方塊，模式對話方塊就是未處理此對話方塊之前不允許與其他視窗互動。
7-1.JOptionPane
提供了四個用靜態方法(showxxxx)顯示的對話方塊：
構造對話方塊的步驟：
1）選擇對話方塊型別（訊息、確認、選擇、輸入）
2）選擇訊息型別（String/Icon/Component/Object[]/任何其他物件）
3）選擇圖示（ERROR_MESSAGE/INFORMATION_MESSAGE/WARNING_MESSAGE/QUESTION_MESSAGE/PLAIN_MESSAGE）
4）對於確認對話方塊，選擇按鈕型別（DEFAULT_OPTION/YES_NO_OPTION/YES_NO_CANCEL_OPTION/OK_CANCEL_OPTION）
5）對於選項對話方塊，選擇選項（String/Icon/Component）
6）對於輸入對話方塊，選擇文字框或組合框
確認對話方塊和選擇對話方塊呼叫後會返回按鈕值或被選的選項的索引值
JDialog類
可以自己建立對話方塊，需呼叫超類JDialog類的構造器
public aboutD extends JDialog
{
public aboutD(JFrame owner)
{
super(owner,"About Text",true);
....
}
}
構造JDialog類後需要setVisible才能時視窗可見
if(dialog == null)
dialog = new JDialog();
dialog.setVisible(true);
7-3.檔案對話方塊(JFileChooser類)
7-4.顏色對話方塊(JColorChooser類）
2、實驗內容和步驟
實驗1： 匯入第12章示例程式，測試程式並進行組內討論。
實驗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());//建立邊框佈局管理器 //setLayout()設定使用者介面上的螢幕元件的格式佈局，是Java圖形使用者介面的常用方法，預設為流式佈局 result = 0; lastCommand = "="; start = true; // add the display display = new JButton("0"); display.setEnabled(false); //setEnabled()：引數為true標識可以響應事件（即允許使用者輸入），true標識不能響應事件（即不允許使用者輸入）， add(display, BorderLayout.NORTH); ActionListener insert = new InsertAction(); ActionListener command = new CommandAction(); // add the buttons in a 4 x 4 grid panel = new JPanel();//建立子容器元件 panel.setLayout(new GridLayout(4, 4));//建立4行4列網格佈局管理器 addButton("0", insert);//數字按鈕註冊了insert監聽器物件 addButton("1", insert); addButton("2", insert); addButton("3", command);//運算按鈕註冊了command監聽器物件 addButton("4", insert); addButton("5", insert); addButton("6", insert); addButton("*", command); addButton("7", insert); addButton("8", insert); addButton("9", insert); addButton("+", command); addButton("-", insert); addButton(".", insert); addButton("/", command); addButton("=", command); add(panel, BorderLayout.CENTER); JButton b1 = new JButton("驗證"); add(b1, BorderLayout.SOUTH); JButton b2 = new JButton("驗證2"); add(b2, BorderLayout.WEST); JButton b3 = new JButton("驗證3"); add(b3, BorderLayout.EAST); } /** * 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();//將獲得的變數儲存到input臨時變數裡面 if (start) { display.setText("");//清零 //setText()輸出String型別的字串變數 start = false; } display.setText(display.getText() + input); //完成多個數字的輸入操作 } } /** * This action executes the command that the button action string denotes. */ private class CommandAction implements ActionListener//實現ActionListener介面 { public void actionPerformed(ActionEvent event) { String command = event.getActionCommand();//把發出動作的按鈕的資訊儲存到command裡面 if (start) { if (command.equals("-")) { display.setText(command);//顯示負號 start = false; } else lastCommand = command; } else { calculate(Double.parseDouble(display.getText()));//私有方法 //parseDouble()從display.getText()得到字串，轉化成基本型別(Double)的資料 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); } }
測試程式2
l 在elipse IDE中除錯執行教材486頁程式12-2，結合執行結果理解程式；
l 掌握各種文字元件的用法；
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式3
l 在elipse IDE中除錯執行教材489頁程式12-3，結合執行結果理解程式；
l 掌握複選框元件的用法；
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
package checkBox; import java.awt.*; import java.awt.event.*; import javax.swing.*; /** * A frame with a sample text label and check boxes for selecting font * attributes. */ public class CheckBoxFrame extends JFrame { private JLabel label; private JCheckBox bold; private JCheckBox italic; private static final int FONTSIZE = 24; public CheckBoxFrame()//構造器 { // add the sample text label 新增示例文字標籤 label = new JLabel("The quick brown fox jumps over the lazy dog."); label.setFont(new Font("Serif", Font.BOLD, FONTSIZE)); add(label, BorderLayout.CENTER); // this listener sets the font attribute of 此監聽器設定字型屬性 // the label to the check box state 設定複選框狀態的標籤 ActionListener listener = event -> { int mode = 0; if (bold.isSelected()) mode += Font.BOLD; //isSelected() 判斷某個元素是否被選中 if (italic.isSelected()) mode += Font.ITALIC; label.setFont(new Font("Serif", mode, FONTSIZE));//設定元件的字型 }; // add the check boxes 新增複選框 JPanel buttonPanel = new JPanel();//建立一個容器類物件 bold = new JCheckBox("Bold"); bold.addActionListener(listener); bold.setSelected(true); buttonPanel.add(bold);// italic = new JCheckBox("Italic"); italic.addActionListener(listener);//和41行使用了同一個動作監聽器 buttonPanel.add(italic); add(buttonPanel, BorderLayout.SOUTH); pack(); } }
package checkBox; import java.awt.*; import javax.swing.*; /** * @version 1.34 2015-06-12 * @author Cay Horstmann */ public class CheckBoxTest { public static void main(String[] args) { EventQueue.invokeLater(() -> { JFrame frame = new CheckBoxFrame();//實現一個JFrame的類物件 frame.setTitle("CheckBoxTest");//設定框架標題 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//設定預設的關閉操作 frame.setVisible(true);//設定檢視可見 }); } }
測試程式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 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式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-2212-23，結合程式執行結果理解程式；
l 掌握檔案對話方塊的用法;
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
測試程式16
l 在elipse IDE中除錯執行教材570頁程式12-24，結合執行結果理解程式；
l 瞭解顏色選擇器的用法。
l 記錄示例程式碼閱讀理解中存在的問題與疑惑。
實驗2：組內討論反思本組負責程式，理解程式總體結構，梳理程式GUI設計中應用的相關元件，整理相關元件的API,對程式中元件應用的相關程式碼添加註釋。
實驗3：組間協同學習：在本班課程QQ群內，各位同學對實驗1中存在的問題進行提問，提問時註明實驗1中的測試程式編號，負責對應程式的小組需及時對群內提問進行回答。
總結：本週主要學習了有關Swing使用者介面元件，內容有點多，大致看了一點。通過小組的商討，瞭解了這些程式的大致的思路，但是還是要繼續學習。