อย่างที่บอกไปครับว่าหลังจากที่เราได้มั่วๆเขียน iPhone  กันไปตั้งแต่แรกๆ ดังในตัวอย่าง http://www.macfeteria.com/2008/09/iphone-programming-begin หลายคนอาจจะทำตามโดยที่ไม่รู้อะไรเลย เอาเป็นว่าวันนี้ผมจะอธิบายให้เข้าใจเบื้องต้นก่อนแล้วกัน โดยปกติแล้วการเขียนโปรแกรมด้วย Cocoa นั้น นอกจากเราจะเขียน Class และประกาศ member , variable , method ต่างๆแล้ว ยังมีส่วนสำคัญอยู่อีก สองอย่างคือ

IBOutlet

IBOutlet เป็นการประกาศให้ IB ( interface builder ) รับรู้ว่า ตัวแปรนี้ สามารถเชื่อมต่อเข้ากับ Object ใน nib , xib ได้  พูดอีกในทางหนึ่งได้ว่า IBOutlet จะเป็นตัวแทนของ Object ที่เราได้ออกแบบใน IB นั่นเอง

IBAction

เมื่อเราต้องการให้ Control ต่างๆใน interface builder สามารถตอบสนองต่อ action ได้ เราต้องประกาศ method ให้เป็น IBAction ยกตัวอย่างว่า ถ้าเราจะเขียนว่า กดปุ่มแล้วให้ไปเรียกใช้ method นี้ เราต้องประกาศใน method ให้เป็น IBAction โดยปกติแล้ว การประกาศ IBAction จะรับ parameter เป็น idโปรแกรมที่เราจะได้ทดลองเขียนกันวันนี้ไม่มีอะไรมากเลยครับ เป็นโปรแกมทดลองการใช้งาน IBOutlet และ IBAction โดยหน้าตาโปรแกรมเป็นดังรูป

โปรแกรมที่เราจะทำ ก็คือ เมื่อเรากด ปุ่มมันก็จะเปลี่ยน ตัวหนังสือ บนปุ่มให้เป็นเหมือนข้อความใน text field เช่นว่า ถ้าเราพิมพ์ Hello World ถ้ากด Button A มันก็จะเปลี่ยนกลายเป็นคำว่า Hello World ตามไปด้วย ง่ายไม๊ครับ ? ก้ออย่างที่บอกไปว่า เราต้องการจำทำความเข้าใจ เกี่ยวกับ IBAction และ IBOutlet งั้นมาเริ่มเลย

ก่อนอื่นก็เปิด Project ใหม่ขึ้นมา ให้เป็นแบบ View-Base Application จะตั้งชื่อว่าอะไรก็ได้นะครับ อย่างตัวอย่างนี้ผมตั้งว่า ButtonDemo

หลังจากันนั้น เราก็จะออกแบบหน้าตา interface ของเรา โดยเปิดไฟล์ ButtonDemoViewController.xib ขึ้นมา ( ถ้าหากว่าตั้งชื่อ Project เป็นอย่างอื่น ก็จะเห็น .xib ชื่อประมาณว่า xxxxxxxController.xib แทน ) แล้วเราก็วาง Text Field แล้ว Round Rect Button

หรือเราอาจจะอยาก ตกแต่ง Button ของเราให้มีสีสันก็ทำได้ โดยที่เราเปิด Inspector ขึ้นมาและ เลือกไปยัง Attributes แล้วเราก็เปลี่ยน สีของตัวหนังสือ ก็ได้นะครับ

เมื่อเราได้ออกแบบหน้าตาโปรแกรมเป็นดังที่เราต้องการแล้ว ลำดับต่อไปก็คือ การเขียน Code ก็เริ่มด้วยการเขียน code เพิ่มเข้าไปยัง ButtonDemoViewController.h

@interface ButtonDemoViewController : UIViewController
{
	IBOutlet UITextField *m_textBox;
}
-(IBAction) printTitle:(id) sender;
@end

ดูจาก Code ข้างบน เราได้ประกาศ IBOutlet ที่เป็น UITextField ขึ้นมา ก็เพื่อว่า เราต้องการที่จะ นำข้อความที่เราพิมพ์ ใน text Field มาแสดงยัง button ของเรา ฉนั้นแล้วเราก็ต้องประกาศ Outlet เพื่อให้ ButtonDemoViewController สามารถใช้งาน UITextFields ที่เราได้ออกแบบใน .xib ได้นั่นเอง

มาถึงตรงนี้ อาจจะสงสัยว่า แล้ว Button อีกทั้งสองอัน ไม่ต้องประกาศ outlet ด้วยหรือ ? คำตอบก็คือไม่ต้องครับ เพราะว่า เราไม่ต้องการใช้ค่าต่างๆของ button หรือปรับเปลี่ยนค่าของ button ต่างกับ text Field ที่เราต้องการ ค่าที่ได้จากการพิ่มพ์เข้ามา เราถึงต้องประกาศให้มี IBOutlet ที่เป็น UITextField สำหรับปุ่มของเรานั้นต้องการคือ เมื่อกดปุ่มแล้วจะให้ทำอะไร ดังนั้นจึงต้องประกาศ action ขึ้นมา นั่นก็คือ เราได้ประกาศ printTitle ขึ้นมาเป็น Action ของการกดปุ่มนี้

หลังจากนั้น เราก็กลับมายัง Interface Builder อีกครั้ง เพื่อทำการเชื่อมต่อ xib ของเราเข้ากับ action และ outlet ที่เราได้ประกาศไว้ โดยเรา

• Click ขวา ที่ File’s Owner ของเรา
• กดที่ ช่องกลมๆ แล้วลากไป ยัง text field

สิ่งที่เราได้ทำไป ก็คือ เราได้บอกว่า ให้ m_textBox ของเรา ได้เชื่อมเข้ากับ Text Field ที่เราได้ออกแบบไว้ พูดง่ายๆก็คือว่า เราได้ให้ m_textBox ของเรามีค่าเท่ากับ Text Field ที่เราได้ออกแบบไว้นั่นเอง

เมื่อเราได้เชื่อม text field แล้ว สิ่งต่อไปที่จะต้องทำ ก็คือ เราจะสั่งให้ปุ่ม เมื่อถูกกดแล้วไปทำ Action อะไร วิธีการก็ไม่ยากครับ

• เลือกปุ่มแล้วกด Ctrl ค้าง
• ลากมายัง File’s Owner แล้วปล่อย mouse
  
• หลังจากนั้นเราจะเห็น Panel (กล่องสีดำๆ) ขึ้นมา แล้วก็เลือกไปที่ printTitle
  
• ในส่วนของ Button อีกอันก็ทำแบบเดียวกัน
• ถ้ากด Click ขวาที่ File’s Owner สังเกตตรง Receive Actions จะเห็นดังรูป แสดงว่าทำถูกแล้ว
  

ต่อไป เราก็จะเขียน code ในส่วนของ action ที่เราได้ประกาศขึ้นมา โดยเปิด  ButtonDemoViewController.m ของเรา แล้วก็เพิ่ม code เข้าไปดังนี้

-(IBAction) printTitle:(id) sender
{
 
	if (m_textBox.text != @"")
	{
		[sender setTitle:m_textBox.text forState:UIControlStateNormal];
	}
}

ดูจาก Code ของโปรแกรม อธิบายการทำงานคร่าวๆ ได้ว่า

• เมื่อปุ่ม ถูกกด มันจะเรียก printTitle พร้อมกับส่ง parameter ที่เป็นบอกว่าใครเป็นคนกด ( sender )
• หลังจากนั้นไปเรียกใช้ method ที่ชื่อว่า setTitle: forState:  โดยเราก็นำข้อความ จาก m_textBox และกำหนดให้อยู่ใน state ปกติ

ลอง Compile ดูครับ แล้วลองพิมพ์ข้อความ แล้วก็กด ปุ่มดูครับ จะเห็นว่า ปุ่มที่ถูกกด จะถูกเปลี่ยนข้อความบนปุ่ม

Object State

ถ้าสังเกต ดูดีๆ เวลาที่เรากดปุ่ม B ค้างไว้ จะเห็นว่าข้อความจะเป็น “Button B” เมื่อปล่อยแล้วถึงจะเป็น “Hello World” ดังรูป

เพราะว่า จาก code ของเราจะเห็นว่าเราได้ setTile: forStete ให้เป็น UIControlStateNormal เมื่อขณะที่ปุ่มได้ถูกกด state ของปุ่มจะเปลี่ยนเป็น UIControlStateHighlighted ถ้าเราเปลี่ยน code จาก UIControlStateNormal ข้างบนให้เป็น UIControlStateHighlighted ก็จะเห็นผลลัพธ์ แบบนี้

More Event

