วันอาทิตย์ที่ 13 เมษายน พ.ศ. 2557

คึกอยากจะทบทวน GWT Framework part 8

Sample GWT Picture

: MVP concept & Event Bus

ในที่สุดก็มาถึงหัวใจของ project นี้เสียทีกับ Model, View และ Presenter

คำถาม : เดี๋ยวๆ controller คืออะไรนะ แล้วกับ presenter นี่ยังไงเหรอ?
คำตอบ : เราทราบว่า controller จะทำ business logic กับข้อมูล โดยอาจรับมาจาก view หรือ model ก็ได้ สำหรับ web application เจ้า controller จะมีหน้าที่จัดการ URL เพิ่มด้วย (สถาปัตยกรรมของ Spring เรียก controller ลักษณะนี้ว่า front-controller) ทีนี้เจ้า presenter นี่จะอยู่ระหว่างกลาง controller กับ view ครับ จากคำถามจึงตอบได้ว่า controller นั้นติดต่อกับ view โดยตรง แต่ว่าหากมี presenter เจ้า presenter จะเข้าไปอยู่ตรงกลาง รับ input และหรือแสดง output จาก view เข้ามากระทำ business logic แทน controller อ๊ะๆ แต่ controller ไม่ได้หายไปไหนนะครับ เขาก็จะควบคุมแต่ละ presenter ที่มีความสำพันธ์ต่อกันในเรื่องนั้นๆอีกทีหนึ่ง จากภาพ controller ที่ว่าก็คือ Application Controller นั่นเอง

คำถาม : แล้ว controller แตกต่างอย่างไรกับ presenter ขอชัดๆ
คำตอบ : (-*-) ถ้าเราให้ controller เป็นส่วน business logic ของ view ฉันใด แนวคิดของ presenter นี้ก็คือ business logic ของ view ฉันนั้น

หากเป็นการ input สำหรับ MVC เจ้า input จะไปยัง controller ก่อน แต่หากเป็น MVP เจ้า input จะไปยัง presenter ก่อน

คำถาม : อะไรคือ Event Bus ในภาพ?
คำตอบ : คือกลไกประการหนึ่งที่ใช้จัดการเหตุการณ์ของ presenter กับ presenter โดยโครงสร้างข้อมูลของ event bus ก็เหมือนกับ queue

สมมติตัวอย่างง่ายๆว่า A presenter รับผิดชอบ X view และ B presenter รับผิดชอบ Y view จากนั้นต้องการแสดงผลข้อมูลที่ update แล้วไปยังส่วนแสดงผลทั้งสอง ไม่ว่า X หรือ Y view พอกดปุ่ม update ข้อมูลปุ๊บ ข้อมูลก็จะไป update ทั้งสองหน้าในเวลาแทบจะใกล้เคียงกันปั๊บ ว้าว! นี่แหละครับงานที่เกิดขึ้นโดย event bus

จงอธิบายภาพตามความเข้าใจ : จากภาพทรัพยากรจะถูกเตรียมไว้สองแห่งใหญ่ๆ หนึ่งคือที่ Application Controller (AppController) และสองคือแต่ละ View ที่ใช้เป็น UI สำหรับแสดงผล

หนึ่ง Presenter จะรับผิดชอบ business logic ของหนึ่ง View (มากกว่าหนึ่ง View ก็คงได้) โดย presenter รู้จักกับ view ผ่าน interface ที่มีชื่อว่า Display (นิยมตั้งชื่อนี้จ๊ะ) ด้วยกติกาของ interface ส่งผลให้ presenter และ view สามารถแยกกันพัฒนาได้ หรือกล่าวว่าการออกแบบ view เป็นอิสระมากขึ้น ส่งผลให้ logic design กับ UI design ไม่ผูกติดกันอีกต่อไป โหย~สุดยอดอะ

ภาพนี้อธิบายกลไกการเพิ่มลบและแก้ไขรายชื่อผู้ติดต่อ (Contact) โดยออกแบบไว้สอง presenter ได้แก่
- ContactsPresenter รับผิดชอบแสดงรายชื่อผู้ติดต่อทั้งหมด
- และ ContactEditPresenter รับผิดชอบส่วนแก้ไขชื่อผู้ติดต่อนั้นๆที่ถูกเลือก

เมื่อชื่อผู้ติดต่อถูกเลือกจากรายการฝั่ง ContactsPresenter เพื่อนำมาแก้ไข ContactEditPresenter จะมี message ไปบอกต่อ Event Bus ให้ส่ง event ไปสะกิด handler ฝั่ง ContactsPresenter การนี้ข้อมูลที่ถูกแก้ไขจากฝั่ง ContactEditPresenter ก็จะ update ในฝั่ง ContactsPresenter เป็นที่เรียบร้อย จบข่าว

ไว้เจอกันใหม่กับการทดลองทำ sample project นะครับ
อ่านเพิ่มเติม : http://www.gwtproject.org/articles/mvp-architecture.html

ไม่มีความคิดเห็น:

แสดงความคิดเห็น