Chap 08

Graphic User Interface & Event Handler Modern Programming Languages
การสรางสวนติดตอกับผูใช (Graphic User Interface)

การจัดการกับเหตุการณ (Event Handler)
คือสวนที่ใชในการติดตอระหวางผูใช (user) แบบกราฟฟก ในภาษา
Graphic User Interface (GUI)
จาวาสนับสนุนการพัฒนาโปรแกรม GUI โดยใชแพ็คเกจตางๆ ดังนี้
• AWT (Abstract Window Toolkit) อยูในแพ็คเกจ java.awt

• Swing ถูกพัฒนาขึ้นมาทีหลัง มีสวนประกอบของกราฟฟกมากกวาแพ็คเกจ AWT อยูในแพ็คเกจ
javax.swing
เนื้อหาในบทนี้จะกลาวถึงพื้นฐานในการสรางสวนที่ใชในการติดตอระหวางผูใชดวยแพ็คเกจ AWT
8.1 แพ็คเกจ AWT

แพ็คเกจ AWT ประกอบดวยคลาสตางๆ ที่มีสวนประกอบประเภทกราฟฟก ซึ่งนําไปพัฒนาโปรแกรม GUI
ในแพ็คเกจประกอบไปดวยคลาสและอินเตอรเฟสที่สําคัญดังนี้
1. คอมโพเนนตกราฟฟก สวนประกอบตางๆ ของกราฟฟกเชน Button, Label, TextField, …
2. กราฟฟก (Graphics) เปน Abstract class ที่ใชในการวาดรูปกราฟฟก เชน วาดวงกลม, วาด
สี่เหลี่ยม, ...
3. LayoutManager (Interface) คือการจัดวางตําแหนงของกราฟฟกตางๆ
4. Color เปนคลาสที่ใชในการจัดการสี
5. Font เปนคลาสที่ใชในการจัดการฟอนต
6. AWTEvent เปนคลาสที่ใชในการจัดการกับเหตุการณ
รูปแสดงสวนประกอบแพ็คเกจ AWT
AWTEvent
Component
Object Color
Font
Graphics
phanlapha@yahoo.com 1/33
รูปแสดงสวนประกอบคลาส Component
Button
Object
Canvas
Checkbox Dialog
Component
Window
Choice
Frame
Container
Graphics Panel Applet
Label
List
TextArea
Scrollbar
TextComponent TextField
8.1.1 คลาส Component

การสรา ง GUI จะตอ งสร า งออบเจกต ข องคลาสที่เ ปน สว นประกอบของกราฟฟก คลาสที่เ ป น
สวนประกอบของกราฟฟกจะสืบทอดมาจากคลาส Component คลาสที่เปนคลาสลูกของคลาส Component แบง
ออกเปน 2 กลุมคือ
• Container เปนคลาสที่ใชในการวางคอมโพเนนตกราฟฟก (Graphic Component) เชน Frame,
Dialog, …
• คอมโพเนนตกราฟฟก เชน Botton, Label, TextField, …
8.1.1.1 Container
Container เปนคลาสที่ใชวางออบเจกตของคอมโพเนนตกราฟฟก โดยที่คลาส Container อยูใน
แพ็คเกจ AWT ประกอบไปดวย Frame, Dialog, Panel และ Applet เปนตน
เมธอดที่สําคัญคือ
• public void add(Component c)
• public void add(Component c, int index)
โดยที่
• c เปนออบเจกตของคอมโพเนนตกราฟฟกที่ตองการวาง
• index เปนตําแหนงที่ใชในการจัดวางกราฟฟก ตามรูปแบบการจัดวางตําแหนงคอมโพเน
นตกราฟฟก (LayoutManager)
Frame เปนคลาสที่สืบทอดคุณสมบัติคลาส Windowซึ่งจัดวาเปนคลาส Container แบบหนึ่ง

• ออบเจกตของ Frame ประกอบไปดวย title bar, icon, resizable และ menu bar
• คอนสตรัคเตอรของคลาส Frame ที่สําคัญมีดังนี้
o public Frame ()
o public Frame (String title)
โดยที่ title คือขอความที่ตองการแสดงที่ Title Bar
• เมธอดที่สําคัญ มีดังนี้
o public void setVisible(boolean b)
o public void pack()
Title Bar Resizable
ตัวอยาง การสราง Frame
ผลลัพธที่ได
Dialog เปนคลาสที่สืบทอดคุณสมบัติคลาส Window ทํางานภายใตออบเจกตของคลาส Frame

• การสรางออบเจกต Dialog ตองระบุออบเจกต Frame เรียกวา owner frame
• คอนสตรัคเตอร ของคลาส Dialog ที่สําคัญมีดังนี้
o public Dialog(Frame owner)
o public Dialog(Frame owner, boolean modal)
o public Dialog(Frame owner, String title)
o public Dialog(Frame owner, String title , boolean modal)
โดยที่
• owner เปนออบเจกตของคลาส Frame ที่เปนเฟรมแม
• title ขอความที่แสดงที่ title bar ของ Dialog
• modal เปนการระบุวา Dialog มีโหมดการทํางานแบบ modal หรือไม ถาใช (true)
ผูใชตองปดออบเจกต Dialog กอนจึงจะกลับมาทํางานในออบเจกต Frame ที่ทํางาน
คูกันได
o เมธอดสวนมาก เหมือนกับ Frame เพราะเปน Subclass ในระดับเดียวกัน
ตัวอยาง การสราง Dialog
ผลลัพธที่ได จะได Frame และ Dialog แสดงขึ้นมา เนื่องจากกําหนดคาใหแสดงขึ้นมาทั้งสองคอม

โพเนนต จากการเรียกใชเมธอด setVisivle(true);
จากภาพดานบน เมื่อทําการแยก Dialog ออกมา จะไดดังรูปดานลาง
Panel เปนคลาสประเภท Container เชนเดียวกับคลาส Frame แตกตางกันคือ Panel ไมมี title bar
และ resizable
• Panel มี Subclass คือ Applet เพื่อใชในการเขียนโปรแกรม Applet ชวยใหสามารถวางออบเจกต
graphic component ได
• จาวา Appication ไมสามารถเริ่มตนดวยการสรางออบเจกต Panel ไดโดยตรง ตองสรางออบเจกต
Frame กอน
• Panel สามารถวางลงไปในออบเจกต Frame สามารถสราง GUI ที่มีการจัดวาง Layout ที่ซับซอน
ได
• คอนสตรัคเตอร ของคลาส Panel ที่สําคัญมีดังนี้
o public Panel()
o public Panel(LayoutManget layout)
ตัวอยาง การสราง Panel
Panel
8.1.1.2 คอมโพเนนตกราฟฟก (Graphic Component)

