Home / Developer  / iOS Developer ตอนที่ 7 ใช้งาน Master Detail Application แบบง่าย

iOS Developer ตอนที่ 7 ใช้งาน Master Detail Application แบบง่าย

หน้า MainStoryBoard ที่ Master-Detail Application สร้างให้พร้อมเชื่อม Segue ให้เรียบร้อย

เทคนิคการพัฒนาสำหรับเหล่า iOS Developer แอพพลิเคชันด้วย Master Detail Application ที่แทบจะไม่ต้องเขียนโปรแกรมเหมาะกับ SMEs ในการสร้งแอพพลิเคชันของตัวเองหลังจากที่ได้ศึกษาการพัฒนาแอพพลิเคชันด้วย Single View Application มาหลายบทจนถึงการพัฒนาแอพพลิเคชันที่ดึงข้อมูลไปแสดงผลบน UITableView มาแล้ว รอบนี้จะพาไปรู้จักวิธีลัดวิธีหนึ่งสำหรับการพัฒนาแอพพลิเคชันอย่างง่ายที่ไม่มีข้อมูลซับซ้อนอะไร ตัวอย่างเช่นพวก SMEs หรือ แอพพลิเคชันที่เป็นของบริษัท หรือองค์กรเอาไว้อ่านข้อมูลอย่างเดียวไม่ได้มีการดึงข้อมูลมาจากฐานข้อมูล หรือเก็บตัวแปลซับซ้อนมากมาย เป็นการพัฒนาแอพพลิเคชันที่เหมือนกับการวาง Static Website ธรรมดาที่สามารถทำได้เสร็จสรรพภายใน 5 นาทีสำหรับคนที่มีเนื้อหา และข้อมูลครบถ้วน และมีจำนวนไม่มากเกินไปนะครับ สำหรับบทเรียนนี้อาจจะต้องศึกษาบทเรียนเหล่านี้ก่อนนะครับ

พัฒนาแอพพลิเคชันด้วย Master-Detail Application 

เริ่มต้นเปิด Xcode IDE ขึ้นมาแล้วทำการ New Project แล้วเลือกรูปแบบของแอพพลิเคชันเป็น Master-Detail Application

ทำการ New Project ขึ้นมาแต่เลือก Master-Detail Application นะครับ

ทำการ New Project ขึ้นมาแต่เลือก Master-Detail Application นะครับ

สังเกตว่าหน้า Xcode ของเราจะสร้างเท็มเพลตของแอพพลิเคชันขึ้นมาให้อัตโนมัติ ทั้ง Story Board และ ไฟล์ Master-Detail และ เนื้อหาในตัวอย่างแรกของเราเราจะยังไม่ใช้ Core Data ให้ทำการเอาเครื่องหมายในช่องเลือกของ Core Data ออกครับ

เอาเครื่องหมาย ถูก ที่ช่อง Use Core Data ออกไปก่อน

เอาเครื่องหมาย ถูก ที่ช่อง Use Core Data ออกไปก่อน

สิ่งที่ Master-Detail Application สร้างขึ้นมานั้นจะประกอบไปด้วยไฟล์ MasterViewController ทั้งนามสกุล .h และ .m ซึ่งจะทำการควบคุมหน้าในส่วนของ UITableView ที่สร้างขึ้นมาให้โดยอัตโนมัติ และมีไฟล์ DetailViewController ทั้งนามสกุล .h และ .m ปรากฏขึ้นให้เช่นกันเป็นไฟล์ตัวอย่าง ซึ่งมันก็คือสิ่งที่เราเรียนรู้มาจากบทเรียน UITableView ตั้งแต่แรกนั่นแหละครับ เพียงแค่เราไม่ต้องไปเสียเวลาพัฒนามันใหม่ แต่ถ้าได้เรียนรู้หลักการสร้าง และการทำงานของมันเชิงลึกล่ะก็มันก็คุ้มครับ

ไฟล์ของเราที่มี

ไฟล์ของเราที่มี

หน้า MainStoryBoard ที่ Master-Detail Application สร้างให้พร้อมเชื่อม Segue ให้เรียบร้อย

หน้า MainStoryBoard ที่ Master-Detail Application สร้างให้พร้อมเชื่อม Segue ให้เรียบร้อย

ถ้าลอง “Run” ตัวแอพพลิเคชันดูจะพบว่ามันทำงานได้สมบูรณ์ เลยล่ะครับ แต่ขาดแค่ Content ของแอพพลิเคชันเท่านั้นเอง และย้อนกลับไปอย่างที่ผมได้บอกไว้ว่า การใช้งาน Master-Detail Application แบบง่ายๆ เบื้องต้นนั้น เหมาะกับคนที่ไม่ถนัดการเขียนโปรแกรมที่ซับซ้อน ถนัดการโยง และเชื่อมเนื้อหา เหมือนทำเว็บไซต์ Static Website เท่านั้น ดังนั้น รอบนี้เลยจะเป็นการอัดเนื้อหาเข้าไปที่เว็บไซต์แทนครับ

ไปที่ MainStoryBoard ครับ แล้วไปคลิกที่หน้า Master หรือหน้าตรงกลางของแอพพลิเคชันของเรา เลือกไปที่ Cell หรือ UITableViewCell สัก Cell หนึ่ง แล้วกดปุ่ม “option” ที่แป้นคีย์บอร์ดของเรา ค้างไว้แล้วลากเจ้า Cell ดังกล่าวลงมาข้างล่างมันจะทำการ Clone Cell หรือ UITableViewCell ของเราให้ทันทีครับ ตัวอย่างผมทำการ Clone Cell ของผม 4 แถวครับ

