CH04 視窗中元件排排坐 物件導向系統實務.

Presentation on theme: "CH04 視窗中元件排排坐 物件導向系統實務."— Presentation transcript:

1 CH04 視窗中元件排排坐 物件導向系統實務

2 複習內部類別—利用內部類別,重作6_4 2019/2/19 import javax.swing.*; import java.awt.*;
import java.awt.event.*; class Win7_0 { public static void main(String [] args) { MyJFrame7_0 f = new MyJFrame7_0(); f.setSize(200,300); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); f.setVisible(true); } class MyJFrame7_0 extends JFrame { JLabel label1; JButton button1; int n = 1; MyJFrame7_0() { super("Win7_0"); this.setLayout(new FlowLayout(FlowLayout.CENTER)); label1 = new JLabel("Hello JAVA World!!"); add(label1); button1 = new JButton("按我"); button1.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { n++; label1.setText("你按了 " + n + " 次按鈕"); } ); add(button1); 2019/2/19

3 2019/2/19 利用版面配置來安排元件位置

4 2019/2/19 版面配置1--FLOWLAYOUT

5 FLOWLAYOUT版面配置-說明 2019/2/19 FlowLayout水流式版面配置屬於一種簡易的版面配 置方式，JPanel預設使用這種版面配置。 FlowLayout版面配置依序在同一列放置元件，並沒 有任何特殊編排，如果元件超過邊界，就置於下一列。

6 FLOWLAYOUT版面配置-建構子 2019/2/19 FlowLayout類別的建構子，如下表所示：

7 範例1:打字機--FLOWLAYOUT 2019/2/19 //設定視窗的版面配置
setLayout(new FlowLayout(FlowLayout.CENTER)); //設定一個標籤 label = new JLabel(text); add(label); //設定7個按鈕 for(int i = 0; i < B.length; i++) { B[i] = new JButton(A[i]); } //為7個按鈕裝上耳朵,實作actionPerformed, 並連線 for(int i = 0; i <B.length; i++) { final int j = i; B[j].addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { text = text + B[j].getText(); label.setText(text); }); //將按鈕裝到視窗上 { add(B[i]); import java.awt.*; import java.awt.event.*; import javax.swing.*; class Win7_1 { public static void main(String [] args) { MyWin7_1 w = new MyWin7_1("打字機"); w.setSize(200, 300); w.setDefaultCloseOperation(JFrame.EXIT_ON_C LOSE); w.setVisible(true); } class MyWin7_1 extends JFrame { private JLabel label; //存放打字結果 private JButton [] B = new JButton[7]; private String text; MyWin7_1(String title) { super(title); text = ""; String [] A = {"A", "B", "C", "D", "E", "F", " "}; 2019/2/19

8 2019/2/19 版面配置2--GRIDLAYOUT

9 GRIDLAYOUT版面配置-說明 2019/2/19 GridLayout格子式版面配置是使用相等尺寸的長方形，以 表格方式分為幾列和幾欄來編排Swing元件，如下圖所示：

10 GRIDLAYOUT版面配置-建構子 2019/2/19 GridLayout類別的建構子，如下表所示：

11 GRIDLAYOUT版面配置-相關方法 2019/2/19 GridLayout類別的相關方法，如下表所示：

12 範例2:打字機--GRIDLAYOUT //設定一個標籤 label = new JLabel(text); add(label);
//設定7個按鈕 for(int i = 0; i < B.length; i++) { B[i] = new JButton(A[i]); } //為7個按鈕裝上耳朵,實作actionPerformed, 並連線 for(int i = 0; i <B.length; i++) { final int j = i; B[j].addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { text = text + B[j].getText(); label.setText(text); }); //將按鈕裝到視窗上 { add(B[i]); import java.awt.*; import java.awt.event.*; import javax.swing.*; class Win7_2 { public static void main(String [] args) { MyWin7_2 w = new MyWin7_2("打字機"); w.setSize(200, 300); w.setDefaultCloseOperation(JFrame.EXIT_ ON_CLOSE); w.setVisible(true); } class MyWin7_2 extends JFrame { private JLabel label; //存放打字結果 private JButton [] B = new JButton[7]; private String text; MyWin7_2(String title) { super(title); text = ""; String [] A = {"A", "B", "C", "D", "E", "F", " "}; //設定視窗的版面配置 setLayout(new GridLayout(2,4)); 2019/2/19

13 2019/2/19 版面配置3--BORDERLAYOUT

14 BORDERLAYOUT版面配置-說明1 BorderLayout邊界式版面配置是將元件放置在中間 （Center），然後在北（North）、南（South）、 東（East）和西（West）的4個邊界放置元件，如 下圖所示：

15 BORDERLAYOUT版面配置-說明2 容器類別如果使用BorderLayout版面配置（這是JFrame 的ContentPane預設的版面配置），在JComponent類別 的add()方法就需要第2個參數來指定版面配置方式，如下 所示： c.add(new JButton("北按鈕"), BorderLayout.NORTH); 上述程式碼的第2個參數是元件放置的位置。

16 BORDERLAYOUT版面配置-建構子與方法

17 範例3:打字機--BORDERLAYOUT
//設定一個標籤 label = new JLabel(text); add(label,BorderLayout.NORTH); //設定7個按鈕 for(int i = 0; i < B.length; i++) { B[i] = new JButton(A[i]); } //為7個按鈕裝上耳朵,實作actionPerformed, 並連線 for(int i = 0; i <B.length; i++) { final int j = i; B[j].addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) {text = text + B[j].getText(); label.setText(text); }); //將按鈕裝到視窗上 add(B[0], BorderLayout.WEST); add(B[1], BorderLayout.CENTER); add(B[2], BorderLayout.EAST); add(B[3], BorderLayout.SOUTH); import java.awt.*; import java.awt.event.*; import javax.swing.*; class Win7_3 { public static void main(String [] args) { MyWin7_3 w = new MyWin7_3("打字機"); w.setSize(200, 300); w.setDefaultCloseOperation(JFrame.EXIT_ON_ CLOSE); w.setVisible(true); } class MyWin7_3 extends JFrame { private JLabel label; //存放打字結果 private JButton [] B = new JButton[7]; private String text; MyWin7_3(String title) { super(title); text = ""; String [] A = {"A", "B", "C", "D", "E", "F", " "}; //設定視窗的版面配置 setLayout(new BorderLayout()); 2019/2/19

18 討論: 如果有很多的元件要放在視窗上，在版面配置上，是 不是只能亂亂放？或是中規中矩的擺呢？
2019/2/19 如果有很多的元件要放在視窗上，在版面配置上，是 不是只能亂亂放？或是中規中矩的擺呢？ 如果有些元件是彼此相關的，卻要跟其他元件一起擺 放，是不是看不出它們的整體性？

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

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

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

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

23 JFRAME最上層容器類別-建構子 JFrame類別的建構子，如下表所示： 2019/2/19 2019/2/19 23

24 JFRAME最上層容器類別- CONTENTPANE相關方法
2019/2/19 2019/2/19 24

25 JFRAME最上層容器類別- COMPONENT相關方法
2019/2/19

26 SWING的中間層容器類別 Swing套件的中間層容器類別的目的是將Swing元件 群組化，以便使用”版面配置管理員”來編排新增的 GUI元件，Swing套件提供相當多種中間層容器類別。 例如：JPanel、JScrollPane、JSplitPane、JTabbedPane和JInternalFrame等。

27 JPANEL類別-說明與建構子 JPanel類別屬於一般用途的中間層容器，預設為透 明、沒有背景色彩，這是一種看不見的中間層容器類 別，預設使用FlowLayout版面配置，其使用方式類 似ContentPane類別，JPanel類別的建構子，如下 表所示：

28 JPANEL類別-方法 JPanel關於版面配置的相關方法，如下表所示：

29 2019/2/19 //改成Content和JPanel import java.awt.*;
import java.awt.event.*; import javax.swing.*; class Win7_4 { public static void main(String [] args) { MyWin7_4 w = new MyWin7_4("打字機"); w.setSize(650, 300); w.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); w.setVisible(true); } class MyWin7_4 extends JFrame { private Container c; private JPanel labelArea; //存放label private JPanel specialCharArea; //存放特殊字元區 private JPanel alphaArea; //存放字母區 private JPanel numericArea; //存放數字區 private JPanel spaceArea; //存放空白鍵 private JLabel label; //存放打字結果 private JButton [] B = new JButton[49]; private String text; 2019/2/19

30 c.setLayout(new BorderLayout());
MyWin7_4(String title) { super(title); //定義初始值 text = ""; String [][] A = {{"!", "#", "$", "%", "^", "&", "*", "(", ")","~","+"}, {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"}, {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"}, {" "}}; c = getContentPane(); //設定視窗的版面配置 c.setLayout(new BorderLayout()); //設定一個標籤 label = new JLabel(text); 2019/2/19

31 for(int i = 0; i < A.length; i++)
2019/2/19 //設定49個按鈕 int k = 0; for(int i = 0; i < A.length; i++) { for(int j =0; j < A[i].length; j++) { B[k] = new JButton(A[i][j]); //為每個按鈕裝上耳朵,實作actionPerformed, 並連線 final int temp = k; B[k].addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { text = text + B[temp].getText(); label.setText(text); } }); k++;

32 labelArea = new JPanel(new FlowLayout()); labelArea.add(label);
//將特殊字元裝到specialCharArea //specialCharArea設定為GridLayout specialCharArea = new JPanel(new GridLayout(3,4)); //specialCharArea = new JPanel(); for(int i = 0; i < 12; i++) { specialCharArea.add(B[i]); } 2019/2/19

33 //alphaArea設定為FlowLayout ？？？？？？ //將數字字元裝到numericArea
//numericArea設定為GridLayout //將空白字元裝到spaceArea //spaceArea設定為FlowLayout //將JPanel全加到container上 c.add(labelArea, BorderLayout.NORTH); c.add(specialCharArea, BorderLayout.WEST); c.add(alphaArea, BorderLayout.CENTER); c.add(numericArea, BorderLayout.EAST); c.add(spaceArea, BorderLayout.SOUTH); } 2019/2/19