ตัวอย่างโปรเจ็กต์แบบ MVC ตอนที่ 4 (View)

ในตอนที่ผ่านมาจบเรื่อง Model ไปแล้ว เรากำลังเรียนเรื่อง MVC กันอยู่ ทายซิว่าตัวต่อไปเราจะเรียนเรื่องอะไร ?…. เฉลย…. V  หรือ View ค่ะ เราจะออกแบบหน้าจอและตั้งชื่อตัวแปรต่าง ๆ ดังต่อไปนี้

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

ที่คลาส ContactsView.java ลากส่วนต่าง ๆ มาวางและตั้งขื่อให้เรียบร้อย  แนะนำให้ตั้งชื่อเหมือนกันก่อนนะคะ เพราะต้องเรียกใช้หลายที่เลย ตั้งไม่เหมือนกันระวังจะ งง ได้ 🙂

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

ต่อมาทำตามขั้นตอนดังต่อไปนี้

 

เพิ่มเมธอดคืนค่า TextFiled และ JButton

เราจะเรียกใช้งาน TextField และ JButton ทั้งหมดผ่านเมธอดที่เรียกว่า Getter ซึ่งทำหน้าที่คืนค่าตัวแปรชนิดต่าง ๆ กลับมาให้เรา คลิกเข้าไปในส่วนของโค้ด เราจะเพิ่มเมธอด Getters ทั้งหมด 5 เมธอด โดยให้ NetBeans ช่วยสร้างโค้ดให้ (เรามี TextField 3 ตัว = 3 เมธอด และ JButton 2 ตัว = 2 เมธอด รวม 3 + 2 = 5 เมธอด)

จะเพิ่มลงตรงไหนก็ได้นะคะ ของเราเพิ่มต่อจากเมธอด Constructor  วิธีการเพิ่มคือ ใช้คีย์ลัดกดปุ่ม Alt+Insert จากนั้นเลือก Getter… จะปรากฏหน้าจอให้เลือกตัวแปรที่เราจะสร้าง Getters ซึ่งก็คือตัวแปรต่าง ๆ ที่เราตั้งชื่อเอาไว้นั่นเอง อะไรที่ไม่ได้ตั้งก็ไม่ต้องเลือกนะคะ เราจะได้ 5 เมธอดเท่านั้น

 

เสร็จแล้วลบเมธอด main ทึ้งไปทั้งเมธอดเลยค่ะ เราไม่ได้ใช้ เดี๋ยวเราจะสั่งให้ JFrame แสดงผลที่ไฟล์ Main.java ของเราที่สร้างเอาไว้แล้ว โดยมีคำสั่งดังต่อไปนี้ (โค้ดเดิมลบทิ้งหมดแล้วนะคะ)

 

Run Program

เมื่อ Run ดูจะได้ผลลัพธ์ดังนี้

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

 

ตอนนี้เราเห็นปุ่ม 2 ปุ่ม คือ

 

คำสั่งในปุ่ม “เพิ่ม”

  1. เช็ตว่าผู้ใช้กรอกข้อมูลครบ 3 ช่องหรือไม่ ?

– ถ้าไม่ใช่ แสดงข้อความแจ้งผู้ใช้ว่า “กรุณากรอกข้อมูลให้ครบ

– ถ้าใช้ ทำข้อ 2

  1. เพิ่มข้อมูลลงในตารางในฐานข้อมูล

– ถ้าสำเร็จแสดงข้อความบอกผู้ใช้ว่า “บันทึกข้อมูลสำเร็จ” และลบข้อมูลใน TextField ทั้งหมด

– ถ้าไม่สำเร็จแสดงข้อมูลบอกผู้ใช้ว่า “ไม่สามารถบันทึกข้อมูลได้

 

คำสั่งในปุ่ม “รีเซ็ต”

มีคำสั่งเดียวคือ ลบข้อมูล ทั้งหมดที่เขียนเอาไว้ใน TextField

 

กระบวนการเหล่านี้เราจะให้ C หรือ Controller เป็นผู้จัดการ คือเริ่มตั้งแต่รับค่าทั้ง View และ Model เข้ามา และทำการเขียนโค้ดเพื่อควบคุมการทำงานทั้งหมด ส่วนข้อความที่แสดงแจ้งผู้ใช้งาน (Dialog ) เราจะให้ S หรือ Service มาช่วยอีกที

 

ไฟล์ที่เสร็จแล้ว

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

 

สรุป

ในตอนนี้เราได้ทำออกแบบหน้าจอ หรือส่วนของ View เสร็จแล้ว และทำความเข้าใจหมดแล้วว่ากดที่ปุ่มไหน ? และจะเกิดกระบวนการอะไรขึ้นบ้าง ? ซึ้งกระบวนการต่าง ๆ นั้นเราจะทำผ่าน C หรือ Controller และเราจะได้เรียนรู้ในตอนต่อไปค่ะ 🙂

 


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

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

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

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

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

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

ตอนที่ 3 (Model)

ตอนที่ 4 (View)

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

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

ตอนที่ 7 (DAO)


 

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

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

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