กด “option” แล้วลาก Cell ลงมาในตัวอย่างผม Clone มันมา 4 แถวครับ

กด “option” แล้วลาก Cell ลงมาในตัวอย่างผม Clone มันมา 4 แถวครับ

ถ้าลองทำการ “Run” จะพบว่า Cell ที่จะทำงานเปลี่ยนหน้าได้นั้นคือ Cell แรกที่เราทำการ Clone เพียง Cell เดียวเท่านั้น ดังนั้นต้องการทำการ เชื่อมตัว Cell ของเราไปยัง หน้า DetailView ทุก Cell เพื่อสร้าง Segue ขึ้นครับจึงจะทำงานได้

 

เชื่อม Segue แบบ "Push” ทุกๆ Cell

เชื่อม Segue แบบ “Push” ทุกๆ Cell

 

ผลลัพธ์สุดท้ายต้องเป็นแบบนี้

ผลลัพธ์สุดท้ายต้องเป็นแบบนี้

ระหว่างนี้ เราสามารถปรับแต่ง Cell ของเราได้ ที่แถบด้านขวาส่วนของ Attribute Inspector ซึ่งเราจะสามารถตกแต่งหรือปรับขนาดของ Cell ไปจนถึงใส่รูปภาพของ Item บน Cell ได้ (กรณีที่เตรียมรูปภาพไว้แล้ว)

ตกแต่ง Cell ได้ท่ี่ Attribute Inspector

ตกแต่ง Cell ได้ท่ี่ Attribute Inspector

หากว่าพอใจกับการตกแต่ง Cell ของเราแล้ว ก็มาเริ่มต้นเพิ่มคำสั่งเพื่อให้แอพพลิเคชันของเราทำงานได้อย่างสมบูรณ์กันหน่อย ให้ไปที่หน้า DetailViewController บน MainStoryBoard แล้วลาก TextView ไปวางไว้บนหน้า DetailViewController

ลาก TextView ลงไปวางไว้

ลาก TextView ลงไปวางไว้

เปิดไฟล์ DetailViewController.h ขึ้นมาทำการเพิ่มคำสั่ง สำหรับกำหนด Outlet ของตัว TextView และ ตัวแปร Integer สำหรับส่งค่าข้อมูลของตำแหน่ง Cell โดยคำสั่งที่ใส่ลงไปนั้นคือ

เสร็จแล้วให้ทำการ Synthesize ค่าตัวแปรจาก Header ที่หน้า DetailViewController.m ตามนี้

ในไฟล์ DetailViewController.m นั้นให้ค้นหาฟังก์ชัน configureView

ทำการแก้ไข คำสั่งภายในฟังก์ชัน configureView ใหม่โดยกำหนดให้ detailDescriptionLabel นั้นอ่านค่าตัวแปร bid ซึ่งเป็นตำแหน่งของ Cell แต่ละตัวโดย Cell แรกจะต้องมีค่า bid เป็น “0” ไล่ลำดับลงไปถึง Cell ที่ 4 ที่จะมีค่าตัวแปร bid เป็น “3” แก้ไขฟังก์ชัน detailDescriptionLabel ใหม่ให้เป็น

ต่อจากนั้นให้กลับไปยังไฟล์ MasterViewController.m ให้เพิ่ม Header File ขึ้นมาหนึ่งตัวคือ DetailViewController.h บนส่วนบนสุดของคำสั่ง

สร้างคำสั่งสำหรับ ทำงานร่วมกับตัว Segue ของเราเข้าไปที่ใต้ฟังก์ชัน viewDidLoad โดยทำการตั้งชื่อ Segue ค่า “MySegue” สำหรับส่งค่า ตัวแปรระหว่างหน้า MasterViewController ไปยังหน้า DetailViewController

กลับไปที่หน้า MainStoryBoard แล้วทำการ Identified ตัว Segue ทุกตัวให้มีชื่อว่า “MySegue” เหมือนในคำสั่ง

กำหนด Identifier ของตัว Segue ทุกตัว

กำหนด Identifier ของตัว Segue ทุกตัว

ถ้าลอง “Run” ตัวแอพพลิเคชันของเราอีกครั้งจะพบว่า ค่าตัวแปลที่ DetailView หน้า Detail แสดงนั้นจะเป็นค่าตัวเลขเรียบร้อย

ถ้ากดที่ Cell แถวที่ 2 จะได้ค่า Detail เป็น 1 (ตัวอย่าง)

ถ้ากดที่ Cell แถวที่ 2 จะได้ค่า Detail เป็น 1 (ตัวอย่าง)

ไม่ยากเลยใช่ไหมครับ วิธีการสร้างแอพฯแบบง่ายๆ ส่วนตัว หรือ SMEs ที่เป็นแอพฯ ให้ข้อมูลอย่างเดียวก็จะสร้างเสร็จใน 15 นาทีเลย

ดาวน์โหลด Source Code ได้ที่ http://code.google.com/p/daydev/
หรือไปทักทายกันได้ที่ http://www.facebook.com/daydevthailand 

Comments

daydevthailand@gmail.com

<p>อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์<br /> ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)</p>

Review overview

POST A COMMENT

%d bloggers like this: