Ch02 視窗Swing套件 物件導向系統實務.

Presentation on theme: "Ch02 視窗Swing套件 物件導向系統實務."— Presentation transcript:

1 Ch02 視窗Swing套件 物件導向系統實務

2 大綱 Swing套件的基礎 Swing的最上層容器類別
2018/11/6 2018/11/6 2

3 認識圖形化使用者介面 Microsoft Word的一個擷取畫面，可以看到其組成包括選單（Menu）、文字列（TextField）及按鈕（Button）等元件。 2018/11/6 2018/11/6 3

4 認識圖形化使用者介面 舊的圖形介面工具AWT（Abstract Window Toolkit） 新的圖形介面工具Swing
Java Foundation Classes包括的部份： 舊的圖形介面工具AWT（Abstract Window Toolkit） 新的圖形介面工具Swing 整合工具Accessibility API 高品質繪圖功能的2D API 拖曳功能（drag and drop）的API 2018/11/6 2018/11/6 4

5 AWT(1/3) AWT使用大家都有的功能 2018/11/6 2018/11/6 5

6 AWT(2/3) AWT元件在不同作業系統的外觀不同 2018/11/6 6

7 AWT(3/3) AWT的缺點： AWT直接和視窗作業系統溝通，所以元件初始化之後，其執行的速度會比Swing快一些。 幾乎無法延伸子類別
在不同系統上外觀相異 消耗較多的系統資源 AWT直接和視窗作業系統溝通，所以元件初始化之後，其執行的速度會比Swing快一些。 2018/11/6 7

8 Swing Swing少用對等元件，除了Frame外，Swing的元件都是用畫的，所以不受平台影響 Swing的優點：
可以利用擴充子類別改進元件的功能 固定的外觀 耗用較低的系統資源 Swing和一般的Java工具一樣擁用跨平台的優點，然而也有著相同的缺點，就是較慢一點點。 2018/11/6 8

9 Swing套件的基礎 Swing套件屬於Java平台「JFC」（Java Foundation Classes）的一部分，JFC可以建立GUI介面的Java應用程式，使用的是JFC的Swing套件提供的各種元件。 例如：按鈕、核取方塊、選項鈕和文字方塊等。 2018/11/6 2018/11/6 9

10 Swing套件是什麼 大部分的Swing元件都是繼承自JComponent，其元件名稱都是以”J”字母開頭，如下圖所示： 2018/11/6
10

11 建立GUI的步驟 建立元件：元件的建立通常在application的建構子或main()方法內完成
將元件加入容器：所有元件必須被加入容器中，而容器又可以加入另一個容器，頂層的容器是Frame ，元件才可被顯示出來 配置容器內元件的位置：讓元件固定在特定位置，或利用版面管理員來管理元件在容器內的位置，讓GUI的顯示更有彈性 處理由元件所產生的事件：處理事件是讓元件有功能，亦即在按下按鈕後，有方法來作一些動作 2018/11/6 11

12 建立視窗 ??當關閉視窗時，程式還未結束 import javax.swing.*; import java.awt.*;
class Ch21_01 { public static void main(String [] args) JFrame w = new JFrame("我的第一個視窗"); w.setSize(300, 250); w.setVisible(true); } ??當關閉視窗時，程式還未結束 2018/11/6

13 建立視窗 import javax.swing.*; import java.awt.*; class Ch21_01_01 {
public static void main(String [] args) JFrame w = new JFrame("我的第一個視窗"); w.setSize(300, 250); w.setVisible(true); w.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE); } 2018/11/6

14 Swing應用程式架構 Swing應用程式的架構像是在一個大盒子中放入多個小盒子，首先將Swing套件的各種GUI元件JButton和JLabel新增到中間層容器元件。例如：JPanel，然後將JPanel新增到最上層容器類別JFrame，JFrame是一種擁有標題列的視窗元件，如下圖所示： 2018/11/6 2018/11/6 14

15 Swing的最上層容器類別-類別架構 在Java的Swing應用程式需要使用一個最上層容器類別作為容器類別架構的根類別，Swing的GUI元件需要新增至「容器」（Container）類別架構，才能讓GUI元件在螢幕上顯示，如下圖所示： 2018/11/6 2018/11/6 15