Label เปนคลาสที่ใชในการสรางออบเจกตที่แสดงขอความ (text) โดยที่ไมสามารถพิมพแกไขได
• คอนสตรัคเตอร ของคลาส Label มีดังนี้
o public Label()
o public Label(String text)
o public Label(String text, int alignment)
โดยที่
• text ขอความที่ตองการแสดง
• alignment คือการกําหนดการวางขอความ(ชิดซาย, ชิดขวา และกึ่งกลาง)
• เมธอดที่ใชในการจัดการขอความ มีดังนี้
o public void setText(String text)
เปนเมธอดที่ใชในการกําหนดหรือเปลี่ยนแปลงขอความใหกับออบเจกต Label
o public String getText()
เปนเมธอดที่สงขอความของออบเจกต Label กลับมา
Button เปนคลาสที่ใชในการสรางออบเจกตที่แสดงปุม โดยมีขอความ (label) แสดงอยูบนปุม

• คอนสตรัคเตอร ของคลาส Button มีดังนี้
o public Button()
o public Button(String label)
โดยที่ label เปนขอความที่แสดงอยูบนปุม
• เมธอดที่ใชในการจัดการขอความ มีดังนี้
o public void setLabel(String label)
เปนเมธอดที่ใชในการกําหนดหรือเปลี่ยนแปลงขอความที่แสดงบนปุม
o public String getLabel()
เปนเมธอดใชดูขอความที่แสดงบนปุม
ตัวอยาง การสราง Button
สราง Label โดยกําหนดขอความที่จะแสดง

โดยการนําขอความบนปุม b1 มาแสดง
CheckBox เปนคลาสที่ใชในการสรางออบเจกตที่ใหผูใชเลือกรายการ Checkbox โดยจะมีขอความอยู

ขางๆเพื่อบอกรายละเอียด
• คอนสตรัคเตอรของคลาส Checkbox ที่สําคัญมีดังนี้
o public Checkbox (String label)
o public Checkbox (String label, boolean state)
โดยที่ state เปนตัวกําหนดสถานะเริ่มตนของ Checkbox กรณีที่ไมไดกําหนด สถานะ
เริ่มตนจะเปน false
o public void setState(boolean state)
เปนเมธอดที่ใชกําหนดสถานะของ CheckBox
o public boolean getState()
เปนเมธอดที่ใชตรวจสอบสถานะของ CheckBox วามีสถานะถูกเลือก (true) หรือ
ไมถูกเลือก (false)
ตัวอยาง การสราง CheckBox
CheckboxGroup เปนคลาสที่ใชในการสรางออบเจกตเพื่อกําหนดกลุมของ Checkbox เปนการสราง

Radio Button นั่นเอง
• คอนสตรัคเตอรของคลาส CheckboxGroup มีดังนี้
o public CheckboxGroup ()
• คอนสตรัคเตอรของคลาส Checkbox ที่เกี่ยวของเมื่อตองทําการสราง CheckboxGroup มีดังนี้
o public Checkbox (String label, boolean state, CheckboxGroup group)
o public Checkbox (String label, CheckboxGroup group, boolean state)
ตัวอยาง การสราง CheckboxGroup
Choice เปนคลาสที่ใชในการสรางออบเจกตที่เก็บรายการไดหลายๆรายการใหผูใชสามารถเลือก แต

แสดงไดทีละ 1 รายการ
• คอนสตรัคเตอร ของคลาส Choice มีดังนี้
o public Choice ()
o public void add(String item)
o public void addItem(String item)
เปนเมธอดที่ใสขอความลงไปใน Choice
o public String getItem(int index)
เปนเมธอดที่สงขอความ ณ ตําแหนง index กลับมา
o public int getItemCount()
เปนเมธอดที่สงจํานวนขอความที่มีอยูใน Choice
o public int getSelectedIndex()
เปนเมธอดใชแสดงตําแหนงขอความที่ถูกเลือก
o public String getSelectedItem()
เปนเมธอดใชแสดงขอความที่ถูกเลือก
o public void select(int pos)
เปนเมธอดใชในการเลือกตําแหนงที่ตองการแสดงขอความ
o public void select(String str)
เปนเมธอดใชในการเลือกขอความที่ตองการแสดง
ตัวอยาง การสราง Choice
Listเปนคลาสที่ใชในการสรางออบเจกตเพื่อใหผูใชเลือกรายการคลาย Choice แตกตางกันตรงที่ List