อย่างที่เราได้ลองกันไป จะเห็นว่า Event สำหรับปุ่มนั้น ที่เราได้ทำไปคือ “ปุ่มได้ถูกกดลงไป” เท่านั้นเอง
จริงๆแล้ว UIButton นั้นสามารถรับ event ต่างๆได้มากมาย อาทิเช่นการ Drag เราสามารถกำหนด ให้ event ต่างๆ สามารถเรียกใช้ action ต่างกันก็ได้ ถ้าเราลองกด click ขวา ที่ปุ่มของเราก็จะเห็น Panel ดังรูป

จะเห็นว่ามี Events ต่างๆมากมาย และจะพบว่า Event ที่ได้เรียก printTitle: นั้นคือ Touch Up Inside คือแปลได้ว่า ” กดปุ่ม และ เมาส์ก็ยังอยู่ในบริเวณปุ่ม ” เราลองกด ปุ่ม Button B แล้วลองเลื่อน mouse ออกนอกปุ่มดูสิครับ จะเห็นว่า ข้อความไม่เปลี่ยน นั่นก็เพราะว่า Event ที่เกิดขึ้นไม่ใช่ Touch Up Inside แต่เป็น Touch Up Outside

เราสามารถทดลองการใช้งาน Event อื่นๆได้ เช่นเราเพิ่ม IBAction เข้าไป โดยให้ ชื่อว่า setHelloWorld และมี code แบบนี้

-(IBAction) setHelloWold:(id) sender
{
	[sender setTitle:@"Hello Macfeteria" forState:UIControlStateNormal];
}

แล้วสิ่งที่เราจะทำก็คือ เราจะลองใช้ event ที่ชื่อว่า Touch Drag Exit

การใช้ Event อื่นๆก็ไม่ได้ยากครับ คือ เราก็ลาก mouse ที่จาก Event ที่เราต้องการไปยัง File’s Owner

แล้วก็เลือก Action ที่เราต้องการ ดังรูป ( เราก็เลือก setHelloWorld)

แล้วเราก็ลอง Compile แล้วก็ลอง กด ไปที่ปุ่ม แล้วก็เลื่อน mouse ออกไป จนสุดๆ จะเห็นว่า ปุ่มของเราจะเปลี่ยนเป็น Hello Macfeteria ดังรูป

ก็เป็นอันจบ สำหรับ tutorial นี้ครับ คิดว่าน่าจะเข้าใจ เรื่องของ Action & Event รวมถึง Outlet นะครับ ครั้งหน้าเราจะได้ลองใช้งาน UI อื่นๆเพิ่มมากขึ้น

สงสัย แนะนำ คอมเม้น กันได้ครับ ถามใน Forum ก็ได้ครับ

Technorati Tags: cocoa, cocoa touch, iphone, programming

Cocoa & Cocoa Touch

อย่างที่ผมได้บอกไปแล้วว่า ถ้าหากเราต้องเขียนโปรแกรมด้วย Objective-C แล้วนั่นก็หมายถึงว่าเราต้องเขียนด้วย Cocoa Framework และถ้าเป็น iPhone ก็จะเป็น Cocoa Touch ซึ่งเป็น Framework ขนาดเล็กกว่าและเพิ่มเติมในบางส่วน สิ่งที่ควรจะรู้เกี่ยวกับ iPhone และ Cocoa Touch นั้นก็คือ

• iPhone นั้นสามารถใช้งานได้เพียง 1 โปรแกรม
• iPhone มีหน้าขนาดหน้าจอที่จำกัด
• เราไม่สามารถเข้าไปใช้ File ของ App ตัวอื่นๆได้นอกจาก App ของมันเอง
• Cocoa Touch ไม่มี Garbage Collection
• Cocoa Touch ไม่มี Binding
• Cocoa Touch ไม่มี Core Data ( ตอนนี้มีใน SDK 3.0 แล้ว ) 
• iPhone มีทรัพยากรณ์ที่จำกัด ram , diskspace , cpu

New Project

อย่างที่ได้บอกไปว่า ครั้งก่อนผมได้ทดลองเขียน iPhone กันแบบมั่วๆไป และครั้งนี้เราจะมาทำความเข้าใจเกี่ยวกับ iPhone Project กันมากขึ้น โดยเริ่มจาก การสร้างโปรเจคกันเลย ถ้าหากเราเปิด Xcode ขึ้นมาและเริ่มสร้างโปรเจค จะพบว่า มีหลายๆ Template ให้เลือก ดังรูปภาพ

แต่ละโปรเจคนั้นก็จะมีรายละเอียดต่างๆ ดังนี้

• Navigation-Based Application
  ก็แปลตรงตัวเลยครับคือ เป็นโปรเจคที่แสดงในรูปแบบ Navigation ( จะเป็นลักษณะ Heirachy คือมีลำดับ )
• OpenGL ES Application
  แบบนี้ก็ใช้เขียน Appplication จำพวก Game
• Tab Bar Application
  โปรเจคแบบนี้จะมี Tab เป็นตัวเปลี่ยนหน้าต่างไปมา โดยไม่ได้เรียงลำดับเหมือน Navigation
• Utility Application
• View-Based Application
  แบบนี้เป็นโปรเจคที่มี view เพียงอันเดียว ** โดยส่วนมากใน tutorial ผมจะใช้อันนี้ **
• Window-Based Application
  โปรเจคแบบนี้จะเป็นพื้นๆเลยครับ คือมี Application Delegate มาให้แค่นั้นเอง

Files

เมื่อเราได้สร้างโปรเจคขึ้นมาจะพบว่ามี File ต่างๆมากมายดังที่ผมเคยได้อธิบายไป ใน post ก่อนๆ แต่อาจจะอธิบายขาดหายไปในบางส่วน ครั้งนี้ก็อธิบายให้ครบเลยละกัน

จากรูปข้างบน จะเห็นว่ามี File ต่างๆมากมาย อันได้แก่

• .m และ .h ไฟล์สองแบบนี้ก็คือ Header กับ Source นั่นเหละครับผมไม่แน่ใจว่า ภาษาอื่นๆ เค้าประกาศ Class กันแบบแยก Header – Source แบบนี้หรือเปล่า แต่ถ้าเป็น C/C++ ไฟล์จำพวก .h จะเป็น Header เอาไว้ประกาศ Class ส่วน .m และ .c และ .cpp จะเป็น ส่วนของ implement.
• .pch เรียกว่า pre compile header ครับไฟล์นี้จะรวมรายชื่อ header ของ framework อื่นๆที่ต้องใช้ในโปรเจคและทำการ pre compile ก่อน เพื่อลดเวลาในการ compile
• .framework เป็น Library นั่นเอง
• .plist ไฟล์นี้เป็น property list ครับ เก็บค่า property ของ application ของเราเช่น บอกว่า icon ของ app ใช้ resource file ไหน
• .xib เป็น interface สำหรับโปรแกรมของเรา
• .app  ก็คือตัว Appication ของเรานั่นเหละครับ

Interface Builder

ทุกครั้งที่เราจะต้องออกแบบหน้าตาโปรแกรมของเรา เราจะใช้ interface builder และแน่นอนว่า File ที่เกี่ยวข้องก็คือ .xib นั่นเอง เว้นแต่ว่าเราจะเขียนโปรแกรมที่ต้องใช้ พวก OpenGL เราก็แทบจะไม่ต้องใช้ interface builder เลย และเมื่อเราได้ double click ที่ .xib ของเราจะเห็นหน้าตาของโปรแกรม interface builder ดังรูป

จริงๆหน้าต่าง ของ interface builder สำหรับ iPhone นั้นก็แทบจะไม่ได้ต่างจาก การเขียน application ปกติสักเท่าไหร่ แต่ถ้าดูดีๆ จะเห็นว่า หน้าต่าง inspector นั้นจะมีแค่ 4 tab เท่านั้นเอง

นั่นก็คือ Attributes , Size , Connection , Identity ซึ่งจะพบว่าสิ่งที่ขาดไปก็คือ Binding , Effect , ApplcScript

Xib File

และถ้าเราดูตรง Document Windows จะเห็นว่า มี Object อยู่สองตัวเสมอๆ คือ File’s Owner กับ First Responder

ความสำคัญของ Object 2 ตัวนี้ก็คือ

• File’s Owner เป็นตัวแสดงถึง Object ที่ได้โหลดไฟล์ Nib ตัวนี้หรือพูออีกอย่างก็คือเป็นเจ้าของ Nib นั่นเอง
• First Responder นั้นเป็น เป็น Object ที่จัดการ interaction ของ object ที่กำลังโดนกระทำอยู่ ณ ขณะนั้น คือยกตัวอย่างเช่นถ้าหากเรากำลังพิมพ์ข้อความใน textbox นั่นก็แปลว่า textbox คือ responder นั่นเอง และถ้าหากเราเปลี่ยนไปกดปุ่ม ปุ่มก็จะกลายเป็น  responder แทน และ First Responder  นี้ก็จะช่วยให้โปรแกรมรู้ได้ว่า Object ไหนควรจะถูก responder นั่นเอง

