memorycraft wiki

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

Hello World チュートリアル 2: はじめてのビュー

前回のチュートリアルではSproutCore?をインストールして最初のアプリケーションを作りました。次にいつくかのビューを追加します。 ビューはWebページの一部を管理するJavaScript?のクラスです。それらはDOM要素の作成、イベントの処理、アニメーションやその他多くの役立つことを実行します。 実際にはSproutCore?では、ビューを書いているときを除きHTMLやDOMを直接さわることはあまりありません。代わりにSproutCore?のビュークラスがその役目を担います。

ビューはJavaScript?ですが、HTMLコンポーネントを持っています。ビューを作るのにHTMLとJavaScript?を直接書くのではなく、 SproutCore?には自動的にHTMLとJavaScript?を生成する便利なビューヘルパーというものがあります。 これはアプリケーションのビジュアルデザインの部分でとてもあなたの助けになります。

それでははじめてのビューをスタートしましょう。

ステップ 1. HTMLをさがす

HTML、CSS、画像およびその他のクライアント用の静的リソースは、全て ”english.lproj”フォルダに入っています。
なぜここにあるかというと、SproutCore?はローカライゼーションをサポートしているからです。
任意のほとんど全ての言語のlprojディレクトリを追加することができ、SproutCore?はその言語でビルドを行ないます。
とはいえ、デフォルトの言語は英語です、楽をするために、通常はすべての言語で使用できる共通リソースをこのフォルダに入れておくことをお勧めします。

clients/hello_world/english.lproj　フォルダを開くと、body.rhtml というファイルが見つかるはずです。これが、ページがロードされたときに表示されるHTMLが記述されているファイルです。拡張子はrhtmlとなっていますが、Erbisという、Rubyベースのテンプレート言語を使用しているためです。SproutCore?のテンプレートを使用するのにRubyを学ぶ必要はありません、ビューヘルパーの使い方を知るだけでよいのです。

ステップ 2. はじめてのヘルパーの追加

clients/hello_world/english.lproj のbody.rhtmlを開いて、<div class=”messages”>のなかのテキストを以下のように書き換えます。

<%= label_view :my_label, :tag => 'h1', :inner_html => 'Hello World!' %>

NOTE :

body.rhtmlの中にクラス名が"messages"であるdivが見当たらない場合は, 古いバージョンのSproutCore?開発ツールをインストールしていると思われます。 このチュートリアルを続ける前に、バージョンが0.9.2以上であることを確認して、再度プロジェクトを作り直してみてください。

では、ページをリロードして"Hello World"の大きい文字が確認できるかと思います。
おめでとうございます。はじめてのビューが追加されました。結果を確認するにはブラウザでHTMLソースを確認して、HTMLの上のほう（”Hello World”のh1タグ）と、最後の方にあるJavaScript?を見てみてください。
上の方にある、my_label というdivを参照しているJavaScript?があることに気がつくでしょう。このJavaScript?が、一瞬であなたのアプリケーションに命を吹き込んだ ラベルビューというものです。

ステップ 3. コントローラの追加

当然、単に静的なHTMLを表示することがJavaScript?の本文ではありません。もうちょっと面白くしてみましょう。
あなたが書く実際のJavaScript?の多くは、コントローラーオブジェクトの中です。これはビューとモデルをコントロールするJavaScript?オブジェクトです。
さきほどのラベル ビューを便利なものにするために、まずそれと一緒に動作するコントローラーが必要です。
それでは再度ターミナルを開いて、プロジェクトのルートディレクトリ（clientsフォルダがあるところ）にいることを確認して、以下のとおり入力します。

sc-gen controller hello_world/app

これで“HelloWorld?.appController”という名前のコントローラーが hello_worldクライアントの中に作られました。
作成された clients/hello_world/controllers/app.js　を開きます、このようになっているはずです。

HelloWorld.appController = SC.Object.create(
/** @scope HelloWorld.appController */ {
// TODO: Add your own code here.
}) ;

これはコントローラークラスです。create()メソッドは新規にオブジェクトをつくるときに使用します。
ほとんどのオブジェクト指向システムと違い、SproutCore?はカスタムオブジェクトを非常に簡単に作成できます。
引数の異なるコンストラクタをいくつもつくる代わりに、create()メソッドを呼び出してSproutCore?オブジェクトを作成し、必要なプロパティを直接設定します。　
JavaScript?ではこの方が断然はやく、常にコンストラクタメソッドを書くよりも便利です。

このコントローラーに、画面に表示する文字列のプロパティを追加する必要があります。”TODO”と書いてある部分を以下のように書き換えます。

greeting: "Hello World!"

ステップ 4. バインディングの追加

では、body.rhtmlにもどって、先ほど作成した labelビューをこのように書き換えましょう。

<%= label_view :my_label, :tag => 'h1', :bind => { :value => 'HelloWorld.appController.greeting' } %>

ブラウザの更新ボタンを押すと、かわらずHello World! の文字が表示されますが、今ではコントローラーからとったきたものです。(テキストが最初見えない理由がわかったでしょう)
greetingプロパティとvaluleプロパティの間の接続は実際に生きています。greetingプロパティを変更するたびにラベルが自動的に更新されます。
自分で試す場合は、FireFox?でアプリを表示して、FireBug?のコマンドラインで以下のように入力します。

HelloWorld.appController.set('greeting', 'I am changing!')

ラベルのテキストが変更されているのを確認できるはずです。

これはラベルビューに対してバインディングを追加したためです。バインディングはあるプロパティと別のプロパティをつなぐワイヤーのようなものです。
一つのプロパティが変更されると、別のプロパティが自動的に更新されます。これはSproutCore?が、アプリケーション内で物の同期を保つ主な方法の一つです。
また、各部品をばらばらに書いてから後でバインディングを使用してつなぐすることができるので、コードの保守をしやすくもします。

このステップは以上です。 次のステップでは、UIをダイナミックに変えるために、ボタンを使ってバインディングとプロパティの使い方をより詳しく学びます。

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

このページの原文

関連ページ

1. Memorycraft Wiki561日前
2. SproutCore ドキュメント翻訳561日前
3. HelloWorldチュートリアル3 ボタンの追加563日前
4. HelloWorldチュートリアル1 はじめに563日前