สามารถแสดงรายการไดหลายรายการตามจํานวนแถวที่กําหนด
• คอนสตรัคเตอร ของคลาส List มีดังนี้
o public List ()
o public List (int row)
o public List (int row ,boolean multipleMode)
โดยที่
• row เปนจํานวนแถวที่ตองการใหออบเจกต List แสดงรายการ
• multipleMode เปนการกําหนดใหผูใชสามารถเลือกรายการไดหลายรายการพรอม
กัน เมื่อกําหนดคาเปน true
o public void add(String item)
o public void add(String item, int index)
เปนเมธอดใชในการใสรายการลงในออบเจกต List
o public void remove(int position)
o public void removeAll()
เปนเมธอดใชในการลบรายการออกจากออบเจกต List
ตัวอยาง การสราง List
จากโปรแกรมตัวอยาง กําหนดใหสามารถเลือกไดหลายรายการพรอมกัน ดังรูปดานลาง
TextField เปนคลาสที่ใชในการสรางออบเจกตเพื่อใหผูใชสามารถพิมพขอความไดทีละบรรทัด
• คอนสตรัคเตอร ของคลาส TextField มีดังนี้
o public TextField ()
o public TextField (int column)
o public TextField (String str)
o public TextField (String str, int column)
โดยที่
• column เปนจํานวนคอลัมนที่ตองการแสดง
• str เปนขอความเริ่มตนที่ตองการแสดง
o public String getText()
เปนเมธอดที่สงขอความของออบเจกต TextField กลับมา
o public void setText(String str)
เปนเมธอดที่ใชกําหนดหรือเปลี่ยนแปลงขอความของออบเจกต TextField
o public void setEditable(boolean b)
เปนเมธอดที่ใชกําหนดสถานะให TextField อานไดอยางเดียว ไมสามารถแกไขได
o public boolean isEditable()
เปนเมธอดที่ใชตรวจสอบสถานะ TextField วาอานไดอยางเดียว (false) หรือ
สามารถแกไขได (true)
ตัวอยาง การสราง TextFiled
TextArea เปนคลาสที่ใชในการสรางออบเจกตเพื่อใหผูใชสามารถพิมพขอความไดทีละหลายบรรทัด
• คอนสตรัคเตอร ของคลาส TextArea มีดังนี้
o public TextArea()
o public TextArea(int row, int col)
o public TextArea(String str)
o public TextArea(String str, int row, int col)
o public TextArea(String str , int row, int col, int scrollBar)
โดยที่
• row และ col เปนจํานวนแถวและคอลัมนที่ตองการแสดงใน TextArea
• str เปนขอความเริ่มตนที่ตองการแสดง
• scrollBar กําหนดการมี scrollBar ของ TextArea
SCROLLBARS_BOTH (0)
SCROLLBARS_VERTICAL_ONLY (1)
SCROLLBARS_HORIZONTAL_ONLY (2)
SCROLLBARS_NONE (3)
• เมธอดที่สําคัญสวนใหญ มีเหมือนกับ TextFiled เพราะตางก็เปน คลาสลูกที่สืบทอดคุณสมบัติ
TextComponent
ตัวอยาง การสราง TextArea
8.1.2 การจัดวางตําแหนงคอมโพเนนตกราฟฟก (Graphic Component)

การจัดวางคอมโพเนนตกราฟฟกลงในออบเจกตชนิด Container โดยใช LayoutManger
LayoutManger เปนอินเตอรเฟส โดยภาษาจาวากําหนดใหมีคลาสที่ทําการ implements อินเตอรเฟสนี้ ทั้งหมด
5 คลาสดังนี้
• FlowLayout
• BorderLayout
• GridLayout
• CardLayout
• GridBagLayout
ในที่นี้ จะกลาวเฉพาะเนื้อหาของ FlowLatout, BorderLayout และ GridLayout

การจัดวางคอมโพเนนตกราฟฟก ทําไดโดยเรียกใชเมธอด setLayout() ของคลาสประเภท Container
รูปแบบของเมธอด ดังนี้
o public void setLayout(LayoutManger mgr)
ตัวอยาง
โดยทั่วไป Container จะระบุการจัดวางตําแหนงเริ่มตนไวอยูแลว (default) ดังนี้

– คลาส Window, Frame และ Dialog กําหนด BorderLayout
– คลาส Panel และ Applet กําหนด FlowLayout
8.1.2.1FlowLayout
เปนการจัดวางคอมโพเนนตกราฟฟกไวตําแนงบนสุดของออบเจกต Container และเรียงตําแหนงจากซายไป
ขวา ถาขนาดความกวางแตละแถวของออบเจกต Container ไมพอ จะนําออบเจกต graphic component ที่
เหลือวางในตําแหนงของแถวถัดไป
ตัวอยาง การจัดวางคอมโพเนนตกราฟฟกแบบ FlowLayout
เมื่อทําการขยายหนาจอกวางขึ้น ปุมจะถูกจัดเรียงใหม ดังรูปดานลาง
8.1.2.2BorderLayout
กําหนดการจัดวางตําแหนงคอมโพเนนตกราฟฟก ไวทั้งหมด 5 ตําแนง คือ CENTER, NORTH,
SOUTH, EAST และ WEST การระบุตําแหนงทําไดโดยเรียกใชเมธอด add() เชน
fr.add(new Button(), BorderLayout.NORTH);
หากไมระบุตําแหนงจะถูกวางไวตรงกลาง
ตัวอยาง การจัดวางคอมโพเนนตกราฟฟกแบบ BorderLayout
8.1.2.3GridLayout
เปนการจัดวางคอมโพเนนตกราฟฟก ตามขนาดของแถวและคอลัมนที่กําหนด การระบุตําแหนงทําไดสราง
ออบเจกต GridLayout โดยมีรูปแบบของ คอนสตรัคเตอร ที่สําคัญดังนี้
public GridLayout()
public GridLayout(int row, int col)
โดยที่ row และ col คือจํานวนแถวและคอลัมนที่ตองการแบงออบเจกตของ Container เปน

ชองๆ ตามที่กําหนด ในการจัดวางตําแหนง วางที่ชองซายบนสุด ถัดไปทางชองขวาจนสุดคอมลัมน
แลวเริ่มแถวใหม
ตัวอยาง การจัดวางคอมโพเนนตกราฟฟกแบบ GridLayout
8.1.2.4การสราง GUI ที่ซับซอน

โดยทั่วไปโปรแกรม GUI ภาษาจาวา มีการจัดวางคอมโพเนนตที่ซับซอนกวาการจัดวางตําแหนงดวย
FlowLayout, BorderLayout และ GridLayout วิธีการสรางที่ซับซอนสามารถทําไดโดยการสรางออบเจกต
ของคลาสชนิด Panel เขามาชวยในการจัดวางตําแหนง เราสามารถที่จะวางออบเจกตชนิด Panel ลงในออบเจกต
ของ Container (Frame, Dialog) โดยที่เราสามารถวางคอมโพพเนนตกราฟฟกลงใน Panel ไดอีกทีหนึ่ง
ตัวอยาง การสราง GUI ที่ซับซอน
8.2 การจัดการเหตุการณ (Event-Handler)

