Rev. 2.73

attachment
브라우저만으로에서 PC를 원격 제어하는 화면

무료로 배포되는 EduVNC를 이용하면 다른 장소에 있는 PC를 웹 브라우저만으로 원격 제어할 수 있습니다. VNC에서 파생된 여러 원격제어 소프트웨어들이 대부분 호스트(서버)와 클라이언트(뷰어)로 구분되고 제어하는 쪽이나 받는 쪽이나 모두 데스크탑 애플리케이션을 설치해야 돌아갑니다만, EduVNC는 브라우저를 통하여 호스트로 접근하기 때문에 클라이언트 소프트웨어는 설치할 필요가 없습니다. 원리는 간단합니다. EduVNC는 HTTPD(Hypertext Transfer Protocol daemon)를 내장하여 웹 브라우저로부터의 접근이 가능하게 하고 몇몇 정해진 URI는 마우스와 키보드 이벤트를 실시간 전송하며 이미지를 갱신할 주소와 갱신이 필요한 영역의 정보를 토해냅니다. 브라우저로 접속시 영역을 그리드로 분할하여 전송하는 옵션과, 압축 전송 방식(JPEG, PNG4, PNG6, PNG8, PNG24) 그리고 갱신주기 시간을 설정할 수 있으며, 암호를 설정하여 외부로부터 접근을 차단하는 등의 일반적인 서버 설정을 할 수 있습니다.

장점이라면 클라이언트를 설치할 필요가 없어서 접근성이 매우 우수하다는 점이고, 단점이라면 겁나게 느리다는 것입니다. 너무 느려 터져서 소스를 까보니, 어설프게 짜여진 자바스크립트가 비효율적으로 이미지들을 갱신하고 있었습니다. 요것 한참 뜯어고치는 중입니다.(설치 폴더의 script.js 파일) 일단 화면 크기를 리사이즈 할 수 있도록 하고 있으며, 웹서버와 연계하여 JSONP로 통신하게 하면 구글맵처럼 웹 페이지에 임베딩 할 수도 있을 거고요. 갱신주기에 의해 무한 갱신되는 것보다. Comet(또는 롱폴링 구현)을 설치하여 서버가 원할 때 클라이언트의 이미지를 갱신하여 성능을 향상시키는 구조도 생각해 볼 수 있겠습니다.

Comments

오늘은 역사적인 날입니다. 구글이 웹기반 운영체제를 만들겠다고 설래발 친 결과를 발표한 날이기 때문입니다. 구글 크롬 OS는 대부분의 시간을 웹에서 보내는 사람들을 위해 만들어진 운영체제입니다. 간단하게 조작하고 정말 빠르며 안전한 컴퓨팅 환경을 제공할 계획이라고 합니다. 그 일환으로 구글은 지금까지 개발된 크롬 운영체제 프로젝트의 진행경과를 보고하고 오픈소스로 전환했습니다. 이와 동시에 코드가 올라가 있는 저장소사용자 인터페이스 문서 그리고 자세한 설계문서를 공개했습니다. 참고로 보다 자세한 발표 내용을 광파리님께서 포스팅해 주셨네요. 시간나면 직접 돌려봐야 겠습니다.

Comments

지금까지 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