以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.使用APIC/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與相關的APIclass=data member+member functions無法自己寫(或不熟),至少試著看懂現成的類別規格,e

3、.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,Menu,TextField什麼是元件(Component):是指awt類別所生成的物件,JAVA使用者介面簡介,其他取得輸

4、入的元件:Slider,ScollBar與TextArea建立自己的元件:Canvas,有圖案的按鈕標籤(Lable)元件的容器:可以利用add()Method 將元件(如Button)加入類別(物件)稱之Window,Diglog,FileDiglog,FramePanel,Applet其他AWT類別Java.awt.*Dimension,Insert,Point,Rectangle,Polygon:指定表示大小與形狀的類別Java.awt.event.*,AWT元件階層圖,GUI程式剖析,手寫版 public class Frame1 public static void main(Str

5、ing 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(體育);frame.add(new Checkbox(美術);Choice c1=new Choice();/Choice元件 c1.add(Green);c1.add(Red);c1.add(Blue);frame

6、.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();/調整視窗大小以容納所有元件 frame.setVisible(true);/顯示視窗 System.out.println(結束視窗程式，請按下CTRL+C);,事件的處理過程,public class Frame1 extends Frame implements ActionListener Te

7、xtField 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.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);

8、public void actionPerformed(ActionEvent e)tf.setText(Hello);,更清楚顯示事件的處理過程,public class Frame1 public static void main(String args)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

9、(true);esf.setVisible(true);class MyFrame extends Frame implements ActionListener TextField tf=new TextField();public 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(

10、Hi);public void registerEventListener(ActionListener AL)b.addActionListener(AL);public EventSourceFrame()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();publ

11、ic Frame1()try jbInit();catch(Exception e)e.printStackTrace();public static void main(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()p

12、ublic void actionPerformed(ActionEvent e)button1_actionPerformed(e););textField1.setText(textField1);this.getContentPane().add(button1,BorderLayout.NORTH);this.getContentPane().add(textField1,BorderLayout.CENTER);void button1_actionPerformed(ActionEvent e)textField1.setText(Hi);,討論,用那一種好?視覺化程式設計的迷失(

13、程式產生器,program generator),Event(事件),當我們在寫程式時，多半會需要與使用者互動或回應其指令Java 的awt 則採用event-drivenprogramming 的方法來達成此目的，當某個特定的事件發生，就會驅動程式去執行某些特定的動作，而可與使用者產生即時的互動三個要素Event 意指某個特定的事件、動作，也就是發生了什麼事件。例如：視窗關閉、滑鼠移動。Event Source 產生、觸發事件的元件。例如：ButtonEvent Handler 負責接收Event object 並作處理的MethodEventSource，產生了某個Event object

14、，而由Event Listener負責處理這個Event,Events 以物件來表示,所有的訊息都包含在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.ge

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

16、從全部已註冊的ActionListeners中，選出欲呼叫的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.se

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

18、ener()一個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)Form已經

19、建好了完成計算機功能代表 00S取平方根%例如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(MouseEvent e)pub

20、lic 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 void mousePressed(Mouse

21、Event 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)public void keyTyped(KeyE

22、vent 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.setVisible(true);private void jbInit()throws Exc

23、eption 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_mousePressed(e););,button1.addKeyListener(new java.awt.e

24、vent.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_keyTyped(e););this.add(button1,null);,Example,public void butto

