Batz-J

int main (int argc, char* argv)
{
return NSApplicationMain (argc, (const char**) argv);
}

• 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 ก็เป็นอันเสร็จ

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

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

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

Define method, member

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

@interface WordCount : NSObject
{
IBOutlet NSTextField *m_textFieldInput;
IBOutlet NSTextField *m_textFieldOutput;
}
- (IBAction) countString:(id)sender;
@end

- (IBAction) countString:(id)sender;

จะเห็นว่า 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 ของเรา

@implementation WordCount
-(IBAction) countString:(id) sender
{
NSString *text = [m_textFieldInput stringValue];
if( [text length] != 0)
{
[m_textFieldOutput setIntValue:[text length]];
}
}
@end

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

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

Build & Run

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

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

Link: http://www.macfeteria.com/2008/07/cocoa-programming-i/