16 Swing的最上層容器類別-說明 Swing應用程式至少需要擁有一個JFrame容器類別架構，也就是一個擁有標題列的主視窗。
應用程式對話方塊可以建立以JDialog為最上層類別的容器類別架構。例如：Java應用程式擁有1個主視窗和2個對話方塊，也就是建立1個以JFrame和2個以JDialog為根類別的容器類別架構。 在Java Applet也可以使用Swing元件，這是建立以JApplet為根類別的容器類別架構，如此即可在Java Applet顯示Swing的GUI元件。 2018/11/6 2018/11/6 16

17 JFrame最上層容器類別-類別架構 JFrame類別的物件是一個擁有框線、標題列和圖示按鈕的Windows視窗，這個視窗擁有隱藏的功能表列（MenuBar）和ContentPane元件，JFrame類別的繼承架構，如下圖所示： 2018/11/6 2018/11/6 17

18 JFrame最上層容器類別-建構子 JFrame類別的建構子，如下表所示： 2018/11/6 2018/11/6 18

19 JFrame最上層容器類別- ContentPane相關方法
2018/11/6 2018/11/6 19

20 JFrame最上層容器類別- Component相關方法
2018/11/6 2018/11/6 20

21 範例１：第一個視窗 import javax.swing.*; import java.awt.*;
import java.awt.event.*; public class Ch06_01 extends JFrame { public Ch06_01() super("Ch06_01第一個視窗程式"); } public static void main(String [] args) Ch06_01 app = new Ch06_01(); app.addWindowListener(new WindowAdapter() public void windowClosing(WindowEvent evt) System.exit(0); } ) ; app.setSize(300, 150); app.setVisible(true); import javax.swing.*; import java.awt.*; import java.awt.event.*; public class Ch06_01_01 extends JFrame { public Ch06_01_01() super("Ch06_01_01第一個視窗程式,使用JFrame方法指定關閉視窗的處理"); } public static void main(String [] args) Ch06_01_01 app = new Ch06_01_01(); app.setDefaultCloseOperation(DISPOSE_ON_CLOSE); app.setSize(300, 150); app.setVisible(true); 2018/11/6

22 範例１（續）：加上ContentPane import javax.swing.*; import java.awt.*;
import java.awt.event.*; public class Ch06_01_02 extends JFrame { public Ch06_01_02() super("Ch06_01_02第一個視窗程式加上ContentPane物件"); Container c = getContentPane(); c.setBackground(Color.blue); } public static void main(String [] args) Ch06_01_02 app = new Ch06_01_02(); app.addWindowListener(new WindowAdapter() public void windowClosing(WindowEvent evt) System.exit(0); } ) ; app.setSize(300, 150); app.setVisible(true); 2018/11/6

23 setDefaultCloseOperation()方法
參數值有4種： DO_NOTHING_ON_CLOSE：不作任何處理 HIDE_ON_CLOSE：自動隱藏JFrame視窗，預設 DISPOSE_ON_CLOSE：隱藏JFrame視窗且釋放視窗佔用的資源 EXIT_ON_CLOSE：使用System exit()結束應用程式 2018/11/6

24 JApplet最上層容器類別-類別架構 在Java Applet使用Swing元件需要使用JApplet作為根類別來建立容器類別架構，同樣的JApplet也擁有一個ContentPane物件，所以可以在此ContentPane物件新增所需的Swing元件，其繼承架構如下圖所示： 2018/11/6 2018/11/6 24

25 JApplet最上層容器類別-步驟 將Swing應用程式改成JApplet類別的Java Applet十分簡單，其步驟如下所示：
刪除建構子中呼叫super()方法的程式碼。 將建構子名稱改為init()或start()。 刪除Swing應用程式的主程式main()。 JFrame類別本身如果是傾聽者物件，請刪除實作介面，然後在新增傾聽者物件方法使用new運算子新增傾聽者物件。 2018/11/6 2018/11/6 25

26 JDialog最上層容器類別-說明 「對話方塊」（Dialog）是一種很重要的視窗介面，在視窗應用程式的執行過程中，一定會出現一些對話方塊，如果對話方塊會擱置使用者輸入資料至其它視窗，這種對話方塊稱為「程式的對話方塊」（Modal Dialog）。 2018/11/6 2018/11/6 26