เมื่อเราได้สร้างโปรเจคโดยให้ชื่อว่า Test และเลือกแบบ View-Based Application จะเห็นว่ามี .xib ทั้งหมดสอง files ด้วยกัน ( ดูจากรูป ที่ 2 ) นั่นคือ MainWindows.xib กับ TestViewController.xib และถ้าเราเปิด MainWindows.xib ขึ้นมาเลือกไปที่ File’s Owner จะพบว่า Object ที่โหลด xib ตัวนี้ก็คือ UIApplication ดังรูป

และถ้าเรากดดูที่ Test View Controller ( icon ทีเป็นรูป วงกลมแล้วมีสี่เหลี่มตรงกลาง ) ก็จะเห็นหน้าตา interface แบบนี้

ถ้าหาก เรามาลองเดาจาก interface จะมีข้อความตรงกลางที่เขียนว่า Loaded From “TestViewController.xib” ที่เห็นตรงนี้ก็น่าจะพอจะตีความได้ว่า View ที่ Test View Controller ตัวนี้เป็นตัวควบคุม จะต้องไปโหลดจาก TextViewController.xib แน่นอน แล้วเราก็ลองเปิด TestViewController.xib กันขึ้นมาดู แล้วกดไปที่ File’s Owner

จะเห็นได้ว่า File’s Owner ก็คือ TestViewController นั่นเอง

น่าจะพอเข้าใจ File’s Owner กันนะครับ สรุปก็คือเป็น Object ที่แสดงว่า ใครเป็นคนโหลด xib ตัวนี้นั่นเอง

iPhone Simulator

เมื่อเราได้เขียนโปรแกรมเรียบร้อยแล้ว และทำการ compile ไปแล้วนั้นจะพบว่า Xcode จะเปิด application ตัวใหม่ขึ้นมานั่นก้อคือ iPhone Simulator ตัว simulator นี้ผมคิดว่าเป็น  simulator ที่ดีที่สุดของการพัฒนาโปรแกรมบนมือถือเลยก็ว่าได้ ( ถ้าใครได้ลองเขียนโปรแกรมพวก Symbian จะพบว่าตัว simulator ของมันแย่มากๆ )  เพราะว่ามันแทบจะไม่ต่างอะไรกับของจริงเลย และเรายังสามารถปรับเปลี่ยน Version หรือ จะหมุนซ้าย หมุนขวา หรือแม้กระทั่ง จำลอง Memory Warning ได้ด้วย

และถ้าเริ่มเขียนโปรแกรมไปเยอะแล้ว ไม่รู้ว่าจะลบโปรแกรมที่เขียนไปได้ยังไง ก็ดูตามรูปได้เลยครับ คือเข้าไปยัง เมนูและเลือก reset

วันนี้จบเพียงเท่านี้ แนะนำติชม คอมเม้นได้ครับ

Technorati Tags: cocoa, iphone, xcode

ก็อย่างที่บอกไปแล้วว่าการเขียนโปรแกรมด้วย Cocoa นั้นค่อนข้างจะมีการใช้งาน MVC ค่อนข้างเยอะ และ code ส่วนมากก็คือการนำ data มาแสดงผล ซึ่ง class ที่ต้องเกี่ยวข้องก็คือ Controller ( Model – View – Controller )

NSController ก็คือ Class ที่ช่วยให้เราลดการเขียน Glue Code ( class ที่เป็นตัวเชื่อมในการนำข้อมูลออกมาแสดงผลที่ interface ) แต่ class ที่เราจะทดลองใช้กันจริงๆก็คือ NSArrayController ซึ่งเป็น subclass ของ NSController และวันนี้เราจะได้มาสร้างโปรแกรมง่ายๆกัน นั่นคือ โปรแกรมที่เอาไว้เก็บ คะแนน ของนักเรียน เหมือนดังที่เราได้ทดลองเขียนกันในตอนใช้งาน NSTableView ครั้งก่อนๆ

เริ่มเลยละกัน ก่อนอื่นเราก็สร้าง Cocoa Application โปรเจคขึ้นมาใหม่ โดยให้ชื่อว่า StudentScoreReport ดังรูป

และหลังจากนั้นเราก็ เพ่ิม class ที่ชื่อว่า AppController เหมือนเดิม แล้วก็เพ่ิม class ที่มีชื่อว่า StudentData เข้าไปด้วย

ส่วน Source Code ของ ทั้งสอง class ก็มีดังนี้

AppController.h

#import <Cocoa/Cocoa.h>
 
@interface AppController : NSObject
{
	NSMutableArray *m_studentList;
}
 
@property (retain) NSMutableArray *m_studentList;
@end

AppController.m

#import "AppController.h"
 
@implementation AppController
@synthesize m_studentList;
-(id) init
{
	self = [super init];
	m_studentList = [[NSMutableArray alloc] init];
	return self;
}
 
-(void) dealloc
{
	[m_studentList release];
	[super dealloc];
}
@end

จาก code ข้างบนจะเห็นว่า AppController นั้นมีแค่ ตัวแปรเดียว คือ m_studentList ที่เป็น Mutable Array เท่านั้น และในส่วนของ code ก็ไม่มีอะไรเลย นอกจาก init และ dealloc เท่านั้นเอง

StudentData.h

@interface StudentData : NSObject
{
	int m_score;
	NSMutableString *m_name;
}
 
@property (readwrite,assign) int m_score;
@property (readwrite,copy)	NSMutableString *m_name;
 
@end

StudentData.m

@implementation StudentData
@synthesize m_name;
@synthesize m_score;
-(id) init
{
	[super init];
	m_name = @"No Name";
	m_score = 0;
	return self;
}
 
-(void) dealloc
{
	[m_name release];
	[super dealloc];
}
@end

จาก code ในส่วนของ StudentData นั้นเราได้มี ตัวแปรสองตัวที่เอาไว้เก็บ ชื่อ และ คะแนน ของนักเรียน จะเห็นว่า code ของทั้งสอง class นั้น แทบจะเรียกว่าไม่มีอะไรเลย นอกจาก การ init และ dealloc เพียงเท่านั้นเอง หลังจากนั้น เราก็เปิด MainMenu.xib ขึ้นมา เพื่อออกแบบ interface แล้วเราก็ออกแบบหน้าตาให้มีประมาณแบบนี้

เมื่อเราออกแบบเสร็จแล้วขั้นตอนต่อไปก็ทำเหมือนๆ เคยนั่นก็คือ เพ่ิม AppController Object เข้ามา ดังรูป

ลำดับต่อไปก็คือ เราจะเพ่ิม Array Controller เข้ามายัง xib ของเรา โดยที่เราก็ลาก Array Controller จาก Library เข้ามา ก็จะเห็นดังรูป

แล้วเมื่อเรามี Array Controller แล้ว ต่อมาเราก็จะ set attribute ของ Array Controller ของเรากัน สิ่งที่เราจะต้อง set ก็คือ Object Controller เราก็เลือกเป็น StudentData และเราก็เพ่ิม key เข้าไป 2 key นั่นก็คือ m_name  และ m_score ตามรูป

ที่เราได้ทำไปนั้น คือเป็นการบอกว่า ให้ Array Controller ตัวนี้จัดการกับ StudentData และเราก็ได้ เพิ่ม key เข้าไปเพื่อให้ Array Controller ของเราได้ เข้าสู่ข้อมูลของ StudentData ได้นั่นก็คือ m_name และ m_score

หลังจากนั้นเราจะ Bind Array Controller เข้ากับ App Controller เพื่อให้ Array Controller ตัวนี้จัดการ array โดยมี m_studentList เป็นตัวเก็บข้อมูล

เมื่อเสร็จตรงส่วนี้แล้ว เราก็จะไป Bind ข้อมูลในตรางที่เราได้สร้างขึ้นมา กับ Array Controller ของเรา วิธีการก็คือ เลือกไปที่ Column ของ Table แล้วก็ตั้งค่าของ Value ให้มี Control Key เป็น arrangedObjects และ Model Key Path เป็น m_name ดังรูป

และอีก Column ก็ทำเหมือนกัน แต่เราเปลี่ยน Model Key Path ให้เป็น m_score ดังรูป

เพียงเท่านี้ก็เป็นอันเสร็จ ขึ้นตอนการ Bind

สรุป

• เราได้ Bind – Array Controller ของเราเข้ากับ App Controller โดยมี m_studentList เป็น key
• และเราก็ได้ Bind ค่าที่จะแสดงผลที่ Table เข้ากับ Array Controller โดยใช้ m_name และ m_score เป็น key

แต่ยังไม่เสร็จ เหลือส่วนสุดท้ายก็คือ Button ของเรานั่นเอง อย่างที่บอกไปแล้วว่า Array Controller  ของเรานั้นจัดการ Array ให้เราตั้งแต่ Add, Remove, Insert ข้อมูล ดังนั้นเราก็ไม่ต้องไปเขียน method พวกนี้ ( ลดการเขียน Glue Code )