เหตุการณ(Event) เปนสถานการณที่เกิดขึ้นในขณะรันโปรแกรมเชน การใชเมาสหรือคียบอรดติดตอกับ
โปรแกรม GUI การเกิดเหตุการณในโปรแกรมภาษาจาวาจะทําการสรางออบเจกตของคลาสประเภท Event ชนิด
ตาง ๆ ขึ้นมาตามประเภทของเหตุการณ (Event-Handler)
o เมื่อเลื่อนเมาสในเฟรม จะเกิดออบเจกต MouseEvent ขึ้น
o เมื่อปดเฟรม จะเกิดออบเจกต WindowEvent ขึ้น
o เมื่อกดปุมในเฟรม จะเกิดออบเจกต ActionEvent ขึ้น
o เมื่อปอนขอมูลใน TextField จะเกิดออบเจกต KeyEvent ขึ้น
8.2.1 คลาสประเภท Event

คลาสประเภท Event ในภาษาจาวาจะสืบทอดมาจากคลาสที่ชื่อ ObjectEvent สําหรับเหตุการณทาง
กราฟฟกจะสืบทอดมาจากคลาสที่ชื่อ AWTEvent โดยที่คลาส AWTEvent สืบทอดมาคลาสประเภท Event อีก
ตอนึง ซึ่งคลาสประเภท Event ทั้งหมดจะอยูในแพ็คเกจที่ชื่อ java.awt.event
องคประกอบของเหตุการณ แบงเปน 3 สวนดังนี้

1. Event ออบเจกตตามประเภทเหตุการณที่เกิดขึ้น เชน ออบเจกตของ ActionEvent
2. Event Source คือออบเจกตที่ทําใหเกิดเหตุการณ เชน ออบเจกตของคลาส Button เมื่อทําการกด
ปุมจะเกิดการสราง ActionEvent
3. Event Handler ออบเจกตที่ทําหนาที่จัดการกับเหตุการณที่เกิดขึ้น โดยมีเมธอดที่จะรับออบเจกต
ประเภท Event ที่เกิดขึ้นและมีคําสั่งในการจัดการกับเหตุการณเพื่อตอบโตกับผูใช
Event
Event Source Event Handler
รูปแสดงสวนประกอบคลาส AWTEvent
ActionEvent ContainerEvent
AdjustmentEvent FocusEvent
KeyEvent
AWTEvent ComponentEvent InputEvent
ItemEvent MouseEvent
WindowEvent
TextEvent
• ActionEvent ถูกสรางออบเจกตขึ้นในเหตุการณ เชน

o เมื่อมีการคลิกเมาสบนปุม (ออบเจกตของ Button)
o เมื่อมีการปอนคีย Enter ใน TextFiled
o เมื่อมีการกด double click ใน List
• AdjustmentEvent สรางออบเจกตเมื่อมีเหตุการณในการปรับตําแหนงชี้ของออบเจกตของคลาส
ScrollPane หรือ ScrollBar
• ItemEvent ถูกสรางออบเจกตขึ้นในเหตุการณ เชน
o เมื่อมีการเลือกหรือยกเลิกรายการใน List หรือ Checkbox
o เมื่อมีการคลิกเมาสรายการใน Choice
• TextEvent สรางออบเจกตเมื่อมีเหตุการณในการเปลี่ยนแปลงขอความในออบเจกตของ TextArea
• ComponentEvent สรางออบเจกตเมื่อมีเหตุการณ ซึ่งออบเจกตของ graphic component มีการ
เปลี่ยนแปลง เชน move หรือ resize
o ContainerEvent สร า งออบเจกต เ มื่ อ มี เ หตุ ก ารณ ว างหรื อ ยกเลิ ก ออบเจกต graphic
component ลงในออบเจกต Container
o FocusEvent สรางออบเจกตเมื่อผูใชเลื่อนอุปกรณอินพุตมาชี้ยังออบเจกตของ graphic
component ใดๆ
• WindowEvent สรางออบเจกตเมื่อมีเหตุการณของคลาสประเภท Window เชน
o opened เปนเหตุการณที่เกิดขึ้นเมื่อมีการเปด Window
o closed เปนเหตุการณที่เกิดขึ้นเมื่อมีการปด Window
o closing เปนเหตุการณที่เกิดขึ้นขณะกําลังปด Window
o activated เปนเหตุการณที่เกิดขึ้นเมื่อ Window กําลังทํางานอยู
o deactivated เปนเหตุการณที่เกิดขึ้นเมื่อ Window ไมทํางาน
o iconified เปนเหตุการณเมื่อออบเจกตของคลาส Window อยูในรูปของไอคอน
o deiconified เปนเหตุการณเมื่อออบเจกตของคลาส Window ไมไดอยูในรูปของไอคอน
• InputEvent สรางออบเจกตเมื่อมีเหตุการณเกี่ยวของกับอินพุต คือ
o KeyEvent สรางออบเจกตเมื่อมีเหตุการณกดคียบอรด
o MouseEvent สรางออบเจกตเมื่อมีการใชงานเมาส เชน
clicked เปนเหตุการณที่เกิดขึ้นเมื่อมีการคลิกเมาส
moved เปนเหตุการณที่เกิดขึ้นเมื่อเลื่อนเมาส
dragged เปนเหตุการณที่เกิดขึ้นเมื่อมีการกดปุมเมาสคางพรอมกับการเลื่อนเมาส
entered เปนเหตุการณที่เกิดขึ้นเมื่อมีการเลื่อนเมาสเขาไปในขอบเขตของออบเจกต
ของคลาสที่เปนสวนประกอบคอมโพเนนตกราฟฟกใด ๆ
exited เปนเหตุการณที่เกิดขึ้นเมื่อมีตําแหนงของเมาสอยูนอกขอบเขตของออบเจกต
ของคลาสที่เปนสวนประกอบคอมโพเนนตกราฟฟกใด ๆ
pressed เปนเหตุการณที่เกิดขึ้นเมื่อมีการกดปุมบนเมาส
released เปนเหตุการณที่เกิดขึ้นเมื่อมีการปลอยปุมที่กดบนเมาส
เมธอดที่สําคัญมีดังนี้
int getX()
เปนเมธอดที่จะสงตําแหนงพิกัดของเมาสบนแกน X คืนมา มีชนิดขอมูลเปน int
int getY()
เปนเมธอดที่จะสงตําแหนงพิกัดของเมาสบนแกน Y คืนมา มีชนิดขอมูลเปน int
8.2.2 อินเตอรเฟสประเภท Listener

