วันนี้เราจะเขียน custom cell แบบง่ายๆกันครับ เพื่อเป็นแนวทางให้ไปประยุกต์ใช้กันต่อไป เอาละครับ เริ่มจากสร้างโปรเจคแบบ view base กันก่อน อย่างตัวอย่างนี้ผมตั้งชื่อว่า DemoCustomCell ครับ

แล้วเราก็ เพิ่ม class ที่ชื่อว่า StudentData เข้าไปยังโปรเจค ส่วน code interface ก็ประมาณนี้ครับ

@interface StudentData : NSObject
{
	NSString *studentName;
	NSString *studentGrade;
	UIImage *studentPicture;
 
}
@property (nonatomic, retain) NSString* studentName;
@property (nonatomic, retain) NSString* studentGrade;
@property (nonatomic, retain) UIImage *studentPicture;
 
@end

แล้วก็ส่วน implement ก็ไม่มีอะไรมากครับ

#import "StudentData.h"
 
@implementation StudentData
@synthesize studentName;
@synthesize studentGrade;
@synthesize studentPicture;
 
-(void) dealloc
{
	[studentName release];
	[studentGrade release];
	[studentPicture release];
	[super dealloc];
}
@end

จาก code ข้างบน ผมได้เขียน class ที่ชื่อว่า StudentData เพื่อที่จะเก็บ ชื่อ,เกรด และ รูปภาพ ของนักเรียน
และลำดับต่อไป เราก็ออกแบบหน้าตา interface ของโปรแกรม โดยเพิ่ม ตารางเข้ามา พร้อมทั้ง set delegate และ datasource ให้กับตารางให้เรียบร้อย

หลังจากนั้น ก็มาเขียนส่วนของ code ของ DemoCustomCell กันครับ

@interface DemoCustomCellViewController : UIViewController
{
	NSMutableArray *studentArray;
	IBOutlet UITableView *studentTableView;
}
 
@end

จาก code ข้างบน เราประกาศ studentArray เพื่อเอาไว้เก็บรายชื่อนักเรียน และมี IBOutlet ที่เป็น UITableView ไว้แสดงผลครับ

ลำดับต่อไป เราจะเขียนส่วนของ implement ก็แบบนี้ครับ

#import "DemoCustomCellViewController.h"
#import "StudentData.h"
 
@implementation DemoCustomCellViewController
 
- (void)viewDidLoad
{
    [super viewDidLoad];
	[super viewDidLoad];
	studentArray = [[NSMutableArray alloc] init];
	StudentData* student_A , *student_B , *student_C , *student_D;
 
	student_A = [[StudentData alloc] init];
	student_B = [[StudentData alloc] init];
	student_C = [[StudentData alloc] init];
	student_D = [[StudentData alloc] init];
 
	student_A.studentName = [NSString stringWithString:@"น้องกระแต"];
	student_A.studentGrade = [NSString stringWithString:@"A"];
	student_A.studentPicture = [UIImage imageNamed:@"katae.png"];
 
	student_B.studentName = [NSString stringWithString:@"น้องปีใหม่"];
	student_B.studentGrade = [NSString stringWithString:@"B+"];
	student_B.studentPicture = [UIImage imageNamed:@"mai.png"];
 
	student_C.studentName = [NSString stringWithString:@"น้องแพนเค้ก"];
	student_C.studentGrade = [NSString stringWithString:@"C"];
	student_C.studentPicture = [UIImage imageNamed:@"pancake.png"];
 
	student_D.studentName = [NSString stringWithString:@"น้องเกรซ"];
	student_D.studentGrade = [NSString stringWithString:@"B"];
	student_D.studentPicture = [UIImage imageNamed:@"grace.png"];
 
	[studentArray addObject:student_A];
	[studentArray addObject:student_B];
	[studentArray addObject:student_C];
	[studentArray addObject:student_D];
 
	[student_A release];
	[student_B release];
	[student_C release];
	[student_D release];
 
}
 
- (void)viewDidUnload
{
	[studentArray release];
}
 
- (void)dealloc {
    [super dealloc];
}
 
// -----------------------------------------------------------------
//			TableView Delegate Implement
// -----------------------------------------------------------------
 
-(NSInteger) tableView:(UITableView*) tableView
numberOfRowsInSection:(NSInteger) section
{
	return [studentArray count];
}
 
- (UITableViewCell *)tableView:(UITableView *)table
		 cellForRowAtIndexPath:(NSIndexPath *)indexPath;
{
 
	static NSString *sampleIndentifier = @"My Identifier";
	UITableViewCell *cell;
        cell=[studentTableView dequeueReusableCellWithIdentifier:
			sampleIndentifier];
	if ( cell == nil )
	{
		cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero
		reuseIdentifier:sampleIndentifier] autorelease];
	}
	NSUInteger row = [indexPath row];
 
	StudentData *temp = [studentArray objectAtIndex:row];
	cell.textLabel.text = temp.studentName;
 
	return cell;
}
@end

จากข้างบน ผมได้เพิ่มนักเรียนเข้าไปยัง StudentArray รวมทั้งหมด 4 คนครับ และในส่วนของ table delegate นั้นก็ ได้กำหนดให้ cell นั้นแสดง ชื่อของนักเรียน และเมื่อเราทำการ compile ก็จะได้โปรแกรมแบบนี้ครับ

ไม่ยากใช่ไหมครับ ต่อไปเราจะเขียน Custom Cell ครับ

Custom Cell

จากโปรแกรมข้างบน เราจะเห็นว่า ข้อจำกัดของโปรแกรมคือ ในแต่ละ cell นั้นแสดงได้แค่ ตัวหนังสือ เท่านั้นและได้เพียงแค่หนึ่งแถว ถ้าหากเราอยากจะเพิ่ม ให้ cell ของเราแสดงข้อมูลได้มากกว่านี้ เราจะต้องทำ custom cell ครับ เอาละครับ เริ่มกันเลย ก่อนอื่นเราต้องเพิ่ม xib เข้ามายังโปรเจค ครับ ดังรูป ก็ click ขวาเลือก new file แล้วก็เลือกไปที่ Empty XIB ครับ

แล้วก็ตั้งชื่อครับ ในตัวอย่างนี้ผมตั้งชื่อ StudentCustomCell.xib ครับ เมื่อเปิด File XIB ขึ้นมาก็จะเห็น เพียงแค่ File’s Owner กับ First Responder หลังจากนั้นให้ลาก UITableViewCell เข้ามายัง Document ของเรา ดังรูปครับ

เอาละครับ ก่อนที่เราจะลงมือ ออกแบบหน้าตา Custom Cell ของเรา เราต้องเขียน Class ขึ้นมาก่อน และสำหรับ Custom Cell ที่ผมจะออกแบบนี้ ผมอยากให้ มี

