1.4.1  프로젝트 생성
이전 포스트에서 경험 해 본 코코아 프로젝트와 소스파일을 생성하고, 인터페이스 빌더와 연결 할 수 있다는 전제 하에 설명하겠습니다. 이 부분에 이해가 안되시면 1.2와 1.3 포스트를 해보시고 오시기 바랍니다.

Xcode를 실행하고 아래와 같이 SimpleCalc  코코아 프로젝트를 생성합니다.
  1. 메뉴바에서 File/New Project...를 선택합니다.
  2. Application/Cocoa Application을 선택합니다.
  3. roject Name에 SimpleCalc를 입력하고 finish 버튼을 클릭합니다.

1.4.2  AppController class 생성 및 변경
이전 장과 똑같은 방법으로 AppController.h와 AppController.m 파일을 생성합니다.

1) AppController.h 파일 변경

Xcode에서 생성된 AppController.h 파일을 편집창에서 열어 아래와 같이 파란색 라인을 추가합니다.
#import <Cocoa/Cocoa.h>

@interface AppController : NSObject {
    IBOutlet NSTextField *txtResult;
    IBOutlet NSTextField *txtValue;
}

- (IBAction)plusClicked:(id)sender;
- (IBAction)minusClicked:(id)sender;
- (IBAction)muntiplyClicked:(id)sender;
- (IBAction)devideClicked:(id)sender;

@end

IBOutlet NSTextField *txtResult;
IBOutlet NSTextField *txtValue;
위와 같이 계산된 결과값을 표시해 줄 txtResult와 사용자가 입력하는 숫자를 입력 받을 txtValue를 선언 합니다.

- (IBAction)plusClicked:(id)sender;
- (IBAction)minusClicked:(id)sender;
- (IBAction)muntiplyClicked:(id)sender;
- (IBAction)devideClicked:(id)sender;
위와 같이 더하기/빼기/곱하기/나누기 연산을 처리 할 메소드를 선언합니다.

2)  AppController.m 파일 변경

다음은 AppController.m 파일을 편집창에서 열어 아래와 같이 파란색 라인을 추가합니다.
#import "AppController.h"


@implementation AppController
- (IBAction)plusClicked:(id)sender
{
    float curResult = [txtResult floatValue];
    float curValue = [txtValue floatValue];
   
    curResult += curValue;
    [txtResult setFloatValue:curResult];
    [txtValue setStringValue:@""];
}

- (IBAction)minusClicked:(id)sender
{
    float curResult = [txtResult floatValue];
    float curValue = [txtValue floatValue];
   
    curResult -= curValue;
    [txtResult setFloatValue:curResult];
    [txtValue setStringValue:@""];
}

- (IBAction)muntiplyClicked:(id)sender
{
    float curResult = [txtResult floatValue];
    float curValue = [txtValue floatValue];

    if(curValue == 0.0f)
        return;

    curResult *= curValue;
    [txtResult setFloatValue:curResult];
    [txtValue setStringValue:@""];
}

- (IBAction)devideClicked:(id)sender
{
    float curResult = [txtResult floatValue];
    float curValue = [txtValue floatValue];

    if(curValue == 0.0f)
        return;
   
    curResult /= curValue;
    [txtResult setFloatValue:curResult];
    [txtValue setStringValue:@""];
}

@end

나중에 인터페이스 빌더에서 만들어질 +, -, *, / 버튼이 클릭되었을 때, 행동을 지정합니다. 모두 같은 기능을 하니 plucClicked만 예를 들겠습니다.

float curResult = [txtResult floatValue];
결과 창의 현재 값을 가지고 옵니다. 소수점을 지원하기 위해 float으로 선언합니다.

float curValue = [txtValue floatValue];
현재 사용자가 입력한 값을 가지고 옵니다.

curResult += curValue;
사용자가 입력한 값을 현재 값에 더합니다. curResult = curResult + curValue; 과 같은 의미입니다. 더하기(+)와 마이너스(-)는 일반 사용하는 기호와 같지만 곱하기는 "*", 나누기는 "/"를 사용합니다.

[txtResult setFloatValue:curResult];
계산된 값을 텍스트 필드에 저장 합니다. 이 명령으로 사용자는 최종 계산된 값을 볼 수 있습니다.

[txtValue setStringValue:@""];
다음 입력을 위하여 현재 입력창의 내용을 지웁니다. 쌍따움표 앞에 @는 아스키 코드를 NSString 형태로 바꾸어 줍니다. @""로는 한글은 표현할 수 없습니다.
 
곱하기와 나누기에는 아래의 내용이 더 추가되어 있습니다.
if(curValue == 0.0f)
        return;
사용자가 미입력시나 0을 입력하였을 경우, 0으로 곱하거나 나누어지는 것을 방지합니다.

3) Nib에 인스턴스 생성

이제 소스파일에서 변경된 사항을 저장하고 Xcode의 AppController.h를 마우스로 드래그 하여 인터페이스 빌더의 윈도우로 가져다 놓습니다. classes 윈도우에서 AppController를 우클릭 하여, Instantiate AppController를 클릭하여 아래와 같이 인스턴스를 생성합니다.
사용자 삽입 이미지

1.4.3  인터페이스 빌더에서 윈도우 생성 및 연결

1) 컨트롤 추가

윈도우를 틀릭하여 아래와 같이 컨트롤들을 추가하고 배치 합니다.
사용자 삽입 이미지

텍스트 필드 두개와  버튼 네개 (버튼은 하나를 가져 온 후, 복사/붙여 놓기로 사용하셔도 됩니다.)를 가져다 놓습니다. 상하 구분선은 팔레트의 두번째 Controls 항목에 있으며, 아래의 화살표를 참조 하여 마우스로 드래그 해 오시면 됩니다.
사용자 삽입 이미지

텍스트 필드는 숫자 형식으로 보여지기 위해, 아래의 우측에 보이는 팔레트에서 1.99$로 표시되어 있는 숫자형식을 지정하는 콘트롤을 드래그 해서 윈도우의 텍스트 필드에 가져다 놓습니다. 그 하단의 텍스트 필드에도 위와 같이 숫자형식 콘트롤을 드래그 해 놓습니다.
사용자 삽입 이미지

윈도우의 텍스트 필드를 클릭하고 [command + shift + i]를 클릭하여,  인스펙터를  오픈합니다. 숫자를 표현하기 위해 좌측 Attributes 항목에서 Alignment를 세번째 우측 정렬로 선택합니다. 위의 숫자형식 콘트롤을 추가하였기 때문에 오른쪽 이미지와 같이 마지막 속성에 Formmatter란 숫자형식을 지정할 수 있는 속성이 추가되었습니다. 첫번째 항목을 선택 합니다. 위의 작업 역시 하단의 텍스트 필드에도 똑같이 해줍니다.

가장 위의 결과창(모서리가 동그란 입력창)은 보여주기만 하므로 Options에서 Editable 클릭을 해제합니다.
사용자 삽입 이미지 사용자 삽입 이미지

2) AppCrontroller와 연결

이제는 AppConroller의 속성과 메소드를 연결합니다. AppController를 controll키와 함께 드래그하여 상단의 텍스트 필드와 txtResult 아울렛에 연결합니다. 마찬가지로 하단 왼쪽의 텍스트 필드와 txtValue와 연결합니다.

사용자 삽입 이미지

각각의 버튼들 controll키와 함께 AppController로 드래그 하여 + -> plusClicked, - -> minusClicked, * -> multiflyClicked, / -> devideClicked 로 연결(Connect)합니다.
사용자 삽입 이미지

위의 인터페이스 빌더의 일련의 작업들이 이해가 안가시는 분은 이전 포스트를 참조해 주세요.

1.4.4 테스트 및 추가사항
이제 모든 작업이 완료되었습니다. Build And Go를 클릭합니다. 빌드가 완료되면 아래와 같이
윈도우가 나타납니다. 좌측 아래 사각 입력창에 숫자를 입력하고 버튼들을 차례로 누르면서 결과값을 확인해 봅니다.
사용자 삽입 이미지

정말로 간단한 계산기가 완료 되었습니다. 다음번엔 여기에 기능들을 추가하고 조금은 어플리케이션 다운모습으로 만들어 볼려고 합니다.

저도 공부하면서 올리는 중이니 용어 사용이나,  구현에 있어 적절치 못한 부분이 많이 있을 것으로 생각됩니다. 지적과 조언은 언제나 감사하게 받아 들이겠습니다.