25、n1_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 this_keyReleased(KeyEvent e)Point p=button1.getLocation();if(e.getKeyChar()=(

26、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();button1.setLocation(int)(p.getX()+50),(int)(p.getY();void button1_mousePressed(MouseEv

27、ent 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);,Swing元件,Swing不是某些字的縮寫Why Swing?java.awt.*的缺點:不夠用:如表格事件處理模式與使用的作業平台相關性太高(heavy weight components),

28、需要lightweight components來修正awt的缺點Swing packagejavax.swing.*;class JButton,JTextField,JeditorPane,JSlider,class JFrame,JApplet,class JList,JComboBox,JTable,JTree,Javax.swing.event:,Example,public class Frame1 extends JFrame JButton jButton1=new JButton();JTextPane jTextPane1=new JTextPane();public Fr

29、ame1()try jbInit();catch(Exception e)e.printStackTrace();public static void main(String args)Frame1 frame1=new Frame1();frame1.setSize(200,200);frame1.setVisible(true);,private void jbInit()throws Exception jButton1.setText(jButton1);jButton1.addActionListener(new java.awt.event.ActionListener()publ

30、ic void actionPerformed(ActionEvent e)jButton1_actionPerformed(e););jTextPane1.setText(jTextPane1);this.getContentPane().setBackground(Color.red);this.getContentPane().add(jButton1,BorderLayout.NORTH);this.getContentPane().add(jTextPane1,BorderLayout.CENTER);void jButton1_actionPerformed(ActionEvent

31、 e)jTextPane1.setText(jTextPane1.getText()+Hello);,討論,swing慢慢的取代awt,直接學swing?swing是架在awt上面發展的,所以awt不會消失,只是少用而已.儘量不要把swing和awt元件隨便混用,尤其是當利用視覺化設計工具時.,提示,GUI元件的使用，必須靠類別庫中的類別以產生可以實際應用的物件。在以下的文章中，凡是提到GUI元件時，我們不嚴格區分類別、元件與物件三個名詞，並將此三個名詞交替著使用。AWT類別庫裏的類別因為與原來平台的GUI介面息息相關，因此我們將之稱為重量級(heavy-weighted)；Swing類別因為

32、不倚賴原來平台的GUI介面，因此我們將之稱為輕量級(light-weighted)。,使用AWT元件,AWT元件都是class component的子類別注意大小寫使用元件的一般規則除了Windows類別會自動顯示在螢幕上之外,其他屬於class component的物件都必須先加入container物件之中Frame與Diglog物件屬於最上職的元件容器,視為不能加到container物件之中的元件,AWT共同父類別介紹,Class component基本繒圖:paint(),update(),repaint()某元件呼叫repaint()-AWT(系統)回應:呼叫paint(),updat

33、e()只有Applet,Canvas,Panel需要呼叫repaint()字型與顏色控制setForground(),setBackground(),可見度控制setVisible(boolean b);開啟或關閉元件setEnable(boolean);事件處理外觀控制,AWT共同父類別介紹,Class containeradd(Component component)class MyFrame extends Frame implements ActionListener TextField tf=new TextField();public MyFrame()this.setLayout

34、(null);tf.setBounds(30,30,80,30);add(tf);,按鈕(Button)元件(1/8),按鈕元件的使用必須透過java.awt類別庫中的Button類別，Button類別的建構函數與其他方法的用法如下：,按鈕(Button)元件(2/8),以下範例程式說明按鈕元件的應用：範例程式(檔名:按鈕測試1.java)/檔名：按鈕測試1.java/說明：在小程式顯示視窗中加入一個按鈕(Button)元件import java.applet.Applet;/引入Applet類別import java.awt.Button;/引入Button類別public class 按鈕

35、測試1 extends Applet public void init()Button 按鈕=new Button(歡迎來到Java世界);add(按鈕);/*以上二行可以使用下列一個敘述即可以達到同樣效果 add(new Button(歡迎來到Java世界);*/方法:init()定義區塊結束/類別:按鈕測試1 定義區塊結束,按鈕(Button)元件(3/8),網頁檔案(檔名：按鈕測試1網頁.html)執行結果(命令視窗指令：appletviewer 按鈕測試1網頁.html),按鈕(Button)元件(4/8),在範例程式按鈕測試1.java中，我們撰寫了一個小程式(applet)，並使用

36、init()方法，在小程式顯示視窗中安排一個按鈕(Button)，而且此按鈕上有歡迎來到Java世界的標記。我們可將滑鼠游標移到此按鈕上並按下滑鼠左鍵，這會有一個按鈕被按下的感覺，但按鈕被按下後卻沒有什麼特別的狀況發生，這是因為尚未將按鈕被按下的事件(event)加以指定處理程序之故。Java的事件處理我們將留到下一章中介紹。在第7行我們使用new運算子產生一個Button類別的物件 按鈕，在第8行使用add(按鈕)將此物件加入小程式顯示視窗中。add是Applet類別中的一個方法，用以將元件物件加入小程式顯示視窗中。,按鈕(Button)元件(5/8),Applet類別的add方法用法摘要如

37、下：,按鈕(Button)元件(6/8),範例程式(檔名:按鈕測試2.java)/檔名：按鈕測試2.java/說明：在小程式顯示視窗中加入八個按鈕(Button)元件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(

38、按鈕4);add(new Button(按鈕5);add(new Button(按鈕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。讀者可以移動一下小程式的顯示視窗，你可以發現這些按鈕元件會依顯示視窗

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

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

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

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

43、，而欄位數則會自行調整而不依照欄數所指定之值。另外，列數及欄數之值皆可設為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類別import java.awt.Button;/引入But

44、ton類別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(按鈕5);add(new Button(按鈕6);add(new Button(按鈕7);add(new Button(按鈕8)

45、;/方法:init()定義區塊結束/類別:按鈕測試3定義區塊結束,版面配置(10/16),網頁檔案(檔名：按鈕測試3網頁.html)執行結果(命令視窗指令：appletviewer 按鈕測試3網頁.html),版面配置(11/16),GridLayout類別的第三個建構方法則可以指定元件間之水平間距與垂直間距，例如setLayout(new GridLayout(4,2,10,5);可以指定4列2欄的元件配置，而且元件間水平間隔10像素而其垂直間隔5像素。類別BorderLayout則可以指定元件在版面的四週邊界及中央的版面配置，顯示視窗的四週的邊界分別稱為North、South、East及W

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

47、範例程式(檔名:按鈕測試4.java)/檔名：按鈕測試4.java/說明：在小程式顯示視窗中以邊界配置方式加入五個按鈕(Button)元件import java.applet.Applet;/引入Applet類別import java.awt.Button;/引入Button類別import java.awt.BorderLayout;/引入BorderLayout類別public class 按鈕測試4 extends Applet public void init()setLayout(new BorderLayout();add(East,new Button(東按鈕);add(Sout

48、h,new Button(南按鈕);,版面配置(14/16),add(West,new Button(西按鈕);add(North,new Button(北按鈕);add(Center,new Button(中按鈕);/方法:init()定義區塊結束/類別:按鈕測試4定義區塊結束網頁檔案(檔名：按鈕測試4網頁.html)執行結果(命令視窗指令：appletviewer 按鈕測試4網頁.html),版面配置(15/16),在範例程式按鈕測試4.java中，我們在第8行以setLayout(new BorderLayout();敘述指定版面配置為邊界模式，而在第9行，以 add(East,new

49、Button(東按鈕);將一個標記為東按鈕的按鈕元件加入版面的東方(East)，同樣的，第10至第13行則使用相同的方式，使用add()方法將其他的4個按鈕分別加入版面的南方、西方、北方及中央。另外，若將第8行改為 setLayout(new BorderLayout(5,15);則可在各元件間指出5像素的水平間距及15像素的垂直間距，其執行情形如下所示：,版面配置(16/16),標記(Label)元件(1/5),標記(Label)元件主要用來顯示單行的文字訊息，一般將之用來顯示說明文字。Label類別的建構方法及常用的方法摘要說明如下：標記元件的使用必須透過java.awt類別庫中的Labe

50、l類別，Label類別的建構函數與其他方法的用法如下：,標記(Label)元件(2/5),標記(Label)元件(3/5),以下是類別Label所屬方法的綜合應用程式：範例程式(檔名:標記測試.java)/檔名:標記測試.java/說明:各種標記方法之綜合應用import java.applet.Applet;/引入Applet類別import java.awt.Label;/引入Label類別import java.awt.GridLayout;/引入GridLayout類別public class 標記測試 extends Applet public void init()Label 標記