BLOG ARTICLE Xcode 3/튜토리얼 | 2 ARTICLE FOUND

  1. 2008.10.05 2. 간단한 Core Data 예제 (9)
  2. 2008.09.26 1. Xcode3 첫 어플리케이션 (17)

이번에는 CoreData를 이용하는 간단한 샘플을 만들어 보겠습니다. 이전에 Xcode 2.*대에서 이와 비슷한 어플리케이션을 만드는 "간단한 ToDo 어플리케이션 만들기"란 포스팅을 한적이 있습니다. 소스코드에 추가 없이 마우스 클릭만으로 간단히 만드는 예제였는데 Xcode 3에서는 그 마우스 클릭도 최소한으로 줄이고 자동화여, 누구나 쉽게 간단한 어플리케이션을 만들 수 있습니다.

Core Data에 대한 자세한 내용은 아래의  ADC 문서들을 참조하시기 바랍니다.



1. 프로젝트 생성
Xcode를 실행하고 새로운 프로젝트를 생성하기 위해 메뉴에서 File / New Project.. 를 클릭합니다. 아래와 같이 Mac OS X / Application 항목에서 Core Data Document-based Application을 선택하고 Choose...를 클릭합니다.
프로젝트명에 'BookList'를 입력하고 save 버튼을 클릭하여 완료합니다.


2.  Data Model
1) Data Modeling tool
좌측과 같이 Xcode의 Groups & Files아래에 BookList / Models에서 MyDocument.xcdatamodel을 더블클릭합니다.

아래와 같은 데이터 모델링 툴이 오픈됩니다.
2) Entity 추가
위의 이미지에서 붉은색 화살표가 가르키는 Entity 항목 하단의 + 버튼을 클릭하여 새로운 Entity를 추가합니다. 생성된 항목을 더블클릭하거나 우측의 설정창에서 Name: 항목의 입력창을 이용하여 아래와 같이 'Books'로 이름을 변경합니다.


3) Attribute 설정
* 추가
이제 Books에 속성(Attribute)를 추가합니다. Property창 하단의 + 버튼을 클릭하여 나오는 항목중 Add Attrribute를 클릭합니다. 2번 더 반복하여 3개의 속성을 생성합니다.

* 설정
속성들의 이름을 각각 titile, writer, press로 입력하고 아래와 같이 항목들을 설정합니다.




3. 인터페이스 빌더
Xcode에서 MyDocument.xib를 더블클릭하여 인터페이스 빌더를 오픈합니다. 먼저 윈도우에 기본으로 생성되어 있는 "Your document contetents here'  라벨을 삭제합니다.

그리고 라이브러리 윈도우의 Cocoa / Objects & Controllers / Core Data 항목에서 좌측과 같은 Core Data Entity를 드래그하여 윈도우로 가져다 놓습니다.



1) Core Data Entity 생성
윈도우로 드래그를 완료하면 설장창이 오픈됩니다. 아래와 같이 entity를 Books로 선택하고 Next 버튼을 클릭하고 각 단계별로 아래와 같이 진행합니다.
2) 윈도우 크기 조절
생성된 항목에 맞추어 아래와 같이 윈도우의 크기를 적당히 조절합니다.

4. Build & Test
현재까지의 작업만으로 기본적인 동작을 수행할 수 있는 작업이 완료되었습니다. 이제 빌드를 하고 어플리케이션을 실행하여 테스트 합니다.
어플리케이션이 실행되면 등록, 변경, 삭제, 검색 등과 파일 저장/오픈이 동작하는지 확인합니다.


'Xcode 3 > 튜토리얼' 카테고리의 다른 글

