Cocoa Programming I

ในที่สุดก็ได้เขียน Tutorial เกี่ยวกับ Cocoa ซะที เอาละมาเริ่มเลยดีกว่า

สำหรับโปรแกรมแรกที่จะได้ลองเขียน ผมใช้ชื่อว่า WordCount เป็นโปรแกรมง่ายๆ เอาไว้นับตัวอักษรใน text field ( ถ้าเป็น windows จะเรียกว่า text box ) แล้วก็แสดงผลออกมา

New Project

ก่อนอื่นเลยเราก็เปิดโปรแกรม xcode ขึ้นมาครับ แล้วเราก็สร้าง project ด้วย Cocoa Application หน้าตาจะเป็นประมาณนี้

New Cocoa Application Project

เมื่อเราเลือกโปรเจคเรียบร้อย และทำการตั้งชื่อว่า WordCount แล้วเราก็จะเห็น หน้าต่างมีหน้าตาประมาณนี้

ก็เท่านี้ก็เป็นการได้สร้าง Cocoa Application Project เรียบร้อยแล้ว

โดยปกติแล้วเมื่อเราสร้าง Cocoa Application ขึ้นมาจะมี File ทั้งหมดประมาณ 5 File ด้วยกัน แต่จะมี File ที่สำคัญ อยู่ด้วยกัน 3 File นั่นก็คือ

  • main.m ถ้าเราเปิด file นี้มาดูจะเห็น code ตามข้างล่าง

    กว่า 95 % เราแทบจะไม่ต้องไปแก้ไข file นี้เลย
  • MainMenu.xib เป็น File ที่เก็บ interface ของโปรแกรม
  • info.plist ย่อมาจาก property list เป็น file ที่เก็บค่ารายละเอียดต่างๆ

Let’s make interface

ต่อไปก็เป็นการออกแบบหน้าตาโปรแกรม การออกแบบ user interface นั้นทำได้ง่ายมากๆเพียงแค่เราเปิด file ที่มีชื่อว่า MainMenu.xib แล้ว xcode จะไปเปิดโปรแกรมที่มีชื่อว่า Interface Builder ขึ้นมา และหน้าของ interface builder ก็จะมีลักษณะประมาณแบบนี้

ทั้งหมดนั้นจะประกอบไปด้วยหน้าต่างที่สำคัญๆ ได้แก่

  • Xib document window
    window นี้จะเป็นส่วนที่บอกว่าใน xib file ของเราประกอบไปด้วยอะไรบ้าง
  • Library window
    สำหรับหน้าต่างนี้จะบอกถึง Class ต่างๆที่เราสามารถใช้งานได้ และถ้าหากเราต้องการสร้าง Button หรือส่วนประกอบต่างๆ ก็ต้องใช้ object จากตรงนี้ในการสร้าง
  • Inspector window
    เป็นส่วนกำหนดค่าต่างๆของ Object นั้นๆ เช่นว่า ความกว้าง ยาว ของ object
  • Connection Panel
    เป็นส่วนสำคัญที่เป็นตัวกำหนดว่า เราจะให้ Object ไหนทำหน้าที่อะไร ส่งหรือรับ message

งั้นเรามาเริ่มออกแบบหน้าตากันเลยดีกว่า วิธีการก็ไม่ยาก เพียงแค่เปิด Library Windows ขึ้นมาก็จะเห็น Object ต่างๆมากมาย ไม่ว่าจะเป็น Button , TextField , Checkbox และอื่นๆมากมาย ก็ลองจับมาวางใส่ให้เป็น ประมาณนี้

ถ้าหากตัวหนังสือตรงปุ่ม ยังเป็นคำว่า Button เราก็เปลี่ยนได้โดยการเลือกที่ Button เปิดหน้าต่าง Inspector Window ขึ้นมา แล้วก็จะเห็นดังภาพ หลังจากนั้นก็แก้ไข ตรง Title ก็เป็นอันเสร็จ

