2012年5月21日月曜日

Sencha Touch 2 の始め方 Controller 編

Controller の超基礎

Controller の超基礎的な内容を把握することを目的として Controllers ガイド を読みます。超基礎ですので、ここでは以下の4点に絞ります。

  • ComponentQuery
  • Controller の作り方
  • refs config について
  • control config について

この Controllers ガイドには以下の項目についても書かれているのですが、ここでは思い切って見ないことにします。

  • 起動時の処理の流れ
  • routes config について
  • before config について
  • Profile との絡みについて

ComponentQuery

これは View 内のコンポーネントを指し示すための方法で、CSS セレクタのように書くことができます。このコンポーネントという用語も説明しておくと、これは Button やタイトルバーなどの部品のことで、これらコンポーネントが積み重なって View が構成されています。

Controller の作りかた

extend 構文で Ext.app.Controller を継承します。簡単です。

Ext.define('MyApp.controller.Users', {
 extend: 'Ext.app.Controller',
});

sencha コマンドを使ってみる

sencha コマンドを使って controller のスケルトンコードを生成することもできます。sencha コマンドと言えば、ウォーミングアップ編で アプリのスケルトンを生成するために使ったきり全く触れてませんでしたが、controller のスケルトンも生成できます。

では、アプリのルートディレクトリに入って以下の sencha コマンドを叩きます。

sencha generate controller Main

すると app/controller/Main.js にController のスケルトンコードが生成されます。さらに app.js にも controllers config が自動で追加されてています。これはかなり便利です。

ただ、sencha generate コマンドは同名ファイルが存在している場合でも、何の確認もなく新しいスケルトンコードで上書きしてしまいます。折角書いたコードを sencha generate に上書きされないように注意して下さい。

refs config について

  • Controller から任意のコンポーネントを簡単に取得するための仕組み
  • 指定したコンポーネントを取得するための getter を生成してくれる
  • 取得するコンポーネントは ComponentQuery で指定する
  • 対象コンポーネントが複数ある場合は最初の1つを示す

例えば 以下のような Controller のコードでは、getBtn メソッドが自動生成されます。また、これを呼び出すことで button コンポーネントを取得することができます。黄色くマーキングした部分が ComponentQuery です。ここでは説明のためにシンプルな指定をしていますが、属性でフィルタリングしたり、ID による指定も可能です。

Ext.define('MyApp.controller.Main', { 
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            btn : 'button',
        },

Controller 内から頻繁に参照されるような View のコンポーネントについては、この refs config を使って getter を自動生成させるとコードがスッキリします。

control config について

  • あるコンポーネントであるイベントが起きた時の処理を書く
  • コンポーネントの指定は ComponentQuery で書く

例えば以下のような Controller のコードでは、loginButtonという ID が付けられたコンポーネントで tap イベントが発生したときに console.log('tap') が実行されます。

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',
    config: {
        control: {
            '#loginButton': {
                tap : function() {
                    console.log('tap');
                }
            }
        }
    },    
});
このコードは refs config を使ってこんな書き方もできます。

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            loadButton : '#loadButton',
        },
        control: {
            loadButton: {
                tap : function() {
                    console.log('tap');
                }
            }
        }
    },
});
2つのコードともに、黄色くマーキングした部分が ComponentQuery です。ここでは # を付けて ID による指定をしています。またオレンジでマーキングした部分は、イベント名を表していてます。

このイベントですが、コンポーネントごとに発生するイベントが異なります。あるコンポーネントがどんなイベントを発生させるかは、API ドキュメントの上部の雷マークが付いてる Events を確認してください。


ここまででお分かりのように、control config というのは、イベントに対応する処理を定義する仕組みです。つまりイベントハンドラを設定する仕組みということです。

Controller の役割

SDK に付属する examples 内のアプリの Controller の処理を見るとそのほとんどの処理がイベント駆動で control config を起点として書かれていると思います。

Controller はイベントハンドラの集合という側面が強く、コンポーネントなどで発生したイベントに反応して色々な処理をするものなんだと解釈できます。

この色々な処理というのは画面を切り替えたり、サーバーと通信してデータを変更したりということです。つまりイベントに呼応して View や Model を操作するのが Controller の役割なんだと言えます。

サーバーと通信してデータを変更したりってのは具体的にどうやるの?ということで

おまけ)APIドキュメントについて

control config のところで、APIドキュメントの話が少し出たのでここで API ドキュメントの探し方を補足しておきます。公式ドキュメント の左上の歯車みたいなアイコンのタブをクリックすると一覧が出てくるので、一覧からお目当ての API ドキュメントを探します。


この一覧からも探せるのですが、実はサイトの右側にある検索ボックスがすごく便利なのでこちらを使ってみて下さい。例えば Button コンポーネントの API ドキュメントが見たい場合は、検索フォームに bu と入れればインクリメンタルサーチで該当する Button コンポーネントのドキュメントがすぐに見つかります。


ここで一番上に出てる button xtype: button と 2番目に出てる Button Ext.Button は同じものを指しています。そもそも、xtype というのはコンポーネントに付けられているショートカットでした。ここで xtype: button についてる歯車+緑の矢印のアイコンはショートカットを表しているのでしょうか。

次にお目当ての API ドキュメントに辿り着いてからどうするか?Button コンポーネントは Configs が 60以上、メソッドが 200 以上もあります。ここから必要な情報を探し当てるためには API ドキュメントの右側の2段目にある検索フォームを使います。



目的のメンバの名前が分かってる場合は検索フォームで検索しますが、当てもなく API ドキュメントを巡るケースもあります。そんなときは右の Show ボタンでタグカテゴリごとにフィルタすると当たりをつけやすくなります。

Sencha Touch 2 の始め方



0 件のコメント :

コメントを投稿