iPhone Programming – Begin

บทความนี้เขียนโดยสมมติว่าคุณรู้เรื่อง Cocoa มาบ้าง

เอาละ ไหนๆ ก็รับปากว่าจะเขียน iPhone Tutorial ไปแล้ว จะเบี้ยวก็กะไร ก่อนอื่นก็บอกก่อนว่า โปรแกรมแรกที่เราจะเขียนนั้นคือ โปรแกรม นับจำนวนตัวอักษร ( คุ้นๆม่ะ ) มันก็โปรแกรม แรกที่ได้เขียน cocoa นั่นเหละ แต่วันนี้เราจะมาลองเขียนสำหรับ iPhone กัน ต้องขอออกตัวก่อนเลยนะครับว่า นี่เป็นการเขียน แบบทดลองเขียน สำหรับตัวผมเองก็เพิ่งจะเริ่มศึกษาเหมือนกัน แต่คิดว่า มันน่าจะเป็น Tutorial ทำให้คนที่ยังไม่รู้จะเริ่มยังไง พอจะจับทิศทางได้ว่า จะศึกษาอะไรก่อน

เอาละก่อนอื่น สำหรับคนที่ไม่รู้เรื่อง Cocoa มาก่อนแนะนำว่า ควรไปศึกษามาก่อน

เพื่อเป็นการไม่เสียเวลา มาเริ่มกันเลย

First Step

ก่อนอื่นก็เปิดโปรแกรม XCode ขึ้นมาแล้วก็สร้างโปรเจค Cocoa Touch Application ดังรูป

ก็เหมือนๆกับ สร้าง Cocoa Application นั่นเหละครับ โดยในตัวอย่างผมตั้งชื่อว่า iPhoneStringCount

หลังจากนั้นก็จะเห็น File หลายๆไฟล์ ก็จะแบ่งออกง่ายๆ เป็น

1. iPhoneStringCountAppDelegate
2. iPhoneStringCountViewController

และก็จะเห็นว่ามี xib  ไฟล์ 2 Files นั่นคือ

1. MainMenu.xib และ
2. iPhoneStringCountViewController.xib

คำถามคือว่า 2 xib นี้มันต่างกันยังไง ?
ก็ง่ายๆเลยครับคือว่า MainMenu.xib ก็คือ ตัวหลักของ interface หลักของโปรแกรม เป็นตัวจัดการ view ย่อยๆที่อยู่ในโปรแกรมของเรา ถ้าเปิดมาดูจะเห็น Object ต่างๆในรูป

ซึ่งจะเห็นว่ามี UIViewController ที่ชื่อว่า “iPhone String Count View Controller” ก็สรุปว่า MainMenu.xib  นี้ก็ไม่ต้องไปแก้ไขอะไร

สิ่งที่เราจะออกแบบก็คือ view ย่อยๆนั่นเอง ซึ่งในโปรเจคนี้ก็คือ iPhoneStringCountViewController.xib ก็เปิดไฟล์นี้ขึ้นมา ก็จะเห็นหน้าตา interface builder แบบนี้

หลังจากนั้นก็ออกแบบหน้าตาโปรแกรมกัน โดย double click ไปที่ view หลังจากนั้นก็ละเลง โดยหน้าตาของโปรแกรมเราก็ไม่ได้มีอะไรมาก interface ประกอบไปด้วย

• UITextField เพื่อเป็นส่วนของ input
• UILable เป็นส่วน output ของโปรแกรม
• และปุ่ม UIButton อีก 1 ปุ่ม

และแล้วหน้าตาของโปรแกรม ก็จะออกมาแบบนี้

AppController Class

ถ้ายังพอจะจำ Cocoa Programming ได้จะเห็นว่าเกือบจะทุกครั้ง เราจะทำการ สร้าง Class ที่ชื่อว่า AppController เพื่อเอาไว้จัดการ interface โดยเราจะประกาศ member ที่เป็น outlet ไว้ที่ class นี้  แต่ครั้งนี้เราไม่ต้องเพิ่ม AppController เข้าไปเพราะว่า เราได้มี Class ที่ทำหน้าที่เหมือน AppController อยู่แล้ว นั่นก็คือ iPhoneStringCountViewController ( ส่วน คลาส AppDelegate นี้เป็นตัวจัดการกับ view ย่อยๆ แต่ในโปรแกรมนี้เรามีแค่ 1 view ฉนั้นเราก็ไม่ต้องไปทำอะไรกับมัน )

ก็เหมือนๆกับ การเขียน Cocoa ปกติเราต้องประกาศ  member ที่เป็น outlet เพื่อเอาไว้เชื่อมกับ interface ที่ได้ออกแบบไว้ และก็ต้องมี method ที่เป็น action สำหรับ button ที่เราได้ทำไว้

งั้นเราประกาศ member ที่ชื่อว่า m_textInput เพื่อเป็นส่วนของ input และ m_textOutput เพื่อเป็นส่วนของ output ของโปรแกรม และเราก็มี method ที่ชื่อว่า countString เพื่อจะเป็น action สำหรับการกดปุ่ม

เราก็เปิด file iPhoneStringCountViewController.m และก็เขียนได้แบบนี้ครับ

@interface iPhoneStringCountViewController : UIViewController { IBOutlet UITextField *m_textInput; IBOutlet UILabel *m_textOutput; }   - (IBAction) countString:(id) sender;   @end

ก็เป็นว่าตอนนี้เราก็ได้ เขียน class เรียบร้อยแล้ว งั้นขั้นตอนต่อไปก็คือ การเชื่อมกับ Interface ที่ได้ออกแบบไว้

Back to Interface Builder

ก็หลังจากแก้ไข class แล้วต่อไปก็คือทำให้มันเชื่อมต่อกับ interface วิธีการก็ไม่ได้ยาก ทำเหมือน Cocoa ดั้งเดิมทุกประการ ถ้ายังจำ Cocoa Tutorial แรกได้ผมจะเพ่ิม Object เข้ามา นั่นก็คือ Instance ของ AppController แต่สำหรับ ครั้งนี้เราไม่ต้องไปเพิ่มเข้ามาเพราะว่า File’s Owner นั้นก็เป็น Instance ของ ViewController อยู่แล้ว ฉนั้นแล้วเราก็ Click ขวาที่ File’s Owner เลยครับจะเห็น panel ดังรูป

จะเห็นว่ามี Outlet ที่ชื่อว่า m_textInput และ m_textOutput อยู่แล้ว หลังจากนั้นเราก็ลากไปเชื่อมกับ interface ดังรูป

และขั้นตอนต่อไปเราก็เชื่อม button ของเรากับ action ที่เราได้ประกาศไว้นั่นก็คือ countString ก็คือลาก กด ctrl ค้างที่ ปุ่มแล้วก็ลากมาดังรูป

ก็จะเห็นว่ามี Panel ขึ้นมา ก็เลือก countString

ก็เป็นอันเสร็จในส่วนของ การเชื่อมระหว่าง Interface กับ Outlet

Implement

และส่วนสุดท้ายก็คือการเขียน Implement นั่นเอง ก็ไม่ได้มีอะไรมาก เราก็ทำการ รับ input มาจาก UITextField และก็นับจำนวนสตริง หลังจากนั้นก็ แสดงมาที่ UILable สำหรับ Code ก็เปิด File ที่ชื่อว่า iPhoneStringCountViewController.m  แล้วก็เขียน countString ลงไป แบบนี้

- (IBAction) countString:(id) sender { int count = 0; NSString *text = [m_textInput text]; count = [text length]; [m_textOutput setText:[NSString stringWithFormat:@"String Length: %i",count] ];   }

เพียงเท่านี้ก็เป็นอันเสร็จ เรามาลอง Compile และ Run ดูครับ ก็จะได้โปรแกรมหน้าตาแบบนี้ ก็ลองพิมพ์และลองกด click me ก็จะได้ผลลัพธ์ออกมา