MVC-Model View Controller (Part 2)

หลังจาก Entry ก่อนหน้านี้ MVC-Model View Controller (Part 1) เราคงพอจะรู้จัก MVC กันมาบ้างๆ แล้วถ้าใครที่ยังสับสนอยู่คิดว่า Entry นี้น่าจะช่วยให้คลายความสงสัยไปได้นะครับ อย่างที่ได้บอกไว้ก่อนหน้านี้ว่าผมจะยกตัวอย่างเป็น Sample Code ง่ายๆ เพื่อให้เห็นภาพรวมของ MVC ว่าแต่ละส่วนเป็นยังไง ใครทำหน้าที่อะไร คราวนี้เราก็จะได้เห็นตัวจริงเสียงจริงกันซะทีไม่ใช่แค่ในนามธรรมอีกต่อไป มาเริ่มกันเลยครับ

ผมเริ่มด้วยการ New Project ขึ้นมาหนึ่งตัว ชื่อว่า Quize นะครับ เป็นโปรแกรมถาม-ตอบ ดัง Diagram ด้านล่างนี้

MVC Concept

MVC Simulatorจาก Diagram จะเห็นได้ว่า ผมแบ่งข้อมูลออกเป็น 3 ส่วนด้วยกัน คือ View , Controller และ Model นะครับ

เมื่อดูในส่วนของ Model จะเห็นได้ว่า โปรแกรมนี้จะมีข้อมูลชุดคำถามและคำตอบอยู่อย่างละ 3 ข้อโดยเก็บเป็น Array ข้อมูล ดังนี้

Array ของ Question คือ
1. What is 5+5?
2. What is 7×2?
3. What is 8-3?

ส่วน Array ของ Answer คือ
1. 10
2. 14
3. 5

ในส่วนของ View จะประกอบไปด้วย UIButton และก็ UILabel โดย UIButton จะทำหน้าที่ส่ง Action 2 ส่วนด้วยกันก็คือ Show Question และ Show Answer ซึ่งเมื่อ User ทำ Action ที่ Button Show Question ก็จะไป แสดงผล UILabel ที่เป็น Question จากข้อมูลใน Question Array (Model) ของเรา เช่นถ้าเป็นคำถามข้อที่ 1 ก็จะดึงข้อมูลที่ Index 0 ขึ้นมาแสดงผลใน UILabel และในขณะเดียวกันเมื่อ User ทำ Action ที่ Button Show Answer ก็จะไป แสดงผล UILabel ที่เป็น Answer จากข้อมูลใน Answer Array (Model)

คราวนี้คิดว่าน่าจะพอเห็นภาพของ Model และก็ View แล้ว ต่อไปมาดูว่า Controller ของเราทำหน้าที่อะไรบ้าง อย่างที่เคยพูดไว้ใน Entry ที่ผ่านมาว่า Controller จะค่อยทำหน้าที่ Sync ระหว่าง Model และ View ก็ตามนั้นเลยครับ ถ้าเราดูจากใน Diagram ก็คงเห็นว่า Controller ก็คือ QuizeAppDelegate ซึ่งจะทำหน้าที่ในการดึงข้อมูลจาก Array ของ Question, Answer (Model) มาแสดงผลยัง UILabel (View) เมื่อ User มี Interactive กับ View (Click Button)

Download Sample Code

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s