1. ชื่อของนักเรียน
2. เกรดของนักเรียน
3. รูปถ่ายนักเรียน

เอาละครับ ต่อไปเราก็ลงมือเขียน StudentCustomCell Class ของเราเลย โดยการ Add New File อย่างที่เคยทำ นั่นเหละครับ แต่ให้เลือก SubClass  of ให้เป็น UITableViewCell แบบในรูปครับ แล้วก็ตั้งชื่อว่า StudentCustomCell

แล้ว code ของ StudentCustomCell.h ก็ได้แบบนี้

@interface StudentCustomCell : UITableViewCell
{
	IBOutlet UILabel* name;
	IBOutlet UILabel* grade;
	IBOutlet UIImageView* picture;
}
@property (nonatomic,retain)  UILabel* name;
@property (nonatomic,retain)  UILabel* grade;
@property (nonatomic,retain)  UIImageView* picture;
 
@end

ต่อไปก็เขียน implement ได้แบบนี้

#import "StudentCustomCell.h"
 
@implementation StudentCustomCell
 
@synthesize name;
@synthesize grade;
@synthesize picture;
 
- (id)initWithStyle:(UITableViewCellStyle)style
        reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        // Initialization code
    }
    return self;
}
 
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
 
    [super setSelected:selected animated:animated];
}
 
- (void)dealloc
{
	[name release];
	[grade release];
	[picture release];
 
    [super dealloc];
}
 
@end

ครับเพียงเท่านี้ Class ของเราก็เกือบจะเสร็จละครับ ต่อไปเราก็กลับมายัง interface builder เพื่อที่จะออกแบบหน้าตา interface ของเราและ set link ต่างๆเข้ากับ class ที่เราได้เขียนขึ้นมา

Design Custom Cell

โดยลำดับแรกที่ต้องทำก็คือ เปิด inspector ขึ้นมาแล้วก็ set ให้ UITableViewCell ของเราเป็น Student Custom Cell ดังรูปครับ

หลังจากได้เปลี่ยนให้ UITableViewCell เป็น StudentCustomCell แล้ว ก็ออกแบบหน้าตาของโปรแกรม พร้อมกับเชื่อม Outlet ต่างๆให้เรียบร้อยดังรูป

Coding

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

• ประกาศ Custom Cell
• ออกแบบ Custom Cell

สุดท้ายที่จะทำก็คือ เอามาใช้ครับ วิธีการที่เราจะเอา Custom Cell ของเรามาใช้ ก็ไม่ยากครับ ถ้าสังเกตดีๆ จะเห็น code ส่วนของ table delegate  ตรงนี้

- (UITableViewCell *)tableView:(UITableView *)table
		 cellForRowAtIndexPath:(NSIndexPath *)indexPath;
{
 
	static NSString *sampleIndentifier = @"My Identifier";
	UITableViewCell *cell;
	cell=[studentTableView dequeueReusableCellWithIdentifier:
						   sampleIndentifier];
	if ( cell == nil )
	{
		cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero
			reuseIdentifier:sampleIndentifier] autorelease];
	}
	NSUInteger row = [indexPath row];
 
	StudentData *temp = [studentArray objectAtIndex:row];
	cell.textLabel.text = temp.studentName;
 
	return cell;
}

จากตรง code ข้างบน จะเห็นว่า เราได้ประกาศ cell ขึ้นมาให้เป็น UITableViewCell ใช่ไหมครับ ? แล้วเราก็ทำการ alloc แล้วก็ init มัน เอาละ งั้นถ้าหากว่าเราต้องการให้มันเป็น custom cell ทำยังไงละครับ คำตอบก็ไม่ยากเลย ก็คือเราก็ประกาศให้ cell ของเราเป็น custom cell ซะก็เรียบร้อย งั้นเรามาดู code กันเลย

- (UITableViewCell *)tableView:(UITableView *)table
		 cellForRowAtIndexPath:(NSIndexPath *)indexPath;
{
 
	static NSString *sampleIndentifier = @"My Identifier";
	StudentCustomCell *cell = (StudentCustomCell*)[studentTableView
		dequeueReusableCellWithIdentifier:sampleIndentifier];
	if (cell == nil)
	{
	NSArray *topLevelObjects;
	topLevelObjets = [[NSBundle mainBundle]
	loadNibNamed:@"StudentCustomCell" owner:nil options:nil];
 
	for(id currentObject in topLevelObjects)
	{
		if([currentObject isKindOfClass:[StudentCustomCell class]])
		{
			cell = (StudentCustomCell*)currentObject;
			break;
		}
	}
	}
 
	NSUInteger row = [indexPath row];
 
	StudentData *temp = [studentArray objectAtIndex:row];
	cell.name.text = temp.studentName;
	cell.grade.text = temp.studentGrade;
	cell.picture.image = temp.studentPicture;
 
	return cell;
}

อธิบายจาก ข้างบนนะครับ เราได้ประกาศ cell ให้เป็น StudentCustomCell โดยที่เราได้โหลดจาก StudentCustomCell.XIB ( ตรงส่วนของ for loop เป็นแค่ส่วนที่ใช้หาว่า object ตัวไหนใน xib ที่เป็น StudentCustomCell เท่านั้นเอง )  หลังจากนั้นเราก็ ได้ใส่รูป ใส่ชื่อ ใส่เกรด ให้กับ cell ก็เป็นอันจบ เมื่อ compile & run ก็จะเห็นผลลัพธ์ดังรูปครับ

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

- (CGFloat)tableView:(UITableView *)tableView
	heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
	return 120;
}

เพียงเท่านี้ก็จะได้ผลลัพธ์เหมือนในรูปครับ

ลอง Download Code ไป Compile ดูได้ครับ DemoCustomCell

Technorati Tags: cocoa touch, objective-c, programming, UITableView, UITableViewCell

Start

เริ่มจากสร้างโปรเจคก่อนเลยครับ อันดับแรกโปรเจคที่เราจะสร้างวันนี้ เราจะใช้ template แบบ Tabbar ดังรูปครับ

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

ยังไม่ต้องทำอะไร ลอง compile & run เล่นๆเลยครับ ก็จะเห็นว่า นี่ไง Tabbar โผล่มาให้ทันที

ง่ายไม๊ครับ ? มันก็คงจะง่ายอะนะครับ ถ้าหากว่า เราใช้แค่ 2 view เอาละ ต่อไปเราจะเข้าใจ Tabbar แบบลึกซึ้งกันดีกว่า ว่าจริงๆแล้ว มีอะไรต้องเข้าใจบ้าง

Tabbar

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

อันดับแรกนะครับ โปรเจคของเราจะมี 2 view นั่นคือ FirstView กับ SecondView แต่ทั้งสองอย่างนี้ไม่เหมือนกันครับ

