2012年5月21日月曜日

Sencha Touch 2 の始め方 Model 編

Model、Store、Proxy の特徴

MVC の一角を成すということで、Model にばかり注目しがちですが、Store と Proxy にも注目する必要があります。まずは、"Using the data package in Sencha Touch 2" を読み、Model、Store、Proxy の特徴からそれぞれの違いと関係を掴みます。

Model の特徴

  • データそのものを表す
  • DB で例えると、1レコードに相当

Store の特徴

  • Model の集合を扱うための仕組み
  • DB で例えると、ある条件で取得できる複数レコード
  • ソート条件を指定並び替えができる
  • フィルタ条件を指定して絞り込みができる
  • インラインデータを使ってデータをべた書きできる

Proxy の特徴

  • データの読み込みと保存を処理するための仕組み
  • リモートサーバーやローカルストレージが指定できる
  • Model や Store から使われる


Model と Proxy について

次に Model と Proxy の使い方を把握するために Ext.data.Model の API ドキュメントを読みます。Model に関しては今のところ "Using Models ガイド" が中途半端でなので API ドキュメントを読んだ方がいいです。ここでは以下の2点について読みます。

  • Model クラスの作り方
  • Proxy を使ったサーバー連携

以下の2点はここでは読み飛ばします。

  • Associations
  • Validations

Model クラスの作り方

extend 構文で Ext.data.Model を継承します。簡単です。

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
});

sencha コマンドを使ってみる

また Controller と同じように、sencha コマンドを使って スケルトンコードを生成することもできます。

今回もアプリのルートディレクトリに入って、以下のコマンドを叩きます。今回は4つ目の引数としてフィールド情報を与えています。

sencha generate model User id:int,name
app/model/User.js に Model のスケルトンが生成されます。さらに app.js にも models config が自動で追加されます。こちらも Controller の時と同様、上書きされないように注意して使用してください。

Proxy を使ったサーバー連携

まず Model の proxy config を設定します。やるべきことはこれだけです。

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',

    config: {
        fields: ['id', 'name'],
        proxy: {
            type: 'rest',
            url : '/users'
        }
    }
});

データ更新

User モデルを生成して、save メソッドを発行すると

var user = Ext.create('MyApp.model.User', {name: 'satorumpen'});
user.save();
/users に対して データが POST されます。Proxy と Model が連携することで サーバーに対する HTTP 処理を自動でやってくれます。


データ取得

また、HTTP 経由でデータを取得することも簡単にできます。Model クラスの static メソッドの load を使います。

MyApp.model.User.load(123, {
    success: function(user) {
        console.log(user.getName());
    }
});
このコードでは Proxy によって /users/123 へ GET リクエストが発行されます。さらにサーバーから返された JSON を Reader が自動的に User モデルに変換して success コールバックの引数に渡してくれます。


補足

Proxy を経由して Reader の設定を変更することで、より複雑な構造の JSON や JSON 以外のレスポンスも受け取れるようになります。API ドキュメントに詳細が書かれていますので必要に応じて参照してください。


また、ここでは Rest Proxy で説明しましたが、より汎用的な Ajax Proxy というのもあります。こちらも API ドキュメントに詳細が書かれていますので必要に応じて参照してください。



Store について

次は Store の使い方を把握するために Ext.data.Store の API ドキュメントを読みます。Store も Model と同様に "Using Stores ガイド" が中途半端なので、API ドキュメントを読んだ方がいいです。ここでは以下の2点にターゲットを絞って読み進めます。

  • Store クラスの作り方
  • インラインデータについて

+2点補足的なことも書きました。

  • View との連携
  • Controller から使う

    ドキュメントの以下内容はここでは読み飛ばします。

    • Filtering and Sorting

    Store クラスの作り方

    Ext.data.Store をお決まりの方法で継承してつくります。

    Ext.define('MyApp.store.Users', {
        extend: 'Ext.data.Store',
    });

    Store は sencha コマンドによる generate が対応していないので、app.js に自分で stores config を追加する必要があります。

    インラインデータについて

    • data config を使ってインラインでデータを定義できる

    View との連携について

    Store がその価値を発揮するのは DataView コンポーネントと連携した時だと思います。もうここでは説明しませんが、より実践的なアプリに挑戦する前に目を通しておきましょう。


    Controller から使う

    別に Controller に限った話じゃないですが、Stoer は以下のようにして呼び出せます。

    var users = Ext.getStore('Users');
    

    Ext.getStore メソッドの引数は storeId です。Ext.application の stores config で store を生成した場合は、stores config で指定した名前が storeId になります。

    おしまい


    0 件のコメント :

    コメントを投稿