Macfeteria

NSTableView

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