• FirstView นี้จะมีแค่ .h และ .m โดยที่ไม่มี .xib
• Second นี้จะมีแค่ .xib

จริงๆแล้วจุดประสงค์ของ template นี้แค่ต้องการให้รู้ว่า เราสามารถใช้ tabbar โดยที่แต่ละ view นั้น

• สามารถเป็นเฉพาะ .xib
• หรือ แบบมีแต่ code
• หรือแม้กระทั่งแบบ ที่มีทั้ง code และ interface

เอาละครับต่อไป

ดูจากรูป อธิบายตามหมายเลขนะครับ

จุดที่ 1. จะเห็นว่ามี Tabbar Controller นะครับ ประกอบไปด้วย ส่วนย่อยๆอีก

• Tab Bar เป็นส่วนของตัวควบคุม
• First View Controller
• Second View Controller

จุดที่ 2.  ตรงนี้นะครับจะเห็นว่าผมเลือกไปยัง First View ถ้าหากดูที่ inspector ( จุดที่ 3 ) ตามเส้นสีแดงจะเห็นว่า Class นั้นเป็น FirstViewController  และถ้าดูต่อไปยัง จุดที่ 4 ก็จะเห็น .h .m ของ FirstViewController ตรงนี้จะสังเกตุเห็นว่า FirstViewController นั้นไม่มี .xib เหมือนที่ผมได้บอกไปตั้งแต่แรกครับว่า เค้าให้เราใช้ Main นี่เหละเป็นส่วน interface ของ firstview  จุดที่ 5 จะเห็นว่า SecondView นั้นมีแค่ .xib

และถ้ากดไปที่ SecondView นะครับจะเห็นหน้าตาแบบนี้ครับ

จะเห็นว่า ใน inspector ได้ถูกตั้งค่า NIB Name ให้เป็น SecondView และถ้าสังเกตดูดีๆ จะที่ขีดเส้นไว้ครับ ว่า First กับ Second นั้นเป็น View คนละแบบกัน

• Tab แรก (Fisrt) นั้นเป็น FirstViewController
• Tab สอง (Second) นั้นเป็น UIViewController

มาถึงจุดนี้อาจจะงง ?

Next, add new tabbar

เพื่อความเข้าใจ สร้าง tab ที่ 3 กันดีกว่า ดูรูปเลยครับ

ก็เป็นอันว่าได้ tabbar มาเพ่ิมละ แต่ว่ามันยังจะใช้ไม่ได้ครับ ลำดับต่อไป เราจะ Add Class เข้ามาครับ โดยการ click ขวาแล้วก็เลือก Add new file ครับ แล้วก็เลือกตามรูป

หลังจากนั้นก็ตั้งชื่อครับ แล้วเราจะได้ File มาทั้งหมด 3 files ด้วยกันนั่นก็คือ .h .m .xib  ในตัวอย่างนี้ผมตั้งชื่อว่า third แล้วกันนะครับ ต่อไปครับเราจะเขียนโปรแกรมง่ายๆใน view นี้กัน โดยที่โปรแกรมทำงาน ง่ายๆครับคือ กดปุ่ม แล้ว ก็คำว่า Hello โผล่ขึ้นมา

เอาละครับดูที่ Class กันก่อน

@interface ThirdView : UIViewController
{
	IBOutlet UILabel *helloLabel;
}
-(IBAction) sayHello:(id) sender;
 
@end

ลำดับต่อไปดูที่ implement ครับ

@implementation ThirdView
-(IBAction) sayHello:(id) sender
{
	helloLabel.text = @"Hello";
}
 
- (void)viewDidUnload
{
}
- (void)dealloc {
    [super dealloc];
}
 
@end

ไม่ซับซ้อนอะไรนะครับ แล้วก็เปิด ThirdView.xib เพื่อสร้าง button และ label พร้อมกับเชื่อม interface ให้เข้ากับ code

ณ ตอนนี้ เราก็ได้เขียนโปรแกรมในส่วนของ Third View เสร็จเรียบร้อยแล้ว

**** จากตรงนี้เองจะเห็นว่า **** ThirdView นั้นสามารถแยกเขียนได้  เราไม่ได้ไปทำอะไรกับ FirstView และ SecondView เลย มันเป็นข้อดีมากๆครับ ที่เราสามารถจะแบ่งในแต่ละ ส่วน ออกจากกันได้

เอาละครับต่อไป เราจะทำในสิ่งสุดท้าย นั่นก็คือ ทำให้กด Tab แล้วมันโหลด ThridView ขึ้นมานั่นเอง เรากลับไปยัง MainWindow.xib ครับ เราก็กดไปที่ tabbar แล้วก็เลือก thirdView  ดังรูป

และในส่วนของ Class Identity ให้เปลี่ยนเป็น ThirdView นะครับไม่งั้นเวลา run มันจะ crash

ถ้าเรียบร้อยแล้วก็จะเห็นแบบนี้ครับ

ลอง Compile แล้ว run ดูครับ เท่านี้ก็เรียบร้อยครับ

ถ้าใครอยากจะใส่รูปลงไปใน tab ก็ให้สร้าง ไฟล์ .png ขนาด 28×28 ( จะกว้างยาวพอดี ) แล้วก็กำหนดให้เป็น transparent ครับ แล้วก็ใช้สีดำ ในการ วาด

แล้วเราก็เพ่ิมรูปเข้ามายังโปรเจคของเรา แล้วก็เปลี่ยน  icon ดังในรูปแบบนี้ครับ

เท่านี้ก็เรียบร้อยครับ

สรุปว่า ที่เราได้ทำไปทั้งหมดนั้น เราได้ลองใช้ tabbar ไปทั้งหมด 3 แบบ สิ่งที่ผมจะแนะนำก็คือ

1. ถ้าหากเราต้องการจะสร้าง tabbar  ที่หน้า view มีการตอบโต้ อย่างเช่นการกดปุ่ม อะไรทำนองนี้ก็ควรจะ add view controller เข้ามาแบบที่เราได้ทำกัน
2. ถ้าหน้าที่เราต้องการมีแค่การแสดง info เช่นหน้า about เราแค่สร้างไฟล์ .xib ขึ้นมาเฉยๆ ก็ได้ครับ

ถ้าหาก งง ตรงไหน อ่านไม่เข้าใจ มีคำติชม ก็เม้นกันได้ครับ

Technorati Tags: objective-c, programming, tabbar

วันนี้สิ่งที่จะเขียนกันก็คือ Library ง่าย เอาละครับ ลงมือกันเลยดีกว่าเพื่อเป็นการไม่เสียเวลา

Static Lib Project

