Untitled

ไม่น่าเชื่อว่าเอารูปไปไว้บน blog จะยากเย็นได้ขนาดนี้... เอาเป็นว่า ผมเอาวิธีการเขียนไป post ไว้บน web ผมเองละกัน ไว้ใครอยากอ่านแบบมีรูปประกอบก็ไปดูใน apirak.com ละกันนะครับ



เขียนไว้นอนละแต่ไม่ได้ post ซักทีไม่นึกว่าจะยากขนาดนี้



วันนี้ลองมาพัฒนา application กันเพื่อทดสอบความสามารถหลายอย่างของ cocoa framework เช่น การเชื่อมต่อระหว่าง xCode กับ interface builder การทำ custom view และการใช้งาน slide view กับ color panel :) หลังจากที่เราทำเสร็จแล้วก็จะได้ผลดังรูปครับ



dotView.jpg



เราเริ่มต้นด้วยการ New Project ครับ



Pic1.jpg



จากนั้นเลือก New Project เป็น Cocoa Application



Pic2.jpg



ตั้งชื่อเป็น DotView หรือเป็นอะไรก็ได้ครับ แล้วแต่จะชอบในส่วนนี้



Pic3.jpg



หลังจากที่เราสร้าง project เรียบร้อยแล้ว รอซักพักหนึงเพื่อให้ xCode ทำ indexing ให้เราก่อน จากนั้นเรามาเริ่มกันที่ interface เลยนะครับ ให้ double click บน icon MainMenu.nib ที่ด้านซ้ายหรือด้านขวา ก็ได้



Pic4.jpg



พอ double click บน MainMenu แล้ว โปรแกรม interface builder จะถูกเปิดขึ้นมา ให้เราเอา ลาก customView มาใส่ในหน้าต่างที่ชื่อว่า Window ครับ (หน้าต่าง Windows นี่ล่ะที่จะเป็นภาพของ application ของเรา)



Pic5.jpg



ต่อจากนั้นก็เอา Slider กับ ColorWell มาใส่ใน Windows ครับ ระหว่างนี้อยากให้ศึกษาพวกเส้นสีฟ้าที่จะช่วยในการปรับแต่งให้ application ของเราให้ลงตัว ถ้าใครได้ศึกษา HIG (Human Interface Guideline) ของ apple จะเห็นว่าเส้นเหล่านี้ถูกออกแบบมาอย่างดีเพื่อช่วยให้เราพัฒนาโปรแกรมได้ตามที่ apple ได้วางไว้



Pic6.jpg



ต่อไปเราจะมาจัดการเรื่องขนาดของ view แต่ละอันนะครับ สำหรับส่วนนี้ก็เป็นส่วนที่ฉลาดมากๆๆๆ ของ Interface builder เช่นกันลองมาดูกันเลยนะครับ ขั้นแรกเปิด Info windows ขึ้นมาก่อน



Pic7.jpg



ให้เลือกที่ CustomView จากนั้นบน NSView (Custom) Info ให้เลือก Size แล้วกดให้เกิดรูปสะปลิงดังรูป ซึ่งหมายความว่า CustomView ตัวนี้จะขยายออกได้ทั้งบนล่างซ้ายขวา โดยยิดติดกับด้านข้างของ windows เอาไว้ ให้กด apple+r เพื่อทดลองผลครับ แล้วกด apple+q เพื่อกลับมาแต่งต่อ



Pic8.jpg



จากนั้นก็มาจัดการตัว ColorWell กันบ้างนะครับ ดูที่ windows NSColorWell Info ให้กดที่สะปลิงให้เป็นดังรูป ซึ่งหมายถึง ColorWell ของเราจะยึดเข้ากับมุมล่างซ้าย แต่ด้านบนขวาจะเปิดให้ยืดได้ ในขณะที่ขนาดของ ColorWell ไม่เปลี่ยนแปลง



Pic9.jpg



สำหรับตัว Slide ก็ปรับตามรูปครับ แต่พอเห็นก็คงเดากันได้นะครับว่าหมายถึงอย่างไร :)



Pic10.jpg



พอเราได้ interface เรียบร้อยแล้วก็กลับมาที่ Xcode ครับ เราจะมาสร้าง CustomView ให้เป็นไปในแบบที่เราต้องการ สั่ง new file โดยกดที่ Menu -> File -> New File... จากนั้นเลือก Objective-C class