AND

1.3.1 소스코드 생성
1) 소스코드 생성

사용자 삽입 이미지
툴바에서 Action버튼을 클릭하여 Add/New File... 을 클릭합니다. 키보드에서 [Command + N]을 누르거나 Xcode메뉴에서 File/New File을 클릭해도 같습니다.



다음 나타나는 메뉴에서 아래와 같이 Cocoa/Objective-C class를 선택 하고, 하단의 Next 버튼을 클릭합니다.
사용자 삽입 이미지

다음 메뉴에서 File Name을 아래와 같이 AppController로 입력하고, Finish 버튼을  클릭합니다. (Object-C에서 헤더는 *.h, 소스파일은 *.m이 확장자 입니다)
사용자 삽입 이미지

Xcode 좌측 메뉴를 보면 아래와 같이 AppController.h, AppController.m 두개의 파일이 생성되어 있습니다. 우측과 같이 두 파일을 드래그해서 Classes 그룹 밑으로 둡니다. 옮기지 않아도 상과 없으나, 성격에 맞는 그룹에 정리해 두는 것이 좋습니다.
사용자 삽입 이미지 사용자 삽입 이미지

2) 소스코드 수정

AppController.h 파일을 열고 아래와 같이 추가 합니다. 좌측 파일 목록 에서 해당 파일을 더블 클릭 하거나, 마우스로 클릭 후, 툴바의 Editor를 클릭 합니다.
/* AppController */

#import <Cocoa/Cocoa.h>

@interface AppController : NSObject
{
    IBOutlet id myText;
}

- (IBAction)changeText:(id)sender;
@end

헤더파일을 보면 Java나 C/C++을 아는 분들은 익숙하면서도 뭔가 생소한 느낌이 들 것 입니다. 아래의 내용은 기존에 다른 개발 언어를 경험해 보신 분들은 참고 하시고, 아니면 그냥 건너  뛰시면 됩니다.
 
1. 주석
우선은 주석이 C, Java와 동일하게 "/*" 로 시갖해서 "*/"로 끝난다는 것을 알 수 있습니다.

2. 헤더파일 인클루드
#import로 필요한 헤더파일을 포함하는데, C와 같이 #를 전처리기로 사용하고 Java와 같이 include 대신에 import를 사용합니다.(C와 다른 점은 중복될 경우에는 오류없이 하나만 포함합니다.)

3. 클래스 선언
클랙스는 @interface로 시작해서 @end로 끝이 납니다. 맴버 변수(속성)만 { }에 포함되고 맴버 함수(메소드)는 {} 밖에서 선언되는 것 같습니다.

4. 접두어
cocoa에서는 내장 클래스들이 NS라는 접두어를 사용하고 있습니다.  NextSTEP의 NS에서 온 것 같다는 생각이 들지만 확실하지는 않습니다.

IB로 시작되는 것은 Interface Builder에서 연결된다는 의미인 것 같습니다. 둘 다 자동화를 위한 Xcoide의 예약어로 생각하시면 될 것 같습니다. (IBAction)은 리턴 값 타입이 오는 자리이지만 IBAction은 void와 같습니다.

아래 두개의 라인이 추가되었습니다.
IBOutlet id myText;
    윈도우의 Hellow World가 있는 텍스트 필드에 연결될 변수 입니다.

- (IBAction)changeText:(id)sender;
    변경 버튼이 클릭되었을 때 연결될 메소드 입니다.

이젠 AppController.m 파일을 오픈 합니다.
#import "AppController.h"

@implementation AppController
- (IBAction)changeText:(id)sender
{
    [myText setStringValue:@"Hello World!];
    NSLog(@"Text changed");
}
@end

AppControll.h에서 선언 해 놓은 ChangeMyText 메소드를 구현 합니다. 이 메소드는 변경 버튼이 클릭되었을 때, 실행됩니다.

[myText setStringValue:@"Hello World!];
버튼이 클릭되면 myText(Hello World 택스트 필드)가 "Hellow World!"로 문자를 변경하라는 의미입니다. Hello World! 다음에 "로 막아야 하지만, 오류 메시지를 보기 위해 입력하지 않았습니다.
사용자 삽입 이미지 사용자 삽입 이미지

NSLog(@"Text changed");
Log윈도우에 메세지를 출력해 주는 함수 입니다. 변수값 확인, 오류를 찾거나 수행여부를 확인할 때 사용할 수 있습니다.

이제 툴바의 Build 버튼([command + b])을 클릭 해서 컴파일을 합니다. 하단을 보면 컴파일 중이라는 메시지 두에 Build failed (2 errors)란 메시지를 볼 수 있습니다. 2개의 오류가 생겨서 컴파일을 완료하지 못했다는 뜻 입니다.
사용자 삽입 이미지

에디터를 보면 위와 같이 X 마트로 오류가 난 위치가 표시되어 있습니다. 상세한 오류 메시지를 보실려면 좌측의 Errors and Warnings를 클릭한 후 파일별로 내용을 확인할 수 있습니다.

또는 메뉴바에서 Build/Build results [shift + command + b]를 클릭하시면, 아래와 같이 컴파일 결과를 확인할 수 있습니다.
사용자 삽입 이미지
에디터에서 다음 오류 라인은 [command + =], 이전 오류 라인은 [command + shift + =]로 오류지점으로 이동할 수 있습니다.

[myText setStringValue:@"Hello World!"];
이제 위와 같이 Hellow World! 뒤에 "를 입력하고 Build and Go [command + r]
를 클릭 합니다. 실행이 되면 이전과 마찬가지로 아직은 어떠한 작동도 하지 않습니다. 이제 버튼 클릭에 동작하는 작업을 해보도록 하겠습니다.


1.3.2 인터페이스 빌더에서 추가 작업
다시 Xcode로 돌아 와 좌측 메뉴의 NIB Files/MainMenu.nib를 더블클릭 하여 인터페이스 빌더를 엽니다.

Xcode에서 AppController.h가 저장되어 있음을 확인합니다. 아래 좌측과 같이 m 아이콘이 어두우면 소스 변경 후 저장이 되지 않은 상태이며, 흰색이면 최종 변경 후 저장되어 있는 상태 입니다.
사용자 삽입 이미지 사용자 삽입 이미지

1) AppController.h 등록  과 인스턴스 생성

아래와 같이 Xcode의 좌측 메뉴에서 AppController.h를 드래그 하여 인터페이스 빌더의 Instances 윈도우로 가져다 놓습니다.
사용자 삽입 이미지

완료되면 아래와 같이 Classes 윈도우에 AppController가 등록되어 있는 것을 확인할 수 있습니다.
사용자 삽입 이미지

사용자 삽입 이미지
위에 보이는 AppController를 마우스 우측 버튼으로 클릭(control + 클릭)하시면, 좌측과 같은 메뉴가 나옵니다. 여기서  Instantiate  AppController를 클릭 합니다.


Instances 윈도우에 AppController 라는 인스턴스가 생성되었습니다.
사용자 삽입 이미지

2) 버튼 등록

이제 윈도우에 버튼을 추가 합니다. 아래 왼쪽 그림과 같이 팔레트의 두번째 버튼 항목에서  버튼을 클릭 후 드래그 해서 오른쪽 그림에서 보이는 윈도우의 적당한 위치에 가져다 놓습니다. 그 후 버튼을 더블클릭하여 Button이라는 문자를 "바꾸기"로 변경합니다.
사용자 삽입 이미지 사용자 삽입 이미지

3) changeText와 버튼 연결

버튼이 추가되면 이제 버튼 클릭시  AppController에서 만들어 놓은 changeText 메소드로 연결 합니다. control 키를 누른 상태에서 마우스 버튼을 바꾸기 버튼에 누른 상태에서 라인이 생기면 AppController의 인스턴스(파란  네모 상자)에다 놓습니다.

그러면 Inspector의 Connections의 Target/Action에서 아래 왼쪽 그림과 같이 changeText 항목이 나타나는데, 이를 선택하면 아래의 connect 버튼이 활성화 된다. connect 버튼을 클릭하면 changeText 앞에 아이콘이 나타나며 연결됩니다.
사용자 삽입 이미지 사용자 삽입 이미지
이제 버튼이 클릭되면 AppController의 changeText 메소드로 연결됩니다.

4) myText와 텍스트필드 연결