2. 간단한 Core Data 예제  (9) 2008.10.05
1. Xcode3 첫 어플리케이션  (17) 2008.09.26
모든 댓글을 환영합니다. (욕설과 광고는 삭제합니다.)
  1. 달룟 2008.10.06 01:46  댓글주소  수정/삭제  댓글쓰기

    dataq는 오타지요? 설명 대로 따라하니까 쉽네요.

  2. Favicon of http://sukwoo.blogspot.com BlogIcon 장림 2008.10.08 16:32  댓글주소  수정/삭제  댓글쓰기

    실행하면 Stop Executable 발생합니다.
    BookList
    Project:"BookList.xcodeproj" Target:"BookList"

    그런데 프로그램은 정상적으로 동작하는군요.

    • Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2008.10.08 17:20 신고  댓글주소  수정/삭제

      아.. 그런가요? 저는 그런 로그를 못 보았습니다. 제가 작업한 파일을 올려보았습니다. 혹시 뭔가 잘 못되었는지 잘 모르겠네요. ^^;;

  3. Favicon of http://sukwoo.blogspot.com BlogIcon 장림 2008.10.08 20:03  댓글주소  수정/삭제  댓글쓰기

    올려주신 파일은 잘 동작합니다.
    제가 잘못했나봅니다. 감사합니다.

  4. ttkaka 2010.01.09 23:06  댓글주소  수정/삭제  댓글쓰기

    core data를 찾아보다가 이곳까지 왔네요. 잘봤습니다.

    위의 예제를 보니 core data를 미리 만들수 있겠군요.
    그런데 위의 예제에서 입력해서 만든 데이터 파일을 어디에 어떤파일로 저장되는지요.
    그 파일을 따로 저장해서 다른 어플에서 읽어오게 하려고 하는데 가능할지 모르겠네요.
    sqlite같은 경우 데이터를 만들 수 있는 도구가 있던데 core data는 없나보죠.

    • Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2010.01.11 16:06 신고  댓글주소  수정/삭제

      데이터 파일은 사용자가 저장 다이알로그박스에서 지정된 폴더와 이름으로 저장됩니다. 어플리케이션간에 공유는 가능할 것 같습니다. 위의 방법보다는 직접 코드를 생성하여 만드시는게 더 편할 것 같고요. 저도 잘 몰라서 명확한 답변을 드릴 수가 없어 죄송합니다.

  5. iamwhatiam 2010.10.07 09:40  댓글주소  수정/삭제  댓글쓰기

    10.6에서는 다소 바뀐 부분이 있어서 첫 시작부터 헤깔리긴 했지만... 덕분에 잘 배웠습니다.
    다음번에는 혹시... MySql이나... Oracle에 연동되는 Data관련 강좌를 부탁드려도 될까요?



Xcode3 에서 간단한 코코아 UI 샘플을 만들어 보는 튜토리얼입니다. 아래와 같이 하나의 입력 창과 세개의 버튼을 가진 간단한 어플리케이션 입니다.

각각의 버튼들의 기능은 아래와 같습니다. 라벨의 이동시에는 animator를 이용해 간단한 효과를 주었습니다.

텍스트에 입력된 내용을 상단의 라벨에 출력합니다.

라벨이 원래 있던 좌측의 위치로 이동하도록 합니다.

라벨이 우측 끝으로 이동하도록 합니다.


1. 프로젝트 생성
Xcode를 실행하고 메뉴에서 File/New Project...를 클릭합니다. 좌측에서 Mac OS X/Application을 선택하고 Cocoa Application 템플릿을 선택한 후, Choose... 버튼을 클릭합니다. 

(iPhone SDK 설치되어 있지 않으면 좌측의 메뉴가 조금 다를 수도 있습니다)

프로젝트가 저장될 디렉토리를 선택한 후에 프로젝트명(Control1)을 입력하고 Save 버튼을 클릭합니다.



2. 인터페이스 빌더
1) 인터페이스 빌더 실행
좌측과 같이 Xcode의 Groups & Files/Resources의 MainMenu.xib를 더블클릭하여 인터페이스 빌더를 실행합니다.







2) 라이브러리 윈도우
인터페이스 빌더의 메뉴에서 Tools/Library를 클릭하거나 단축키(Shift+Command+L)를 이용하여 아래와 같은 라이브러리 윈도우를 오픈합니다. 이 윈도우 하단의 아이템중에서 필요한 각종 오브젝트나 컨트롤들을 원하는 위치에 드래그하여 사용할 수 있습니다.



3) 윈도우
라이브러리 윈도에서 아래와 같이 Label, Text Field, Push Button을 드래그 해서 윈도우에 아래와 같이 배치하고 윈도우 크기를 적당하게 조절합니다.


라이브러리 윈도우에서 각 컨트롤의 위치는 아래와 같습니다.

  • Label - Cocoa / Views & Cell / Input & Values
  • Text Field - Cocoa / Views & Cell / Input & Values
  • Puish Button - Cocoa / Views & Cell / Buttons


3. AppController
1) 소스파일 생성
다시 Xcode로 돌아와 Groups & Files에서 Classes를 우클릭을 하거나 단축키(Command+N)를 이용하여 파일생성 창을 오픈합니다.


Mac OS X/Cocoa에서 Objective-C class를 선택하고 Next 버튼을 클릭합니다.

파일명에 AppController.m을 입력하고 Finish 버튼을 클릭합니다.

좌측과 같이 AppController.h와 AppController.m 소스 파일이 Classes 아래에 생성되었습니다.

먼저 AppController.h를 클릭하여 소스를 변경합니다.


2) AppController.h
헤더 파일에서 아래에 푸른색으로 되어 있는 부분을 입력합니다.
#import <Cocoa/Cocoa.h>