เพียงแค่เราเชื่อม Action ที่ต้องเรา เข้ากับ ปุ่มที่เรามี เพียงเท่านี้ก็ใช้งานได้  ดูรูปประกอบ

จากรูป ข้างบน เราได้เชื่อม Received Action – add เข้า ปุ่ม Add ของเรา และ ก็เชื่อม Received Action – remove เข้ากับปุ่ม Remove เพียงเท่านี้ก็เสร็จ

ลอง Compile ดูครับ แล้วเราก็จะพบกับ หน้าต่าง Windows เหมือนดังรูป

ก็ลองกด Add ดูครับ จะเห็นว่า มี item เข้าไปยังตาราง แล้วเราก็ยังแก้ไขข้อมูล โดยการกด click ไปที่ตาราง และก็สามารถ remove item ได้ด้วย

จากโปรแกรมที่เราได้ลองเขียนไป จะเห็นว่าเราไม่ต้องไปเขียน method ที่ต้องเกี่ยวกับการจัดการข้อมูลของ Array รวมถึงการ จัดการข้อมูลที่ต้องแสดงในตารางเลย เพราะว่าเราได้ใช้ Binding , Key Value และการใช้ Property เข้ามาช่วย เราจึงลดการเขียน Glue Code ลงไปได้เยอะมาก ลองเปรียบเทียบกับที่เราได้เขียน Application ที่คล้ายกัน ตอนเมื่อผมเขียนการใช้งาน NSTableView ดูครับ

มีคำแนะนำติชม ก็เขียนเม้นกันครับ

Technorati Tags: cocoa, NSArrayController, objective-c, programming

MVC – Model View Controller

โดยปกติแล้วการเขียนโปรแกรมด้วย Cocoa เราจะใช้ MVC ( Model View Controller ) design pattern ในการเขียนโปรแกรมค่อนข้างเยอะมาก อาทิเช่น Bindings , Core Data เป็นต้น เราจะมาทำความเข้าใจกันก่อนว่า MVC คืออะไร

• Model พูดง่ายๆว่าคือ ข้อมูล อาจจะรวมไปถึงวิธีการเก็บข้อมูลด้วย เช่นเราเขียนโปรแกรมที่ต้องการ เก็บคะแนนวิชาเลขของนักเรียน เราอาจจะมี เขียน Class ขึ้นมาชื่อว่า Student เพื่อเอาไว้เก็บคะแนนและชื่อของนักเรียน
• View ก็คือส่วนที่เอาไว้ติดต่อผู้ใช้ GUI นั่นเหละครับ ยกตัวอย่างเช่น NSButton เป็นต้น
• Controller คือส่วนของการควบคุม หรือส่วนกลางระหว่าง ข้อมูลกับ GUI ยกตัวอย่างเช่น อาจจะเป็น Class ที่มี Method ที่เอาไว้ควบคุมการ add / remove รายชื่อนักเรียนเป็นต้น

และในการเขียนโปรแกรมด้วย Cocoa นั้นจะพบว่าเราต้องเขียน Class ในลักษณะ MVC ค่อนข้างเยอะมาก ดังนั้นจึงได้มี Binding เข้ามาเพื่อช่วยให้ลดการเขียน Class จำพวก Controller

Binding

จริงๆแล้วผมได้อธิบายไว้ใน http://www.macfeteria.com/2008/08/cocoa-programming-iii-key-value/ แล้วแต่จะขอยกตัวอย่างง่ายๆอีกสักตัวอย่าง เพื่อให้เข้าใจ Binding กันมากขึ้น โดยครั้งนี้เราจะ Binding ให้เข้ากับ Property ของ Class ที่เราได้เขียนไว้

การ Binding คือการที่เรานำ key (หรือตัวแปร) เชื่อมกับค่า attribute ต่างของ Object ที่เอาไว้แสดงผล เช่นสมมติว่า หน้าตาโปรแกรมดังรูป

เพื่อความเข้าใจ เรามาลองเขียนโปรแกรมทดลองกันเลยดีกว่า โดยเริ่มจาก สร้างโปรเจคขึ้นมา โดยให้ชื่อว่า Binding

หลังจากนั้นเราก็ออกแบบหน้าตาโปรแกรมให้มีลักษณะดังกล่าว ต่อไป เพิ่ม class ที่ชื่อว่า AppController เหมือนที่เราเคยทำมาเช่นเดิม

ต่อไปเราก็เขียน Code ของ AppController.h  ดังเช่นข้างล่าง

#import <Cocoa/Cocoa.h>
@interface AppController : NSObject
{
 
int m_position;
IBOutlet NSTextField *m_text;
IBOutlet NSButton *m_button;
 
}
 
@property (assign) int m_position;
-(IBAction) GetPosition:(id) sender;
 
@end

และส่วน Code ของ AppController.m ก็มีดังนี้

#import "AppController.h"
 
@implementation AppController
@synthesize m_position;
-(IBAction) GetPosition:(id) sender
{
   [m_text setStringValue:[NSString stringWithFormat:
           @"Position = %d",m_position]];
}
 
@end

จะเห็นว่าตัวอย่างโปรแกรม ก็ทำงานอย่างง่ายๆคือ มี ตัวแปร ที่ชื่อว่า m_position และมี IBOutlet อีกสองอย่างคือ NSButon กับ NSTextFields เท่านั้นเอง ส่วน code ของ implement นั้นก็มีเพียง Function ทีชื่อว่า GetPosition เท่านั้นและหน้าที่ของฟังก์ชั่นนี้ก็ไม่ได้ทำอะไรมาก นอกจาก set ค่า String เข้าไปยัง m_text แค่นั้นเอง

หลังจากนั้นก็เปิด Interface Builder แล้วก็ add  object ของ AppController เข้ามาดังรูป

ต่อไปคือ การ link NSButton เข้ากับ m_button และ NSTextFields เข้ากับ m_text เข้ากับ interface เหมือนที่เคยทำมา ดังรูป

และก็ link Function ที่เราได้เขียนไว้ นั่นคือ GetPostition เข้ากับ Button เหมือนดังรูปภาพข้างล่าง

ต่อไปส่วนที่สำคัญมาก ก็คือเราจะ Bind ตัวแปร m_position ให้เข้ากับ ตำแหน่งของ slider วิธีการ ก็ไม่ยากครับ ก็คือเราก็กลับไปที่ Interface Builder แล้วก็เปิด Inspector ขึ้นมา จากนั้นก็เลือกไปที่ Slider ที่เราได้ออกแบบไว้ แล้วเลือกไปที่ Binding Inspector ก็จะเห็น หน้าต่างเหมือนดังรูป

สิ่งที่จะต้องทำการ setting ก็คือ ในส่วนของ Value เราก็เลือก Bind To: ไปที่ App Controller แล้ว Model Key Path ของเรา ก็ใส่ m_position ลงไป
จากที่เราทำไป ก็เป็นการบอกว่า เราจะ Bind Value ของ Slider ไปยัง App Controller แล้วใช้ Key ที่ชื่อว่า m_position หลังจากนั้นเราก็ ทำการ compile ครับ

จากโปรแกรม เราก็ลองเลื่อนตำแหน่ง ของ Slider ดูแล้วหลังจากนั้น เราก็ กด Get Position ดูครับ จะเห็นว่า position text จะเปลี่ยนค่าไป เหมือนดังรูป

จะเห็นว่า เราไม่ต้องไปเขียน Function ใดๆเกี่ยวกับ Slider เลย เพราะเราได้ใช้การ Binding เข้าช่วย ถ้าหากจะพิจารณากันจริงๆแล้ว โปรแกรมทำงานอย่างไร ก็ขออธิบายอย่างง่ายได้ว่า

• จาก  AppController นั้นจะมีตัวแปร ที่ชื่อ m_position เป็น integer และเราก็ได้กำหนดให้ m_position นี้เป็น properties
• ดังนั้นแล้ว เราก็เข้าถึง m_position โดยที่ไม่ต้อง เขียน Getter/Setter
• ต่อไปเราก็ทำการ Binding Slider  โดยใช้ m_position เป็น key ดังนั้นเมื่อเราเลื่อน slider มันจะไปเรียก Setter/Getter ของ m_postion
• แต่เนื่องจาก m_position ของเราเป็น property เราจึงไม่ต้องเขียน Getter/Setter

ถ้าหากเปรียบโปรแกรม ระหว่าง http://www.macfeteria.com/2008/08/cocoa-programming-iii-key-value/ ที่ได้เคยเขียนไป ก็จะเห็นว่าเราไม่ต้องเขียน Getter/Setter

Key Value Observing

