#40 การส่งออบเจ็กต์จาก Model ให้ View

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

 

ขั้นตอนการส่ง Model ให้ View

1. มาที่ไฟล์ Controller.java ใน if ส่วนของปุ่ม Enter ใช้ออบเจ็กต์ เรียกใช้เมธอด setLblResult(…) และส่งออบเจ็กต์ m ไปให้เมธอดนำค่าไปใช้งาน

th-java-java-gui-mvc-40-1

ภาพที่ 40-1 แสดงการส่งส่วนของ Model ไปให้ส่วนของ View

 

2. กดคีย์ลัด F6 เพื่อ Run โปรเจ็กต์ จากนั้นกรอกคำว่า World ลงไป

th-java-java-gui-mvc-40-2

ภาพที่ 40-2 แสดงการทดสอบโปรแกรม

 

3. คลิกปุ่ม Enter จะปรากฏข้อความที่ส่วนของการแสดงผลลัพธ์

th-java-java-gui-mvc-40-3

ภาพที่ 40-3 แสดงการทำงานของโปรแกรม

 

ตอนนี้ที่ View ก็นำค่าจากส่วนของ Model มาใช้งานได้แล้ว เราจะตกแต่งส่วนของ View อีกนิดหน่อย ด้วยการเชื่อมต่อ String ค่ะ โดยเราจะเชื่อมต่อคำว่า Hello! เอาไว้หน้าข้อมูลที่รับเข้ามาจาก Text Field ซึ่งมีขั้นตอนดังนี้

 

 

ขั้นตอนการเชื่อมต่อString

1. เปิดหน้าจอโค้ดในส่วนของไฟล์ View.java ขึ้นมา มองไปที่เมธอดชื่อ setLblResult() เป็นเมธอดที่เราสร้างขึ้นมาก่อนหน้านี้นั่นเอง

th-java-java-gui-mvc-40-4

ภาพที่ 40-4 แสดงโค้ดส่วนของ View

 

2. เพิ่มข้อความ Hello! ลงไป และเชื่อมต่อข้อความ หรือ String ด้วยเครื่องหมายบวก (+)

th-java-java-gui-mvc-40-5

ภาพที่ 40-5 แสดงการเชื่อมต่อ String

 

3. กด F6 เพื่อ Run โปรแกรม กรอกคำว่า World ลงไป

th-java-java-gui-mvc-40-6

ภาพที่ 40-6 แสดงการกรอกชื่อลงในโปรแกรม

 

4. คลิกที่ปุ่ม Enter ส่วนของผลลัพธ์จะแสดงข้อความต่อจากคำว่า Hello! รวมเป็น Hello! World

th-java-java-gui-mvc-40-7

ภาพที่ 40-7 แสดงผลลัพธ์ของโปรแกรม

 

ตอนนี้เราสามารถดึงค่าจาก Text Field ไปเก็บไว้ในส่วนของ Model จากนั้นก็ส่ง Model ไปให้ส่วนของ View ได้แล้ว ในตอนต่อไปเราจะล้างค่าใน Text Field กันค่ะ  🙂 

 

Comments

comments

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

เป้าหมาย : "พัฒนาคุณภาพชีวิตผู้คน ผ่านการส่งมอบความรู้ ด้วยเทคโนโลยีที่ดีที่สุด" ... ประวัติ