@interface AppController : NSObject {
    IBOutlet NSTextField    *textLabel;
    IBOutlet NSTextField    *inputField;
   
    IBOutlet NSButton    *refreshButton;
    IBOutlet NSButton    *leftButton;
    IBOutlet NSButton    *rightButton;

    NSPoint    originalPoint;
}

- (IBAction)setLabel:(id)sender;
- (IBAction)moveLeft:(id)sender;
- (IBAction)moveRight:(id)sender;

@end

인터페이스 빌더에서 생성한 각각의 컨트롤들을 연결하기 위해 IBOutlet 변수와 버튼을 클릭했을 경우에 처리할 IBAction 메소드를 선언합니다.

3) AppController.m
 소스코드에서 아래에 푸른색으로 되어 있는 부분을 입력합니다.
#import "AppController.h"

@implementation AppController

- (void)awakeFromNib {
   
    // 버튼 이미지를 지정
    NSImage *buttonImage = [NSImage imageNamed:NSImageNameRefreshTemplate];
    [refreshButton setImage:buttonImage];

    buttonImage = [NSImage imageNamed:NSImageNameGoLeftTemplate];
    [leftButton setImage:buttonImage];
   
    buttonImage = [NSImage imageNamed:NSImageNameGoRightTemplate];
    [rightButton setImage:buttonImage];
   
    originalPoint = [textLabel frame].origin;
}

- (IBAction)setLabel:(id)sender {
   
    // 입력한 문자를 라벨에 지정하고 라벨의 크기를 문자열의 길이만큼 변경
    [textLabel setStringValue:[inputField stringValue]];   
    [textLabel sizeToFit];
}

- (IBAction)moveLeft:(id)sender {
   
    // 라벨을 초기 위치로 이동
    [[textLabel animator] setFrameOrigin:originalPoint];
}

- (IBAction)moveRight:(id)sender {
    CGFloat xPos;
   
    // 우측 모서리로 이동하도록 윈도우의 크기에서 라벨의 크기를 뺀 위치로 설정
    xPos = [[[NSApp mainWindow] contentView] bounds].size.width;
    xPos -= [textLabel frame].size.width;
   
    // 에니메이션과 함께 라벨의 위치 변경
    NSPoint targetPoint = NSMakePoint(xPos, originalPoint.y);
    [[textLabel animator] setFrameOrigin:targetPoint];
}

@end


4. 연결
다시 인터페이스 빌더로 돌아 가서 작업을 마무리 합니다

1) AppController 인스턴스 생성
라이브러리 윈도우에서 좌측과 같은 Object를 MainMenu.xib 윈도우로 드래그해서 가져다 놓습니다.

Object는 라이브러리 윈도우에서 Cocoa / Objects & Controllers / Controllers내에 있습니다.

아래와 같이 Object가 생성된 것을 확인하시고 Object가 선택된 상태에서 인터페이스 빌더의 Tools/Inspector 메뉴를 클릭하거나 단축키 (Shift + Command + I)를 이용하여 Inspector 창을 오픈합니다.

Inspector 창에서 좌측과 같이 6번째에 있는 App Controller Identity를 선택합니다. (단축키: Command + 6)

Class메뉴의 콤보박스를 클릭하고 Xcode에서 이전 단계에서 생성한 AppController를 선택합니다.


2) 연결
MainMenu.xib 창에서 App Controller를 선택한 상태에서 마우스 우클릭을 하면 아래와 같이 연결 창이 오픈됩니다.


연결창의 각 항목 좌측에 있는 원 모양의 영역에 마우스를 가져가면 우측과 같이 '+' 모양으로 변경됩니다. 이 상태에서 마우스로 '+'를 클릭한 후에 드래그 하여 각각의 해당 항목들에 연결합니다.

마우스를 클릭한 상태에서 파란색 선을 연결할 컨트롤로 가져가면 아래와 같이 컨트롤의 이름과 함께 선택되었을 때 마우스 클릭을 해제합니다.


이런 방식으로 Outlet과 Action을 각각의 컨트롤들과 연결합니다.

  • Outlets / inputField -> Text Field 
  • Outlets / textLabel -> Label
  • Outlets / refreshButton -> Button (첫번째)
  • Outlets / leftButton -> Button (두번째)
  • Outlets / rightButton -> Button (세번째)

  • Received Actions / setLabel -> 버튼 (첫번째)
  • Received Actions / moveLeft -> 버튼 (두번째)
  • Received Actions / moveRight -> 버튼 (세번째)

작업이 완료되면 아래와 같이 연결되었는지 확인합니다.

 
3) 빌드 및 테스트
이제 모든 작업이 완료되었습니다. 인터페이스 빌더와 Xcode에서 변경된 내용을 저장하고, Xcode에서 좌측의 툴바를 클릭하거나 단축키(command + R)를 이용하여 빌드하고 테스트 해 봅니다.


