cs117 oop chapter 7 - dr. paween•cs117 oop •chapter 7 event-driven programming model by dr....
TRANSCRIPT
•CS117 OOP•Chapter 7
Event-Driven Programming Model
By Dr. Paween Khoenkaw
Computer Science MJU
1
Flow of the programProcedural programing model คอการโปรแกรมในลกษณะของการก าหนดการท างานเปนแบบ ทละขนตอน (step by step) เปนการท างานในระดบต า
START
GET LOGIN
CHECK LOGIN
Any New email?
PRINT EMAIL DATA
END
OKNOT OK
NO YES
2
Flow of the programEvent-Driven programing model คอการโปรแกรมในลกษณะของการก าหนดการท างานเปนแบบ ตองท าอะไรบางเม อเกดเหตการณ (Event)ตางๆขน เปนการท างานในระดบสง
ปอน login
Login ถกตอง
เปดอาน email
ตรวจสอบ email ?
ม : สงเนอหา emailสงเนอหา email
3
Flow of the programEvent-Driven programing model คอการโปรแกรมในลกษณะของการก าหนดการท างานเปนแบบ ตองท าอะไรบางเม อเกดเหตการณ (Event)ตางๆขน เปนการท างานในระดบสง
ปอน login
Login ถกตอง
เปดอาน email
ตรวจสอบ email ?
ม : สงเนอหา emailสงเนอหา email
วตถ (object)
เหตการณ ( Event)
Class
Method
4
Event-Driven modelEvent-Driven programing model จะประกอบดวย 2 สวนหลกๆคอ1 Event Raiser สรางเหตการณตางๆ หรอท าหนาท สง Event2 Event Listener เปน Method ท จะถกเรยกขนมาเม อเกดเหตการณตางๆ
Event Raiser
Event Listener
Raiser และ Listener เรยกรวมๆวา Event Handling จะตองใชคกนเสมอเชน Mouse Click Raiser จะใชคกบ Mouse Click Listenerใชผดตวไมไดเราจะใส code ท างานเม อมการ click mouse ดวยการ
Override ท Mouse Clock Listener
5
Event-Driven modelEvent-Driven programing model จะประกอบดวย 2 สวนหลกๆคอ1 Event Raiser สรางเหตการณตางๆ หรอท าหนาท สง Event2 Event Listener เปน Method ท จะถกเรยกขนมาเม อเกดเหตการณตางๆ
Raise
6
User Interface
Graphical User Interface (GUI )ใชภาพ Icon และ Mouse ในการปอน Inputสวนมากจะเปน Event-Driven programing model
Command-line Interfaces (CLI)ใชตวอกษร และ Keyboard ในการปอน InputสวนมากจะเปนProcedural programing model
7
Java build-in GUIJava มชดของคลาสส าหรบสราง GUI ตดมาให 2 กลมคอ
1 AWT (Abstract Windowing Toolkit) มมาตงแต JDK 1.0 เกา และลาสมย2 Swing มตงแต JDK 1.1 ใหมกวาและมเคร องมอใหใชงานมากกวา
Swing เปนสวนตอขยาย (สบทอด)มาจากคลาส AWT ท าใหการท างานในหลายสวนจะคลายกน
AWT
Swing8
Java build-in GUIAWT และ Swing จะมเคร องมอหลกใหใชอย 4 สวนคอ
1 Components เปนเคร องมอท ใชท างานเฉพาะทางตางๆ เชนปมกด (Button)2 Containers ใชส าหรบวาง Components3 Layout Manager ใชส าหรบเลอกรปแบบการจดวาง Components4 Event handling ใชส าหรบจดการเหตการณตางๆ เชนตรวจจบการ click
9
Java build-in GUIคลาส Swing มกจะขนตนดวยตวอกษร J เสมอ
10
Java build-in GUIสวนประกอบแตละชนของ GUI ท สรางดวย Swing
11
Java build-in GUIสวนประกอบแตละชนของ GUI ท สรางดวย Swing
JFrameLayout
Component
12
Java build-in GUIการดกจบ Event ตางๆใน Swing ตวอยางเชนการ Click ท Button
13
Java build-in GUIpublic class HelloSwing {
private JFrame frame;public static void main(String[] args) {EventQueue.invokeLater(new Runnable() {public void run() {try {HelloSwing window = new HelloSwing();window.frame.setVisible(true);} catch (Exception e) {e.printStackTrace();}}});}public HelloSwing() {
initialize();}
private void initialize() {frame = new JFrame();frame.getContentPane().addMouseListener(new MouseAdapter() {frame.setBounds(100, 100, 450, 300);frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);frame.getContentPane().setLayout(null);JButton btnNewButton = new JButton("Hello World");btnNewButton.addActionListener(new ActionListener() {public void actionPerformed(ActionEvent arg0) {}});btnNewButton.setBounds(129, 96, 157, 23);frame.getContentPane().add(btnNewButton);}}
14
Java build-in GUIEclipse มเคร องมอชวยในการสราง GUI ให ชวยใหเราไมตองเขยน code ในการวาง Containers, Layout และ Componentแตตองดาวนโหลดมาตดตงเพ มเอง จาก https://eclipse.org/windowbuilder/download.phpและเลอกดาวนโหลดใหตรงกบ version ของ Eclipse
15
Java build-in GUIเลอกตดตงใหครบทง Swing , SWT และ Windows Builder
16
17
ContainersLayout
Component
Swing Framework สามารถแยกเรยนไดเปนอก 1 วชา
Hello Swing
18
public class Hello_Swing {public static void main(String[] args) {
JFrame F=new JFrame();F.setBounds(1, 1, 400, 200);F.show(true);
}}
(1,1)
400px200px
Hello Swing
19
(1,1)
400px200px
JFrame
-Bounds-Title…..
+setBoubds(int x, int y, int w, int h)+setTitle(String title)+AddMouseListener(MouseListner I)…..
public class Hello_Swing {public static void main(String[] args) {
JFrame F=new JFrame();F.setBounds(1, 1, 400, 200);F.show(true);F.setTitle("Hello Swing!");
}}
Hello Swing
20
Properties:ขนาดจอช อจอ....
Methods:ปรบขนาดจอ
ตงช อจอ...........
Event:MouseKeyboard
…….
Object Oriented Programming Model
Event-Driven Programming Model
Hello Swing: Mouse Event
21
<<Interface>>MouseListener
+mouseClicked(MouseEvent e)+mouseEntered(MouseEvent e)+mouseExited(MouseEvent e)+mousePressed(MouseEvent e)+mouseReleased(MouseEvent e)
Mouse กดและปลอยMouse วงเขาMouse วงออกMouse กดปมMouse ปลอยปม
Hello Swing: Mouse Event
22
<<Interface>>MouseListener
+mouseClicked(MouseEvent e)+mouseEntered(MouseEvent e)+mouseExited(MouseEvent e)+mousePressed(MouseEvent e)+mouseReleased(MouseEvent e)
public class Hello_Swing {
public static void main(String[] args) {JFrame F=new JFrame();
F.setBounds(1, 1, 400, 200);F.show(true);
MouseListener mouse=new MouseListener(){
@Overridepublic void mouseClicked(MouseEvent arg0) {System.out.println("Click");}
@Overridepublic void mouseEntered(MouseEvent arg0) {System.out.println("Enter");}
@Overridepublic void mouseExited(MouseEvent arg0) {System.out.println("Exit");}
@Overridepublic void mousePressed(MouseEvent arg0) {System.out.println("Press");}
@Overridepublic void mouseReleased(MouseEvent arg0) {System.out.println("Release");}};F.addMouseListener(mouse);}
}
มคาเทากบสรางคลาสใหมท สบทอดมาจาก MouseListenerและน าคลาสใหมนนมาสรางเปน instance ช อ mouseวธการนใชส าหรบสรางหลายคลาสในไฟลเดยว
ถาตองการจะใชแค mouseClicked() จะท าอยางไร ? ตองเขยน code ทก method หรอไม ?
Mouse มตง 3 ปม จะรไดอยางไรวาก าลงกดปมไหนอย ?
Hello Swing: Mouse Event
23
MouseAdapter
+mouseClicked(MouseEvent e)+mouseDragged(MouseEvent e)+mouseEntered(MouseEvent e)+mouseExited(MouseEvent e)+mouseMoved(MouseEvent e)+mousePressed(MouseEvent e)+mouseReleased(MouseEvent e)+mouseWheelMoved(MouseWheelEvent e)
Hello Swing: Mouse Event
24
MouseAdapter
+mouseClicked(MouseEvent e)+mouseDragged(MouseEvent e)+mouseEntered(MouseEvent e)+mouseExited(MouseEvent e)+mouseMoved(MouseEvent e)+mousePressed(MouseEvent e)+mouseReleased(MouseEvent e)+mouseWheelMoved(MouseWheelEvent e)
public class Hello_Swing {
public static void main(String[] args) {JFrame F=new JFrame();
F.setBounds(1, 1, 400, 200);F.show(true);
MouseListener mouse=new MouseAdapter(){
@Overridepublic void mouseClicked(MouseEvent e) {System.out.println("Click!");}
};F.addMouseListener(mouse);}
}
Hello Swing: JButton
25
JFrame เปน ContainerJButton เปน Component
•java.lang.Object
• java.awt.Component
• java.awt.Container
• javax.swing.JComponent
• javax.swing.AbstractButton
• javax.swing.JButton
JButton ตองวางบน Container เสมอ ตวอยางเชน วาง JButton ไวใน JFrame
Hello Swing: JButton
26
public class Hello_Swing {
public static void main(String[] args) {JFrame F=new JFrame();
F.setBounds(1, 1, 400, 200);JButton b1=new JButton("I am Button1");F.add(b1);F.show(true);
}
}
Containers : JFrameComponent : JButton
Hello Swing: JButton
27
Containers : JFrameComponent : JButton
public class Hello_Swing {
public static void main(String[] args) {JFrame F=new JFrame();
F.setBounds(1, 1, 400, 200);JButton b1=new JButton("I am Button1");F.add(b1);F.show(true);b1.addMouseListener(new MouseAdapter(){
@Overridepublic void mouseClicked(MouseEvent e) {System.out.println("Click!");}
});
}
}
MouseListener
เขยนแบบนกไดหรอ ?
Hello Swing: JButton
28
public class Hello_Swing {
public static void main(String[] args) {JFrame F=new JFrame();
F.setBounds(1, 1, 400, 200);JButton b1=new JButton("I am Button1");F.add(b1);F.show(true);b1.addMouseListener(new MouseAdapter(){
@Overridepublic void mouseClicked(MouseEvent e) {System.out.println("Click!");}
});
}
}
เขยนแบบนกไดหรอ ?
b1 : JButton
: MouseAdapter
ตอบ:ได เพราะเราไมตองการน าเอา instance ไปใชท าอยางอ น หรอตองการเรยกใช mouseClick เองแตตองระวง เพราะ MouseAdapterเปน inner class หามท าการสบทอดตอ
inner class
outer class
Hello Swing: JButton
29
public class Hello_Swing {
public static void main(String[] args) {JFrame F=new JFrame();
F.setBounds(1, 1, 400, 200);JButton b1=new JButton("I am Button1");JButton b2=new JButton("I am Button2");
F.add(b1);F.add(b2);
F.show();}
}
ลองเพมปมท 2
JFrame เปน Container ท สามารถใส Component ไดแคตวเดยวตองการใส Component มากกวา 1 ตองใชตวชวย
Hello Swing: JPanel
30
JPanel เปน Container ทสามารถใส Component ไดหลายตว แตท างานดวยตวเองไมไดตองใช JFrame เปนตวชวยในการแสดงผลบนจอ
JFrameJPanel
JButton
JButton
public class Hello_Swing {
public static void main(String[] args) {JFrame F=new JFrame();
F.setBounds(1, 1, 400, 200);JButton b1=new JButton("I am Button1");JButton b2=new JButton("I am Button2");JPanel P=new JPanel();
P.add(b1);P.add(b2);F.setContentPane(P);
F.show();}
}
Hello Swing: JPanel
31
public class Hello_Swing {
public static void main(String[] args) {JFrame F=new JFrame();
F.setBounds(1, 1, 400, 200);JButton b1=new JButton("I am Button1");JButton b2=new JButton("I am Button2");JButton b3=new JButton("I am Button3");JPanel P=new JPanel();
P.add(b1);P.add(b2);P.add(b3);F.setContentPane(P);F.show();
}
ท าไมต าแหนงปมจงเรยงจากซายไปขวา ?ตองการเปล ยนต าแหนงปม (ยายปม 3 ไปไวมมลางขวา) จะท าไดไหม ?
Hello Swing: JPanel
32
public class Hello_Swing {
public static void main(String[] args) {JFrame F=new JFrame();
F.setBounds(1, 1, 400, 200);JButton b1=new JButton("I am Button1");JButton b2=new JButton("I am Button2");JButton b3=new JButton("I am Button3");JPanel P=new JPanel();
P.add(b1);P.add(b2);P.add(b3);F.setContentPane(P);F.show();
}
ท าไมต าแหนงปมจงเรยงจากซายไปขวา ?
ตองการเปล ยนต าแหนงปม (ยายปม 3 ไปไวมมลางขวา) จะท าไดไหม ?
ตอบ:เพราะโดยปรยายแลว JPanel จะเรยง Component จากซายไปขวาเสมอ
ตอบ:ท าได แตตองท าการเปล ยน Layout
Hello Swing: Layout
33
Left to right,Top to bottom
c
n
s
ew
FlowLayout GridLayout
BorderLayout
none, programmer sets x,y,w,h
null
One at a time
CardLayout GridBagLayout
JButton
Layout คอรปแบบในการวาง Component แบบตางๆ
Hello Swing: Layout
Hello Swing: Null Layout
35
public class Hello_Swing {
public static void main(String[] args) {JFrame F=new JFrame();
F.setBounds(1, 1, 400, 200);JButton b1=new JButton("I am Button1");JButton b2=new JButton("I am Button2");JButton b3=new JButton("I am Button3");JPanel P=new JPanel();P.setLayout(null);
P.add(b1);P.add(b2);P.add(b3);F.setContentPane(P);F.show();
}
}
Button หายไปไหนหมด ?
Hello Swing: Null Layout
36
public class Hello_Swing {
public static void main(String[] args) {JFrame F=new JFrame();
F.setBounds(1, 1, 400, 200);JButton b1=new JButton("I am Button1");JButton b2=new JButton("I am Button2");JButton b3=new JButton("I am Button3");JPanel P=new JPanel();P.setLayout(null);
P.add(b1);P.add(b2);P.add(b3);b1.setBounds(1, 1, 120, 25);b2.setBounds(121, 1, 120, 25);b3.setBounds(250, 120, 120, 25);F.setContentPane(P);F.show();
}
}
Hello Swing: Null Layout
37
ขยายขนาดหนาจอ
ยอขนาดหนาจอ
Hello Swing: Layout
38
Left to right,Top to bottom
c
n
s
ew
FlowLayout GridLayout
BorderLayout
none, programmer sets x,y,w,h
null
One at a time
CardLayout GridBagLayout
JButton
Layout คอรปแบบในการวาง Component แบบตางๆ
Hello Swing: Grid Layout
39
public class Hello_Swing {
public static void main(String[] args) {JFrame F=new JFrame();
F.setBounds(1, 1, 400, 200);JButton b1=new JButton("I am Button1");JButton b2=new JButton("I am Button2");JButton b3=new JButton("I am Button3");JPanel P=new JPanel();GridLayout gLayout=new GridLayout(2,3);P.setLayout(gLayout);
P.add(b1);P.add(b2);P.add(b3);
F.setContentPane(P);F.show();
}
}
1 2 3
4 5 6
Hello Swing: Grid Layout
40
1 2 3
4 5 6
public class Hello_Swing {
public static void main(String[] args) {JFrame F=new JFrame();
F.setBounds(1, 1, 400, 200);JButton b1=new JButton("I am Button1");JButton b2=new JButton("I am Button2");JButton b3=new JButton("I am Button3");JPanel P=new JPanel();GridLayout gLayout=new GridLayout(2,3);P.setLayout(gLayout);
P.add(b1);P.add(b2);P.add(new JLabel(""));P.add(new JLabel(""));P.add(new JLabel(""));P.add(b3);
F.setContentPane(P);F.show();
}
}
Hello Swing: Grid Layout
41
ขยายขนาดจอลดขนาดจอ
โปรแกรมแปลงคาอณหภม
42
รบคา Celsius แปลง แสดงค าตอบ Fahrenheit
JTextField JButtonJLabel
GridLayout
Event: MouseAdapter
+mouseClicked()
โปรแกรมแปลงคาอณหภม
43
public class HelloTemperature {
public static void main(String[] args) {JFrame F=new JFrame("Hello Temperature");JPanel P=new JPanel();F.setBounds(1, 1, 500, 100);GridLayout gLayout=new GridLayout(1,3);P.setLayout(gLayout);F.add(P);
JTextField t1=new JTextField();JButton b1=new JButton("Convert to Fahrenheit");
JLabel l1=new JLabel("Hello");
P.add(t1);P.add(b1);P.add(l1);
F.show();}}
โปรแกรมแปลงคาอณหภม
44
public class HelloTemperature {
public static void main(String[] args) {JFrame F=new JFrame("Hello Temperature");JPanel P=new JPanel();F.setBounds(1, 1, 500, 100);GridLayout gLayout=new GridLayout(1,3);P.setLayout(gLayout);F.add(P);
JTextField t1=new JTextField();JButton b1=new JButton("Convert to Fahrenheit");
JLabel l1=new JLabel("Hello");
P.add(t1);P.add(b1);P.add(l1);
b1.addMouseListener(new MouseAdapter(){
@Overridepublic void mouseClicked(MouseEvent arg0) {Double c=Double.valueOf( t1.getText() );Double f=(c*(9/5.0)+32);l1.setText(String.format("%.2f'F", f) );}
});F.show();
}
}
Swing: Windows Application
45
สรปแลวโครงสรางพนฐานของ GUI จะประกอบดวย1) JFrame2) JPanel3) Layout4) Component5) Event Handler ( Event listener)
3 สวนนตองใชคกนเสมอแลวท าไมไมรวม หรอ ใสใหเองเลยตงแตแรก ?
จรงๆ swing framework ท าการตดตงสวนประกอบทง 3 ไวใน JFrame แลว และยงมสวนประกอบอ นท เรายงไมไดใชงาน
Swing: Windows Application
46
public class Hello_Swing {
public static void main(String[] args) {JFrame F=new JFrame();F.setBounds(1, 1, 400, 200);JButton b1=new JButton("I am Button1");JButton b2=new JButton("I am Button2");JButton b3=new JButton("I am Button3");F.getContentPane().setLayout(new GridLayout(2,3));F.getContentPane().add(b1);F.getContentPane().add(b2);F.getContentPane().add(new JLabel(""));F.getContentPane().add(new JLabel(""));F.getContentPane().add(new JLabel(""));F.getContentPane().add(b3);F.show();
}
}
public class Hello_Swing {
public static void main(String[] args) {JFrame F=new JFrame();
F.setBounds(1, 1, 400, 200);JButton b1=new JButton("I am Button1");JButton b2=new JButton("I am Button2");JButton b3=new JButton("I am Button3");JPanel P=new JPanel();GridLayout gLayout=new GridLayout(2,3);P.setLayout(gLayout);
P.add(b1);P.add(b2);P.add(new JLabel(""));P.add(new JLabel(""));P.add(new JLabel(""));P.add(b3);
F.setContentPane(P);F.show();
}
}
47
การบาน 5
เขยนค าตอบใสกระดาษ A4 จ านวน 1 แผน สงทางกลองรบการบาน หนาแลป 2เขยนช อ รหส กลมเรยน ท มมบนขวาภายในวนศกรท 8 กนยายน 2560
ใหออกแบบหนาจอของโปรแกรมแปลงเงนบาทเปนสกลอ นประกอบไปดวย USD, EUR, GBP, JPY และCNY ท เหมาะสมกบการใชงานจรง โดยก าหนดใหเลอกใช component ดงตอไปน
ตวอยางเชน
TextFieldบาท: แปลงเปน USDButton
แปลงเปน EURButton
แปลงเปน GBPButton
แปลงเปน JPYButton
แปลงเปน CNYButtonTextFieldแปลงไดเปน: