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