텍스트필드와 AppController의 myText를 연결합니다. 다시 control 키를 누른 상태에서 위와는 반대로 AppConroller(파란 네모 상자)를 마우스 버튼을 클릭하여 라인이 생기면 Hello World라고 되어 있는 텍스트 필드에 연결합니다.

연결이 되면 위와 같이 Inspector가 나오는데, Connections의 Outlets에서 왼쪽 그림과 같이 myText 항목이 있다. 위와 같이 myText를 선택하고 connect를  클릭하고, myText 앞에 아이콘이 있어 연결이 되었는지 확인 합니다.
사용자 삽입 이미지 사용자 삽입 이미지
이제 myText와 텍스트 필드가 연결되었습니다. Build And Go 버튼을 눌러 컴파일을 하고 잘 동작하는지 테스트를 해봅니다.

5) 실행 및 확인
컴파일이 오류없이 완료되면 Hello 윈도우가 실행됩니다. 바꾸기 버튼을 클릭하면 "!"가 추가된 텍스트로 오른쪽 아래와 같이 변경됩니다.
사용자 삽입 이미지 사용자 삽입 이미지

Xcode를 보면 버튼 클릭 시, 아래와 같이 NCLog에서 출력하는 "Text changed"란 메세지가 나옵니다.
사용자 삽입 이미지

 
AND

이제 처음으로 Xcode를 이용해서 간단하게 Hello를 표시하는 윈도우를 만들어 보겠습니다.

1.2.1  프로젝트 생성

사용자 삽입 이미지
Xcode를 실행 시키고 좌측과 같이 메뉴의 File을 클릭한 후 New Project를 선택합니다.

보이는 바와 같이 단축키 [Shift + Command + N]을 클릭하셔도 됩니다.

1) 프로젝트를 종류를 선택합니다.

사용자 삽입 이미지
위와 같이 Application 분류 에서 Cocoa Application을 선택하고 하단의 [Next] 버튼을 클릭합니다.

2) 프로젝트명과 폴더를 선택합니다.

사용자 삽입 이미지
프로젝트 이름을 Hello로 입력하고 프로젝트 폴더를 선택합니다. 참고로 ~/ 는 사용자의 루트폴더를 의미하며, 기본으로 이곳 하위에 프로젝트명으로 폴더를 생성하게 됩니다. project, devel, test, exam등의 폴더를 만드시고 이곳에 프로젝트들을 모아 놓는 것이 관리하기 쉬울 것입니다.

위와 같이 Project Name과 Project Directory를 입력 하신 후, [Finish] 버튼을 클릭하여 완료 합니다.

1.2.2 Xcode 둘러 보기
사용자 삽입 이미지
이젠 위와 같이 Xcode를 처음 만나 보게 됩니다. 복잡한 구성과 메뉴와 알듯 모를 듯한 영어들이 있지만 어려워 보이지만, 자주 보게 되면 친근하게 느껴 집니다. 좌측의 트리메뉴는 프로젝트에 포함된 소스파일들과 오브젝트, 리소스등에 쉽게 접근하게 해주는 메뉴이며, 우측은 좌측에서 선택된 내용들을 보여주는 창입니다.

툴바를 잠깐 살펴 보면 (이해할 수 없는 용어는 그냥 넘어 가면 됩니다.)
사용자 삽입 이미지
첫 윈도우 모양 아이콘은 프로젝트 기본 창입니다. 두번째 도구 모양 아이콘은 빌드 결과와 실행시 로그를 확인 할 수 있는 창입니다. 세번째 에프킬라 아이콘은 디버깅을 위한 창입니다.

사용자 삽입 이미지
Build 명령으로 컴파일되어 만들어질  목표를 설정합니다.



사용자 삽입 이미지
Release 또는 Debug로 Build될지 선택합니다. Debug 선택 시에는 디버깅  정보를 포함하고 있기 때문에  Release 보다 실행파일이 크고 느립니다. 개발시 편의를 위해 Debug 모드로 제작을 하고 최종 배포시 Release 모드로 Build해서 배포 하시면 됩니다.

사용자 삽입 이미지
자주 사용하는 명령어들과 설정들을 바로 실행할 수 있습니다.



사용자 삽입 이미지
Build는 실행파일을 만들기 위해 컴파일을 합니다.
Build And Go 는 Build 후에 실행을 합니다.
Tasks는 Build 또는 실행을 중지 합니다.

