2012年1月17日火曜日

旧 Sencha Touch 2 の始め方 ウォーミングアップ編


このエントリー書いてから4ヶ月ほど経ちました。その間 Sencha Touch 2 はすごい勢いで進化し、ドキュメントページも様変わりしました。

そこで今回は Sencha Touch 2.0 と新しいドキュメントに合わせ、内容を一新してエントリーし直しましたので、こちらをご覧下さい。
2012/5/21 追記




2011年の年末、Sencha Touch 2 developer preview 3 を使ってWEBアプリを作った際の入門記録です。ウォーミングアップ、Controller、View、Model の全4編構成です。

まず、公式ドキュメントの"Getting Started with Sencha Touch 2"を読みました。ここでやったことは
  • SDKをダウンロードして自分の環境を作る
  • サンプルを自分の環境で動かしてみる
  • index.htmlとそこから読み込まれる app.js、sencha-touch-all.js、sencha-touch.css の用途を把握する
の3点です。

ちょっと余談ですが、Sencha Touch の公式ドキュメントで面白いのは、掲載されているサンプルコードを即座に実行して結果を確認できることです。


サンプルコードの上部にある Live Preview というボタンを押すとコード掲載部分が以下のように切り替わり、実行結果が表示されます。さらに実はサンプルコード部分はエディタになっているので、ちょっとコードを変えて試すなんでこともできます。



本題に戻りますが、Getting Started の次にしたことは、 "How to use classes in Sencha Touch 2" を読みました。ここでは
  • Ext.define でクラス定義を行う
  • Ext.create でインスタンス生成を行う
  • extend シンタックスでクラスの継承を行う
  • config シンタックスを使うとプロパティの getter、setter が自動生成される
ということを把握します。実は他にも色々書いてあるのですが、とりあえずこれだけ分かればいいと思って後半は読みませんでした。

次に、SDK に含まれている examples/kiva や expamples/twitter や kawanoshinobuさんが公開しているサンプルアプリを眺めました。ここでは、
  • Getting Started のように、Ext.application の launch 関数でゴニョゴニョしてない
  • 具体的な処理は、Controller でやっている
ということを確認しました。

そして、サンプルを読んでいく過程で、 Ext.app.application について調べました。ここでは以下のようなコードが書かれていた場合の name config、controllers config の意味をおさらいしました。
Ext.application({
    name: 'MyApp',
    controllers: [
        'MainController'
    ]
});
name config
  • ここで指定した名前で、唯一のグローバル変数が作られる
controllers config
  • app/controller/MainController.js があると期待して自動的に読み込まれる
ここまでで
  • Ext.application の launch 関数 にべた書きは邪道
  • Controller でやるのが王道っぽい
  • Ext.application からは controllers config を使って Controller をロードする
ということが分かりました。次は Controller を深堀していきます。

0 件のコメント :

コメントを投稿