วันพุธที่ 6 กรกฎาคม พ.ศ. 2554

iPhone: XCode4 Assistant Editor

iPhone: XCode4 Assistant Editor
พอดีได้เข้าไปอ่านสไลด์พรีเซนของ WWDC 2011 เรื่อง "Using Interface Builder in XCode 4" มีจุดหนึ่งน่าสนใจมากครับคือ Assistant Editor เป็นตัวช่วยในการเขียนโค้ดที่เชื่อมกับ Interface Builder จุดเด่นคือเราไม่ต้องเขียนโค้ดเองในส่วนการประกาศตัวแปร IBOutlet, IBAction, property มาลองดูกันเลยครับ



เงื่อนไขเล็กน้อยนะครับ เราต้องใช้ XCode4 เท่านั้นนะครับ เริ่มกันเลยนะ

1) กดไฟล์ .xib แล้วกดปุ่ม Assistant Editor ตรง Editor ก่อน ตามภาพด้านล่างครับ จะเห็นว่ามีทั้งภาพของ Interface Builder กับไฟล์โค้ด .h ที่เชื่อมกับไฟล์ .xib ของเรา จากตัวอย่างผมลาก UI มาใส่เพื่อทดสอบตามภาพครับ



2) ตัวอย่างการใส่ชื่อตัวแปรของ UIImageView

2.1) คลิกขวาที่ UIImageView ที่เมนู Referencing Outlets แล้ว กดลากไปยังไฟล์ .h ตรง @interface ตามภาพด้านล่าง



2.2) เมื่อลากเสร็จแล้วจะ มี popup ขึ้นมาให้ใส่ชื่อตัวแปร ที่ช่อง Name ตัวอย่างผมใส่ว่า myImageView



2.3) เมื่อทำเสร็จแล้วเราจะเห็นชื่อตัวแปร ปรากฏขึ้นในไฟล์ .h ประกาศให้เราเป็น IBOutlet UIImageView *myImageView ให้โดยอัตโนมัติ และใน connection ก้อเชื่อมให้อัตโนมัติเช่นกัน



3) ตัวอย่างการใส่แบบให้ขึ้น property

3.1) ให้เราลากไปวางนอกวงเล็บของ @interface จากตัวอย่างผมลาก Reference จาก table ไปยังนอกวงเล็บของ @interface ดังภาพ



3.2) ใส่ชื่อตัวแปรที่ต้องการลงไปในช่อง Name ตัวอย่างผมใส่ myTable



3.3) เมื่อเรียบร้อยแล้วจะเห็นว่า ใน @interface มันจะใส่โค้ดให้อัตโนมัติคือ UITableView *myTable ส่วนใน @property มันก้อใส่ให้อัตโนมัติเหมือนกันว่า @property (nonatomic,retain) IBOutlet UITableView *myTable



4) การใช่ฟังก์ชั่นที่เป็น Event ของ UI

4.1) คลิกขวาที่ UI ที่ต้องการ แล้วเลือกไปที่ Event แล้วลากเข้าไปที่ ด้านนอกวงเล็บของ @interface ในไฟล์ .h ตัวอย่างผมเลือกที่ slider กดคลิกขวาเลือก Value Changed Event

4.2) ใส่ชื่อฟังก์ชั่นที่ต้องการลงที่ช่อง Name ตัวอย่างผมใส่เป็น slide (ยังมีพารามิเตอร์อีกหลายช่องนะครับ ลองปรับใส่กันดู)



4.3) เมื่อเสร็จแล้วจะเป็นว่ามันจะสร้างโค้ดฟังก์ชั่นให้เราเลยในไฟล์ .h และเชื่อม connection ให้เราด้วย (ที่บรรทัด 19 เห็นหรือป่าวเอ่ย!)



 

5) สุดท้ายแล้ว จากที่เราลากๆๆ กันเยอะแล้วนิ เรามาดูที่ไฟล์ .m กันดีกว่าครับว่า มันทำอะไรไปบ้าง

สิ่งที่มันพิมพ์ให้โดยอัตโนมัติคือ

  • มัน synthesize กับ propertyเรา

  • กำหนดการ release และ set nil ให้เราด้วย

  • แล้วในฟังก์ชั่น Event ก้อทำให้เราอัตโนมัติเลย



ถือว่าฟังก์ชั่น Assistance Editor เป็นฟังก์ชั่นที่อำนวยคำสะดวกแก่เรามากนะครับ จากตัวอย่างทั้งหมดที่ได้นำเสนอไปนี้แค่เพียงใช้กับ Interface Builder เท่านั้นนะ มันยังมีประโยชน์เยอะกว่านี้อีก เดี๋ยวผมจะเอามาให้ศึกษาอีกเรื่อยๆ ครับ หากเพื่อนๆ คนไหนมีข้อแนะนำหรือสงสัย เม้นเข้ามาได้เลยนะครับ วันนี้เอาแค่นี้ก่อน สวัสดีครับ

adaydesign :)

1 ความคิดเห็น: