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

ตอนที่แล้ว เราได้ทำการดึง JButton มาทำงานที่ Controller แล้ว คราวนี้ก็ถึงคิวของ JTextField บ้าง มาดูกันค่ะว่าอันไหนจะง่ายกว่ากัน ^^

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

เราจะเขียนโปรแกรมออกแบบหน้าจอรับข้อมูลผู้ติดต่อ โดยเก็บชื่อ, เบอร์โทร. และอีเมล์ มีปุ่ม 2 ปุ่มคือ “เพิ่ม” กับ “รีเซ็ต”

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

 

เมื่อผู้ใช้กรอกข้อมูลและกดที่ปุ่ม “เพิ่ม” รายการข้อมูลนั้นจะไปแสดงผลที่หน้าจอ Output ของ NetBeans ดังนี้

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

 

เมื่อกดปุ่ม “เพิ่ม”

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

 

จากนั้น เมื่อผู้ใช้กดที่ปุ่ม “รีเซ็ต” ข้อมูลใน JTextField จะถูกลบไปทั้งหมด เพื่อให้ผู้ใช้กรอกค่าอื่น ๆ ต่อไป

 

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

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

 

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

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

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

 

เพิ่มเมธอดส่งค่าตัวแปรต่าง ๆ ใน View

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

 

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

 

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

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

 

หมายเหตุ: ขั้นตอนการ implement เมธอด ทำเหมือนกับ “ตอนที่ 1

 

Run Program!

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

 

เมื่อ Run แล้วลองกรอกข้อมูล และคลิกปุ่ม “เพิ่ม” จะได้ผลลัพธ์ดังนี้

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

 

เมื่อกดปุ่ม “รีเซ็ต” ข้อมูลที่กรอกไว้ ใน TextField ก็จะหายไป

 

สรุป

กระบวนการทำงานในตอนที่ 2 นี้คลาย ๆ กับที่สรุปเอาไว้ใน ตอนที่ 1 เลยค่ะ เพียงแต่ว่าเพิ่มในส่วนของ JTextField เข้ามาเท่านั้น ซึ่งดู ๆ แล้วน่าจะเขียนง่ายกว่าตอนเขียนเรื่อง JButton อีกนะคะ ^^

 

ตอนที่ 2 จบไปแล้วค่ะ มีใครไฟแรงอยากจะต่อด้วยโปรเจ็กต์เลยบ้าง ? Yo!Yo! เราไม่ต้องเรียนจนจบหลักสูตรแล้วค่อยสร้างโปรเจ็กต์หรอกค่ะ เรียนแค่นี้แหละก็ทำโปรเจ็กต์เล็ก ๆ ให้ตัวเองภาคภูมิใจได้แล้ว! ในตอนหน้ารอพบกับ โปรเจ็กต์พื้นฐาน เรื่อง Java Basic GUI ในรูปแบบ MVC ได้เลยค่ะ ^^ แล้วพบกันนะคะ 🙂

 


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

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

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

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

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

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

ตอนที่ 3 (Model)

ตอนที่ 4 (View)

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

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

ตอนที่ 7 (DAO)


 

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

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

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