Pic11.jpg



การที่เราสร้าง class นี้ขึ้นมาก็เพื่อให้เป็นตัวแทนของ NSView โดยเราตั้งชื่อมันว่า DotView (เพราะเราจะวาดจุดลงไปครับ เลยเรียกแบบนี้ไปก่อน :p ) ลองดูต่อละกันว่าจะให้มันเป็นตัวแทนของ NSView ได้อย่างไร



Pic16.jpg



หลังจากสร้างแล้วเราจะได้ DotView.h กับ DowView.m มาสองไฟล์ อันนึงเป็น Header ไฟล์ อีกอันเป็น implement ไฟล์ ดังรูป แต่อย่าลืมเปลี่ยน NSObject ไปเป็น NSView ด้วยนะครับ (ในรูปไม่ได้เปลี่ยนให้ดู) ที่เราเปลี่ยนก็เพื่อให้ DotView ของเราต่อยอดความสามารถของ NSView มาใช้ครับ



Pic17.jpg



สำหรับไฟล์ DotView.m เราจะเขียนโปรแกรมเพื่อควบคุมมันแบบนี้ครับ

//
//  DotView.m
//  DrawCircle
//
//  Created by Apirak Panatkool on Thu Jan 13 2005.
//  Copyright (c) 2005 __MyCompanyName__. All rights reserved.
//

#import "DotView.h"

@implementation DotView

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

- (id)initWithFrame:(NSRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        center.x = center.y = 100.0;
        radius = 50;
        color = [[NSColor blueColor] retain];
    }
    return self;
}

method นี้เอาไว้เอาไว้ตอนปิด application ครับ

-(void)dealloc {
    [color release];
    [super dealloc];
}

method นี้จะถูกเรียกตอนที่ frame ถูก refresh ครับ

- (void)drawRect:(NSRect)rect {
    //Clear the full bounds of the view
    
    NSRect bounds = [self bounds];
    [[NSColor whiteColor] set];
    NSRectFill(bounds);

    //Draw the dot
    NSRect dotRect = NSMakeRect(center.x-radius,center.y-radius, 2*radius, 2*radius);
    [color set];
    [[NSBezierPath bezierPathWithOvalInRect:dotRect] fill];
}

อันนี้ชัดเจนครับถูกเรียกตอน mouse down อันนี้ก็เป็นข้อดีอันนึงของ cocoa ครับ มันเป็นแบบ call back แทนที่จะเป็นแบบวน loop คอยตรวจดู

-(void)mouseDown:(NSEvent *) event {
    NSPoint eventLocation = [event locationInWindow];
    center = [self convertPoint:eventLocation fromView:nil];
    [self setNeedsDisplay:YES];
}

mouseDragged ก็เหมือน mouse down ครับ

-(void)mouseDragged:(NSEvent *)event {
    [self mouseDown:event];
}

method changeSize กับ changeColor เอาไว้ให้ slideer กับ color มาเรียก

-(void)changeSize:(id)sender {
    radius = [sender floatValue];
    [self setNeedsDisplay:YES];
}

- (void)setColor:(NSColor *)newColor {
    if(newColor != color){
        [color release];
        color = [newColor retain];
        [self setNeedsDisplay:YES];
    }
}

-(void)changeColor:(id)sender{
    NSColor *newColor = [sender color];
    [self setColor:newColor];
}

@end

ต่อไปก็กลับมาจัดการ Interface Builder ต่อครับ ให้เลือกที่ windows MainMenu.nib แล้วเลือก tab Classes



Pic18.jpg



จากนั้นให้ clickขวาบน NSObject แล้วเลือก ReadFiles...



Pic19.jpg



จากนั้นก็เลือก File DotView.h ครับ



Pic20.jpg



แล้วเราก็จะเห็น DotView โผลออกมาครับ อย่าลืมสังเกตุนะครับว่า DotView เป็น subclass ของ NSView



Pic22.jpg



ที่นี้ก็ถึงเวลาแปลงให้ CustomeView ให้กลายเห็น DotView ของเราวิธีการก็คือเลือก CustomView แล้วเลือก class DotView ใน DotView (Custom) Info -> Custom Class -> DotView ครับ จะสังเกตุคำว่า Custome view เปลี่ยนเป็น DotView ไปแล้ว :)



Pic23.jpg



จากนั้นให้กด ctrl