ก่อนอื่นเลยเราสร้าง Project ใหม่ขึ้นมาให้ชื่อว่า MyLib โดยเราเลือก Project Template ให้เป็น แบบ Static Library ดังรูป

หลังจากนั้นก็จะเห็น Project ประมาณดังรูป

จะเห็นว่า Project นั้นไม่ได้ให้ File อะไรมามากมาย เท่าการสร้างโปรเจคแบบอื่นๆเลย เอาละ ! ลำดับต่อไปคือ เพิ่ม Class เข้าไปยัง Project ของเรา  โดยผมให้ชื่อว่า MyClass  หลังจากเพ่ิม Class เข้าไปแล้วก็จะเห็น File เข้ามาดังรูป

ต่อไปเราก็จะเขียน Code กัน

// MyClass.h
// Header File
//----------------------
@interface MyClass : NSObject
{
 
}
+(NSString*) sayHello;
@end

ในส่วนของ implement ก็มี code ง่ายๆดังนี้

@implementation MyClass
+(NSString*) sayHello
{
	return @"Hello World";
}
@end

จาก code ข้างบน คือ ผมมี Class ที่ชื่อว่า MyClass โดยมีฟังก์ชั่น ที่ชื่อ sayHello แค่ฟังก์ชั่นเดียว โดยในฟังก์ชั่นนี้ก็คือ ส่งคำว่า Hello World กลับมานั่นเอง

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

ลำดับต่อไปคือ เอามาใช้  การที่เราจะเอา Lib มาใช้นั้นสิ่งที่ต้องการมีอยู่สองอย่างครับคือ

• Compile Lib ( File นามสกุล .a )
• Header ( File นามสกุล .h )

จากรูปข้างบน จะเห็น path ของ lib ที่เราสร้างขึ้นมาครับ เราก็ไป  copy เอามาไว้ยัง Folder ใหม่ พร้อมกับ File .h

ส่วนไฟล์อื่นๆ หลังจากการ Compile แล้วก็ไม่จำเป็นครับ

ต่อไปคือสร้าง โปรเจคที่ใช้งาน Lib ของเรา

Say Hello Project

เราก็สร้างโปรเจค ขึ้นมาใหม่ ผมตั้งชื่อว่า DemoLib เป็นแบบ View Base ดังรูป

เมื่อเราสร้างเรียบร้อยแล้ว ต่อไปคือ เอามาใช้ .. สิ่งที่ต้องทำต่อไปคือเอา 2 Files ที่ได้จากโปรเจค แรก เข้ามายัง โปรเจคใหม่ โดยกด Click ขวาที่โปรเจค แล้วก็เลือก Add ครับดังรูปครับ

เมื่อกด Add >> Existing Files …  แล้วจะเห็น หน้าต่างดังรูป ที่ผม ได้ขีดเส้นไว้คือ ถ้าหากเราเลือก option นี้มันจะ copy file มายังโปรเจคของเราเลย อันนี้ก็แล้วแต่สะดวกนะครับ ว่าจะให้มัน copy file มาหรือไม่ต้อง

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

ต่อไปครับ ลงมือเขียน code กัน

โดยที่โปรแกรมที่เราจะเขียน ก็ง่ายๆครับ คือกด ปุ่ม แล้วให้ Lable มันเปลี่ยนเป็นคำว่า Hello World เท่านั้นเอง

// Demo View Controller Header
@interface DemoLibViewController : UIViewController
{
	IBOutlet UILabel* text;
}
 
-(IBAction) clickSayHello;
 
@end

จาก ข้างบนเราประกาศ Outlet แค่ UILabel กับ Action ที่ชื่อ clickSayHello

#import "MyClass.h"
@implementation DemoLibViewController
 
-(IBAction) clickSayHello
{
	text.text = [MyClass sayHello];
}
 
@end

ส่วน implement นั้น จะสังเกต เห็นว่าเรา ได้เรียนใช้ [MyClass sayHello]; ซึ่งเป็น Library ที่เราได้สร้างมานั่นเอง โดยที่ฟังก์ชั่นนี้ก็คือ ส่ง String กลับมาเป็นคำว่า Hello World นั่นเอง
และสุดท้าย ก็ออกแบบหน้าตาของโปรแกรมด้วย interface builder ครับ แล้วเราก็เชื่อม Action/ Outlet ให้เรียบร้อยดังรูป

เท่านี้ก็เป็นอันเสร็จแล้ว เมื่อเรา compile / run ก็จะเห็นหน้าตาโปรแกรมดังรูป เมื่อกด Say Hello คำว่า Label ก็จะเปลี่ยนเป็นคำว่า Hello World ครับ

สำหรับวันนี้ ก็เป็น tutorial ง่ายๆ แต่รับรองว่า มีประโยชน์ แน่ๆครับ ติชม ยังไง ก็ เม้นกันมาได้ครับ

Technorati Tags: library, objective-c, programming

อย่างที่บอกไปว่าวันนี้ยังอยู่ในเรื่องของ table เหมือนเดิม วันนี้จะมาต่อในเรื่องของ Section ครับ
โดยปกติแล้ว Table View น้ันจะประกอบไปด้วย cell และ cell เหล่านี้สามารถแยกเป็นหมวดๆได้ เรียนกว่า section ดูรูปประกอบ จะเข้าใจ

จากรูปจะเห็นชื่อที่ขึ้นต้นด้วย ตัวอักษรเดียวกันนั้นจะถูกจับรวมกันเป็นกลุ่ม ( section ) งั้นเรามาเริ่มเลยดีกว่าครับ

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

ตามแผนภาพ ผมจะแบ่งหมวดหมู่ของสัตว์ออกเป็น 3 ประเภทคือ Mammal , Bird , Fish แล้วแต่ละประเภท นั้นก็จะมีรายชื่อของ สัตว์ต่างๆ การออกแบบ คลาสต่างๆ ก็จะเหมือนดังแผนภาพ ครับ นั่นก็คือ ผมมี class ที่ชื่อ Animal เป็น ทั้ง datasource , delegate ( NSTableView ) เมื่อดูภาพประกอบคร่าวๆ เรียบร้อยแล้ว ต่อไปก็เริ่มโปรเจคกันเลย

Start New Project

เราก็เลือก view based application ครับ แล้วหลังจากนั้นก็ตั้งชื่ออะไรก็ได้ ในตัวอย่างนี้ผมจะใช้ชื่อว่า AnimalDemo เสร็จแล้วก็จะได้โปรเจคออกมาดังรูปแบบนี้ครับ

เมื่อเรียบร้อยแล้ว ลำดับต่อไป เราก็จะออกแบบหน้าตาของโปรแกรมเราก่อน ก็ทำการเปิด AnimalDemoViewController.xib ขึ้นมา แล้วก็ลาก Table View เข้ามาดังรูปครับ