ภาษาจาวาทํ า การจั ด การกั บ เหตุ ก ารณ โดยสร า งออบเจกต ที่ ส ามารถรั บ ฟ ง เหตุ ก ารณ จ ากคลาสที่
implements อินเตอรเฟสประเภท Listener ที่สอดคลองกันซึ่งออบเจกตนี้ทําหนาที่เปน Event Handler เชน
ออบเจกตที่ทําการจัดการเหตุการณประเภท ActionEvent จะตอง implements อินเตอรเฟสประเภท
ActionListener โดยตองเขียนบล็อกคําสั่งในเมธอด actionPerformed()
รูปแสดงสวนประกอบอินเตอรเฟส EventListener
ActionListener
AdjustmentListener
ComponentListener
ContainerListener
FocusListener
ItemListener
EventListener
KeyListener
MouseListener
MouseMotionListener
TextListener
WindowListener
ในที่นี้จะกลาวถึง ActionListener, KeyListener, ItemListener, MouseListener ,

MouseMotionListener และ WindowListener
Event Source ซึ่งเปนออบเจกตที่ทําใหเกิดเหตุการณนั้น จะตองลงทะเบียนรอรับฟงเหตุการณนั้น ๆ ที่

สอดคลองกับอินเตอรเฟสประเภท Listener ดังตารางเมธอดที่ทําการจัดการกับเหตุการณที่เกิดขึ้นดังนี้
Event Type Listener Interface Listener Methods

ActionEvent ActionListener public void actionPerformed(ActionEvent)
public void keyPressed(KeyEvent)
KeyEvent KeyListener
public void keyReleased(KeyEvent)
public void keyTyped(KeyEvent)
ItemEvent ItemListener public void ItemStateChanged(ItemEvent)
MouseListener public void mouseClicked(MouseEvent)
public void mouseEntered(MouseEvent)
public void mouseExited(MouseEvent)
MouseEvent
public void mousePressed(MouseEvent)
public void mouseReleased(MouseEvent)
public void mouseDragged(MouseEvent)
MouseMotionListener
public void mouseMoved(MouseEvent)
public void windowActivated(WindowEvent)
public void windowClosed(WindowEvent)
public void windowClosing(WindowEvent)
WindowEvent WindowListener public void windowDeactivated(WindowEvent)
public void windowDeiconfield(WindowEvent)
public void windowIconfield(WindowEvent)
public void windowOpened(WindowEvent)
8.2.3 การจัดการกับเหตุการณ
• ออบเจกตของ component เปนออบเจกตประเภท Event Source เชน Button เปน Event Source
ของ ActionEvent
• ออบเจกตของ component รับฟงเหตุการณใด ตอง implements อินเตอรเฟสประเภท Listener ให
สอดคลองกัน เชน Button ตอง implements อินเตอรเฟส ActionListener
• Event Source ใดที่ตองการจัดการกับเหตุการณที่เกิดขึ้น และตองระบุใหรูวา Event Source รอรับฟง
เหตุการณที่จะเกิดขึ้น มีรูปแบบดังนี้
eventSource.add[ประเภท Listener]Listener(listener);
โดยที่
• eventSource เปนชื่อออบเจกตที่ทําใหเกิดเหตุการณ
• add[ประเภท Listener]Listener เปนเมธอดที่ลงทะเบียนรอรับฟงเหตุการณนั้น ๆ โดย
ที่จะตองเลือกใหสอดคลองกับอินเตอรเฟสประเภท Listener
• listener เปนออบเจกตของคลาส [ประเภท Listener]Listener ซึ่งสามารถรับฟง
เหตุการณที่ตองการจัดการได
อินเตอรเฟส เมธอดที่รับฟงเหตุการณ
ActionListener addActionListener()
KeyListener addKeyListener()
ItemListener addItemListener()
MouseListener addMouseListener()
MouseMotionListener addMouseMotionListener()
WindowListener addWindowActionListener()
• Event Source สามารถรับฟงเหตุการณไดหลายประเภท เชน

fr.addMouseMotionListener(this);
fr.addWindowsListener(this);
• Event Handler สามารถที่จะจัดการ Event Source ไดหลายตัว และออบเจกตประเภท Event จะมี
เมธอดในการที่จะแยก Event Source ได
ตัวอยาง การจัดการเหตุการณเมื่อเกิดเหตุการณกับปุม(Button)และชอยส(Choice)
select choice Æ
• เมื่อเกิดการกดปุม ใดๆ และปุม ทั้งสองที่สรางจากโปรแกรมขางตน ไดลงทะเบียนรอรับฟง

เหตุการณไวแลว ดังที่แสดงในบรรทัดที่ 18
• เมื่อกดปุม “Change Background” จะเกิดการสราง ActionEvent ขึ้น และสวนของ Event
Handler ซึ่ ง เป น ออบเจกต ที่ ทํ า หน า ที่ จั ด การกั บ เหตุ ก ารณ ที่ เ กิ ด ขึ้ น โดยมี เ มธอด
actionPerformed(ActionEvent ev) ที่จะรับออบเจกตประเภท ActionEvent ที่เกิดขึ้น โดย
ในเมธอด actionPerformed(ActionEvent ev) มีคําสั่งในการตรวจสอบวาเกิดการกดปุมจาก
ปุมใด จะไดผลดังนี้
• เมื่อเกิดการเปลี่ยนแปลงชอยส และชอยสไดลงทะเบียนรอรับฟงเหตุการณไวแลว ดังที่แสดงใน

บรรทัดที่ 19
• เมื่อเปลี่ยนแปลงชอยส จะเกิดการสราง ItemEvent ขึ้น และสวนของ Event Handler ซึ่ง
เ ป น อ อ บ เ จ ก ต ที่ ทํ า ห น า ที่ จั ด ก า ร กั บ เ ห ตุ ก า ร ณ ที่ เ กิ ด ขึ้ น โ ด ย มี เ ม ธ อ ด
itemStateChanged(ItemEvent e) ที่จะรับออบเจกตประเภท ItemEvent ที่เกิดขึ้น โดยใน
เมธอด itemStateChanged(ItemEvent e) มีคําสั่งในตรวจสอบวาเกิดการเปลี่ยนแปลงและ
ทําการเลือกที่ item ใด เชน ถาเลือกที่ red จะไดผลดังนี้
กลาวคือ สีตัวอักษรของออบเจกต label จะเปลี่ยนเปนสีแดง