และก็ลองปรับ property ของสิ่งอื่นๆได้เหมือนกันเช่น เราไม่ชอบ Font ของ Label เราก็เปลี่ยนได้ที่หน้า Inspector นี้

Let’s make Class & Object

หลังจากได้ Windows มีัลักษณะหน้าตาประมาณนี้แล้ว ต่อไปก็เริ่มเขียนในส่วนของ Class และตัวโปรแกรมกันเลย

อย่างแรกที่เราจะทำคือ เพิ่ม class เข้าไปใน Project ของเรา โดย class นี้จะเป็นส่วนของตัวโปรแกรมทั้งหมด วิธีการสร้าง class ก็ไม่ได้ยาก และทำได้หลายวิธี แต่ผมใช้วิธีการ click ขวาตรง Folder ด้านซ้ายของ XCode ก็จะเห็นดังรูป เสร็จแล้วเราก็เลือก Add >> New File .. แบบรูปข้างล่างนี้

เมื่อเราเลือกไปที่ Add >> New File .. แล้วก็จะพบหน้าต่างในการสร้างไฟล์ต่างๆมากมาย และใน tutorial นี้เราจะสร้าง Objective-C Class ขึ้นมา เราก็เลือกแบบที่แสดงให้เห็นตามรูปเลย

แล้วเราก็ตั้งชื่อ class ของเราว่า WordCount  แบบรูปข้างล่าง

หลังจากนั้นเราจะได้ File มาเพิ่มอีก 2 Files นั่นก็คือ WordCount.m และ WordCount.h

Define method, member

ต่อไปเราก็จะมาเริ่มการเขียน code กัน โดย file แรกทีเราจะเขียนก็คือ WordCount.h

จาก Code ข้างบน จะเห็นว่าได้ใน WordCount มี แค่ 1 method เท่านั้นนั่นก็คือ

จะเห็นว่า method นี้ได้ส่งค่ากลับมาคือ IBAction และรับ parameter เป็น id อธิบายง่ายๆคือว่า method นี้เอาไว้รับ message จาก interface นั่นเอง

เอาง่ายๆว่า ถ้าเราจะเขียนว่า กดปุ่มแล้วให้ไปเรียกใช้ method นี้ เราต้องประกาศใน method ให้เป็น IBAction และรับค่า เข้ามาเป็น id นั่นเอง และอย่าง countString เราก็ต้องการให้กดปุ่ม count แล้วมันมาเรียกใช้ countString

และเรามีตัวแปรอีก 2 ตัวคือ m_textFieldInput และ m_textFieldOutput โดยทั้งสองตัวแปรนี้เป็น NSTextField แต่ที่มีเพิ่มเข้ามาก็คือ IBOutlet เพื่อเป็นการบอกว่า textfield ทั้งสองตัวนี้เป็นตัวแสดง output ไปยัง interface ( จาก window ที่เราออกแบบใน interface builder มาจะเห็นว่า เรามี textField อยู่ 2 อันคือ อันแรกเอาไว้ให้ user พิมพ์ข้อความ ส่วนอีกอันเอาไว้แสดงจำนวนตัวอักษร )

Link Object & Interface

หลังจากเราประกาศ member และ method แล้วต่อไปเราจะเข้าสู่ส่วนสำคัญนั่นก็คือการเชื่อมต่อระหว่าง Interface ที่เราออกแบบ ให้เข้ากับ Class ของเรา

ให้กลับไปยัง Interface Builder แล้วก็ให้เพิ่ม Object เข้า xib ของเรา โดยเปิด หน้าต่าง Library และลากกล่องสีฟ้าๆที่เขียนว่า Object เข้ามาที่ Xib Window ของเราเหมือนดังรูปข้างล่าง

เพื่อที่ว่า เราจะให้ object นี้เป็น instance ของ class ที่เราเขียนขึ้นมานั่นเอง และที่ต้องทำต่อไปก็คือให้ไปที่หน้าต่าง Inspector เพื่อเปลี่ยนกล่องสีฟ้า ให้เป็น object ของ class เรา ดังรูป ( ตรง class ให้เปลี่ยนเป็น WordCount )

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