จากโปรแกรม ข้างบน ถ้าหากเรามี method อื่นๆที่ทำการเปลี่ยนแปลงค่าของ m_position โดย method อื่นๆ เช่นสมมติว่าเราเพิ่ม Button ที่ชื่อว่า Increase Position เข้าไปเพื่อเพิ่มค่าของ m_position แล้ว slider จะรู้หรือเปล่า ว่าค่าได้มีการเปลี่ยนแปลง ? คำตอบก็คือ ไม่สามารถรู้ได้ ดังนั้นถ้าหากเราต้องการให้ slider นั้นรู้ว่าได้มีการเปลี่ยนแปลงค่าของ m_position จากส่วนอื่นๆ เราก็จะใช้ Key-Value Observing เข้ามาช่วย

สมมติว่าจาก โปรแกรมข้างบน เราได้เพิ่ม ปุ่มกด Increase Position เข้าไปดังรูป

และเพิ่ม IBAction method เข้าไปที่ AppController ที่มีชื่อว่า IncreasePosition: และเขียน implement ได้ดังนี้

-(IBAction) IncreasePosition:(id) sender
{
	m_position++;
}

และเราก็เชื่อม button ของเราให้เข้ากับ IncreasePosition: ใน interface builder ดังรูป

แล้วลอง Compile และ Run ดู หลังจากนั้นก็ลองกด ปุ่ม Increse Position ดูครับ ตามหลักแล้วเมื่อเราเพิ่มค่าของ m_position จากการกดปุ่มที่เราได้เพิ่มเข้าไป slider ก็ควรจะเลื่อนตำแหน่งใช่ไหมครับ เพราะว่าค่าของ m_position ได้เปลี่ยนไป แต่เมื่อเราได้ run ดูจริงๆแล้ว จะเห็นว่า ไม่มีอะไรเกิดขึ้นเลย แต่ความจริงแล้วค่าของ m_position ก็ได้เปลี่ยนไปแล้วนะครับ ถ้าหากเราเปิด Console ขึ้นมาก็จะเห็น Log ว่าค่าของ m_position ได้เปลี่ยนเหมือนดังรูป

เอาละ แล้วเราจะทำยังไง ?

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

-(IBAction) IncreasePosition:(id) sender
{
	[self willChangeValueForKey:@"m_position"];
	m_position++;
	[self didChangeValueForKey:@"m_position"];
}

เพียงเท่านี้ก็เป็นอันเสร็จ เราลองกด Increase Position ใหม่อีกครั้ง จะเห็นว่า ตำแหน่งของ slider ก็ได้เปลี่ยนไปด้วย หรือเราอาจจะเขียนได้อีกรูปแบบคือ

-(IBAction) IncreasePosition:(id) sender
{
	[self setM_position: m_position+1 ];
}

ก็ใช้งานได้เหมือนกัน เพียงแต่เราได้ใช้ Key Value เข้ามาช่วย และในครั้งหน้าเดี๋ยวเราจะได้ใช้ Binding กับ Array Controller ครับ

Technorati Tags: cocoa, ojective-c, programming

และในตอนนี้มีหนังสือ เกี่ยวกับการเขียนโปรแกรมสำหรับ iPhone ออกมาหลายเล่มทีเดียว สำหรับคนที่ยังไม่รู้ว่าควรจะซื้อเล่มไหน มาอ่าน ผมก็มีแนะนำหลายๆเล่มครับ สำหรับหนังสือ ที่ควรจะอ่านๆ ก็มีดังต่อไปนี้

Programming in Objective-C

ถ้าเพิ่งเริ่มต้นเขียนโปรแกรม ผมแนะนำให้อ่านหนังสือ การเขียนโปรแกรมด้วยภาษา Objective-C ก่อน เพราะว่าการเขียนโปรแกรม ใน iPhone ต้องใช้ภาษา Objective-C ฉนั้นแล้วถ้าไม่รู้เรื่องมาก่อนเลย แนะนำ เล่มดังต่อไปนี้

หนังสือเล่มนี้สอนการเขียนโปรแกรมด้วยภาษา Objective-C ไว้ได้ดีมากๆ ตั้งแต่คนไม่เคยเขียนโปรแกรมมาก่อนก็สามารถอ่านได้ เหมาะสำหรับคนที่เพิ่งจะเริ่มเขียนโปรแกรมและในหนังสือ ยังได้กล่าวถึง Foundation Class ต่างๆที่ต้องรู้ อาทิเช่น NSNumber , NSArray เป็นตั้น และได้อธิบายการจัดการ Memory ในเบื้องต้นอีกด้วย

รายละเอียดของหนังสือ Programming in Objective-C

Programming in Objective-C 2.0

หนังสือเล่มนี้คนเขียนเป็นคนเดียวกัน กับที่เขียน Programming in Objective-C 2.0 เนื้อหาภายในก็ไม่ได้ต่างกันมากมายนักกับ เล่ม Programming in Objective-C แต่จะเพิ่มเติมในส่วนของ Cocoa และ iPhone ไว้ด้วย

อาจจะงงว่า Objective-C กับ Objective-C 2.0 ต่างกันยังไง อธิบายได้ง่ายๆครับว่า มันก็เป็นภาษาเดิมนั่นเหละ ครับเพียงแต่ว่า 2.0 เนี่ยจะเพิ่มคุณสมบัติของภาษาเข้ามาใหม่ อาทิเช่นในเรื่องของ Garbage Collection , Property อะไรทำนองนี้ สำหรับผมคิดว่า เล่มนี้ ครอบคลุมหมดเลยครับ สำหรับการเขียนโปรแกรมเบื้องต้น

รายละเอียดของหนังสือ Programming in Objective-C 2.0 (2nd Edition)

Advance Mac OS X Programming

หนังสือเล่มนี้เป็นการเขียนโปรแกรมสำหรับ Mac ค่อนข้างเขียนได้ดี แต่ว่ามันจะปนๆ กันระหว่าง C/C++ กับ Objective-C เนื้อหาหลายๆส่วนน่าสนใจมากๆอาทิเช่น การเขียน Share Memory Segment เป็นต้น

ถ้าไม่คิดจะเขียนโปรแกรมบน Mac กะว่าจะเขียนแต่ iPhone ก็ไม่จำเป็นเท่าไหร่ครับ เพราะว่ามันไม่ได้เขียนเกี่ยวกับ iPhone หรือ Cocoa เลย หนักไปทาง Unix

รายละเอียดหนังสือ Advanced Mac OS X Programming (2nd Edition of Core Mac OS X & Unix Programming)

Cocoa Programming for Mac OS X

หนังสือการเขียนโปรแกรมด้วย Cocoa เล่มนี้นับว่าเป็นเล่มที่ดีที่สุดเลยก็ว่าได้ สอนการเขียนโปรแกรมด้วย Cocoa และการใช้งาน xcode กับ interface builder เบื้องต้น เนื้อหาเขียนได้ดีมากๆอ่านง่าย เป็นหนังสือที่ผมแนะนำเลยครับว่าต้องอ่าน เพราะมันจะปูทางไปสู่การเขียนโปรแกรมด้วย iPhone

เหมาะกับทุกคนที่จะเขียนโปรแกรมด้วย Cocoa และตอนนี้หนังสือก็ได้ปรับปรุงมาถึง 3th edition แล้ว เนื้อหา update มากๆ

รายละเอียดของหนังสือ Cocoa(R) Programming for Mac(R) OS X (3rd Edition)

Xcode 3 Unleashed

เป็นหนังสือสอนการใช้งาน Xcode ครับ สำหรับหนังสือเล่มนี้ เนื้อหาหลายๆอย่างอยู่ในขั้นกลางๆ ไปถึงขั้นสูง จริงๆแล้วเราสามารถหาอ่าน การใช้งาน Xcode ได้จากเวปของ apple เอง แต่มันไม่ค่อยจะ update มากนัก

ถ้าใครที่ต้องการ การใช้งาน xcode ในระดับ advance เช่นการ ใช้งาน Instrument หรือว่าจะเป็น SVN, CVS ก็คุ้มค่านะครับ

รายละเอียดของหนังสือ Xcode 3 Unleashed

Beginning iPhone Development: Exploring the iPhone SDK

หนังสือเล่มนี้เป็นหนังสือสอนเกี่ยวกับ การเขียนโปรแกรมสำหรับ iPhone ถ้าใครไม่รู้เรื่อง Cocoa มาก่อน ผมแนะนำให้ไปอ่าน Cocoa ก่อนครับ หนังสือเล่มนี้ สอนการใช้งาน Control ต่างๆไว้มากมาย

ไม่ว่าจะเป็น button , combo box , address book ยังรวมไปถึง การใช้งาน Quartz เบื้องต้น และรวมถึงการใช้งาน multi-touch และ การใช้งานกล้องถ่ายรูปแนะนำอ่านอย่างยิ่งครับ

รายละเอียดของหนังสือ Beginning iPhone 3 Development: Exploring the iPhone SDK

The iPhone Developer’s Cookbook: Building Applications with the iPhone SDK

