Rev. 2.73

"SproutCore의 Views 작성하기"에서 뷰(View)와 컨트롤러(Controller)를 작성해 보았습니다. 이제 상호 작용을 발생시키는 버튼을 페이지에 추가해 보도록 하겠습니다. 페이지에 한 구성요소를 삽입하기 위해서 다른 방해 구성요소들로 인해 삽질해 본 경험이 있으신가요? SproutCore를 사용하면 그러한 방해 구성요소들에 대해서 걱정할 필요없이 하나에만 집중할 수 있습니다. 지금부터 학습할 내용은 "labelView"에 바인딩된 컨트롤러의 "greeting"속성 값을 조작하기 위한 새로운 메서드와 버튼를 추가하여 서로 다른 두가지 상황을 연출할 것입니다.

SproutCore에서 새로운 메서드를 추가하는 일은 정말 쉽습니다. 새로운 하위 클래스를 작성하거나 이와 비슷한 짓거리를 할 필요가 없기 때문입니다. 속성을 추가하는 일도 마찬가지 입니다. "app.js"파일을 열고 "HelloWorld.appController"클래스에 아래와 같은 메서드를 그냥 추가하고 브라우저를 "새로 고침"합니다.

  toggleGreeting: function() {
    var currentGreeting = this.get('greeting');
    var newGreeting = (currentGreeting === 'Hello World!') ?
      'I am on SproutCore!' : 'Hello World!' ;
    this.set('greeting', newGreeting);
  }

그리고 브라우저의 콘솔 커맨드-라인에 다음과 같이 입력하여 추가한 메서드가 작동하는지 확인하세요.

SC.run(function() { HelloWorld.appController.toggleGreeting(); }); 

"labelView"의 문자가 변하는 것을 보셨나요? SproutCore는 항상 이런식입니다. 개체의 속성에 바인딩된 값을 즉시 알아낼 수 있습니다. 중요한 것은 시스템의 컨트롤러와 모델(Model) 개체의 상태를 조작하는 일에만 집중하여 작업할 수 있는 것입니다. 이제 액션 메서드를 작성하여 버튼을 추가하고 메시지를 토글해 봅시다.

"main_page.js"를 열고 다음과 같이 buttonView를 추가합니다.

    childViews: 'labelView buttonView'.w(),
    buttonView: SC.ButtonView.design({      
      layout: { centerX: 0, centerY: 20, width: 250, height: 24 },      
      title: "Change Title",      
      action: "toggleGreeting",      
      target: "HelloWorld.appController"     
    }),

노트: SproutCore는 클래스 속성을 바인딩하거나 참조할 때 스트링(string) 형식으로 선언해야 합니다. "프로퍼티 패스"(property pat)라는 규칙이 반영되어 있어 동적인 참조를 가능하게 하고 대상을 모니터링하기위한 프로세싱이 포함되어있기 때문입니다. 프로퍼티 패스는 크게 4가지 종류로 구분됩니다. "Simple Properties", "Absolute Properties", "Relative Properties" 그리고 "Chained Properties"가 바로 그것입니다. "Simple Properties"와 "Absolute Properties"는 단순하게 속성 이름 또는 속성의 경로를 지정하는 것이고 "Relative Properties" 와 "Chained Properties"는 참조 위치를 복수로(또는 유동적으로) 할당할 수 있습니다. 더욱 자세한 내용은 별도로 다루도록 하겠습니다.

버튼-뷰를 추가하고 "target"과 "action"속성에 방금 작성한 컨트롤러와 메서드 이름을 작성했습니다. 브라우저를 "새로 고침"한 후 무슨일이 발생했는지 살펴봅시다. 브라우저에서 제공하는 자바스크립트 이벤트 API를 생각할 겨를도 없이 끝나버렸군요. 이것으로 SproutCore의 뷰와 컨트롤러를 작성하고 액션(action)을 배정하는 기초적인 사용법을 알아보았습니다.

Comments

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

Your Reaction Time!

captcha

avatar