memorycraft wiki

<< SproutCore ドキュメント翻訳トップ

Hello World チュートリアル 4: オブザーバー

これまで、SproutCore?のインストール、最初のアプリの生成、ラベルビューの追加、コントローラ,バインディング,ボタンのセットアップを行なってきました。
つづいてSproutCore?の力を実感できる、もっとも高度なトピックのうちのひとつに進みます。

バインディングは便利ですが、実際にはSproutCore?のより強力な機能であるKey-Value 監視もしくはKVOの、特殊なケースです。
簡単に言うとKVOとは、SproutCore?オブジェクトにそのプロパティの変更を通知させる、ということを意味します。
たとえば、firstName と lastName をもったモデルオブジェクトがあるとします、コントローラーがこれら２つのプロパティを監視をはじめると、これらのプロパティに変更があった場合に、コントローラーのメソッドが呼び出されます。

監視はあなたのアプリケーションの状態をモニターし、その変化に対応するための強力な方法です。
多くの場合、クラスを書く時にいくつかのプロパティを他のオブジェクトが変更することを想定して定義するでしょう。
そのときに、これらのプロパティに変更があると通知され、それに応じた処理を行なうようにオブザーバーを記述します。
実際にこれから正にそのとおりのことを行ないます。

ステップ 1. オブザーバーの設定

以前、押下に応じたアクションを実行するボタンを作成しました。しかし、実際にはON/OFFのような状態を表示するための別の方法として使用することができます。
ボタンをチェックボックスに代えて、表示するラベルを切り替えてみましょう。 そのために、コントローラーに ”isClockShowing?”という別のプロパティを定義します。追加したばかりのメソッドの直後にカンマを入力し、つづけて次の１行を入力します。

isClockShowing: NO

SproutCore?ではそれぞれtrueとfalse を表す、YESとNOという２つの定数が定義されています。 これらの定数はコードを読みやすくするためにフレームワーク全体のいたる所で使用されています。 trueとfalseの方を好む人は、代わりにそれらを使用することもできます。

プロパティがあるので、簡単なオブザーバーを書いてみましょう。
このオブザーバーはとりあえずgreetingの値を変えるだけです。NOのあとにコンマを追加し、つづけて以下を入力します。

isClockShowingObserver: function() {
  var isClockShowing = this.get('isClockShowing') ;
  var newGreeting = (isClockShowing) ? 'CLOCK!' : 'Hello World!' ;
  this.set('greeting', newGreeting) ;
}.observes('isClockShowing')

定義の末尾に追加したこの小さな関数に気づきましたか？これが、あるプロパティを特定のメソッドに監視させるようにSproutCore?に指示する方法です。
このケースでは、定義した関数はisClockShowing?プロパティを監視します。名前のついたどんなオブジェクトでもオブザーバーに監視させることが出来ます。

これをテストするためにFireFox?をリロードして、FireBug?で以下の通り入力します。

HelloWorld.appController.set('isClockShowing', YES)

どうです？クールでしょう？

GET と SETについてのメモ ： 
  ここに書いたコードについて  foo.bar と foo.bar = X の代わりにget() と set()のメソッドが使われていることに気づいたかもしれません。
  get() と set()はSproutCoreの重要な一部分です、なぜならいろいろな事象がある中で常にプロパティの変化をオブザーバーに通知する機会を与えるためです。
  関数が静的なプロパティとして振舞う計算プロパティと呼ばれるものでも使用できます。
  一般的に、冒頭がアンダースコアでないプロパティを取得する際には、get() と set()を使います。アンダースコアで始まるプロパティ（ _myPropertyのような）は、private だとみなされ、監視できません。

ステップ 2. チェックボックスの作成

OK、オブザーバーの機能を手に入れたので、それを使うためにチェックボックスの設定をしましょう。
body.rhtmlにもどってボタンビューの行を削除し、代わりに以下と置き換えます。

<%= checkbox_view :clock_checkbox, :label => "Show Clock", :bind => { :value => 'HelloWorld.appController.isClockShowing' } %>

チェックボックスの valueプロパティは isClockShowing?プロパティと接続されています。つまりチェックボックスをクリックすると、 isClockShowing?プロパティの更新がオブザーバーをキックして、greetingプロパティを変更しラベルを更新します。それは魔法のように働きます。ブラウザを更新して試してみてください。

ステップ 3. 時計の追加

最後に、時計の機能を追加します。コントローラーにちょっと手を加えるだけです。ここでSproutCore?のTimerを使います、Timerは、SproutCore?が追加したDateのフォーマット関数と同じく、タイムアウト時にコード実行をスケジュールするための、はるかに効果的な方法を提供します。 次の２つのメソッドをコントローラーに追加します（最後のメソッドの後にカンマを追加して、その後に続けるように注意してください）

tick: function() {
  this.set('greeting', this.now()) ;
},

now: function() {
 return new Date().format('hh:mm:ss');
}

次に、isClockShowingObserver? の内容を以下のように編集します。

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'),

以上です。ページを更新して、時計をクリックしてください。ほんの数分にしては悪くない結果です。

ありがとう !

これで、はじめてのSproutCore?のチュートリアルを終わります。バインディング、オブザーバー、コントローラー、ビューおよびビューヘルパーといったSproutCore?の主な概念の概要を手に入れたことになります。あなたは既にサンプルコードをチェックアウトしたり、新しいアプリの開発を始める準備が出来ています。以下にスタートする手助けとなるリソースを記します。

1. あなたのテストサーバーの　http://localhost:4020/sproutcore/-docs 　にアクセスすると、SproutCore?の全クラスのAPIリファレンスを見ることができます。(はじめにRebuild Docsをクリックしてください). SproutCore?のサイトでも最新のものを見ることが出来ます。
2. SproutCore? のリポジトリから、増えつつあるサンプルアプリケーションをチェックアウトすることが出来ます。以下のように使います。

   svn co http://sproutcore.googlecode.com/svn/trunk/samples

3. SproutCore?コミュニティにも参加してみることも忘れないでください. そこにはフレームワークの作成者を含む大勢の人がいて、よろこんであなたを助けてくれます。

Good luck and happy Sprouting!

SproutCore コミュニティへ »

このページの原文

関連ページ

1. Memorycraft Wiki560日前
2. SproutCore ドキュメント翻訳560日前
3. HelloWorldチュートリアル3 ボタンの追加562日前