เล่มนี้ก็เขียนเกี่ยวกับ iPhone Programming โดยตรงเหมือนกัน แต่เล่มนี้เขียนต่างจากเล่มบนตรงที่ว่า ค่อนข้างจะลงลึกไปแต่ละ Control เช่นการใช้งาน Table ก็จะเขียนตั้งแต่การใช้งานในระดับง่าย จนถึงขั้นสูงเช่นการใส่รูปเข้าไปใน table แต่ก็ไม่ได้ครอบคลุมทุกๆ Control

ถ้าหากมีงบจำกัดในการซื้อ ผมแนะนำให้ซื้อเล่ม Begining iPhone Development มากกว่า แต่ก็ยังแนะนำให้อ่านเล่มนี้ครับ เพราะว่าเนื้อหาบางอย่างในเล่ม Begining iPhone Development ไม่ได้บอกไว้เช่น พวก service ต่างๆ

รายละเอียดของหนังสือ The iPhone Developer’s Cookbook: Building Applications with the iPhone 3.0 SDK (2nd Edition)

Extra Books

หนังสือที่แนะนำไปเบื้องต้นผมว่า ครอบคลุมกับ ทุกๆเนื้อหาสำหรับการเขียนโปรแกรมบน Mac , iPhone แล้วนะครับ และสำหรับคนที่สนใจใน เบื้องลึกอื่นๆ ผมยังมีแนะนำอีก

Mac OS X Internals: A Systems Approach

เล่มนี้เป็นเล่มตำนานเลยก็ว่าได้ เพราะได้เขียนเกี่ยวกับ ระบบ Mac ได้อย่างละเอียดยิบมากๆ ตั้งแต่ระดับ Kernel กันเลยทีเดียว คือถ้าใครสนใจการทำงาน ของระบบ Mac OS X ในแบบลึกซึ้ง เล่มนี้ไม่ผิดหวังแน่ๆครับ

เล่มนี้หนามากๆ ถ้าใครต้องการเขียนโปรแกรมบน Mac แบบลึกๆเล่มนี้ควรจะศึกษาเป็นอย่างยิ่ง

รายละเอียดของหนังสือ Mac OS X Internals: A Systems Approach

Programming with Quartz: 2D and PDF Graphics in Mac OS X

สำหรับคนที่ต้องการศึกษา Quartz Framework ( 2D Graphic Library ) เล่มนี้แนะนำเลยครับ เพราะละเอียดมากๆ ตั้งแต่การวาดเส้น ลงสี และรวมไปถึงการใช้งานขั้นสูงเช่น PDF อีกด้วย แต่ไม่มีเนื้อหาเกี่ยวกับ 3D สักเท่าไหร่

ถ้าใครต้องเขียนโปรแกรมจำพวก 3D เล่มนี้ไม่ได้สอน การเขียนโปรแกรมด้วย OpenGL เลย มีแต่ Quartz ล้วนๆ และก็เนื้อหาแบ่งเป็น Carbon กับ Cocoa อย่างละครึ่งๆ แต่หนักไปทาง Carbon ซะมากกว่า

รายละเอียดของหนังสือ Programming with Quartz: 2D and PDF Graphics in Mac OS X (The Morgan Kaufmann Series in Computer Graphics)

Web

และก็ยังมีแหล่งข้อมูลอื่นๆที่แนะนำให้เข้าไปอ่านเพิ่มเติม

• iPhoneDevCentral.org มีหลายๆ Tutorial ให้ได้ดูกัน
• Apple Developer Center ก็เป็นของ apple เองครับเข้าไปดูพวก example project หรืออ่าน guide ได้
• icode blog มีหลายๆ tutorial ที่น่าสนใจมากๆ
• Stanford CS193P Course : Course iPhone Development นี่เป็น course ของมหาวิทยาลัย standford สอนเกี่ยวกับ การเขียนโปรแกรมด้วย iPhone มีทั้ง example ครบเลย สุดยอดมากๆ

ถ้าใครมี Link หรือหนังสือแนะนำ ก็ Comment กันเข้ามาครับ

ปล. ขอโทษทีนะครับ ที่ไม่ค่อยได้ update blog สักเท่าไหร่

Technorati Tags: carbon, cocoa, iphone, objective-c, programming, stuff

เอาละ ไหนๆ ก็รับปากว่าจะเขียน 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 ก็จะได้ผลลัพธ์ออกมา

เป็นไงบ้างครับ สำหรับ iPhone Tutorial แรกๆ ติชมกันเข้ามาครับ ว่าดีไม่ดีอย่างไร หรือไปพูดคุยกันได้ที่ Forum

Download Source Code

Technorati Tags: basic, cocoa, iphone, programming

[flv]http://www.macfeteria.com/wp-content/uploads/2008/08/cocoa.flv[/flv]

ถ้าอยากดูชัดๆก็โหลด .mov ไปดูได้ึีครับ

Download Cocoa Video tutorial (37 mb.)

ก็ขอว่าอย่าเอาไป upload ลงที่อื่นนะครับ Youtube ยังงี้

Technorati Tags: cocoa, video tutorial

โดยปกติแล้วเราสามารถใช้ method ที่ชื่อว่า setValue:forKey: เพื่อทำการ set ค่าให้กับ ตัวแปรใน class ได้ดังตัวอย่างข้างล่างนี้

สมมติว่าเรามี Class แบบนี้

@interface Book : NSObject
{
	NSString *name;
}
@end

เราสามารถที่จะ set ค่าให้กับ name ได้แบบนี้

book = [[Book alloc]init];
[book setValue:@"FHM" forKey:@"name"];

และเราก็สารมารถที่จะ get ค่าจาก name ได้แบบนี้

NSString *bookName = [book valueForKey:@"name"];

ดูแบบนี้อาจจะเหมือนว่ามันไม่ค่อยจะมีประโยชน์มากนัก แต่เราจะได้ใช้ในเรื่องของ Binding ในส่วนต่อไป

Accessor Method

มันก็คือ method ที่เป็นลักษณะ Get – Set นั่นเหละครับ ถ้าหากเรามี class book แบบข้างบน เราอาจจะเขียน accessor method ได้ว่า

-(NSString*) getName
{
	return name;
}
-(void) setName:(NSString*) n
{
	name = n;
}

โดยปกติแล้ว accessor method นั้นจะมี pattern ลักษณะ
-<Key>
-set<Key>
-get<Key>

รายละเอียดเพิ่มเติมของ pattern อ่านได้ที่ http://developer.apple.com/documentation/Cocoa/Conceptual/KeyValueCoding/Concepts/AccessorConventions.html#//apple_ref/doc/uid/20002174

คือถ้าหากว่าเราเขียน method ที่มีการทำงานเหมือนกันแต่ว่า มันไม่ตรงกับ pattern ก็ไม่อาจจะเรียกได้ว่าเป็น accessor method เช่นว่า

-(void) setBookName:(NSString*) n
{
	name = n;
}

คือเรามองว่าจาก setBookName นั้นประกอบไปด้วย “set” และ “BookName” ซึ่ง BookName ถือว่าเป็น key และใน class book นั้นก็ไม่ได้มี member ที่ชื่อ BookName ดังนั้น method นี้ก็ไม่อาจจะเรียกว่าเป็น acessor method ได้

Binding

binding คือการจับคู่ระหว่าง object กับตัวอ้างอิง และใน cocoa เองก็มีการใช้ binding กับ graphic object มากมาย ยกตัวอย่างเช่นว่า เราอาจจะ binding ค่าของตำแหน่งของ slide กับตัวแปร slidePosition เมื่อเราเลื่อน slide ค่าของ slidePostion ก็เปลี่ยนไปตามตำแหน่งของ slide เป็นต้น

อาจจะมองไม่ค่อยจะเห็นภาพว่าเราจะใช้ Binding ได้ยังไง และจะนำ key-value-coding ไปใช้ได้ยังไง งั้นมาดูตัวอย่างการใช้งานจริงๆกันเลยดีกว่า

สมมติว่าเราต้องการเขียนโปรแกรม นับจำนวนของคำ เหมือนดังตัวอย่างแรกๆ แต่ครั้งนี้เราจะใช้ Binding เข้ามาช่วย

ก่อนอื่นก็สร้าง โปรเจคขึ้นมา แล้วก็ add class ที่ชื่อว่า AppController เหมือนที่ผ่านมาในตัวอย่างก่อนๆ โดยใน AppController ของเราจะมี code ดังนี้

#import 
 
@interface AppController : NSObject
{
	IBOutlet NSTextField *m_textFieldInput;
	IBOutlet NSTextField *m_textFieldCounter;
 
	NSString *myText;
}
 
- (void) setMyText:(NSString*) text;
-(NSString*) getMyText;
 
@end

ก็จะเห็นว่า เราแทบจะไม่มีอะไรเลยนอกจาก NSTextField 2 ตัวและ 2 method และส่วน implement ก็เขียนได้แบบนี้ครับ

@implementation AppController
- (void) setMyText:(NSString*) text
{
  if ([text length] != 0 )
  {
	myText = text;
	[m_textFieldCounter setIntValue:[myText length] ];
  }
}
-(NSString*) getMyText
{
	return myText;
}
 
