Cocoa Programming II : NSTableView

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 ข้างล่าง

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 แบบนี้

จาก 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

10 thoughts on “Cocoa Programming II : NSTableView”

  1. ภาษาไทย ไม่มีครับ ต้องอ่านจากต่างประเทศเอา
    หนังสือให้ยืมก็ไม่มีครับ เล่มที่ผมมีก็ไม่ใช่หนังสือของผมเป็นของออฟฟิศ และโดยส่วนมากอ่านจากเวป 🙂
    ถ้าอยากได้พวก ebook น่าจะลองถามใน forum ดูนะครับเผื่อคนอื่นอาจจะมี

    ผมแนะนำนะครับว่า ถ้าอยากเริ่มเขียนโปรแกรมบน iPhone / Mac ถ้าไม่มีเงินซื้อหนังสือ
    ผมก็แนะนำให้หา ebook หรือไม่ก็ต้องอ่านจากเวปต่างๆ เช่น

    http://developer.apple.com/documentation/Cocoa/Conceptual/ObjectiveC/Introduction/introObjectiveC.html

    http://www.otierney.net/objective-c.html

    http://www.cocoadevcentral.com

    และอีกหลายๆที่

  2. ขอบคุณมากเลยครับ

    แล้วพี่พอจะมีหนังสือมที่แปลหรือป่าวครับ แบบว่าอ่านtextไม่ค่อยคร่องอ่ะครับ

    แล้วถ้าเป็นtextอ่ะครับมีที่ให้ยืนบ้างหรือป่าวครับ

  3. @interface ชื่อคลาส : NSObject
    {
    // ตัว แปร ต่างๆ ประกาศในนี้ เช่น
    int a;
    }

    // Method ต่างๆประกาศ ตรงนี้ เช่น
    -(IBAction) AddRecord:(id) sender;
    @end

    ลองไปอ่าน objective-c ก่อนก็ได้ครับ จะเข้าใจง่ายกว่า

  4. พี่ครับ ผมอยากทราบว่า จะดูตรงไหนว่าเป็นmethod ใช่ -(id) หรือ -(IBAction) AddRecord :
    อย่างงี้ใช่ไหมครับ อยากให้อธิบายว่าส่วนไหนเป็นตัวแปรด้วยอ่ะครับ

    ปล.ช่วยหน่อยนะครับ แบบว่าไม่เป็นเลยแถมไม่มีงบไปซื้อหนังสืออีกอ่ะครับ

  5. ต้องอ่านจาก document นะครับ ตัวอย่าง class ที่ต้องการ datasource อีกตัวอย่างก็ได้แก่ NSComboBox

  6. >> คือผมยังไม่ค่อยเข้าใจคำถามอะนะครับ แต่ว่า ถ้าหากเราต้องการให้ Class ที่เราเขียนขึ้นเป็น datasource ให้กับ table นั่นก็แปลว่า Class ที่เราจะเขียนมันจะต้องมี numberOfRowsInTableView และ tableView:objectValueForTableColumn:row:

    ครับผม ที่ผมสงสัยคือพอผมจะเริ่มต้นเขียน class ที่เป็น data source น่ะครับ ผมจะทราบได้ยังไงว่าต้อง implement method ชื่ออะไร เพื่อให้ทำงานได้ .. จะต้องไปเปิด document หรือ class reference ตัวไหนรึเปล่าครับ

    พอดีเริ่มเขียนแบบมือใหม่น่ะครับ เลยไม่ทราบว่าต้องเขียน method ตัวไหนบ้าง เลยอยากทราบที่มาว่าต้องไปหาจากหนังสืออะไรก่อนรึเปล่าครับถึงจะรู้ชื่อ method นี้

  7. คือผมยังไม่ค่อยเข้าใจคำถามอะนะครับ แต่ว่า ถ้าหากเราต้องการให้ Class ที่เราเขียนขึ้นเป็น datasource ให้กับ table นั่นก็แปลว่า Class ที่เราจะเขียนมันจะต้องมี numberOfRowsInTableView และ tableView:objectValueForTableColumn:row:

  8. ขอถามหน่อยสิครับ … แล้วเราจะรู้ได้อย่างไรว่าเราต้องสร้าง method tableView กับ numberOfRowsInTableView เพื่อให้ table มาอ่านข้อมูลจากในนั้นอ่ะครับ

Leave a Reply