ก็เป็นอันเสร็จ การออกแบบหน้าตาของโปรแกรม  หลังจากนี้ ลำดับต่อไปก็คือ เขียน class ที่เป็น datasource และ delegate นั่นเอง
เราจะทำการเพิ่ม class เข้ามายัง project ของเราโดยการ เลือกไปที่เมนู File > New File… แล้วก็เลือก ชนิดของ File ดังรูปครับ

หลังจากนั้นก็ตั้งชื่อว่า Animal ก็เป็นอันเสร็จเรียบร้อย ต่อไปเราก็จะมาเขียน code กัน

Implement Delegate & Data Source

อย่างที่เห็นในแผนภาพ ไปแล้ว ว่าเรามี class ที่ชื่อ Animal ที่ประกอบไปด้วย Array ที่เก็บรายชื่อของ สัตว์ต่างๆ เวลาเขียน code ออกมาก็จะได้ประมาณนี้ครับ

#import "Animal.h"
 
@implementation Animal
@synthesize m_animal;
-(id) init
{
	self = [super init];
	m_animal = [[NSMutableDictionary alloc] init];
 
	NSMutableArray* mammal= [[[NSMutableArray alloc] initWithObjects:
		@"Dog",@"Cat",@"Rabbit",@"Tiger",nil] autorelease] ;
 
	NSMutableArray* bird = [[[NSMutableArray alloc] initWithObjects:
		 @"Eagle",@"Hawk",@"Parrot",nil] autorelease];
 
	NSMutableArray* fish = [[[NSMutableArray alloc] initWithObjects:
		 @"Shark",@"Barrachuda",@"Gold Fish"] autorelease];
 
	[m_animal setObject:mammal forKey:@"Mammal"];
	[m_animal setObject:bird forKey:@"Bird"];
	[m_animal setObject:fish forKey:@"Fish"];
 
	return self;
}
// Total Section
-(NSInteger) numberOfSectionsInTableView:(UITableView*) table
{
	NSInteger totalSection = [self.m_animal count];
	return totalSection;
}
 
// Number of row in each section
-(NSInteger) tableView:(UITableView*) tableView
			 numberOfRowsInSection:(NSInteger) section
{
	NSArray* key = [self.m_animal allKeys];
	NSString* keyValue = [key objectAtIndex:section];
	NSInteger rowCount = [[self.m_animal objectForKey:keyValue] count];
	return rowCount;
}
 
// Name of each section
-(NSString*) tableView:(UITableView*) tableView
			 titleForHeaderInSection:(NSInteger) section
{
	NSArray* allKeys = [self.m_animal allKeys];
	NSString* name=[allKeys objectAtIndex:section];
	return name;
}
 
-(UITableViewCell*) tableView:(UITableView*) tableView
		cellForRowAtIndexPath:(NSIndexPath*) indexPath
{
	static NSString *sampleIndentifier = @"My Identifier";
	UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:
						sampleIndentifier];
	if ( cell == nil ) {
	cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero
		reuseIdentifier:sampleIndentifier] autorelease];
	}
 
	NSUInteger row = [indexPath row];
	NSUInteger section = [indexPath section];
 
	NSArray* key = [self.m_animal allKeys];
	NSString* keyValue = [key objectAtIndex:section];
	NSArray* animalList = [m_animal objectForKey:keyValue];
	cell.textLabel.text = [animalList objectAtIndex:row];
	return cell;
}
 
-(void) dealloc
{
	[m_animal release];
	[super dealloc];
}
 
@end

Explain

ดู code แล้วอาจจะค่อนข้างจะยาวนิดหนึ่งนะครับ ค่อยๆทำความเข้าใจกันในแต่ละส่วนก่อนดีกว่า

-(id) init
{
	self = [super init];
	m_animal = [[NSMutableDictionary alloc] init];
 
	NSMutableArray* mammal= [[[NSMutableArray alloc] initWithObjects:
		@"Dog",@"Cat",@"Rabbit",@"Tiger",nil] autorelease] ;
 
	NSMutableArray* bird = [[[NSMutableArray alloc] initWithObjects:
		 @"Eagle",@"Hawk",@"Parrot",nil] autorelease];
 
	NSMutableArray* fish = [[[NSMutableArray alloc] initWithObjects:
		 @"Shark",@"Barrachuda",@"Gold Fish"] autorelease];
 
	[m_animal setObject:mammal forKey:@"Mammal"];
	[m_animal setObject:bird forKey:@"Bird"];
	[m_animal setObject:fish forKey:@"Fish"];
 
	return self;
}

ฟังก์ชั่นนี้ ไม่ได้มีอะไรมากนอกจาก ประกาศ array ที่ประกอบไปด้วยรายชื่อของสัตว์ต่างๆ และนำมันไปใส่ไว้ใน dictionary ( m_animal ) จริงๆแล้วเราจะใช้ array ทั้งหมดก็ได้นะครับ

// Total Section
-(NSInteger) numberOfSectionsInTableView:(UITableView*) table
{
	NSInteger totalSection = [self.m_animal count];
	return totalSection;
}
 
// Number of row in each section
-(NSInteger) tableView:(UITableView*) tableView
			 numberOfRowsInSection:(NSInteger) section
{
	NSArray* key = [self.m_animal allKeys];
	NSString* keyValue = [key objectAtIndex:section];
	NSInteger rowCount = [[self.m_animal objectForKey:keyValue] count];
	return rowCount;
}
 
// Name of each section
-(NSString*) tableView:(UITableView*) tableView
			 titleForHeaderInSection:(NSInteger) section
{
	NSArray* allKeys = [self.m_animal allKeys];
	NSString* name=[allKeys objectAtIndex:section];
	return name;
}

สองฟังก์ชั่น ข้างบน นั้น เป็นการบอกว่า ตารางนี้ประกอบไปด้วย section ทั้งหมดเท่าไหร่ และแต่ละ section นั้นมีแถวจำนวนเท่าไหร่
ซึ่งจำนวน section ของเราทั้งหมดนั้นมี จะมีเท่ากับ จำนวน array ที่ได้เก็บไว้ใน m_animal นั่นก็คือ 3 และจำนวน แถวของแต่ละ section นั้นก็หามาจาก จำนวนชื่อของสัตว์ในแต่ละ array ที่ได้เก็บไว้นั่นเอง
และฟังก์ชั่นสุดท้าย ก็คือ ชื่อของแต่ละ section ในตัวอย่างผมได้ให้ ชื่อของแต่ละ section น้ันเป็นชื่อของ key ที่ผมได้ใส่ไปใน dictionary ตอนสร้างครั้งแรกนั่นเอง

หมายเหตุ ใน Dictionary เราไม่สามารถจะขอข้อมูลที่เราได้ใส่ไปถ้าหากไม่มี key ดังนั้นแล้ว ผมจึงใช้ ** [NSDictionary allKey] เพื่อที่จะได้ key ทั้งหมดกลับมาซึ่งจะเป็น array ** หลังจากนั้นแล้วค่อยไปไล่หาค่าต่างๆตามลำดับ index ใน array อีกที

ส่วนสุดท้ายก็คือ

-(UITableViewCell*) tableView:(UITableView*) tableView
		cellForRowAtIndexPath:(NSIndexPath*) indexPath
{
	static NSString *sampleIndentifier = @"My Identifier";
	UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:
						sampleIndentifier];
	if ( cell == nil ) {
	cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero
		reuseIdentifier:sampleIndentifier] autorelease];
	}
 
	NSUInteger row = [indexPath row];
	NSUInteger section = [indexPath section];
 
	NSArray* key = [self.m_animal allKeys];
	NSString* keyValue = [key objectAtIndex:section];
	NSArray* animalList = [m_animal objectForKey:keyValue];
	cell.textLabel.text = [animalList objectAtIndex:row];
	return cell;
}

เราได้ implement delegate เพื่อที่ตารางจะได้รู้ว่าควรนำอะไรไปแสดง ในแต่ละ section , row
จาก code ข้างบน อธิบายคร่าวก็คือ เมื่อเรา ได้ index path มาแล้วเราหากลุ่มจาก section เมื่อเรารู้กลุ่มแล้ว หลังจากนั้นก็ไปหา ชื่อของสัตว์ตามลำดับของแถว ที่ควรจะแสดง

ก็เป็นอันจบในส่วนของ Animal Class

แต่ยังเหลือในส่วนของ View Controller ที่เรายังไม่ได้เขียนเพิ่มครับ เราต้อง เพิ่ม Animal เข้าไปยัง View Controller ของเรา ก็เปิด File ที่ชื่อ AnimalDemoViewController.h ขึ้นมาครับ
หลังจากนั้นก็เพิ่ม code เข้าไปดังนี้

#import "Animal.h"
@interface AnimalDemoViewController : UIViewController
{
	IBOutlet Animal *m_animalDataSource;
}
@property (nonatomic,retain) Animal* m_animalDataSource;
@end

แล้วส่วน implement ก็จะเป็นประมาณนี้ครับ

#import "AnimalDemoViewController.h"
 
@implementation AnimalDemoViewController
@synthesize m_animalDataSource;
 
- (void)didReceiveMemoryWarning {
	// Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
}
 
- (void)dealloc {
	[m_animalDataSource release];
    [super dealloc];
}
 
@end

ก็เป็นอันเสร็จ อธิบายกันสักนิด ที่เราได้เพิ่มเข้าไปก็คือ Animal ( m_animalDataSource ) แต่เราได้ประกาศให้เป็น Outlet เพื่อที่ว่าจะได้นำไป link กับตารางที่อยู่ interface builder ครับ

Link Object

กลับไปยัง interface builder ครับ เรายังเหลือสิ่งที่ต้องทำอีก อย่างสองอย่าง นั่นก็คือ สร้าง instance ของ Animal ก็เริ่มจาก เปิด AnimalDemoViewController.xib ขึ้นมา หลังจากนั้นก็เพิ่ม Object เข้าไปดังรูปครับ

จากรูป เมื่อ ลาก Object เข้ามาแล้ว เราก็เปิด หน้าต่าง inspector ขึ้นมาครับ แล้วตรง indentity จะเห็น Class เราก็เปลี่ยนให้เป็น Animal ก็เรียบร้อย เพียงเท่านี้เราก็มี Animal Instance เรียบร้อย  หลังจากนั้นก็เชื่อมมันเข้ากับ m_animalDataSource ของเรา ดังรูป

และลำดับสุดท้ายครับ เราต้อง set datasource ให้กับตารางของเรา เราก็ click ขวาไปยังตาราง แล้วก็ลาก เชื่อมเข้ากับ Animal Instance ดังรูปครับ

ก็เป็นอันเสร็จทุกๆอย่างครับ Compile แล้วก็ Run จะเห็นโปรแกรมมีหน้าตา แบบนี้ครับ

ครั้งหน้าเดี๋ยวมาต่อกัน ในเรื่องของ ตารางต่อนะครับ
ตัวอย่าง Source Code ก็กด Download ได้เลยครับ

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

Adding Image to Cell

เมื่อครั้งก่อน เราได้ใช้งาน table view ที่ไว้แสดงผลแต่ตัวหนังสือ จริงๆแล้วเราสามารถเพิ่ม รูปภาพเข้าไปยัง cell ได้ด้วย วิธีการก็ไม่ได้ยากอะไรเลยครับ เราก็เพียงแต่ สร้าง image ขึ้นมาแล้วก็ set ให้ cell เท่านั้นเองดูตัวอย่างอาจจะเข้าใจง่ายกว่า จากการ implement ของ method
- (UITableViewCell *)tableView: (UITableView *)tableView cellForRowAtIndexPath: (NSIndexPath *)indexPath;
ในครั้งก่อน เราจะทำการเพิ่ม image เข้าไป โดยเพิ่ม code เข้าไปดังนี้ครับ

- (UITableViewCell *)tableView:(UITableView *)tableView
   cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
	static NSString *identifier = @"Macfeteria Cell";
	UITableViewCell *cell;
	cell = [tableView dequeueReusableCellWithIdentifier:identifier];
	if ( cell == nil )
	{
		cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero
			reuseIdentifier: identifier] autorelease];
	}
	NSUInteger row = [indexPath row];
 
	// New Code !!!!
	UIImage *image = [UIImage imageNamed:@"face.png"];
	cell.imageView.image = image;
	//-------------
 
	cell.textLabel.text = [m_studentList objectAtIndex:row];
	return cell;
}
 
}

จะเห็นว่า เราได้เขียน code ขึ้นมาเพิ่มเพียง 2 บรรทัดเองครับ คือ

	UIImage *image = [UIImage imageNamed:@"face.png"];
	cell.imageView.image = image;

เมื่อ run program หน้าตาก็จะเป็นประมาณแบบนี้

Row Selection

วิธีการจัดการเกี่ยวกับการเลือกแถวในตาราง เราอาจจะใช้ method ที่ใช้ถามว่าแถวไหนถูกเลือกอยู่ โดยเรียกใช้ method ที่ชื่อว่า indexPathForSelectedRow ก็ได้ครับ ตารางก็จะบอกเรามาว่าแถวไหนถูกเลือกอยู่ ดังตัวอย่าง

สมมติว่า ผมเขียน IBAction สำหรับ Button ไว้ชื่อว่า getSelectRow นะครับ

