以GUI为例了解物件以及Event.ppt

《以GUI为例了解物件以及Event.ppt》由会员分享，可在线阅读，更多相关《以GUI为例了解物件以及Event.ppt（115页珍藏版）》请在三一文库上搜索。

1、以GUI為例了解物件以及Event,Lecturer：曾學文,如何儘速學會現代程式語言,語言基礎 概念+語法 語法可能不太熟, 但概念務必正確 熟悉常用的Class Library中的class及相關API(Functions) 基礎類別:數學運算, I/O, 例外處理, 安全管理, 多緒執行等相關類別 圖形使用者介面(Graphical User Interface, GUI): 按鈕, 文字區塊等類別. 資料庫存取: 支援透過一致的介面存取不同型態的DBMS的相關類別. 網路連結: 無線的連結建立, 資料傳送, 分散式運算, 加密等類別. 學習態度 學生:初步了解各部份用法為主, 軟體工程

2、師:以需求為導向.,程式設計的方法,純手工打造vs.使用API C/C+: 純手工打造: 僅使用cin/cout, print()/scanf() API and class C: string.h, math.h, ctype.h, stdib.h, Turbo C/C+中所提供的繪圖, 數學運算函數 C+: STL中的container, iterator與algorithm Visual C+/Borland C+所提供的GUI, 繒圖, 多序執 行,等API. Java: 善用class及API,Class,如何了解一個class與相關的API class = data member

3、+member functions 無法自己寫(或不熟), 至少試著看懂現成的類別規格, e.g., class Applet, Graphics 多練習, 以能run為原則,JAVA使用者介面簡介,AWT(abstract window Toolkit): Java環境中, 專供程式設計GUI之用的類別集合統稱之(package java.awt.*) e.g., class Button, TxetField (可import java.awt.Button, java.awt.TextField,) AWT元件 基本控制元件:Button, CheckBox, Choice, List,

4、 Menu, TextField 什麼是元件(Component): 是指awt類別所生成的物件,JAVA使用者介面簡介,其他取得輸入的元件:Slider, ScollBar與TextArea 建立自己的元件: Canvas, 有圖案的按鈕 標籤(Lable) 元件的容器:可以利用add() Method 將元件(如Button)加入類別(物件)稱之 Window, Diglog, FileDiglog, Frame Panel, Applet 其他AWT類別 Java.awt.* Dimension, Insert, Point, Rectangle, Polygon:指定表示大小與形狀的類