• เมื่อกดปุม “Exit” จะจบการทํางานของโปรแกรม
ตัวอยาง การจัดการเหตุการณหลายเหตุการณ
จากโปรแกรมขางตนมีการรอรับฟงเหตุการณจาก WindowListener และ MouseMotionListener

• เมื่อมีการ drag เมาสจะแสดงพิกัด x และ y ณ ตําแหนงที่ทําการเคลื่อนเมาสไป ลงใน

TextField
• ตําแหนง x ไดจากคําสั่ง ev.getX();
• ตําแหนง y ไดจากคําสั่ง ev.getY();
8.2.4 คลาสประเภท EventAdapter

คลาสประเภท EventAdapter คือคลาสที่ทําการ implements อินเตอรเฟสประเภท Listener ไวแลว โดย
ไดกําหนดเมธอดตางๆของอินเตอรเฟสที่ตองเขียนไวแลว แตจะเปนบล็อกคําสั่งที่ไมมีการทํางานใดๆอยูในบล็อก
นั้น คลาสประเภท EventAdapter จะชวยทําใหเขียนโปรแกรมประเภท Event-Handler ไดงายขึ้น โดยลด
จํานวนเมธอดที่ตองสรางเมื่อมีการ implements อินเตอรเฟสประเภท Listener โดยที่คลาสประเภท
EventAdapter แสดงไดดังตารางตอไปนี้
Listener Interface EventAdapter

ActionListener -
AdjustmentListener -
ComponentListener ComponentAdapter
ContainerListener ContainerAdapter
FocusListener FocusAdapter
ItemListener -
KeyListener KeyAdapter
MouseListener MouseAdapter
MouseMotionListener MouseMotionAdapter
TextListener -
WindowListener WindowAdapter
ตัวอยาง การจัดการเหตุการณหลายๆแบบ
ในโปรแกรม EventAdapter พิจารณาการจัดการเหตุการณเมื่อเกิดการปดหนางตาง แบงเปน 3 แบบ
โดยทําการพิจารณาไปทีละแบบ ดังนี้
• แบบที่ 1
• ทําการสรางคลาสชื่อ CodeToHandleWinClose ซึ่งเปนคลาสที่ใชจัดการเหตุการณเมื่อปด
หนาตาง โดยทําการ implements อินเตอรเฟส WindowListener
• ในบรรทั ด ที่ 27 สรางออบเจกตที่ทํา หนา ที่จัด การกับ เหตุก ารณที่เกิดขึ้น จาก
WindowListener ชื่อออบเจกต m
• ในบรรทัดที่ 28 แสดงคําสั่งใหออบเจกตของ Frame รอรับฟงเหตุการณประเภท
WindowListener ดังนี้ addWindowListener(m);
• ทําการสรางคลาสชื่อ Detect ซึ่งเปนคลาสที่ใชจัดการเหตุการณเมื่อปดหนาตาง โดยทําการสืบ
ทอดคุณสมบัติจากคลาส WindowAdapter
• ในบรรทัดที่ 20 แสดงคําสั่งใหออบเจกตของ Frame รอรับฟงเหตุการณประเภท
WindowListener ดังนี้ addWindowListener(new Detect()); โดยที่ new
Detect() เปนการสรางออบเจกตที่ทําหนาที่จัดการกับเหตุการณที่เกิดขึ้นจาก
WindowListener
• ระหวางบรรทัดที่ 22-26 แสดงคําสั่งใหออบเจกตของ Frame รอรับฟงเหตุการณประเภท
WindowListener ดังนี้
• addWindowListener([การสรางคลาสประเภท Event Hadler]);
• [การสรางคลาสประเภท Event Hadler] ภายในเมธอดที่ลงทะเบียนรอรับฟงเหตุการณ

เรียกคลาสประเภทนี้วา คลาสแบบ anonymous มักใชคูกับคลาสประเภท EventAdapter
โดยนิยมใชกับคําสั่งในการปดหนาตาง ดังตัวอยางจากโปรแกรมขางตน คือ
addwindowListener( new WindowAdapter(){
public void windowClosing(WindowEvent e) {
System.exit(0);
}
} );
โดยการจัดการเหตุการณปดหนาตางทั้ง 3 แบบ สามารถทํางานไดเหมือนกัน
ในโปรแกรม EventAdapter ยังมีการจัดการเหตุการณอีก 2 เหตุการณคือ เมื่อเกิดการกดคียใดๆใน

TextFiled และเมื่อมีการกดปุม โดยทําการพิจารณาไปทีละเหตุการณดังนี้
• ในบรรทัดที่ 18 แสดงคําสั่งใหออบเจกตของ button ใหรอรับฟงเหตุการณประเภท ActionListener
ดังนี้ button.addActionListener(this);
• เมื่อกดปุม จะเกิดการสราง ActionEvent ขึ้น และสวนของ Event Handler ซึ่งเปนออบเจกตที่ทํา
หนาที่จัดการกับเหตุการณที่เกิดขึ้น โดยมีเมธอด actionPerformed(ActionEvent e) ที่จะรับออบ
เจกตประเภท ActionEvent ที่เกิดขึ้น โดยในเมธอด actionPerformed(ActionEvent e) มีคําสั่งใน
การกําหนดขอความใน TextField ดังนี้ display.setText(“Ohh, it tickles …”);
• ในบรรทัดที่ 19 แสดงคําสั่งใหออบเจกตของ display ใหรอรับฟงเหตุการณประเภท KeyListener ดังนี้
display.addKeyListener(this);
• เมื่อกดคียใดๆ ใน TextField จะเกิดการสราง KeyEvent ขึ้น และสวนของ Event Handler ซึ่งเปน
ออบเจกตที่ทําหนาที่จัดการกับเหตุการณที่เกิดขึ้น โดยมีเมธอด keyPressed(KeyEvent e) ที่จะรับ
ออบเจกตประเภท KeyEvent ที่เกิดขึ้น โดยในเมธอด keyPressed(KeyEvent e) มีคําสั่งในการ
ตรวจสอบวาคียที่กดเปนคียพิเศษหรือไม ถาไมใชใหแสดงผลที่ ออบเจกต label ทําการพิจารณาการ
ทํางานในเมธอด keyPressed(KeyEvent e) ทีละบรรทัดดังนี้
• เมื่อมีการกดคียจะเขามาทํางานในเมธอด โดยในบรรทัดที่ 39 ทําการตรวจสอบวาคียที่รับเขา

