Cocoa Programming IV : Array Controller

เมื่อวันก่อนๆ ได้เรียนรู้เกี่ยวกับ การใช้งาน Binding และ MVC กันไปแล้วสำหรับวันนี้จะได้นำมาใช้กับ NSArrayController กัน

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

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

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

newproject

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

addclass

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

AppController.h

AppController.m

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

StudentData.h

StudentData.m

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

interface

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

appcontroller1

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

array

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

attributes

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

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

bind_key

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

bind_name

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

bind_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 ที่ต้องเรา เข้ากับ ปุ่มที่เรามี เพียงเท่านี้ก็ใช้งานได้  ดูรูปประกอบ

link_action

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

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

result1

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

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

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

2 thoughts on “Cocoa Programming IV : Array Controller”

  1. StudentData.m
    ในไฟล์ StudentData.m ขาด self = [super init]; รึเปล่าครับ

    @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

Leave a Reply