Rev. 2.73

"SproutCore 1.0 시작하기"에서 SproutCore의 설치방법과 "Hello World!" 애플리케이션을 만들어 보았습니다. 이번에는 Hello World 프로젝트를 그대로 사용해서 "뷰(View)"를 만들어 보겠습니다. 뷰는 웹 페이지를 관리하기 위한 자바스크립트 클래스 입니다. DOM을 생성하거나 이벤트를 핸들링하고, 애니메이션 효과를 적용하는 등의 역할을 담당합니다. 사실, SproutCore를 사용하면 개발자에 의해 HTML이나 DOM을 직접 작성하는 일은 거의 일어나지 않습니다. 굉장히 유용한 뷰-클래스와 유틸리티들을 이미 갖추고 있기 때문에 애플리케이션의 레이아웃을 잡는데 큰 도움이 될 것입니다.

모든 CSS와 이미지 그리고 정적인 리소스는 “english.lproj”라 불리우는 곳에 저장됩니다. 왜냐하면 SproutCore는 기본적으로 다국어 환경을 지원하기 때문입니다. lproj 폴더를 추가하여 다른 언어를 지원하도록 구축할 수 있습니다. 기본 언어는 영어입니다. 다국어 처리에 대해서는 차차 알아 보기로 하고, 일단 HelloWorld 프로젝트에서 "resources/main_page.js"를 열면 아래와 같은 코드를 발견할 수 있습니다.

// This page describes the main user interface for your application.  
HelloWorld.mainPage = SC.Page.design({
  // The main pane is made visible on screen as soon as your app is loaded.
  // Add childViews to this pane for views to display immediately on page load.
  mainPane: SC.MainPane.design({
    childViews: 'labelView'.w(),
    labelView: SC.LabelView.design({
      layout: { centerX: 0, centerY: 0, width: 200, height: 18 },
      textAlign: SC.ALIGN_CENTER,
      tagName: "h1", 
      value: "Welcome to SproutCore!"
    })
  })
});

labelView의 "value"속성을 "Hello World! I'm Using Sproutcore"로 변경하고 저장합니다. 그리고 브라우저를 "새로 고침"하면, 바뀐 문자를 볼 수 있습니다. 어라? 그런데 조금 이상하죠? 저런~ 글씨가 잘려나갔군요. 그러나 걱정하지 마세요. 문제 없습니다. "layout"속성의 "width"속성 값을 200에서 300으로 늘려줍니다. 오호라~ 제대로 잘 보이는군요.

이제 컨트롤러(Controller)를 추가해서 조금 더 재미를 봐야겠죠? 실제로 뷰는 대부분 컨트롤러에 의해서 제어됩니다. 컨트롤러는 크게 두가지로 나눌 수 있는데요. 환면상의 변화에만 집중해서 작성하는 "뷰-헬퍼(View helper)"와 모델(Model)과 뷰를 연계하는 모델 컨트롤러입니다. 아마도 당신은 이 컨트롤러들을 작성하는데 대부분의 시간을 소비하게 될 것입니다. 그만큼 매우 중요하고 민감한 역할을 수행하기 때문이죠. 커맨드-라인을 실행하고 프로젝트 폴더로 이동합니다. 그리고 아래와 같이 타이핑하세요.

C:\Ruby\bin\hello_world\>sc-gen controller HelloWorld.appController
 ~ Created directory at controllers
 ~ Created file at controllers/app.js
 ~ Created directory at tests
 ~ Created directory at tests/control
 ~ Created file at tests/controllers/

Your controller is now ready to use!

자, "HelloWorld.appController"라는 이름의 컨트롤러가 뚝딱 생겨났네요. 그리고 "apps/hello_world" 폴더에 "controllers" 폴더와 "app.js" 파일이 생성되었습니다. 이 파일을 열면 아래와 같은 내용을 볼 수 있습니다.

HelloWorld.appController = SC.Object.create(
/** @scope HelloWorld.appController.prototype */ {
  // TODO: Add your own code here.
}) ;

이것은 create() 메서드에 의해 생성된 컨트롤러 클래스입니다. SproutCore에서는 이와 같이 매우 쉽게 사용자 정의 개체를 만들 수 있어, 자바스크립트 애플리케이션을 구축하는데 더욱 편리하고 빠른 개발환경을 제공합니다. 주석문을 지우고 아래와 같이 작성합니다.