มาเปน คียพิเศษหรือไม ในการตรวจสอบคี ยพิเศษนั้นไดสรา งคลาส Util โดยมีเมธอด
isSpecialKey(int keyCode) ทําการตรวจสอบวาคียที่รับเขามาเปนคียพิเศษหรือไม (ถา
ตองการเพิ่มคียในการตรวจสอบคียพิเศษสามารถเพิ่มเขาไปได เชน F1-F12 ลองเพิ่มเองนะ)
• ถาหากไมใชคียพิเศษ จํานําคาคียที่รับไปเก็บใน strLabel ซึ่งเปนออบเจกตของ
StringBuffer มาชวยในการเก็บคียที่พิมพเขามา ดังคําสั่งในบรรทัดที่ 40 แลวทํา
การแสดงผลใน label ดวยคําสั่งในบรรทัดที่ 44
• หากเปนคียพิเศษที่เปน Back Space จะทําการลบตัวอักษรครั้งละหนึ่งตัวอักษร ดัง
คําสั่งในบรรทัดที่ 43
• สวนคําสั่ง strLabel.length()>11 ใหลองคิดวา ทําการตรวจสอบเพื่ออะไร ถานึกไมออก ลอง
นําคําสั่งนี้ออก แลวกดปุม ไปเรื่อยๆ จะเกิดอะไรขึ้น
• เมื่อกดคียใดๆที่ TextField ไดผลดังนี้
• เมื่อกดปุม “Click me” ไดผลดังนี้
แบบฝกหัด
1. สรางโปรแกรม VatCalculation.java เพื่อใชคํานวณราคาสินคารวม VAT
• เมื่อรันโปรแกรมไดผลดังรูป
• ใสราคาสินคา เลือก Vat(%) กดปุม “Calculate” ทําการคํานวณราคาสินคารวม VAT วางลงที่

ชอง ราคารวม VAT ไดผลดังรูป
• เมื่อกดปุม “About” ใหแสดง Dialog ดังรูป
ใน Dialog เมื่อกดปุม “OK” หรือ ใหปดหนาตาง Dialog
• เมื่อกดปุม “Calculate” และไมไดกําหนดราคาสินคา และ Vat(%) ใหแสดง Dialog ดังรูป
• เมื่อกดปุม “Clear” ใหเคลียรหนาจอ ดังรูป
• เมื่อกดปุม จบการทํางานโปรแกรม
2. สรางโปรแกรม CalGPS.java เพื่อใชคํานวณเกรดเฉลี่ยในแตละเทอม

• เมื่อรันโปรแกรมไดผลดังรูป
• โดยสราง Choice ที่มี List ของรายวิชา ดังรูป
• เมื่อเลือกรายวิชา ใหใสหนวยกิต ในชอง Credit อัตโนมัติ ดังรูป
• ใสรายละเอียด เพื่อคํานวณเกรดเฉลี่ย เมื่อกดปุม “Calculate” ไดผลดังรูป
• เมื่อกดปุม “About” ใหแสดง Dialog ดังรูป
ใน Dialog เมื่อกดปุม “OK” หรือ ใหปดหนาตาง Dialog ถาหากไมปด Dialog ตองไม

สามารถกลับไปทํางานในหนาจอหลักได
• เมื่อกดปุม ในหนาจอหลัก จบการทํางานโปรแกรม
3. ใหสรางโปรแกรมหามวลของรางกาย (Body Mass Index) โดยสรางเปน GUI ทําการออกแบบหนาจอเอง

และดักจับขอผิดพลาดที่เกิดขึ้นเอง
สูตร มวลของรางกาย = น้ําหนัก(กก.)/สวนสูง2(ม.)
มีเงื่อนไขดังนี้
1. ใหรับคาน้ําหนักเปนกิโลกรัม
2. ใหรับคาสวนสูงเปนเซ็นติเมตร
2. แสดงผลคามวลของรางกายกําหนดใหแสดงจุดทศนิยม 2 ตําแหนง
3. คามวลมากกวาหรือเทากับ 24 อวนเกินไป แสดงขอความ You are overweight.
4. คามวลมากวา 20 แตนอยกวา 24 ปกติ แสดงขอความ You are normal.
5. คามวลนอยกวาหนือเทากับ 20 ผอมเกินไป แสดงขอความ You are skinny.
ยกตัวอยางในการออกแบบ
- TextField ที่ใชในการรับคาสวนสูงและน้ําหนักควรรับคาไดเปนตัวเลข
- คาน้ําหนักและสวนสูงตองไมเปนศูนย
แนะนํา ใหสรางคลาส TextField ของตัวเองเพื่อตรวจสอบการรับเฉพาะคาตัวเลข, การรับคาตัวเลขจาก

TextField, การกําหนดคาใน TextField และการแสดงฟอรแมตของตัวเลขเปนจุดทศนิยม โดยทําการสืบทอด
คุณสมบัติของ TextField เชน
import java.awt.*;
import java.awt.event.*;
public class NumbetText extends TextField implements KeyListener {
…………………………….
……………………………
}
***ถาหากคิดไมออก ยังไมตองสรางคลาสใหใช TextField ของจาวากอน
***เพิ่มเติม พยายามหัดอาน Help Æ java document เพื่อเรียนรูการใชงาน event ตางๆ ดังตัวอยางตอไปนี้
java.awt.event
Class ActionEvent
Method Summary
String getActionCommand()
Returns the command string associated with this action.
Methods inherited from class java.util.EventObject
getSource
getSource
public Object getSource()The object on which the Event initially occurred.
Returns:
The object on which the Event initially occurred.
Class KeyEvent
Method Summary
char getKeyChar()
Returns the character associated with the key in this event.
int getKeyCode()
Returns the integer keyCode associated with the key in this event.
getSource
Class ItemEvent
Method Summary
Object getItem()
Returns the item affected by the event.
getSource
Class MouseEvent
Method Summary
Point getPoint()
Returns the x,y position of the event relative to the source component.
int getX()
Returns the horizontal x position of the event relative to the source component.
int getY()
Returns the vertical y position of the event relative to the source component.
getSource

