ตอนนี้ก็สามทุ่มกว่าๆ แล้ว พักจากการอ่านหนังสิอเตรียมสอบ ก็เลยกะว่าจะมานั้งเขียนบล๊อกต่อ คราวที่แล้วติดเอาไว้ว่าเด๋วคราวนี้จะมาเปิดซิงเพื่อนๆที่ต้องการพัฒนา Mac application ด้วย Cocoa ด้วยการสร้างโปรแกรมแรกนั้นก็คือ Hello World! นั่นเอง งั้นเรามาดูกานก่อนว่าหน้าตาโปรแกรมที่หลังจากทำเสร็จแล้วออกมาจะเป็นยังไง

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

งั้นเรามาเริ่มกานเลยดีกว่านะครับ

ขั้นตอนที่ 1: Create Project

- เปิด Xcode ขึ้นมานะครับ แล้วเลือก Cocoa Application แล้วทำการสร้าง HelloWorld ขึ้นมานะครับ

- ยังไม่ต้องทำไรทั้งนั้นเลยครับ เราลองกด Build and Run ดูก่อนเลยครับว่าโปรแกรมมันให้อะไรเรามาแล้วบ้าง

จะเห็นได้ว่าหลังจาก run โปรแกรมขึ้นมาแล้ว เราก็จะได้หน้าต่างเปล่า ที่มีหัวว่า HelloWorld ขึ้นมาอันนึง

ขั้นตอนที่สอง 2: Create UI

ในขั้นตอนนี้ ไม่ได้จำกัดตายตัวนะครับว่าเราต้องสร้าง UI ก่อน บางคนถนัดเขียนโค้ดก่อนก็สามารถทำได้นะครับ แต่ว่าในส่วนตัวของผมแล้ว เวลาผมเห้นภาพรวมของโปรแกรมแล้วทำให้ผมนึกออกครับว่าจะเขียนโค้ดยังไง

จากที่เห็นแล้วว่าโปรแกรมที่เราจะทำหน้าตามันออกมาซับซ้อนมากมาย(ตรงไหนหว่า) ก็จะประกอบไปด้วย Button แล้วก็ Label

Button ทำหน้าที่รองรับ Event ส่วน Label ก็ทำหน้าที่แสดงผลออกมา

- Double click ที่ HelloWorld/Resources/MainMenu.xib เพื่อที่จะเป็น Interface Builder ขึ้นมาทำการสร้าง UI นะครับ

- ลาก Button และ Label ลงไปใน Window

** วิธีการลากนะครับ จากรูปข้างล่างจะมีหน้าต่างที่ชื่อว่า Library อยู่ด้านซ้ายมือ

ที่ล่างสุดของหน้าต่าง Library นี้จะมี search field ให้เราใช้นะครับ พิมพ์คำว่า Button ลงไป แล้วมันจะมี List รูปภาพของปุ่มต่างๆมาให้เราเลือกนะครับ ให้เราลากปุ่มลงมาไว้ในหน้าต่าง HelloWorld ว่างๆ ของเรานะครับ ทำแบบนี้เหมือนกันกับ Label นะครับ

ต่อมาให้เราเลือกที่ปุ่ม แล้วที่หน้าต่างด้านขวาให้เลือกไปที่แทป Button attributes ทำการเปลี่ยน Title

ทำแบบเดียวกันกับ label ครับ

หลังจากที่เราได้หน้าตาเหมือนกับภาพข้างบนแล้วนะครับ เราก็จะเห็นได้ว่าเราต้องเขียนโค้ดยังไงนะครับ

1. เราต้องการ function เพื่อนที่จะมารองรับกับ Event ของการกดเพื่อจะได้แสดงผลคำว่า Hello World! ออกมา

2. เราต้องการ Variable ตัวนึงเพื่อทำการเก็บค่าแล้วไปแสดงผลที่ Label ในหน้าต่างนั่นเอง

ขั้นตอนที่ 3: Coding

- ให้เราสร้าง file objective-c ขึ้นมาให้ File/New file/Objective-C class

- ตั้งชื่อว่า HelloWorld

- ไปที่ HelloWorld.h สร้าง NSTextField ขึ้นมาเพื่อที่จะเก็บค่าให้ Lebel แสดงผล

ต่อมาสร้าง Function ที่ชื่อว่า sayIt เพื่อที่จะลองรับ event จากการกดปุ่ม

#import <Cocoa/Cocoa.h>

@interface HelloWorld : NSWindowController {
 IBOutlet NSTextField *text;
}

- (IBAction)sayIt:(id)sender;
@end
<p>

- และทำการ Implement ใน HelloWorld.m ตามโค้ดข้างล่าง

#import "HelloWorld.h"

@implementation HelloWorld
-(id)init
{
 [super init];
 text = [[NSTextField alloc] init];
 return self;
}

- (IBAction)sayIt:(id)sender
{
 [text setObjectValue:@"Hello World!"];
}
@end

เพียงแค่นี้ในส่วนของตัวโค้ดก็ทำงานได้แลัวครับ ที่นี้เราก็เหลืออีกนึงขั้นตอนซึ่งเป็นขั้นตอนสุดท้ายนั้นก็คือการทำให้ UI และ Code ของเราทำงานสัมพันกันครับ

ขั้นตอนที่ 4: Make Connection

- เรามาทำการสร้าง Instance ของ HelloWorld object ที่เราเพิ่งสร้างไป ให้กับ UI เราได้รู้จักกันก่อนครับ

ทำแบบเดียวกันกับการลากปุ่มเลยครับ แต่ว่าให้เราพิมพ์ค่าว่า NSObject ใน search box ของ Library

แล้วลาก Object ลงไปที่ Doc Window ของ MianMenu.xib English ครับ

แล้วทำการกำหนด Class ให้กับ Object ตัวที่เราเพิ่งลากมาให้เป็น HelloWord ที่เราสร้างรอไว้แล้วในโค้ดครับ

- ต่อมาเราใช้ กำหนด Action ให้กับปุ่มนะครับว่าถ้าพอเรากดปุ่มเนี้ย ให้ไปเรียก Function ที่ชื่อว่า sayIt

ให้เรากด Control key ค้างไว้แล้วเอา mouse ลากจากปุ่ม Say it! ไปที่ Hello World Object ของเราครับ

แล้วให้เราเลือก sayIt ครับ

- ต่อจากนั้นให้เราทำการ Control ลากจาก Hello World Object ของเราไปที่ Label นะครับแล้วทำการเลือก text

เพื่อที่เราจะต้องการให้ Lebel แสดงผลของ text ออกมา

ลอง Save แล้ว Run จาก Xcode ดูนะครับ ถ้าไม่มีอะไรผิดพลาดเราก็จะได้โปรแกรมแบบที่เห็นในรูปแรกนะครับ

** ในคราวนี้ผมขอยังไม่อธิบายลงลึกในรายอะเอียดเกี่ยว Structure ของโค้ด หรือ การใช้ Interface Builder มากนักนะครับ เพราะว่ามันเหนื่อย ฮาๆๆ

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

ถ้ามีขั้นตอนไหนผมอธิบายไม่ชัดเจน comment กันมาได้นะครับ