사용자 삽입 이미지
Info는 현재 선택된 목록에 대한 정보를 보여 줍니다. ([Command + i])
Editor는 좌측 메뉴에서 선택된 소스파일들을 편집할 수 있도록 에디터를 같은 창에서 실행 합니다. Editor 버튼 대신 소스를 더블클릭하면 새창에서 열립니다.



1.2.3 인터페이스 빌더 둘러 보기
사용자 삽입 이미지
위와 같이 Xcode의 좌측 메뉴에서 NIB Files를 열고, MainMenu.nib를 더블클릭 하여  인터페이스 빌더(Interface Builder)를 엽니다. 인터페이스 빌더가 열리면 몇 개의 윈도우가 같이 열립니다. 간단하게 살펴보면,

사용자 삽입 이미지
좌측이 인터페이스 빌더 메인윈도우 이며, 오브젝트 선택, 메뉴, 콘트롤, 서브클래스/인스턴스 생성, 아울렛/엑션 바인딩, 속성 변경 등의 다양한 작업을 할 수 있습니다. (지금은 무시하세요)







사용자 삽입 이미지
좌측이 어플리케이션 기본윈도우이며, 실행 시 전면에 나오는 윈도우 입니다.











사용자 삽입 이미지
좌측은 팔레트라 불리우며, 각종 콘트롤과 오브젝트들을 윈도우에 추가할 수 있습니다.








사용자 삽입 이미지
좌측은 메인 메뉴로 어플리케이션의 메뉴와 관련된 작업을 하는 윈도우 입니다. 이번에는 사용하지 않습니다.

1.2.4 Nib 파일 변경

1) 윈도우에 텍스트 필드 삽입

 아래의 좌측 이미지와 같이 팔레트의 세번째 항목 Text를 선택하고 System Font Text를 클릭한 후, 윈도우로 드래그해서 놓습니다. 결과는 우측과 같습니다.
사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지
 드래그 한 System Font Text를 더블클릭 하면, 입력할 수 있는 창이 나타납니다.

이곳에 Hello World (또는 다른 텍스트)를 입력합니다.




윈도우에 Hello World를 출력하는 것은 여기가 끝이지만, 간단하게 텍스트 필드를 꾸며보고 인스펙터를 구경하고 마치도록 하겠습니다.

2) 텍스트 필드 꾸미기

사용자 삽입 이미지
윈도우에서 Hellow World를 클릭하고 [Shift + Command + i]를 클릭하거나, 인터페이스 빌더 메뉴에서 Tools/Show Inspector를 클릭하여 인스펙터를 엽니다.

인스펙터는 각 오브젝트들의 속성과 행동을 설정 할 수 있는 툴로, 여기서는 버튼의 모양과 정열을 바꾸어 보겠습니다.Alignment 항목에서 두번째 가운데 정열을 선택하고, Text Border 항목에서 세번째를 선택하고, Options에서 Rounded를 선택합니다.













사용자 삽입 이미지
이번엔 윈도우에서 Hello Word 텍스트필드 이외의 부분을 클릭하고, 인스펙트 상단에 NSWindow Inspector이 나오게 합니다. Window Title을 MyFirst Cocoa App. 또는 원하는 문자로 변경합니다.



















아래가 완료된 윈도우 입니다. Xcode에서 Build and Go 버튼(또는 [command+R])을 클릭하면 결과를 확인할 수 있습니다.
사용자 삽입 이미지

실행파일은 Hello.app로 생성되며 [프로젝트 폴더]/build/Debug/에 위치합니다. 이곳에서 더블클릭 하여도 같은 윈도우를 실행할 수 있습니다. 만약 Xcode 툴바에서 Active Build Configuration이 Release로 지정되어 있을 때는 [프로젝트 폴더]/build/Release/에 위치합니다.

'Xcode 2 > Cocoa 따라해보기' 카테고리의 다른 글

1.6 SimpleViewer 이미지 뷰어 (1)  (2) 2007.05.16
1.5 NSView를 이용한 그리기  (7) 2007.05.11
1.4 간단한 계산기 프로그램  (14) 2007.05.07
1.3 Hello 프로그램 기능 추가  (3) 2007.05.04
1.1 Xcode 구하기  (0) 2007.05.04
AND