HelloWorld.appController = SC.Object.create({
  greeting: "Hello World!"
}) ;

이제 컨트롤러가 준비되었으니 뷰에 바인딩(Binding)을 해 보겠습니다. "main_page.js"파일을 다시 엽니다. 그리고 LabelView의 "value"속성을 다음과 같이 교체한 후 브라우저를 "새로 고침"합니다.

    labelView: SC.LabelView.design({
      layout: { centerX: 0, centerY: 0, width: 200, height: 18 },
      textAlign: SC.ALIGN_CENTER,
      tagName: "h1", 
      valueBinding: "HelloWorld.appController.greeting"
    })

"Hello World!"가 보이세요? 이것은 컨트롤러에 의해서 출력된 레이블입니다. 그리고 컨트롤러의 "greeting"속성과의 연결고리는 살아있습니다. 언제라도 "greeting"속성의 값이 변경되면 "labelView"의 레이블은 자동으로 갱신될 것입니다. 정말로 그런지 확인해 볼까요? 콘솔 디버깅이 가능한 브라우저인 크롬 또는 사파리, 파이어폭스의 파이어버그 등의 커맨드-라인에 아래와 같이 입력해 봅시다.

SC.run(function() { HelloWorld.appController.set("greeting", "I am changing!!!"); });

노트: 콘솔 디버깅 할 때 SC.run 메서드를 사용해야 하는 이유는 해당 함수가 실행되는 동안 KVO(Key Value Observing)를 강제로 실행하여 바인딩된 대상의 변화여부를 모니터링하기 위해서 입니다. 이것은 외부에서 실행할 때에만 해당하며 SproutCore내부에서는 자동으로 처리되고 있어 실제 코딩에서는 신경쓰지 않아도 되는 부분입니다.

컨트롤러의 속성에 할당된 값을 변경했을 뿐인데 레이블까지 변경되는 것을 볼 수 있습니다. 이것은 "labelView"에서 컨트롤러의 "greeting"속성를 바인딩했기 때문입니다. 바인딩은 특정한 개체에 있는 속성에 대한 전선과도 같습니다. 속성의 값이 변경되면 묻지도 따지지도않고 자동으로 갱신되는 것이죠. 만약 이 속성을 함수에서 재정의한다면 더욱 동적인 뷰를 만들어 낼 수 있게 됩니다. 참 놀랍죠?

Comments

Got something to add? You can just leave a comment.

  • 페레그리나토르 페레그리나토르

    안녕하세요! 항상 좋은 글 감사합니다.
    글을 읽다보니 혼동을 일으킬 만한 부분이 있어서요.
    value 속성을 "HelloWorld.appController.greeting"가 아니라 HelloWorld.appController.greeting로 큰따옴표를 제거해야 하고, 이전에 컨트롤러에서도 "greeting:"Hello World!"가 아니라 greeting:"Hello World!"로 해야 합니다.
    다시 한번 항상 좋은 글 감사드립니다.

    reply edit

  • 지적 감사드립니다. SproutCore에서는 "action" 또는 "value" 속성을 지정할 때 스트링으로 사용하도록 되어 있습니다. "프로퍼티 패스"(property pat)라는 규칙때문입니다. 부가적으로 해당 컨트롤러가 준비되어 있지 않아도 속성을 지정할 수 있고, 자바스크립트를 불러오는 순서와 관계없이 작성할수 있다는 특징도 가집니다. 이부분에 대해서 "노트"를 작성해야겠군요. 그리고 컨트롤러 작성하는 부분의 코드는 수정하였습니다.

    reply edit

  • 페레그리나토르 페레그리나토르

    그렇군요... 첫번째 부분은 제가 잘못 보았네요. value를 valueBinding으로 교체한건데 value라고만 봐서 그렇습니다. 그렇치만, 꼭 스트링 지정을 하지 않아도 되더군요. greeting 속성의 실시간 갱신은 당근 안돼지만요.
    앞으로도 좋은 강좌 부탁드리겠습니다~

    reply edit

Your Reaction Time!

captcha

avatar