27 JDialog最上層容器類別-類別架構 在Swing套件可以使用JOptionPane類別建立程式的對話方塊，否則需要直接使用JDialog類別來建立，其繼承架構如下圖所示： 2018/11/6 2018/11/6 27

28 JDialog最上層容器類別-建構子 JDialog類別的建構子，如下表所示： 2018/11/6 2018/11/6 28

29 JDialog最上層容器類別- showMessageDialog()方法
JOptionPane.showMessageDialog(jpane, "這是一個測試的訊息視窗!"); 2018/11/6 2018/11/6 29

30 範例２(1/4) 2018/11/6 import javax.swing.*; import java.awt.*;
import java.awt.event.*; public class Ch06_02 extends JFrame { //建構子 public Ch06_02() { super("顯示三種對話方塊範例"); //宣告JButton 物件 final JButton button1, button2, button3; Container c = getContentPane(); //建立JPanel物件 final JPanel jpane = new JPanel(); final JLabel label = new JLabel("測試對話方塊"); jpane.add(label); button1 = new JButton("showMessageDialog按鈕"); //新增滑鼠事件處理 button1.addActionListener(new ActionListener() public void actionPerformed(ActionEvent e) label.setText("按下showMessageDialog按鈕"); JOptionPane.showMessageDialog(jpane, "這是一個測試的訊息視窗!"); } } ); jpane.add(button1); 2018/11/6

31 JDialog最上層容器類別- showConfirmDialog()方法
int n = JOptionPane.showConfirmDialog(jpane, "您是否已經按下showMessageDialog按鈕? ", "操作問題", JOptionPane.YES_NO_OPTION); 2018/11/6 2018/11/6 31

32 範例２(2/4) button2 = new JButton("showConfirmDialog按鈕"); //新增滑鼠事件處理
button2.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) int n = JOptionPane.showConfirmDialog(jpane, "您是否已經按下showMessageDialog按鈕?", "操作問題", JOptionPane.YES_NO_OPTION); if (n==JOptionPane.YES_OPTION) label.setText("按下是"); else if(n==JOptionPane.NO_OPTION) label.setText("按下否"); label.setText("沒有選擇"); } } ); jpane.add(button2); 2018/11/6

33 JDialog最上層容器類別- showOptionDialog()方法(說明)
Object[] options = {"showMessageDialog按鈕", "showConfirmDialog按鈕"}; int m = JOptionPane.showOptionDialog(jpane, "哪一個按鈕顯示警告訊息?", "操作問題", JOptionPane.YES_NO_OPTION, JOptionPane.QUESTION_MESSAGE, null, options, options[0]); 2018/11/6 2018/11/6 33

34 範例２(3/4) 2018/11/6 button3 = new JButton("showOptionDialog按鈕");
button3.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) Object[] options = {"showMessageDialog按鈕", "showConfirmDialog按鈕"}; int m = JOptionPane.showOptionDialog(jpane, "哪一個按鈕顯示警告訊息?", "操作問題", JOptionPane.YES_NO_OPTION, JOptionPane.QUESTION_MESSAGE, null, options, options[0]); switch (m) case JOptionPane.YES_OPTION: label.setText("選showMessageDialog按鈕"); break; case JOptionPane.NO_OPTION: label.setText("選showConfirmDialog按鈕"); default: label.setText("沒有選擇"); } } ); jpane.add(button3); c.add(jpane); 2018/11/6

35 範例２(4/4主程式) public static void main(String [] args) {
Ch06_02 app = new Ch06_02(); app.addWindowListener(new WindowAdapter() public void windowClosing(WindowEvent e) { System.exit(0); } } ); app.setSize(300,150); app.setVisible(true); } 2018/11/6

36 Component的延伸類別 AWT元件類別皆位於java.awt套件中，所有元件為Ｃomponent的子類別 2018/11/6 36

37 Component的延伸類別 容器以外的元件，都必須放在容器才能作用，而最外層的容器必須是Window或Frame類別
Panel和Applet也是容器，不過不能做最外層的容器 Panel要放在另一個容器內 Applet必須以瀏覽器為最外層的容器 2018/11/6 37