memorycraft wiki

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

Hello World チュートリアル 3: ボタンの追加

前回のチュートリアルでは、SproutCore?をインストールして、最初のビューとコントローラーを追加しました。
つづいて、ボタンを追加してページにインタラクティブ性をもたせましょう。

SproutCore?を使う楽しみの1つは、アプリケーションをいくつもの部品に分解できることです。
他の部品はバインディングとオブザーバーによって結び付けられ、自動的に更新されるため、それらに気をつかう必要がありません。 なので、あなたは正に今作業をしている部品にのみ集中していればよいのです。

今回の例では、それを表示するラベルビューに紐付けられる greeting プロパティをもつコントローラーがあります。
つぎに、greethingを２つの異なるステータスで切り替えるメソッドを追加します。では以下のようにメソッドを追加してみましょう。

ステップ 1. コントローラーにアクションを追加

SproutCore?ではオブジェクトへのメソッド追加は本当に簡単です。サブクラスを追加したり、それに近いようなことをする必要はありません。
プロパティを追加するのと同じように、ただオブジェクトにメソッドを追加するだけです。実際のやりかたは、コントローラーのプロパティの最後尾にカンマを打ってから以下を追加します。

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

それだけです。FireFox?でページを更新して、コンソールに以下のとおり入力します。

HelloWorld.appController.toggleGreeting();

そしてラベルビューの変更を確認してください。もちろんSproutCore?でフルアプリケーションを書く場合、オブジェクトのプロパティに紐づく全てのオブジェクトを知らないこともあるかと思います。
大事なことは、システム中のコントローラーまたはモデルオブジェクトの状態を変更することだけに集中できるということで、アプリケーションのその他の部分は自分で自分の面倒をみるのだということです。

では、アクションメソッドを作りましたので、ボタンに追加しましょう。

ステップ 2. ボタンビューの追加

body.rhtmlにもどって、以下のラベルビューのすぐ上に追加してください。

<%= button_view :toggle_button, :title => 'Change Title', :action => 'HelloWorld.appController.toggleGreeting' %>

うまくいけばテキストで一目瞭然にわかります。アクションとはボタンのクリックに応じて呼び出されるメソッドのことです。
ブラウザをリロードしてから、ボタンをクリックして何が起こるかを確認してください。

ここまでで基本的なビュー、コントローラー、バインディングおよびアクションの設定をすることができました。
このSproutCore?の簡単なガイドの中で、もう一つだけ言及しなければならない重要な概念 "オブザーバー"があります。それについては次のチュートリアルで説明します。

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

このページの原文

関連ページ

1. Memorycraft Wiki561日前
2. SproutCore ドキュメント翻訳561日前
3. HelloWorldチュートリアル2 はじめてのビュー563日前
4. HelloWorldチュートリアル4 オブザーバー563日前