โดยสิ่งแรกที่เราจะทำก็คือ เชื่อมระหว่าง m_textFieldInput ของเราเข้ากับ TextField ใน Interface วิธีการก็คือ

  1. Click ขวา ที่ Custom Object ที่เราสร้างขึ้นมา
  2. หลังจากนั้นมันจะเปิดหน้าต่าง ( Connection Panel ) สีดำ
  3. กดไปที่จุดกลมๆข้างหลัง m_textFieldInput
  4. ลากให้เชื่อมต่อกับ TextField ที่เราต้องการ

แบบในรูป

และเราก็ทำต่อในส่วนของ m_textFieldOutput เหมือนๆกัน เพียงเท่านี้ เราก็ได้เชื่อม ระหว่าง textField เข้าด้วยกันแล้ว

แต่ยังเหลือ การเชื่อมต่อ ระหว่าง Action ของเราอีก 1 อย่างนั่นก็คือ เราอยากให้ กดปุ่ม Count แล้วมันไปเรียก countWord นั่นเอง วิธีการก็ไม่ยาก แต่สลับกันนิดหน่อย

  1. กด Click ที่ Button ของเราใน interface
  2. กด Ctrl ค้าง
  3. ลากเส้นสีฟ้า มายัง Custom Object ของเรา
  4. จะมีหน้าต่าง connection panel ขึ้นมาและจะเห็นว่า มี method ที่ชื่อว่า countWord ขึ้นมา แล้วก็กดเลือก

ก็จะเป็นประมาณแบบในรูป

เพียงเท่านี้ก็เสร็จเรียบร้อยแล้ว ณ ตอนนี้เราได้ทำการเชื่อมระหว่าง objcect ของเรา เ้ข้ากับ interface ที่เราสร้างเรียบร้อยแล้ว

Coding

เรายังเหลืองานที่ต้องทำอีกแค่อย่างสุดท้ายนั่นก็คือ implement class ของเรา

จาก code ข้างบน เราได้ นับจำนวน string จาก m_textFieldInput แล้วก็ก็ ใส่ค่าผลลัพธ์ที่ได้ให้กับ m_textFieldOutput

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

Build & Run

และขึ้นตอนสูดท้ายเราก็ Compile แล้วก็ run program ขึ้นมาดู ก็จะเห็นเหมือนในรูป

เพียงแค่นี้เราก็ได้โปรแกรมออกมาแล้ว

ก็ลองๆไปเล่นกันดูครับไม่ยากเลย ติดตรงไหนถามได้ ติชมกันเข้ามาครับ และส่วน Source Code ก็ download ได้จาก

Download Cocoa Programming I Source Files

7 thoughts on “Cocoa Programming I”

  1. จริงๆไม่ใช่ error นะครับ แต่เป็น warning มากกว่า
    ไม่ใช่ผิดนะครับ แต่มันเตือนบอกว่า ถ้าเปลี่ยน unsigned int เป็น int ข้อมูลอาจจะไม่ถูกต้อง

    แต่ในกรณีเรารู้อยู่แล้วว่ามันไม่เป็นปัญหาอะไร
    ถ้าอยากจะแก้ให้หายก็ทำได้โดยการ cast ให้เป็น int

    [m_textFieldOutput setIntValue:(int)[text length]];

  2. รบกวนสอบถามครับ ผมลองหัดเขียนตามที่คุณสอน แล้วไฟล์ wordcount.m มันฟ้อง eror ว่า
    Implicit conversion loses integer precision: ‘NSUInteger'(aka ‘unsinged long’) to ‘Int’
    ไม่ทราบว่ามันผิดตรงไหนครับ ขอบคุณครับ ผมใช้ xcode 4.4 เขียนครับ

  3. ขอบคุณมากๆ ครับ ที่ให้ความรู้แก่ชาวไทย

  4. ผมอยากให้มีตัวอย่างแบบนี้เยอะๆ เลยนะครับ
    เผื่อว่าจะนำไปประยุกต์ใช้ต่อไปครับ

Leave a Reply