MVC Basic ตอนที่ 1 การดึงปุ่ม JButton มาทำงานที่ Controller

ในการเขียนโปรแกรมแบบ MVC เราจะดึง View มาจัดการที่ Controller ในตอนที่ 1 นี้ เราจะดึงปุ่ม JButton มา คือ เมื่อปุ่มใดถูกกด เราจะสามารถเขียนโค้ดควบคุมการทำงานของมันได้ในส่วนของ Controller

เราจะทำอะไรกัน ?

เราจะเขียนโปรแกรมออกแบบหน้าจอให้มีปุ่ม 3 ปุ่มแบบนี้

Java-Basic-ง่ายนิดเดียว-MVC-Basic-1-1

เมื่อปุ่มใดถูกกด จะแสดงข้อความชื่อปุ่มของตัวเองดังนี้

Java-Basic-ง่ายนิดเดียว-MVC-Basic-1-2

การแสดงผลข้อความเหล่านี้มาจากคลาส Controller นะคะ ไม่ได้สั่งเอาไว้ในส่วนของ View

 

โครงสร้างโปรเจ็กต์

Java-Basic-ง่ายนิดเดียว-MVC-Basic-1-3

 

ออกแบบหน้าจอ

ออกแบบหน้าจอไฟล์ JButtonView.java และตั้งชื่อดังต่อไปนี้

Java-Basic-ง่ายนิดเดียว-MVC-Basic-1-4

 

เพิ่มเมธอดส่งค่าปุ่มต่าง ๆ ใน View

คลิกเข้าไปในส่วนของโค้ด และเพิ่มเมธอดต่าง ๆ ลงไปดังนี้ (มี 3 ปุ่ม ก็มี 3 เมธอด)

 

เสร็จแล้วลบเมธอด main() ในไฟล์ JButtonView.java ทิ้งไปนะคะ เราไม่ได้ใช้ค่ะ

 

สร้างไฟล์ Controller.java

ต่อมาสร้างไฟล์ Controller.java โดยทำการ implements interface  ชื่อ ActionListener เข้ามาด้วย เราจะได้เมธอด ชื่อ actionPerformed() มาไว้จัดการกับปุ่มของเรา รายละเอียดโค้ดและคำอธิบายมีดังต่อไปนี้

 

หมายเหตุ: 1 ตอนเพิ่มเมธอดเข้ามา คลิกที่หลอดไฟ และเลือก Implement all abstract methods

Java-Basic-ง่ายนิดเดียว-MVC-Basic-1-5

 

หมายเหตุ: 2 ถ้าไม่อยากให้ focus ทำงาน ให้เอาเครื่องหมายถูกในส่วนของ Properties ออก (เข้าหน้านี้โดยการคลิกขวาที่ JButton และเลือกเมนูล่างสุด ชื่อ Properties )

Java-Basic-ง่ายนิดเดียว-MVC-Basic-1-6

 

Run Program!

เรามาลองรันและทดสอบโปรแกรมดูนะคะ ว่าได้ผลลัพธ์เหมือนที่เราออกแบบไว้ตอนแรกหรือเปล่า ไปที่ไฟล์ Main.java ในนั้นจะมีเมธอด main() เอาไว้ Run โปรแกรมอยู่แล้ว เขียนโค้ดเหล่านี้ลงไปค่ะ

 

เมื่อรันและลองคลิกปุ่มต่าง ๆ ดูจะได้ผลลัพธ์ดังนี้

Java-Basic-ง่ายนิดเดียว-MVC-Basic-1-7

 

สรุป

เราเริ่มต้นด้วยการสร้างไฟล์ View ออกแบบหน้าจอ และเขียนเมธอดคืนค่าตัวแปรชนิด JButton เอาไว้ เพียงเท่านี้ก็สิ้นสุดการเขียนโค้ดในส่งของ View แล้ว

 

ต่อมาเราสร้างไฟล์ Controller ขึ้นมาพร้อมกับทำการ implements อินเตอร์เฟส ActionListener  มาใช้งาน เราจะต้อง implement abstract เมธอดชื่อ actionPerformed() เข้ามาด้วย ซึ่งเราใช้มันจัดการกับเหตุการณ์ต่าง ๆ ที่จะเกิดขึ้นเมื่อปุ่มถูกกด ส่วนที่ Constructor() เรารับออบเจ็กต์ View เข้ามา เพื่อกำหนดค่าเริ่มต้นให้กับตัวแปรและปุ่มต่าง ๆ เพียงเท่านี้เราก็สามารถควบคุมปุ่มที่อยู่หน้า View ผ่านทาง Controller ได้แล้ว Yo!Yo!

 


เรื่องที่เกี่ยวข้อง

MVC ตอนที่ 1 การดึงปุ่ม JButton มาทำงานที่ Controller

MVC ตอนที่ 2 การดึง JTextField มาทำงานที่ Controller

ตัวอย่างโปรเจ็กต์: รายชื่อผู้ติดต่อ

ตอนที่ 1 (ภาพรวม)

ตอนที่ 2 (ฐานข้อมูล)

ตอนที่ 3 (Model)

ตอนที่ 4 (View)

ตอนที่ 5 (Controller & Service)

ตอนที่ 6 (ทดสอบโปรแกรม)

ตอนที่ 7 (DAO)


 

ธมนวรรณ มณีจันทร์

ธมนวรรณ มณีจันทร์

|:- เราเชื่อมั่นว่าการเสียสละและการแบ่งปันจะทำให้โลกใบนี้สวยงามมากขึ้น ทุกๆ จุดเริ่มต้นของการเรียนรู้ นำไปสู่การเรียนรู้ถัดไป เว็บไซต์แห่งนี้ขอเป็นส่วนหนึ่งของการแบ่งปันความรู้ที่ไม่มีที่สิ้นสุด มาร่วมกันผลักดันโลกของเราให้หมุนไปพร้อมกับพลังแห่งความรักด้วยกันนะคะ :) >>> |:- About Me! -:|