Rev. 2.73

지금까지 SproutCore의 프로젝트를 생성하고, 레이블-뷰를 작성해 보고, 뷰에 컨트롤러도 할당해 보고 바인딩한 값을 버튼으로 조작해 보았습니다. 이제 SproutCore의 진정한 힘을 체험해 볼 시간입니다.

SproutCore의 바인딩(Binding)은 매우 유용합니다. 이 바인딩이라는 강력한 특징을 부여하는 것은 실제로 SproutCore의 "Key Value Observing"(KVO)때문입니다. KVO의 간단한 의미를 이렇게 정의할 수 있습니다. 불특정한 SproutCore의 개체가 속성이 변경될 때 마다 알려주는 녀석이라고 말이죠. 예를 들면, 당신은 "firstName"과 "lastName"속성을 가진 모델 개체를 가지고 있습니다. 그리고 당신의 컨트롤러가 이 두 속성을 감시하고 있다면, 컨트롤러가 가진 메서드들에 의해 언제라도 변경된 속성을 호출할 수 있습니다.

SproutCore의 옵저빙(Observing)은 응용프로그램의 상태변화를 모니터링하는 매우 강력한 방법입니다. 하나의 클래스를 작성하고 클래스의 프로퍼티가 갱신되면 옵저버들이 속성의 변화된 값을 정확하게 알아내고 그에 따른 행동을 시작합니다. 지금부터 옵저버를 설정하는 방법을 알아봅시다.

종전에 버튼을 생성하고 버튼을 누를 때 마다 바인딩(트리거)에 의해 액션이 실행되도록 비교적 간단하게(평범하게) 구현했었습니다. 그러나 버튼은 "겨짐" 또는 "꺼짐" 상황을 표현하는 데에는 적합하지 않았습니다. 그래서 버튼을 채크박스(checkbox)로 변경하고 레이블-뷰의 변경 상태를 옵저버에 의하여 확인되도록 할 것입니다. "app.js"를 열고 "HelloWorld.appController"를 다음과 같이 작성해 주세요.

HelloWorld.appController = SC.Object.create({
  greeting: "Hello World!",
  isClockShowing: NO,
  isClockShowingObserver: function() { 
    var isClockShowing = this.get('isClockShowing') ; 
    var newGreeting = (isClockShowing) ? 'CLOCK!' : 'Hello World!' ; 
    this.set('greeting', newGreeting) ; 
  }.observes('isClockShowing')
}) ;

SproutCore에서 "YES"는 true를, "NO"는 false를 정의하고 있습니다. 마음에 들지 않는다면 false를 사용해도 무방합니다. "isClockShowing"속성과 "isClockShowingObserver"라는 함수를 선언했습니다. 그리고 함수 선언과 동시에 "observes"메서드를 통하여 "isClockShowing"이 감시할 대상임 알려줍니다. 정말로 감시가 되고 있는지 확인해 봅시다.

SC.run(function() { HelloWorld.appController.set('isClockShowing', YES); });

노트: SproutCore의 "get" 그리고 "set"메서드는 대단히 중요한 역할을 수행합니다. 왜냐하면 이 두 메서드를 통하여 옵저버들에게 속성 값의 변화여부를 알려줄 시기를 잡아낼 기회를 부여하는 계산이 포함되어 있기 때문입니다. 그래서 "foo.bar = X"와 같은 전형적인 변수할당 방법은 사용하지 않는 것이 좋습니다. 그리고 정 "get", 또는 "set"이름을 가진 프로퍼티를 사용하고 싶다면 언더스코어("_")를 사용하여 메서드들이 오버라이딩 되는것을 피하도록 하세요.

자, 옵저버가 잘 돌아가고 있나요? 그렇다면 이제 체크박스-뷰를 만들 순서입니다. "main_page.js"를 열어 "buttonView"를 제거하고 대신 "checkboxView"를 아래와 같이 작성합니다.

    childViews: 'labelView checkboxView'.w(),
    checkboxView: SC.CheckboxView.design({       
      layout: { centerX: 0, centerY: 20, width: 250, height: 18 },       
      title: "Show Clock",       
      valueBinding: "HelloWorld.appController.isClockShowing"
    }),

"checkboxView"의 valueBinding은 "HelloWorld.appController"의 "isClockShowing"속성입니다. 이것은 체크박스를 조작하여 "isClockShowing"속성 값을 갱신할 수 있다는 것과 반대로 "isClockShowing"속성 값의 변화에 의해 체크박스의 디스플레이가 변화할 수도 있음을 의미합니다. 이것이야말로 지금까지 우리가 그토록 바라던 마법과도 같은 것이란 말예요! 브라우저를 새로 고친 후 직접 확인해 보세요.

조금전에 컨트롤러에 작성했던 "isClockShowingObserver"메서드를 재작성하고 SproutCore에서 제공하는 Timer를 이용한 몇몇 메서드를 추가로 작성해서 진짜 시계를 만들어 봅시다.

  isClockShowingObserver: function() { 
    var isClockShowing = this.get('isClockShowing') ;  
    // create a timer if it does not exist already 
    if (!this._timer){
      this._timer = SC.Timer.schedule({ 
        target: this, 
        action: 'tick', 
        repeats: YES, 
        interval: 1000 
      });
    }  
    // pause the timer unless the clock is showing   
    this._timer.set('isPaused', !isClockShowing) ;  
    // update right now 
    var newGreeting = (isClockShowing) ? this.now() : 'Hello World'; 
    this.set('greeting', newGreeting) ;
  }.observes('isClockShowing'),
  tick: function() { 
    this.set('greeting', this.now()) ; 
  },  
  now: function() { 
    return new Date().format('hh:mm:ss'); 
  }

페이지를 새로 고침 하세요. 그리고 체크박스를 클릭해 보세요. 시계가 보이나요? 시계 모양이 좀 구리죠? 마지막으로 모양을 다듬고 스타일시트(CSS)를 추가로 작성해 보겠습니다. "main_page.js"를 열고 아래와 같이 작성합니다.

mainPane: SC.MainPane.design({     
  childViews: 'labelView checkboxView'.w(),      
    labelView: SC.LabelView.design({       
    layout: { centerX: 0, centerY: 0, width: 300, height: 50 },       
    valueBinding: "HelloWorld.appController.greeting"      
  }),      
  checkboxView: SC.CheckboxView.design({       
    layout: { centerX: 0, centerY: 30, width: 300, height: 18 },       
    title: "Show Clock",       
    valueBinding: "HelloWorld.appController.isClockShowing"
  })   
}).classNames('clock')

그리고 새로운 css파일을 등록해야 합니다. "main_page.js"가 위치한 "resources"폴더에 "clock.css"이름의 파일을 다음과 같이 작성하여 저장하세요.

.clock {   
  background: black;   
  color: white; 
}  
.sc-theme .clock .sc-label-view {   
  font-size: 48px;   
  line-height: 1.0; 
}

페이지를 새로 고칩니다. 훌륭한 시계가 만들어졌네요! 이것으로 "Hello World!" 튜토리얼을 마칩니다. 우리는 지금까지 SproutCore의 bindings, observers, controllers, views, 그리고 view helpers에 대하여 알아보았습니다. 이제 당신은 SproutCore를 이용하여 간단한 애플리케이션을 만들 준비가 된 셈입니다. SproutCore에 대하여 더 많은 학습이 필요하다면, SproutCore의 Reference 문서를 숙지하세요. 그리고 이미 만들어진 프로젝트를 다운로드하여 분석해 보세요. GitHub에 널렸습니다.

Comments

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

Your Reaction Time!

captcha

avatar