-(IBAction) getSelectRow:(id) sender
{
   NSIndexPath *path = [m_tableView indexPathForSelectedRow];
   NSMutableString *selectRow;
   selectRow = [NSMutableString stringWithFormat:@"Row: %d",[path row]];
   m_text.text = selectRow;
}

ผลลัพธ์ก็จะมีหน้าตาประมาณนี้

เมื่อกด ไปที่ตาราง แล้วก็กด ปุ่มมันก็จะบอกว่า เราเลือกที่แถวไหน ทำได้ไม่ยากเลยครับ
และ table view นั้นมี delegate ที่เกี่ยวกับการเลือกแถวที่น่าสนใจ ได้แก่ delegate แรกจะเป็นการเขียนเหตุการณ์ที่เกิดขึ้นก่อนการเลือกแถว ที่ชื่อว่า
-(NSInteger) tableView: (UITableView*) tableView willSelectRowAtIndexPath: (NSIndexPath*) indexPath
ตัวอย่าง code จะเป็นประมาณนี้ครับ

-(NSIndexPath*) tableView: (UITableView*) tableView
willSelectRowAtIndexPath: (NSIndexPath*) indexPath
{
   NSUInteger row = [indexPath row];
   if ( row == 0 )
	return nil;
 
   NSMutableString *selectRow;
   selectRow = [NSMutableString stringWithFormat:@"Row: %d",[indexPath row]];
   m_text.text = selectRow;
 
   return indexPath;
}

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

และมีอีก delegate ที่น่าสนใจคือ เหตุการณ์หลังจากกดไปที่แถวของตาราง นั่นก็คือ
-(void) tableView: (UITableView*) tableView didSelectRowAtIndexPath: (NSIndexPath*) indexPath
ตัวอย่าง code การใช้งานก็จะเช่นว่า เราต้องการให้มันแสดง alert ขึ้นมาหลังจากกดไปที่แถวของตารางนะครับ ก็จะเขียนได้ประมาณนี้

-(void) tableView: (UITableView*) tableView
didSelectRowAtIndexPath: (NSIndexPath*) indexPath
{
   NSUInteger row = [indexPath row];
   NSString *rowData = [m_nameList objectAtIndex:row];
 
   NSMutableString *msg;
   msg = [NSMutableString stringWithFormat:@"Animal: %@",rowData];
   UIAlertView *alert;
   alert = [[UIAlertView alloc] initWithTitle:@"You select"
              message:msg delegate:nil
	      cancelButtonTitle:@"Ok !!" otherButtonTitles:nil];
   [alert show];
   [alert release];
}

หน้าตาหลังจาก run program ก็จะเป็นแบบนี้ครับ

วันนี้ก็จบเพียงเท่านี้ครับ ครั้งหน้า เดี๋ยวมาต่อด้วย custom cell

Technorati Tags: basic, cocoa touch, iphone, objective-c, programming, UITableView

ก็อย่างที่บอกไปแล้วว่าการเขียนโปรแกรมด้วย 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

และในตอนนี้มีหนังสือ เกี่ยวกับการเขียนโปรแกรมสำหรับ 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

สมมติว่าเราต้องการเขียน โปรแกรมที่ต้องการ reverse string บ่อยๆ เราอาจจะเขียน class ขึ้นมาใหม่และเขียน method ที่ชื่อว่า getReverse ขึ้นมา อาจจะเขียนได้ประมาณนี้ ได้ว่า

@interface ReverseString:NSObject
{
	NSString* m_text;
}
-(void) setString:(NSString*) text;
-(NSMutableString*) getReverse;
@end

แล้วก็เขียน code ในส่วนของ getReverse ได้ว่า

@implementation ReverseString
-(NSMutableString*) getReverse
{
	NSMutableString *temp = [[[NSMutableString alloc] init] autorelease] ;
	unichar c;
	for(int i = [m_text length]-1 ; i >= 0 ; i-- )
	{
		c = [m_text characterAtIndex:i];
		[temp appendString:[NSMutableString stringWithCharacters:&c length:1]];
	}
	return temp;
}
@end

เขียนแบบนี้ก็พอได้ แต่ว่ามันก็มีข้อเสียคือ เมื่อเราต้องการจะ reverse string เราต้องให้ตัวแปร ของเราเป็น ReverseString

	ReverseString *hello = [[ReverseString alloc] init];
	[hello setString:@Hello];
	NSMutableString *revHello = [hello getReverse];

ซึ่งมันไม่สะดวก วิธีที่ดีกว่านั้นก็อาจจะเขียนเป็น function ขึ้นมาเป็น  global ก็พอได้

แต่ถ้าหากเราอยากจะทำให้ NSMutableString มี method ที่ชื่อว่า getReverse เลยจะทำได้ไม๊ ?
คำตอบก็คือ ทำได้

Category นั้นทำให้เราสามารถที่จะเพิ่ม method ต่างๆเข้าไปยัง class ที่มีอยู่เดิมที่เราไม่สามารถจะไปแก้ไขในส่วนของ source ได้ แต่ Category ก็ไม่ได้สิทธิมากขนาดที่จะไปเพิ่ม member ใน Class ได้ เรามาลองดูการใช้ Category เลยอาจจะเข้าใจง่ายกว่า

จากตัวอย่างข้างบนนั้นถ้าหากเราต้องการจะเขียนให้  NSMutableString มี method นั้นเราก็ต้องเขียน category ขึ้นมาวิธีการ ก็สุดแสนจะง่ายดายเพียงแค่ โดยมีรูปแบบดังนี้

@interface ClassName ( CategoryName )

เอาละมาดูของจริงกันเลยดีกว่า ก่อนอื่นเราก็ประกาศ Category ที่ชื่อว่า MyExtend โดยเราจะเพิ่มเติมขยายในส่วนของ NSMutableString และเราก็เขียน method ใหม่ที่ชื่อว่า getReverse

// MyString.h
@interface NSMutableString (MyExtend)
-(NSMutableString*) getReverse;
@end

หลังจากนั้นก็เขียน ในส่วนของ source ได้แบบนี้

// MyString.m
@implementation NSMutableString (MyExtend)
-(NSMutableString*) getReverse
{
	NSMutableString *temp = [[[NSMutableString alloc] init] autorelease] ;
	unichar c;
	for(int i = [self length]-1 ; i >= 0 ; i-- )
	{
		c = [self characterAtIndex:i];
		[temp appendString:[NSMutableString stringWithCharacters:&c length:1]];
	}
	return temp;
}
@end

เพียงแค่เท่านี้ก็เสร็จเรียบร้อย หลังจากนั้นแล้ว NSMutableString ของเราก็จะมี method ใหม่ที่ชื่อว่า getReverse เรียบร้อยแล้ว

การเรียกใช้ก็ไม่ได้ยาก ดังตัวอย่าง