Xcode를 처음 해보시는 분들도 따라 하실 수 있게 최대한 자세하게 설명을 할려고 했습니다. 하지만 제 생각대로 처음 하시는 분들도 무리없이 하실 수 있을지는 잘 모르겠습니다.

잘 안되시는 분들은 아래의 프로젝트 파일을 다운로드 받아서 비교해 보시기 바랍니다.

'Xcode 3 > 튜토리얼' 카테고리의 다른 글

2. 간단한 Core Data 예제  (9) 2008.10.05
1. Xcode3 첫 어플리케이션  (17) 2008.09.26
모든 댓글을 환영합니다. (욕설과 광고는 삭제합니다.)
  1. Favicon of http://mytrue.net BlogIcon 트루 2008.09.26 18:18  댓글주소  수정/삭제  댓글쓰기

    Xcode처음 해보는데 위에 설명대로 만들어 보니 잘 되네요~ =ㅇ=
    재밌습니다.. ㅎㅎ;; 근데 버튼에 이미지는 템플릿이 이미 정의되어 있는걸 불러다 쓰는건가요?;;

    • Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2008.09.26 20:38 신고  댓글주소  수정/삭제

      넵. 시스템에서 공유해서 사용하는 이미지를 불러 오는 것입니다. 인터페이스빌더 라이브러리 창에서 Media 탭의 Library/System Media에 있습니다.

  2. 좌절직전 2008.10.09 18:01  댓글주소  수정/삭제  댓글쓰기

    올려주신 데로 착실히 따라가고 있는 중입니다.
    염치없지만 도움청합니다.
    변수명만 바꿔서 돌려보는데 에러가 나는데...... 왜 문법 오류가 나는지 모르겠습니다.
    소스말고...다른부분에서 원인을 찾아야 되는건지..
    도와 주시면 은혜를 잊지 않겠습니다. ㅜ.ㅜ

    //선언부
    IBOutlet NSTextField *Label;
    NSPoint Point;


    //- (void)awakeFromNib 구현부
    Point = [Label frame].origin;

    //에러
    error:syntax error before '=' token

  3. 탈좌절 2008.10.10 09:57  댓글주소  수정/삭제  댓글쓰기

    답변을 정말 빨리해주셨군요.
    감사 합니다.
    아무래도 꽁(?)으로 습득해 볼려는 의도는 접어야 겠습니다.
    책을 꼭 봐야겠습니다.
    수고하세요. ^____^

    • Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2008.10.10 11:13 신고  댓글주소  수정/삭제

      개발환경을 둘러 보거나 잠시 사용해 볼 것이 아니면, 아무래도 찬찬히 책 한번 보시는게 좋겠죠. 탈좌절님도 수고하세요. :)

  4. Favicon of http://inthewhite.net BlogIcon july.fool 2008.10.13 02:07  댓글주소  수정/삭제  댓글쓰기

    오오 +_ +
    정말 꼼꼼한 튜토리얼 잘 보겠습니다~
    이제막 xcode3 시작하려하는데 엄청난 도움이 되네요 :)

  5. 맥열공 2008.12.30 16:06  댓글주소  수정/삭제  댓글쓰기

    친절한 내용 정리 너무 감사 합니다.
    저같은 초보에게 너무나 큰 도움이 되고 있습니다.

  6. unik 2009.01.12 23:26  댓글주소  수정/삭제  댓글쓰기

    interface builder 에서 write class 를 안하고 직접 다 쳐넣는 이유가 특별히 있는건가요..?

  7. Favicon of http://www.themuser.net BlogIcon The+Muser 2009.04.21 07:41  댓글주소  수정/삭제  댓글쓰기

    아..정말 굉장합니다!! +_+
    이제야 이런곳을 발견하다니..자주 들러서 열공하겠습니다~~~

    [덧] 혹시 추천해주실만한 책 같은 것 있나요?

    • Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2009.04.23 13:41 신고  댓글주소  수정/삭제

      번역되어 나온 책이 코코아 프로그래밍이란 책과 아이폰 쿡북 두권밖에 없습니다. 처음 공부하신다면 코코아 프로그래밍이란 책이 좋을 것 같습니다. :)

  8. Munggu 2009.06.29 15:46  댓글주소  수정/삭제  댓글쓰기

    감사합니다 많은 도움이 되었어요

  9. 지나가다 2010.01.23 21:31  댓글주소  수정/삭제  댓글쓰기

    xcode로 처음 해 본 맥 플그램이네요. 재미있게 잘 보고 갑니다 ^^;