Hello iPod 2 (레이블과 버튼)

오늘은 (정확히 말하면 어제 ^^  생업에 종사하느라 월요일은 좀 바뿌네요 ㅠㅠ)
레이블과 버튼을 활용하여 리소스와 소스가 실제 어떻게 연결되는지 공부하였습니다.
내용은 간단한 것으로 버튼을 클릭하면 Hello iPod 이 출력되도록 하는 것입니다.

1. Xcode를 실행하여 HelloiPod2 라는 프로젝트를 만들고 MainWindow.xib를 더블클릭하여 Interface Builder룰 실행시킵니다.


2. 그러면 아래와 같이 리소스의 구성요소, 레이아웃 디자인, 라이브러리, Inspector 창 등이 보여집니다. 사용환경에 따라 Inspector 창이 보이지 않을 수도 있는데 Tools 메뉴에서 Inspector 항목을 선택하면 나타납니다.

구성요소 창은 정확히 무엇을 의미하는지 모르겠습니다. 사실 구성요소라는 것도 필자 임의로 붙였습니다.
나중에 알게 되면 본 게시물을  수정하거나 덧글로 남기겠습니다. 혹시 저 보다 먼저 알게 되신 분 덧글 부탁드립니다.
레이아웃 디자인 창은 말 그대로 WYSIWYG를 지원하는 리소스 편집창입니다.
라이브러리는 iPhone SDK에서 기본적으로 지원되는 컨트롤들입니다.
Inspector 는 레이아웃 디자인 창에 올려진 각 컨트롤의 속성이나 액션을 정의하고 인터페이스와 소스를 연결하는 가교 역할을 하는 놈입니다.


3. 자 그럼 기본적으로 만들어진 윈도우에 몇 가지 콘트롤을 올려보겠습니다. 먼저 라이브러리에서 Viewer를 찾아 선택하여 리소스 편집기로 드래그&드랍을 합니다.

4. 같은 방법으로 레이블과 라운드 버튼을 찾아 레이아웃 디자인 창으로 드래그&드랍을 합니다. 그리고 버튼을 더블 클릭하여 Press it이라고 타이핑하고 엔터키를 쳐봅니다.

5. 3에서 추가한 뷰를 클릭하고 Inspector 창에서 Class 이름을 MainView라고 정의합니다.
6. Class Outlet 에서 +(플러스)버튼을 클릭한 다음 레이블 컨트롤에 사용할 이름으로 helloMsg 라고 타이핑하고 Type으로는 UILabel이라고 정의합니다.
7. 버튼 클릭 동작 프로세스를 정의하기 위하여 Class Actions에서 showMsg라고 입력합니다.
본 게시글을 끝까지 보시면 아시겠지만 Outlet은 컨트롤 변수와 같은 개념이고 Action은 이벤트와 같은 개념인 것 같습니다.

8. Inspector에서 Outlet과 Acttion을 정의했으니 이제 이것을 레이아웃 디자인 창의 컨트롤과 연결을 해야 합니다.
우선 Inspector 상단의 두번째 아이콘을 클릭하요 Connections를 띄웁니다.
그러면 조금 전 정의한 helloMsg라는 Outlet과 showMsg라는 Action이 보일겁니다.
9. 먼저 helloMsg 우측의 동그란 아이콘을 선택하여 레이아웃 디자인 창의 레이블로 드래드&드랍을 합니다.
10. showMsg 우측의 동그란 아이콘을 선택하여 레이아웃 디자인 창의 버튼으로  드래드&드랍을 합니다.
이 때 언제 Action을 일으킬 것인지 선택하라는 팝업메뉴가 나오는데 여기서는 Touch up inside 를 선택합니다.
버튼 안쪽에 손으로 터치했다가 땠을 때 Action을 일으키라는 말이겠지요?

11. 여기까지는 리소스 작업이었습니다. 리소스의 컨트롤들을 소스와 연결하기 위한  준비만 하였을 뿐 아직 소스와는 연결되지 않았습니다. 본 게시물의 초반부에 Inspector에서 정의한 놈들이 리소스와 소스를 연결하는 가교역할을 한다고 했지요? 현재까지는 Inspector와 리소스가 연결되었을 뿐 소스와는 아직 연결되지 않았습니다. 그럼 연결을 해 볼까요?
우선 Interface Builder의 파일 메뉴에서 Write Class Files를 선택합니다.
아래 그림과 같이 파일명 입력하라고 나오는데 그냥 Save 버튼 누릅니다.

12. 그러면 만들어지는 파일을 프로젝트에 포함할건지 물어봅니다. 당연히 포함 해야겠지요?

13. Xcode IDE 로 가보면 MainView.m과 .h.가 생성되었음을 알 수 있습니다.
그런데 Classes 바깥에 있네요 안으로 옮깁시다.

14. 자 이제 Inspector에서 정의한 이름들을 떠올려 소스와 연결합시다. 그런데 그전에 Interface Builder 이 놈이 소스를 만들면서 MainView.h에 MaiinView 클래스의 부모 클래스를 지정하지 않고 그자리에 개발자 니가 알아서 맘대로 넣어라는 주석이 있습니다. 그대로 빌드했다간 에러가 날테니 넣어야죠 UIView 라고 넣어 줍시다.
그리고 아까 Inspector에서 레이블 아웃렛으로 만들었던 놈 그 이름이 helloMsg죠? 그걸 @Property 로 선언합시다.
각 키워드가 무엇을 의미하는지는 필자도 아직 모르겠습니다.
아시는 분 덧글 남겨 주세요 ^^  (Objective-C를 먼저 공부해야하나?)

15. MainView.m을 선택하여 아래 그림과 같이 코딩합니다.
아웃렛 변수를 쓰기 위해서는 @property와 @synthesize 키워드를  써야 한답니다.
이 두개의 키워드가 무엇을 의미하는 아시는 분?.......ㅠㅠ
변수명은 Inspector에서 정의했던거 그대로 쓰구요 Action은 소스 생성될 때 그 골격이 자동으로 나오더군요 그 골격 안에다가 레이블 컨트롤 변수를 이용하여 text를 출력한 것입니다.

16. 이제 빌드하고 실행을 해봅시다. 버튼 클릭하니 나오긴 하는데 레이블 크기를 너무 작게하여 글자가 좀 잘리죠?
Interface Builder에서 사이즈를 좀 키우고 다시 빌드 고고~~~