@end

จาก code ข้างบนก็เพียงแค่ setMyText จะไปนับจำนวนของ myText แล้วก็แสดงผลออกมาเท่านั้นเอง

ต่อไปเราก็สร้าง interface ของเราให้มีลักษณะแบบนี้

และเราก็ สร้าง instance ของ App Controller และ link กันเหมือนเดิม ( ดังรูปข้างล่าง )
link ให้ครบทั้ง 2 NSTextField เลย

และที่สำคัญมากๆ เราต้องมา set binding ตรง inspector แบบรูปข้างล่าง

สิ่งที่เราต้องทำก็คือ Bind to: ให้ set เป็น App Controllerและส่วน Model Key Path นั้นเราก็ set ให้เป็น myText เพื่อให้มันตรงกับค่าของ ตัวแปร  myText

ลอง Compile & Run ดูครับ แล้วลองพิมพ์ ข้อความลงไป พร้อมกับกด Enter จะเห็นว่า ตรง Label ก็จะเปลี่ยนเป็นจำนวนตัวอักษรที่เราพิมพ์ลงไป

จะเห็นว่า เราแทบไม่ต้องไปเขียนอะไรเพิ่มเติมเลย เพราะมันเอา key ไป bind ให้เราโดยอัตโนมัติ ถ้าหากเรา debug เวลาที่เราพิมพ์และหลังจาก enter มันก็เข้ามายัง method setMyText ดังรูป

และถ้าหากเราดู Call Stack ก็จะเห็นว่า methode ที่ได้เรียก setMyText นั้นจะมาจาก setValue:forkey อีกที

ไม่เข้าใจก็ถามเข้ามาได้ครับ แต่ผมก็รู้สึกได้ว่าเขียนงงๆ ก็เอาเป็นว่ามีคำแนะนำติชม ก็คอมเม้นกันมาครับ

Technorati Tags: basic, cocoa, objective-c, programming

More about datasource

จากโปรแกรมแสดงตารางรายชื่อครั้งก่อน จะเห็นว่าเราได้ set datasource มาที่ AppController และเราก็เขียน implement delegate ของ datasource ที่ AppController จะเห็นว่าวิธีแบบนี้ไม่ค่อยจะยืดหยุ่นมากนัก เพราะเนื่องจากว่าเราให้ AppController เป็นทั้งตัวควบคุม interface และยังให้เป็น datasource

สมมติว่าเราต้องการมี table มากกว่า 1 table และแต่ละ table มี datasource ที่มีข้อมูลต่างกัน เราก็คงต้องเพิ่ม datasource ให้เท่ากับจำนวนของ table ซึ่งนั่นก็แปลว่าเราก็ต้องสร้าง AppController instance มาหลายๆอัน มันก็คงจะไม่ใช่วิธีที่ดีนัก และที่สำคัญตัวโปรแกรมจะมองว่า AppController instance ที่เราสร้างขึ้นมาใหม่ มันเป็นตัวเดียวกัน ดังนั้นข้อมูลใน table A และ B ก็จะเหมือนกัน ( ดูรูปประกอบ ) ฉนั้นแล้วการที่เราให้ AppController เป็น datasource โดยตรงก็คงไม่ดีแน่

งั้นแทนที่เราจะให้ Class AppController เป็น datasource โดยตรง เราก็เปลี่ยนให้ AppController มี member เป็น datasource ก็น่าจะดีกว่า

จากรูปข้างบน จะเห็นว่า เราก็สามารถมีหลายๆ datasource ที่ต่างกันได้ แล้วเราจะเขียน class ออกมาได้ยังไง ? งั้นมาดูตัวอย่างจริงกันเลยดีกว่า

สมมติว่า เราต้องการ เขียนโปรแกรมแสดงรายชื่อเหมือนเดิม แต่เราต้องการแยก class datasource ออกมาจาก AppController โดยให้ชื่อว่า StudentDataSource

@interface StudentDataSource : NSObject
{
        NSMutableArray *m_arrayNameData;
}
-(void) AddStudentRecord:(NSString*) name;
- (int) numberOfRowsInTableView:(NSTableView*) table;
- (id)  tableView:(NSTableView *)aTableView 
        objectValueForTableColumn:(NSTableColumn *)
        aTableColumn row:(int)rowIndex;
@end

จาก Class StudentDataSource ข้างบนเราก็ได้ให้ NSMutableArray เป็นตัวเก็บข้อมูล รายชื่อ และในส่วนของ implement ก็เขียนได้ลักษณะแบบนี้

@implementation StudentDataSource
-(id)init
{
	[super init];
	m_arrayNameData = [NSMutableArray array];
	[m_arrayNameData retain];
	return self;
}
-(void) dealloc
{
	[m_arrayNameData release];
	[super dealloc];
}
 
-(int) numberOfRowsInTableView:(NSTableView*) table
{
	return [m_arrayNameData count];
}
 
-(id) tableView:(NSTableView*)table
      objectValueForTableColumn:(NSTableColumn*) tableColumn
      row:(int) rows
{
	return [m_arrayNameData objectAtIndex:rows];
}
 
-(void) AddStudentRecord:(NSString*) name
{
	if( [name length] != 0 )
		[m_arrayNameData addObject:name];
}
 
@end

ก็เป็นว่าตอนนี้เรามี Class ที่เป็น DataSource ต่อไปก็แก้ไข AppController ของเรา แบบนี้

@interface AppController : NSObject
{
    IBOutlet NSTableView *m_tableView;
    IBOutlet NSButton *m_button;
    IBOutlet NSTextField *m_textFields;
 
    StudentDataSource *m_dataSource;
}
 
-(IBAction) AddRecord:(id) sender;
 
@end

จะเห็นว่า เรามี member ที่เป็น StudentDataSource เข้ามาด้วย และในส่วน implement ก็จะได้แบบนี้

@implementation AppController
-(id) init
{
	[super init];
	m_dataSource = [[StudentDataSource alloc] init];
	[m_dataSource retain];
	return self;
}
 
-(void) awakeFromNib
{
	[m_tableView setDataSource:m_dataSource];
}
-(void) dealloc
{
	[m_dataSource release];
	[super dealloc];
}
 
-(IBAction) AddRecord:(id) sender
{
	NSString* name = [m_textFields stringValue];
	[m_dataSource AddStudentRecord:name];
	[m_tableView reloadData];
}
@end

จาก Code ข้างบนจะมีส่วนที่สำคัญคือ awakeFromNib จะเห็นว่าเมื่อโปรแกรมเริ่มทำงาน เราก็ Set DataSource ให้กับ m_tableView ในทันที และเราก็ไม่ต้องไป link ที่ interface builder เลย

ลอง Download Source ไปลอง  Compile ดูครับ โปรแกรมก็ทำงานเหมือนเดิมแต่ ต่างกันตรงที่เราแยก datasource ออกมาให้เป็น member ของ AppController ต่อไปถ้าหากเราต้องการ มีหลายๆตาราง และ datasource ที่ต่างกัน ก็สามารถทำได้แล้วครับ

Editable Cell

โปรแกรมที่เราได้ลองเขียนนั้น เป็นแค่การอ่านข้อมูลมาแสดงผลอย่างเดียว ไม่สามารถ แก้ไขข้อมูลภายใน Cell ได้ ถ้าหากเราต้องการให้ table ของเราสามารถแก้ไขได้ เราต้อง implement delegate method เพิ่มอีก 1 นั่นก็คือ

- (void)tableView NSTableView *)aTable setObjectValue id)aData
forTableColumn NSTableColumn *)aCol
row int)aRow;

และจากโปรแกรมข้างบน ก็สามารถเขียนเพ่ิมให้ table ของเราสามารถแก้ไขข้อมูลได้ ดังตัวอย่าง code ข้างล่าง

- (void)tableView:(NSTableView *)aTable setObjectValue:(id)aData
        forTableColumn:(NSTableColumn *)aCol
        row:(int)aRow
{
   NSString *text = aData;
   if( [[m_arrayNameData objectAtIndex: aRow] isEqualToString:text] == NO)
   {
	[m_arrayNameData replaceObjectAtIndex:aRow withObject:aData];
   }
}

ก็ลองโหลด Source Code ไปลอง Compile เล่นดู

More Column

จากตัวอย่างที่เขียนไปเราได้สร้างตารางที่มีแค่ 1 column เท่านั้น ถ้าหากต้องการสร้าง หลายๆ Column แล้วเราก็เพียงแค่ไปเปลี่ยน ค่าของจำนวน column ใน interface builder แบบรูปข้างล่าง

การสร้าง interface  ก็คงไม่ยากอะไร แต่ปัญหาคือ เราจะเขียน Code ให้มันแสดง cell ที่ตำแหน่ง column ที่เราต้องการได้อย่างไร ?

วีธีการก็คือ เราต้อง กำหนดชื่อ ให้กับ Column ก่อน แล้วก็แก้ไข code ในส่วนของ

