BLOG ARTICLE NSMatrix | 1 ARTICLE FOUND

  1. 2007.06.03 1.7 업그레이드된 계산기 프로그램 (1)

1.7.1 프로젝트 개요 및 생성

1) 개요

사용자 삽입 이미지
이전에도 간단한 계산기를 만들어 보았지만, 이번에는 연속계산이 가능하고, 키보드 입력과  몇 가지 출력을 추가한 업그레이드 된 계산기를 만들어 보겠습니다.

좌측과 같은 계산기인데 첫번째  232라고 되어있는 창에 입력한 값과 계산된 값이 출력 됩니다. 그 옆의 작은 창에 현재 계산 모드가 출력 됩니다. 그 아래의 큰 창에는 계산했었던 내용들이 보여 집니다. 입력은 숫자 키패드와 버튼으로 받습니다.

이번 튜토리알에서는 새로운 내용인 키입력 처리와 NSMatrix에 대해서 알아 보겠습니다.


2) 프로젝트 생성

Xcode를 실행하고, MyCalculator로 cocoa aplication 프로젝트를 새로 만듭니다. 메뉴에서 File/New File을 선택하여 Objective-C 클래스를 선택하고 AppController 클래스를 만듭니다.

위의 과정에 대한 상세한 설명은 이전 포스트에서 설명하였으니, 앞으로는 자세한 과정은 생략하도록 하겠습니다.

1.7.2 AppController 생성 및 변경
Xcode에서 AppController.h을 열어 아래와 같이 추가하고, 저장합니다. 소스에 대한 설명은 다음 장에서 하겠습니다.

#import <Cocoa/Cocoa.h>

@interface AppController : NSObject {
    int prevOperation;
    int isClear;
   
    int totalValue;
   
    IBOutlet NSTextField *txtValue;
    IBOutlet NSTextField *txtOperation;
    IBOutlet NSTextField *txtHistory;
}

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

1.7.3 사용자 인터페이스 편집

1) AppController 인스턴스 생성

Xcode의 MainMenu.nib를 더블클릭하여 인터페이스 빌더를 실행합니다. Xcode 좌측에서   AppController.h를 드래그 하여 MainMenu.nib 윈도우로 드래그해서 놓습니다.

사용자 삽입 이미지
Classes에서 AppController를 우클릭 한 후, 메뉴에서 Instantiate AppController를 클릭하여 인스턴스를 만듭니다.

좌측과 같이 인스턴스가 만들져 있는 것을 확인합니다.





2)  Window 컨트롤 배치 및 속성 변경

위의 Intances 창에 보이는 Window를 더블 클릭하여 윈도우를 엽니다.

사용자 삽입 이미지
팔레트에서 텍스트 필드 세개와 버튼 하나를 윈도우에 가져다 놓고 좌측과 같이 배치합니다.

처음 긴 텍스트 필드는 계산 결과 및 입력값, 우측 작은 텍스트 필드는 현재 연산자, 아래의 넓은 택스트 필드는 히스토리를 보여줍니다.

버튼 모양은 인스펙터에서 아래와 같이 설정하였습니다. 원하시는 모양을 선택하시면 됩니다.
사용자 삽입 이미지






사용자 삽입 이미지
첫번째 텍스트필드를 선택하고 인스펙터를 엽니다. 좌측과 같이 정렬을 우측으로 설정합니다. 인스펙터는 해당 오브젝트를 클릭 후에 메뉴 에서 선택 또는 shitf + commad(사과 키) + i를 동시에 누릅니다.

두번째 연산모드 텍스트 필드의 정렬을  가운데로 설정합니다.




사용자 삽입 이미지
위의 세 텍스트필드 모두, 옵션을 좌측과 같이 모두 체크를 해제 합니다. 키보드 입력을 윈도우가 모두 받기 위함입니다.


3) MSMatrix 생성

위의 작업들은 이전 튜토리얼에서 해 본 작업 들입니다. 이해가 가지 않는 분들은 이전 포스트를 확인해 주세요. 이제 NSMatrix를 사용하기 위해 새로운 작업을 해보겠습니다.

사용자 삽입 이미지
버튼을 클릭한 후, 쉬프트 + 옵션 + 마우스를 클릭한 상태에서, 버튼 우측 하단의 원을 클릭하면 좌측과 같이 하나의 원만 남습니다.

위의 상태에서 이 원을 드래그 하여 크기를 늘리면 버튼이 늘어 나는데, 4X4개의 버튼이 되게 합니다. 그리고 텍스트필드와 윈도우를 적당한 크기로 조절합니다.
 
사용자 삽입 이미지

위의 작업이 완료가 되면 좌측과 같은 모습을 보실 수 있습니다. 버튼을 더블클릭하면 텍스트를 수정 할 수 있습니다.

버튼을 더블클릭하여 아래와 같이 모든 버튼들의 텍스트를 변경합니다. 곱하기는 대문자 x를 사용합니다.
사용자 삽입 이미지







4) 버튼셀 tag 변경

이 작업은 매우 중요합니다. 아래와 같이 Tag 값을 정확히 설정하여야, 정확한 계산 결과 값을 보실 수 있습니다.

아래와 같이 0 버튼을 클릭하고 인스펙터에서 Tag값을 0으로 세팅합니다. 0~9까지의 버튼들을 모두 텍스트와 같은 숫자(1->1, 2->2, ...)로 변경합니다.
사용자 삽입 이미지

사용자 삽입 이미지
숫자를 제외한 +, -, X, /, =, C 기호들은 아래와 같이 Tag 값을 입력해 줍니다.

+->100, -->101, X->102, /->103, =->104, C->105


5) 텍스트 필드 Connection 설정

아래와 같이 텍스트필드들을 AppController의 아울렛들과 연결해 줍니다.

사용자 삽입 이미지
좌측과 같이 NSMatrix를 AppController의 processCommand에 연결 시킵니다.












6) 윈도우 서브클래스 생성 및 Window와 연결

이제 윈도우를 위한 서브클래스와 소스파일을 생성합니다.
사용자 삽입 이미지
MainMenu.nib파일의 Classes 윈도우에서 NSWindow의 서브클래스를 생성합니다.

NSWindow는 NSObject > NSResponder 밑에 있습니다.






사용자 삽입 이미지
NSWindow의 서브클래스 MyWindow를 우클릭하여 나오는 메뉴에서  Create Files for MyWindow를 선택하여, MyWindow.h와 MyWindow.m 파일을 생성합니다.





사용자 삽입 이미지
Window의 인스펙터를 오픈한 후, Custome Class에서 위에서 만든 MyWindow를 선택합니다.





1.7.4 윈도우, 메뉴, 아이콘 설정

1) 윈도우 설정

사용자 삽입 이미지
왼쪽과 같이 윈도우 타이틀을 MyCalculator로 변경합니다.

Title bar controls에서 Zoom (and resize)를 해제 하여 사용자가 윈도우의 크기를 변경 할 수 없게하며, 우측 하단에 나오는 사이즈 변경 탭이 사라집니다.



2) 메뉴 설정

사용자 삽입 이미지
MainMenu를 클릭하여 좌측과 같이 메뉴 부분에서 New Application으로 되어 있는 부분을
MyCalculator로 변경합니다.










3) 아이콘 설정

이전 튜토리얼 SimpleViewer 이미지뷰어 (2) 1.6.4 어플리케이션 다듬기에서 4) 아이콘 변경을 참조하여, 원하는 아이콘으로 변경합니다.

저는 계산기 어플리케이션 자체를 아이콘으로 만들었습니다. shift + command + 4를 동시에 누르면 캡쳐할 범위를 선택할 수 잇는 십자모양의 커서가 나옵니다. 이 커서를 계산기로 이동하여 스페이스를 누르면 해당 윈도우만 캡쳐할 수 있습니다.

위의 튜토리얼에서 3) About SimpleViewer 판넬 변경을 참조하여, 판넬부분도 변경하여 줍니다. 빌드 후 어플리케이션을 실행시킵니다. 메뉴에서 About MyCalculator를 클릭하여 아래와 같이 변경사항을 확인합니다.
사용자 삽입 이미지

이제 계산기 어플리케이션의 겉모습이 완성되어습니다. 다음 장에서는 실제로 계산기가 동작하도록 소스코드를 작성해 보겠습니다.

개인적으로 일이 있어 오랫만에 포스트를 올립니다. 저도 오랫만에 Xcode를 실행해 보니 왠지 낯서네요. 꾸준히 올릴 수 있도록 하겠습니다.