Chap 08

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chap 08

Uploaded by

Copyright:

Available Formats

Graphic User Interface & Event Handler Modern Programming Languages

การสรางสวนติดตอกับผูใช (Graphic User Interface)

• AWT (Abstract Window Toolkit) อยูในแพ็คเกจ java.awt

8.1 แพ็คเกจ AWT

Graphics Panel Applet

8.1.1 คลาส Component

Frame เปนคลาสที่สืบทอดคุณสมบัติคลาส Windowซึ่งจัดวาเปนคลาส Container แบบหนึ่ง

Title Bar Resizable

ตัวอยาง การสราง Frame

Dialog เปนคลาสที่สืบทอดคุณสมบัติคลาส Window ทํางานภายใตออบเจกตของคลาส Frame

ตัวอยาง การสราง Dialog

ผลลัพธที่ได จะได Frame และ Dialog แสดงขึ้นมา เนื่องจากกําหนดคาใหแสดงขึ้นมาทั้งสองคอม

จากภาพดานบน เมื่อทําการแยก Dialog ออกมา จะไดดังรูปดานลาง

ตัวอยาง การสราง Panel

8.1.1.2 คอมโพเนนตกราฟฟก (Graphic Component)

Button เปนคลาสที่ใชในการสรางออบเจกตที่แสดงปุม โดยมีขอความ (label) แสดงอยูบนปุม

ตัวอยาง การสราง Button

สราง Label โดยกําหนดขอความที่จะแสดง

CheckBox เปนคลาสที่ใชในการสรางออบเจกตที่ใหผูใชเลือกรายการ Checkbox โดยจะมีขอความอยู

ตัวอยาง การสราง CheckBox

CheckboxGroup เปนคลาสที่ใชในการสรางออบเจกตเพื่อกําหนดกลุมของ Checkbox เปนการสราง

ตัวอยาง การสราง CheckboxGroup

Choice เปนคลาสที่ใชในการสรางออบเจกตที่เก็บรายการไดหลายๆรายการใหผูใชสามารถเลือก แต

ตัวอยาง การสราง Choice

Listเปนคลาสที่ใชในการสรางออบเจกตเพื่อใหผูใชเลือกรายการคลาย Choice แตกตางกันตรงที่ List

ตัวอยาง การสราง List

จากโปรแกรมตัวอยาง กําหนดใหสามารถเลือกไดหลายรายการพรอมกัน ดังรูปดานลาง

ตัวอยาง การสราง TextFiled

ตัวอยาง การสราง TextArea

8.1.2 การจัดวางตําแหนงคอมโพเนนตกราฟฟก (Graphic Component)

ในที่นี้ จะกลาวเฉพาะเนื้อหาของ FlowLatout, BorderLayout และ GridLayout

โดยทั่วไป Container จะระบุการจัดวางตําแหนงเริ่มตนไวอยูแลว (default) ดังนี้

ตัวอยาง การจัดวางคอมโพเนนตกราฟฟกแบบ FlowLayout

เมื่อทําการขยายหนาจอกวางขึ้น ปุมจะถูกจัดเรียงใหม ดังรูปดานลาง

fr.add(new Button(), BorderLayout.NORTH);

โดยที่ row และ col คือจํานวนแถวและคอลัมนที่ตองการแบงออบเจกตของ Container เปน

8.1.2.4การสราง GUI ที่ซับซอน

ตัวอยาง การสราง GUI ที่ซับซอน

8.2 การจัดการเหตุการณ (Event-Handler)

8.2.1 คลาสประเภท Event

องคประกอบของเหตุการณ แบงเปน 3 สวนดังนี้

• ActionEvent ถูกสรางออบเจกตขึ้นในเหตุการณ เชน

8.2.2 อินเตอรเฟสประเภท Listener

ในที่นี้จะกลาวถึง ActionListener, KeyListener, ItemListener, MouseListener ,

Event Source ซึ่งเปนออบเจกตที่ทําใหเกิดเหตุการณนั้น จะตองลงทะเบียนรอรับฟงเหตุการณนั้น ๆ ที่

Event Type Listener Interface Listener Methods

• Event Source สามารถรับฟงเหตุการณไดหลายประเภท เชน

• เมื่อเกิดการกดปุม ใดๆ และปุม ทั้งสองที่สรางจากโปรแกรมขางตน ไดลงทะเบียนรอรับฟง

• เมื่อเกิดการเปลี่ยนแปลงชอยส และชอยสไดลงทะเบียนรอรับฟงเหตุการณไวแลว ดังที่แสดงใน

กลาวคือ สีตัวอักษรของออบเจกต label จะเปลี่ยนเปนสีแดง

จากโปรแกรมขางตนมีการรอรับฟงเหตุการณจาก WindowListener และ MouseMotionListener

• เมื่อมีการ drag เมาสจะแสดงพิกัด x และ y ณ ตําแหนงที่ทําการเคลื่อนเมาสไป ลงใน

8.2.4 คลาสประเภท EventAdapter

Listener Interface EventAdapter

• [การสรางคลาสประเภท Event Hadler] ภายในเมธอดที่ลงทะเบียนรอรับฟงเหตุการณ

ในโปรแกรม EventAdapter ยังมีการจัดการเหตุการณอีก 2 เหตุการณคือ เมื่อเกิดการกดคียใดๆใน

• เมื่อมีการกดคียจะเขามาทํางานในเมธอด โดยในบรรทัดที่ 39 ทําการตรวจสอบวาคียที่รับเขา

• เมื่อกดคียใดๆที่ TextField ไดผลดังนี้

• เมื่อกดปุม “Click me” ไดผลดังนี้

• ใสราคาสินคา เลือก Vat(%) กดปุม “Calculate” ทําการคํานวณราคาสินคารวม VAT วางลงที่

• เมื่อกดปุม “About” ใหแสดง Dialog ดังรูป

ใน Dialog เมื่อกดปุม “OK” หรือ ใหปดหนาตาง Dialog

• เมื่อกดปุม “Calculate” และไมไดกําหนดราคาสินคา และ Vat(%) ใหแสดง Dialog ดังรูป