-(id) tableView:(NSTableView*)    table
objectValueForTableColumn:(NSTableColumn*) tableColumn
row:(int) rows

สมมติว่า เราต้องการแก้ไข โปรแกรม แสดงรายชื่อนักเรียน ให้มีอีก 1 Column เพื่อแสดงสาขาที่เรียนของนักเขียนด้วย หน้าตาโปรแกรม เป็นลักษณะแบบนี้

เราก็ทำการแก้ไข datasource ของเราให้มี array เพ่ิมขึ้นมาอีก 1 เพื่อเอาไว้เก็บ สาขาที่เรียนของนักเรียน อาจจะเขียนใหม่ได้ว่า

@interface StudentDataSource : NSObject
{
   NSMutableArray *m_arrayNameData;
   NSMutableArray *m_arrayDepartmentData;
}
-(void) AddStudentRecord:(NSString*)name 
        andDepartment:(NSString*) department;
@end

และเราก็เขียน method เพิ่ิมเติม

-(IBAction) AddRecord:(id) sender
{
	NSString* name = [m_textFields stringValue];
	NSString* department = [m_textFields stringValue];
 
	[m_dataSource AddStudentRecord:name andDepartment:department];
	[m_tableView reloadData];
}

และส่วนที่สำคัญที่สุดคือ tableView: objectValueForTableColumn: row: เราต้องเขียนให้มันส่ง ตำแหน่ง cell ใน column ที่ต้องการให้เป็นแบบนี้

-(id) tableView:(NSTableView*)	table
      objectValueForTableColumn:(NSTableColumn*) tableColumn
      row:(int) rows
{
	NSString *columnName;
	columnName = [tableColumn identifier];
	if( [columnName isEqualToString:@"name"] == YES )
		return [m_arrayNameData objectAtIndex:rows];
	else
		return [m_arrayDepartMentData objectAtIndex:rows];
}

จาก code ข้างบนเราสามารถอ้างอิงถึง column ได้โดยการใช้ column identifier เป็นการตรวจสอบว่า เป็น column ของเราที่ต้องการหรือเปล่า  อย่างตัวอย่างเราก็ได้ให้ เปรียบเทียบว่าเป็น column “name” หรือไม่ และการใส่ค่าให้กับ column identifier เราทำได้โดยการใช้ interface builder และใส่ค่าให้กับ column เหมือนรูปข้างล่าง

แล้วก็ Compile ดูครับ เพียงเท่านี้ก็เป็นอันเรียบร้อย โปรแกรมก็จะออกมาแบบนี้

สำหรับ Source ก็โหลดได้นี่เลย Download Source Code

Technorati Tags: advance, cocoa, NSTableView, objective-c, programming

NSTableView คือ class ที่ช่วยในการแสดงผลแบบตาราง ใน NSTableView จะมี helper object หนึ่งที่ชื่อว่า datasource ช่วยในการแสดงผลของข้อมูล ซึ่งการทำงานของ NSTableView จะไม่ใช่ลักษณะที่ตัวโปรแกรมเป็นคนส่ง message บอกกับ NSTableView เช่นให้แสดงคำว่า Hello ตัวโปรแกรมหลักจะไม่ได้เป็นคนสั่งบอกับ NSTableView ว่าให้แสดงคำว่า Hello ที่แถวที่สอง แต่ในทางกลับกันมันจะไปถาม helper object ว่าในแถวที่สองมีอะไรที่ต้องแสดง ในกรณีนี้ datasource ก็จะส่ง Hello กลับมาให้ยัง NSTable แบบรูปข้างล่าง

และในการใช้งาน NSTableView นั้นเราต้อง implement delegate method ( หากไม่เข้าใจ delegate ให้ไปอ่าน cocoa programming delegate ) ด้วยกัน 2 อย่างคือ

• -(int) numberOfRowInTableView NSTableView*) tableView;
  ส่งค่าของจำนวน row กลับมา
• -(id) tableView NSTableView *) tableView
  objectValueForTableColumn NSTableColumn*) tableColumn
  row int) rowIndex;
  ส่ง object ที่ต้องไปแสดงผลที่ row ละ column

เอาละเมื่อเข้าใจคร่าวๆแล้ว เราก็มาลองเขียนโปรแกรมเล่นๆ กันดู สมมติว่าเราต้องการเขียนโปรแกรมแบบตัวอย่างดังรูป

งั้นเรามาเริ่มกันเลยดีกว่า

Let’s go

1. สร้างโปรเจค Cocoa Application ขึ้นมากก่อน แล้วก็ แก้ไข MainMenu.xib ของเราให้มีหน้าตาแบบนี้

2. แก้ไข Column ให้เหลือแค่ 1 โดยการ Click ไปที่ NSTableView  และเปิด inspector ขึ้นมาแล้วก็ปรับค่า ตรง Columns ให้เป็น 1

3. หลังจากนั้น เราก้อ Add File เข้าไป โดยให้ชื่อว่า AppController

4.เราก็ทำการแก้ไข File AppController.h โดยเพิ่ม member และ method เข้าไปดัง code ข้างล่าง

@interface AppController : NSObject
{
IBOutlet NSTableView* m_table;
IBOutlet NSTextField* m_textName;
NSMutableArray*    m_array;	// Store Data
}
-(IBAction) AddRecord:(id) sender;
@end

5. กลับไปที่ interface builder และเราก็จะเพิ่ม AppController เข้ามาโดยการลาก Object (กล่องสีฟ้า) มายัง xib ของเรา และ เปิด inspector ขึ้นมาและตั้งค่าให้เป็นดังรูป

6. และขั้นต่อไปคือ การ Link Object กับ Interface เข้าด้วยกัน โดยเราจะเริ่มจาก m_table กับ NSTableView ใน interface builder แบบรูปข้างล่าง

7. และก็ link ส่วนที่เหลือนั่นก็คือ m_textName กับ NSTextFields

8. และเมื่อทำการ Link interface เข้ากับ object แล้วต่อไปก็ทำการ Link interface กับ method โดยเราจะ Link ระหว่างปุ่ม insert เพื่อให้เวลากด แล้วมันจะไปเรียกใช้ method ที่ชื่อว่า addRecord ( อย่าลืมกด ctrl ค้างระหว่างลาก link จาก  Button มายัง App Controller ด้วยนะ )

9. และสุดท้ายสำหรับ  interface คือการที่เราจะ set datasource ให้กับ tableView ของเราเพราะอย่างที่บอกไปแล้วว่า NSTableView  นั้นต้องมี datasource และเราก็ทำการ set datasource เข้ากับ AppController ( หมายความว่า AppController เป็น dataSource ให้กับ m_table นั่นเอง )

อันดับแรกให้เรา  click ไปที่ NSTableView และเปิด Control Panel ด้วยการ Click ขวา และหลังจากนั้น ก็ให้ click ไปยังลูกศร ตรงขวา บน เหมือนในรูป  แล้วก็เลือก Table View

10. หลังจากนั้นก็จะเห็น Panel แบบรูปข้างล่าง แล้วเราก็ Link dataSource มายัง App Controller

11. ก็เป็นอันจบว่าเราได้สร้าง interface เรียบร้อยแล้ว และต่อไปก็เป็นการ เขียน code ในส่วน implement ก็แก้ไข File AppController.m แบบนี้

@implementation AppController
-(id) init
{
	[super init];
	m_array = [NSMutableArray array];
	[m_array retain];
	return self;
}
 
-(void) dealloc
{
	[m_array release];
	[super dealloc];
}
 
-(int) numberOfRowsInTableView:(NSTableView*) table
{
	return [m_array count];
}
 
-(id) tableView:(NSTableView*) table
			objectValueForTableColumn:(NSTableColumn*) tableColumn
			row:(int) row
{
	return [m_array objectAtIndex:row];
}	
 
-(IBAction) AddRecord:(id) sender
{
	NSString* text = [m_textName stringValue];
	if( text != @"")
	{
		[m_array addObject:text];
		[m_table reloadData];
	}
 
}
@end

จาก Code ข้างบนขออธิบายส่วนสำคัญ ก็คือในส่วนของ

• numberOfRowsInTableView:  ตรงนี้เราให้ return จำนวนของ ข้อมูลที่เก็บไว้ยัง m_array
• tableView: objectValueForTableColumn: row:  ให้ return ข้อมูลของ m_array ตามตำแหน่งของ row
• AddRecord: เพิ่มจำนวน record เข้าไปยัง m_array และ ให้ table เรียกแสดงข้อมูลใหม่ด้วยคำสั่ง  reloadData

12 Compile & Run ก็จะได้ผลลัพธ์แบบนี้

หวังว่าไม่ยากจนเกินไปนะครับ ติดตรงไหน แนะนำติชม กันได้  ก็ลองโหลด source ไปลอง compile ได้ครับ

Download Source Files

Technorati Tags: basic, cocoa, NSTableColumn, NSTableView, objective-c, programming