#import "MyString.h"
 
int main (int argc, const char * argv[]) {
    NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
 
	NSMutableString *text = @"Hello";
 
	NSLog(@"%@",[text getReverse]);
    [pool drain];
    return 0;
}

และนอกจากนี้เรายังสามารถใช้ category เพื่อทำเป็น private method ได้ด้วย สมมติว่าเรามี Class ง่ายๆแบบนี้

//AA.h
@interface AA : NSObject
{
}
-(int) getSomeInt;
@end

และเขียน implement ง่ายๆแบบนี้

//AA.m
@implementation AA 
-(int) getSomeInt
{
    return 10;
}
@end

จะเห็นว่า AA นั้นมี getSomeInt ซึ่งเป็น public method และในกรณีที่เราอยากให้มันเป็น private เราอาจจะดัดแปลงได้โดยการใช้ category ได้แบบนี้

//AA.m
@interface AA(hidden)
-(void) getHiddenInt;
@end
 
@implementation(hidden)
-(void) getHiddenInt
{
    return 20;
}
@end
 
@implementation AA 
-(int) getSomeInt
{
    return 10;
}
@end

เป็นไงบ้างครับสำหรับการใช้ category จะเห็นว่ามันมีประโยชน์มากๆเลยสำหรับการขยายคลาส

Technorati Tags: class, objective-c, programming

Objective-C 2.0 ต่างจาก Objective-C หรือเปล่า ?

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

@property

เป็นคุณสมบัติที่เพิ่มเข้ามาใน objective-c 2.0 นี้ โดยปกติแล้ว เมื่อเราประกาศ member ใน class แล้วเราก็มักจะมี Function Get/Set กับตัวแปรนั้นๆเช่นว่า

// Student.h
@interface Student : NSObject
{
	int score;
}
-(int) getScore;
-(void) setScore:(int) n;
@end

ส่วนตัว source file  ก็เขียนได้ว่า

// Student.m
 
@implementation Student
-(int) getScore
{
	return score;
}
-(void) setScore:(int) n
{
	score = n;
}
@end

ในตัวโปรแกรมอาจจะมีการเรียกใช้ เช่น

x = [student getScore];
[student setScore:80];

จะเห็นว่า ยังไงเราก็ไม่สามารถเข้าไปใช้ score ได้ตรงๆ ต้องเรียกผ่าน getScore / setScore แต่ใน objective-c 2.0 นั้นเราไม่จำเป็นต้องเขียน set/get ก็ได้ โดยสิ่งที่เราจะทำก็คือ ทำให้ score นั้นเป็น property ของ class-Student ซะเลย

วิธีการก็ไม่ได้ยากเย็นอะไรนัก สิ่งที่ต้องทำก็คือ บอกว่า member นั้นเป็น property ดังตัวอย่าง code ข้างล่างนี้

@interface Student : NSObject
{
	int score;
}
@property (assign) int score;
@end

ส่วนของ code เราก็เพียงแค่เขียน synthesize เข้ามา

@implementation Student
@synthesize score;
@end

เพียงเท่านี้ก็เรียบร้อย ส่วนวิธีการก็คือ เรียกผ่านเครื่งหมาย “.” เช่นตัวอย่างแบบนี้

x = student.score;
student.score = 40;

จะเห็นว่ามันช่วยลดการเขียน set/get ลงไปได้เยอะเลย ลองนึกว่า หาเรามี member สัก 20 ตัวและต้องเขียน set/get นี่ก็คงต้องเขียนทั้งหมด 40 method เลยทีเดียว

Attributes

จาก  code ที่ผ่านมาจะเห็นว่า เราได้เขียน property กันไปแล้ว จะเห็นว่ามี keyword – assign อยู่ เช่น

@property (assign) int a;

keyword  เหล่านี้เป็นตัวกำหนดลักษณะของ property ต่างๆว่ามีลักษณะเช่นไร และลักษณะต่างๆ ก็แบ่งออกได้เป็น

Setter Attribute ได้แก่

• assign
  โดยปกติแล้วจะถูกกำหนดมาให้เป็น default อยู่แล้ว
• retain
  จะทำการ release ค่าที่เก็บไว้ก่อน แล้วหลังจากนั้นจะ retain ค่าใหม่
• copy
  จะทำการ release ค่าที่เก็บไว้ก่อน แล้วหลัวจากนั้นจะ copy ค่าใหม่เข้ามา โดยปกตินิยมใช้กับ string

เราอาจจะไม่กำหนด attribute แต่ถ้าหากว่าเราไม่ได้ใช้งาน Garbage Collection นั้นเราต้องเลือกใช้อย่างใดอย่างหนึ่ง

Writability Attribute

• readonly
  ถ้าหากเรากำหนดเป็นแบบนี้ ตัว compiler จะไม่สร้าง setter ให้เรา
• readwrite

วิธีการใช้ก็คือ ใช้เครื่องหมาย “,” คั่น ระหว่าง attribute ต่างๆเช่น

@property (assign,readonly) int a;

Atomic Attribute

• nonatomic
  โดยปกติจะเป็น atomic

แล้ว atomic กับ nonatomic ต่างกันยังไง ?
ถ้าหากเป็น atomic นั้นแต่ละ Thread จะเข้าไปเปลี่ยน ค่าใน property พร้อมๆกันไม่ได้ เพราะว่าจะทำการ Lock ค่าไว้และเมื่อเปลี่ยนแปลงค่าเสร็จเรียบร้อยแล้วถึงจะ Unlock ให้ thread อื่นเข้าไปใช้ ก็ถ้าเราใช้ nonatomic ก็จะไม่มีการ lock

@synthesize @dynamic

โดยปกติแล้วเราจะใช้ synthesize เพราะว่ามันจัดการ เขียน setter/getter ให้เรา แต่เรายังอาจจะเขียน setter/getter เองก็ได้ วิธีการก็คิือ ใช้ @dynamic แทน โดยลักษณะของ code จะเป็นประมาณนี้

// ClassA.h
 
@interface ClassA : NSObject
{
	NSString *dynamicValue;
	NSString *synthesizeValue;
}
@property(copy, readwrite) NSString *dynamicValue;
@property(assign) NSString * synthesizeValue;
@end
 
// ClassA.m
 
@implementation ClassA
@dynamic dynamicValue;
@synthesize synthesizeValue;
 
- (NSString *)dynamicValue
{
    	return dynamicValue;
}
 
- (void)setdynamicValue:(NSString *)newValue
{
    	if (newValue != dynamicValue)
	{
        		dynamicValue = [newValue copy];
    	}
}

ครั้งหน้ามาต่อด้วย Objective-C 2.0 อีกครั้ง

Technorati Tags: objective-c, programming

โดยปกติแล้วเราสามารถใช้ 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