5、別 Java.awt.event.*,AWT元件階層圖,GUI程式剖析,手寫版 public class Frame1 public static void main(String args) Frame frame = new Frame(“First Window Program“); frame.setLayout(new GridLayout(7, 1); frame.add(new Label(“喜好選擇(可複選)：“); / Label元件 frame.add(new Checkbox(“音樂“); / Checkbox元件 frame.add(new Checkbox(“體育“)

6、; frame.add(new Checkbox(“美術“); Choice c1 = new Choice(); / Choice元件 c1.add(“Green“); c1.add(“Red“); c1.add(“Blue“); frame.add(c1); List ls1 = new List(3, false); / List元件 ls1.add(“一年級“); ls1.add(“二年級“); ls1.add(“三年級“); frame.add(ls1); frame.add(new Button(“測試按鈕“); / Button元件 frame.pack(); /調整視窗大小以容

7、納所有元件 frame.setVisible(true); /顯示視窗 System.out.println(“結束視窗程式，請按下CTRL+C“); ,事件的處理過程,public class Frame1 extends Frame implements ActionListener TextField tf = new TextField(); Button b = new Button(“Hi“); public static void main(String args) Frame1 mf = new Frame1(); mf.setBounds(10,10,150,100); mf

8、.setVisible(true); public Frame1() this.setLayout(null); tf.setBounds(30,30,80,30); b.setBounds(new Rectangle(30,80,50,30); b.addActionListener(this); add(tf); add(b); public void actionPerformed(ActionEvent e) tf.setText(“Hello“); ,更清楚顯示事件的處理過程,public class Frame1 public static void main(String arg

9、s) MyFrame mf = new MyFrame(); EventSourceFrame esf = new EventSourceFrame(); mf.setBounds(10,10,150,100); esf.setBounds(180,10,100,100); esf.registerEventListener(mf); mf.setVisible(true); esf.setVisible(true); class MyFrame extends Frame implements ActionListener TextField tf = new TextField(); pu

10、blic MyFrame() this.setLayout(null); tf.setBounds(30,30,80,30); add(tf); public void actionPerformed(ActionEvent e) tf.setText(“Hello“); ,class EventSourceFrame extends Frame Button b = new Button(“Hi“); public void registerEventListener(ActionListener AL) b.addActionListener(AL); public EventSource

11、Frame() this.setLayout(null); b.setBounds(new Rectangle(30,30,50,30); this.add(b); ,使用JBuilder視覺化設計工具,public class Frame1 extends JFrame Button button1 = new Button(); TextField textField1 = new TextField(); public Frame1() try jbInit(); catch(Exception e) e.printStackTrace(); public static void mai

12、n(String args) Frame1 frame1 = new Frame1(); frame1.setSize(200,100); frame1.setVisible(true); ,private void jbInit() throws Exception button1.setLabel(“button1“); button1.addActionListener(new java.awt.event.ActionListener() public void actionPerformed(ActionEvent e) button1_actionPerformed(e); );

13、textField1.setText(“textField1“); this.getContentPane().add(button1, BorderLayout.NORTH); this.getContentPane().add(textField1, BorderLayout.CENTER); void button1_actionPerformed(ActionEvent e) textField1.setText(“Hi“); ,討論,用那一種好? 視覺化程式設計的迷失 (程式產生器, program generator),Event (事件),當我們在寫程式時，多半會需要與使用者互動

14、或回應其指令 Java 的awt 則採用event-drivenprogramming 的方法來達成此目的，當某個特定的事件發生，就會驅動程式去執行某些特定的動作，而可與使用者產生即時的互動 三個要素 Event 意指某個特定的事件、動作，也就是發生了什麼事件。例如：視窗關閉、滑鼠移動。 Event Source 產生、觸發事件的元件。例如：Button Event Handler 負責接收Event object 並作處理的Method EventSource，產生了某個Event object ，而由Event Listener負責處理這個Event,Events 以物件來表示,所有的訊息

15、都包含在java.awt.event類別庫內,所有的事件都是 EventObject的子類別,以GUI為例了解物件以及Event,以MyGUI了解Event (MyGUI.class、MyGUI.form) public MyGUI() /MyGUI.java buttonPlus.addActionListener(new ActionListener() public void actionPerformed(ActionEvent e) int varA = Integer.parseInt(textA.getText(); int varB = Integer.parseInt(tex

16、tB.getText(); Integer varC = new Integer(varA+varB); textC.setText(varC.toString(); ); ,委派事件模型,2.按下按鈕產生一個 Event物件傳給actionListner,按鈕 buttonPlus,actionListener,1. 事先有註冊,actionPerformed,3. 根據物件的種類 指派給事件處理者,系統實際運作狀況,當事件發生時，會有一個事件ID產生 GUI元件使用這個ID碼，呼叫對應的事件方法 假如收到有ActionEvent這種物件規格 從全部已註冊的ActionListeners中，

17、選出欲呼叫的actionPerformed() 方法,另一個版本,class MyListener implements ActionListener /介面 public void actionPerformed(ActionEvent e) /實現這個介面一定要 /實作actionPerformed int varA = Integer.parseInt(textA.getText(); int varB = Integer.parseInt(textB.getText(); Integer varC = new Integer(varA+varB); textC.setText(varC

18、.toString(); public MyGUI2() / MyGUI2.java MyListener listener = new MyListener(); / buttonPlus.addActionListener(listener); ,Event的註冊,Event 產生時，只會通知有註冊過的Listener。所以對必須要先把Event註冊給要負責處理的Listner 註冊所有想要擷取的事件，而當使用者啟動的事件並不是我們所想要的事件時，就不加以理會 程式上以XX.addXXListener 來完成註冊 button.addActionListener(new ActionLis

19、tener() 一個event source 可以被好幾個listener 所註冊，同樣地，一個listener 也可以註冊好幾個event source 所有的Event Listener 都是一種interface，裡面只有定義這個Listener所提供的抽象method 必須去實作出此listener interface 內所有的method,事件物件說明,ActionListener,都是EventListener的子類別,處理的方法,Button,CheckBox,Component,Your Turn,實作出MyCalc小算盤 (MyCalc.class、MyCalc.form)

20、Form已經建好了 完成計算機功能 代表 00 S取平方根 % 例如 50*10% 5,如何撰寫滑鼠移動監聽器(MouseMotionListener),需求:想攔截滑鼠事件(MouseEvent)-實作MouseListener public class Myclass implements MouseListener someObject.addMouseListener(this); public void mouseClicked(MouseEvent e) public void mouseEnetered(MouseEvent e) public void mouseExited(

21、MouseEvent e) public void mousePressed(MouseEvent e) public void mouseReleased(MouseEvent e) ,使用轉接類別(Adapter Class)來簡化監聽者的負擔,public void MouseAdapter implements MouseListener public void mouseClicked(MouseEvent e) public void mouseEnetered(MouseEvent e) public void mouseExited(MouseEvent e) public v

22、oid mousePressed(MouseEvent e) public void mouseReleased(MouseEvent e) public class MyClass extends MouseAdapter public void mouseClicked(MouseEvent e) 缺點?,如何撰寫按鍵監聽器(KeyListener),implements KeyListener public interface KeyListener public void keyPressed(KeyEvent e) public void keyReleased(KeyEvent e

23、) public void keyTyped(KeyEvent e) 使用class KeyAdapter,Example,public class Frame1 extends Frame Button button1 = new Button(); public Frame1() try jbInit(); catch(Exception e) e.printStackTrace(); public static void main(String args) Frame1 f1 = new Frame1(); f1.setBounds(10,10,400,200); f1.setVisib

24、le(true); private void jbInit() throws Exception button1.setLabel(“Hello“); button1.setBounds(new Rectangle(109, 86, 144, 48); button1.addMouseListener(new java.awt.event.MouseAdapter() public void mouseClicked(MouseEvent e) button1_mouseClicked(e); public void mousePressed(MouseEvent e) button1_mou

25、sePressed(e); );,button1.addKeyListener(new java.awt.event.KeyAdapter() public void keyPress(KeyEvent e) button1_keyPressed(e); ); this.setLayout(null); this.addKeyListener(new java.awt.event.KeyAdapter() public void keyReleased(KeyEvent e) this_keyReleased(e); public void keyTyped(KeyEvent e) this_

26、keyTyped(e); ); this.add(button1, null); ,Example,public void button1_keyPressed(KeyEvent e) Point p = button1.getLocation(); if(e.getKeyChar()=(char)i) button1.setLocation(int)(p.getX()+50),(int)(p.getY(); else if(e.getKeyChar()=(char)j) button1.setLocation(int)(p.getX()-50),(int)(p.getY(); void th

27、is_keyReleased(KeyEvent e) Point p = button1.getLocation(); if(e.getKeyChar()=(char)i) button1.setLocation(int)(p.getX()+50),(int)(p.getY(); else if(e.getKeyChar()=(char)j) button1.setLocation(int)(p.getX()-50),(int)(p.getY(); ,void button1_mouseClicked(MouseEvent e) Point p = button1.getLocation();

28、 button1.setLocation(int)(p.getX()+50),(int)(p.getY(); void button1_mousePressed(MouseEvent e) Point p = button1.getLocation(); button1.setLocation(int)(p.getX(),(int)(p.getY()+50); void this_keyTyped(KeyEvent e) Point p = button1.getLocation(); button1.setLocation(int)(p.getX(),(int)(p.getY()+50);

29、,Swing元件,Swing不是某些字的縮寫 Why Swing? java.awt.*的缺點: 不夠用: 如表格 事件處理模式與使用的作業平台相關性太高 (heavy weight components), 需要lightweight components來修正awt的缺點 Swing package javax.swing.*; class JButton, JTextField, JeditorPane, JSlider, class JFrame, JApplet, class JList, JComboBox, JTable, JTree, Javax.swing.event:,Ex

30、ample,public class Frame1 extends JFrame JButton jButton1 = new JButton(); JTextPane jTextPane1 = new JTextPane(); public Frame1() try jbInit(); catch(Exception e) e.printStackTrace(); public static void main(String args) Frame1 frame1 = new Frame1(); frame1.setSize(200,200); frame1.setVisible(true)

31、; ,private void jbInit() throws Exception jButton1.setText(“jButton1“); jButton1.addActionListener(new java.awt.event.ActionListener() public void actionPerformed(ActionEvent e) jButton1_actionPerformed(e); ); jTextPane1.setText(“jTextPane1“); this.getContentPane().setBackground(Color.red); this.get

32、ContentPane().add(jButton1, BorderLayout.NORTH); this.getContentPane().add(jTextPane1, BorderLayout.CENTER); void jButton1_actionPerformed(ActionEvent e) jTextPane1.setText(jTextPane1.getText()+“Hello“); ,討論,swing慢慢的取代awt, 直接學swing? swing是架在awt上面發展的, 所以awt不會消失, 只是少用而已. 儘量不要把swing和awt元件隨便混用, 尤其是當利用視覺

33、化設計工具時.,提示,GUI元件的使用，必須靠類別庫中的類別以產生可以實際應用的物件。在以下的文章中，凡是提到GUI元件時，我們不嚴格區分類別、元件與物件三個名詞，並將此三個名詞交替著使用。 AWT類別庫裏的類別因為與原來平台的GUI介面息息相關，因此我們將之稱為重量級(heavy-weighted)；Swing類別因為不倚賴原來平台的GUI介面，因此我們將之稱為輕量級(light-weighted)。,使用AWT元件,AWT元件都是class component的子類別 注意大小寫 使用元件的一般規則 除了Windows類別會自動顯示在螢幕上之外,其他屬於class component的物件

34、都必須先加入container物件之中 Frame與Diglog物件屬於最上職的元件容器, 視為不能加到container物件之中的元件,AWT共同父類別介紹,Class component 基本繒圖:paint(), update(), repaint() 某元件呼叫repaint()-AWT(系統)回應:呼叫paint(), update() 只有Applet, Canvas, Panel需要呼叫repaint() 字型與顏色控制 setForground(), setBackground(), 可見度控制 setVisible(boolean b); 開啟或關閉元件 setEnable(

35、boolean); 事件處理 外觀控制,AWT共同父類別介紹,Class container add(Component component) class MyFrame extends Frame implements ActionListener TextField tf = new TextField(); public MyFrame() this.setLayout(null); tf.setBounds(30,30,80,30); add(tf); ,按鈕(Button)元件 (1/8),按鈕元件的使用必須透過java.awt類別庫中的Button類別，Button類別的建構函數與

36、其他方法的用法如下：,按鈕(Button)元件(2/8),以下範例程式說明按鈕元件的應用： 範例程式(檔名:按鈕測試1 .java) /檔名：按鈕測試1.java /說明：在小程式顯示視窗中加入一個按鈕(Button)元件 import java.applet.Applet; /引入Applet類別 import java.awt.Button; /引入Button類別 public class 按鈕測試1 extends Applet public void init() Button 按鈕=new Button(“歡迎來到Java世界“); add(按鈕); /* 以上二行可以使用下列一個

37、敘述即可以達到同樣效果 add(new Button(“歡迎來到Java世界“); */ /方法:init() 定義區塊結束 /類別:按鈕測試1 定義區塊結束,按鈕(Button)元件(3/8),網頁檔案(檔名：按鈕測試1網頁.html) 執行結果(命令視窗指令：appletviewer 按鈕測試1網頁.html),按鈕(Button)元件(4/8),在範例程式按鈕測試1.java中，我們撰寫了一個小程式(applet)，並使用init()方法，在小程式顯示視窗中安排一個按鈕(Button)，而且此按鈕上有“歡迎來到Java世界“的標記。我們可將滑鼠游標移到此按鈕上並按下滑鼠左鍵，這會有一個按

38、鈕被按下的感覺，但按鈕被按下後卻沒有什麼特別的狀況發生，這是因為尚未將按鈕被按下的事件(event)加以指定處理程序之故。Java的事件處理我們將留到下一章中介紹。 在第7行我們使用new運算子產生一個Button類別的物件 按鈕，在第8行使用add(按鈕) 將此物件加入小程式顯示視窗中。add是Applet類別中的一個方法，用以將元件物件加入小程式顯示視窗中。,按鈕(Button)元件(5/8),Applet類別的add方法用法摘要如下：,按鈕(Button)元件(6/8),範例程式(檔名: 按鈕測試2.java) /檔名：按鈕測試2.java /說明：在小程式顯示視窗中加入八個按鈕(But

39、ton)元件 import java.applet.Applet; /引入Applet類別 import java.awt.Button; /引入Button類別 public class 按鈕測試2 extends Applet public void init() add( new Button(“按鈕1“) ); add( new Button(“按鈕2“) );,按鈕(Button)元件(7/8),add( new Button(“按鈕3“) ); add( new Button(“按鈕4“) ); add( new Button(“按鈕5“) ); add( new Button(“

40、按鈕6“) ); add( new Button(“按鈕7“) ); add( new Button(“按鈕8“) ); /方法:init() 定義區塊結束 /類別:按鈕測試2 定義區塊結束 網頁檔案(檔名：按鈕測試2網頁.html) 執行結果(命令視窗指令：appletviewer 按鈕測試2網頁.html),按鈕(Button)元件(8/8),在範例程式按鈕測試2.java中，我們使用8個add方法加入8個按鈕元件於小程式顯示視窗中，這8個按鈕元件的標記分別為“按鈕1“、“按鈕2“、“按鈕8“。讀者可以移動一下小程式的顯示視窗，你可以發現這些按鈕元件會依顯示視窗的大小自動調整按鈕的擺置。,

41、版面配置 (1/16),元件於顯示視窗中的不同位置配置稱為版面配置(layout)，Java語言支援許多不同的版面配置方式，以下我們即介紹一些常用的版面配置方式。 Applet類別的setLayout方法可以指定版面配置方式，setLayout方法的參數，必需是屬於版面配置管理類別的物件，Java語言提供許多版面配置管理的類別，以下我們介紹其中三種： FlowLayout(順序型)、Borderlayout(邊界型)及GridLayout(方格型)。,版面配置 (2/16),順序型FlowLayout版面配置是預設的版面配置方式，就如同範例程式按鈕測試2.java中，當我們並未指定版面配置方式

42、時，則自動採用此種配置。FlowLayout由左而右，由上而下一顯示視窗可以容納的方式配置所有的元件。 類別FlowLayout屬java.awt類別庫，其建構方法有以下三種 FlowLayout() FlowLayout(int 對齋方式) FlowLayout(int 對齊方式, int 水平間距, int 垂直間距),版面配置 (3/16),第一種建構方法是建立一個預設的版面配置，它會將元件置中，而且每個元件之水平與垂直方向保留5個像素(pixel)的間隔，第二種方式可以指定元件的對齊方式，對齊方式的值已在FlowLayout類別中定義，有以下三種： FlowLayout.LEFT (表

43、示向左對齊) FlowLayout.CENTER (表示向中對齊) FlowLayout.RIGHT (表示向右對齊),版面配置 (4/16),例如，若我們在程式按鈕測試2.java中第7行之前加入 setLayout(new FlowLayout(FlowLayout.RIGHT); 則所有的按鈕元件都會向右靠齊，其結果如下圖所示：,版面配置 (5/16),第三種的FlowLayout類別的建構方法除了可以指定元件的對齊方式外，也可以指定元件之間水平與垂直的間距，間距以像素為計算單位。 例如，若我們在程式按鈕測試2.java中第7行之前加入 setLayout(new FlowLayout(

44、FlowLayout.LEFT, 10, 20); 除了可以指定所有的按鈕元件向左靠齊外，也可以指定元件間水平間距是10像素，垂直間距是30像素，其結果如下圖所示：,版面配置 (6/16),版面配置 (7/16),類別GridLayout則可以將元件以二維格狀的方式排列，GridLayout的建構方法如下： GridLayout() GridLayout(int 列數, int 欄數) GridLayout(int 列數, int 欄數, int 水平間距, int 垂直間距) 第一個建構方法是建立單一列的方格配置，而欄數則為任意，第二個建構方法則會建立列數欄數的方格配置，注意，若元件元素超過

45、(或不足)列數欄數則方格配置會符合列數的要求，而欄位數則會自行調整而不依照欄數所指定之值。另外，列數及欄數之值皆可設為0(但非同時)，此二參數設為0時表示列數或欄數可隨元件之多寡自動調整。,版面配置 (8/16),例如，在按鈕測試3.java中的第10行，我們使用敘述 setLayout(new GridLayout(4,2); 來將所有的按鈕以4列2欄的格狀來安排版面配置。 範例程式(檔名: 按鈕測試3.java) /檔名：按鈕測試3.java /說明：在小程式顯示視窗中以4列2欄的格狀加入八個按鈕(Button)元件 import java.applet.Applet; /引入Applet

46、類別 import java.awt.Button; /引入Button類別 import java.awt.GridLayout; /引入GridLayout類別,版面配置 (9/16),public class 按鈕測試3 extends Applet public void init() setLayout(new GridLayout(4,2) ); add( new Button(“按鈕1“) ); add( new Button(“按鈕2“) ); add( new Button(“按鈕3“) ); add( new Button(“按鈕4“) ); add( new Button

47、(“按鈕5“) ); add( new Button(“按鈕6“) ); add( new Button(“按鈕7“) ); add( new Button(“按鈕8“) ); /方法:init() 定義區塊結束 /類別:按鈕測試3定義區塊結束,版面配置 (10/16),網頁檔案(檔名：按鈕測試3網頁.html) 執行結果(命令視窗指令：appletviewer 按鈕測試3網頁.html),版面配置 (11/16),GridLayout類別的第三個建構方法則可以指定元件間之水平間距與垂直間距，例如 setLayout(new GridLayout(4,2,10,5); 可以指定4列2欄的元件配

48、置，而且元件間水平間隔10像素而其垂直間隔5像素。 類別BorderLayout則可以指定元件在版面的四週邊界及中央的版面配置，顯示視窗的四週的邊界分別稱為North、South、East及West，而中央則稱為Center，BorderLayout具有以下二個建構方法： BorderLayout() BorderLayout(int 水平間距, int 垂直間距),版面配置 (12/16),第一個建構方法可以建立預設的邊界版面配置，而第二個建構方法可以指定元件間之水平間距及垂直間距。在使用Borderlayout時，我們配合使用二個參數的add方法來將元素加入小程式顯示視窗中，其用法為 add(方向字串, 元件); 其中方向字串可能之值為“North“、“South“、“East“、“West“及“Center“(請注意大小寫)。我們使用