さて、Sencha Touchです。これまでExt JSでしか使えなかったExt Directが Sencha Touch 2 の RC から使えるようになりました。
ダウンロードしたSencha Touchのexamples/direct にサンプルがありますが、RCの頃は動いたのに 製品版ではそのままでは動かない罠がかけられています。 一部のファイルを修正すれば動作するようになります。
取りあえず動くようにしたものを Githubに載せておきました。
リモートプロシージャコールの例として、 そのSencha Touch 2 のサンプルを検証してみます。
examples/direct/direct.htmlに次の記述があります。
これは、前回説明したようにapiを読み込んでいるのですね。 そして、スクリプトタグで読み込まれるその内容は次のようになります。
こんな感じです。 実際にサンプルを動かせるのであれば、ブラウザで、php/api.php にアクセスしてみると内容を確認できます。
- url
- Routerのurl
- type
- Providerのタイプ
- actions
- クラス名がキーで、値がメソッド定義の配列のオブジェクト
メソッド定義は、name: メソッド名, len: 引数の数 となります。 名前付き引数の場合は、lenのかわりにparamsを指定して、params: に引数名の配列を指定できるようです。 （len: 1 としてオブジェクトを渡しても同じだと思うのですが、その違いがいまのところ僕にはわかりません）
では、APIをプロバイダーに追加しているところを見てみます。
examples/direct/direct.js: 42行目
ここでは2つのプロバイダーを追加しています。 ひとつは、APIから読み込んだオブジェクト Ext.app.REMOTING_API を渡しています。 これはRemotingProvider。 二つ目は インラインでオブジェクトを書いています。type: ‘polling’ なので PollingProvider になります。 このようにaddProviderメソッドには複数のAPIオブジェクトを渡すことができるようになっています。
このサンプルでは、ポーリングをしながら、RPCも実行するというような仕様になっています。
PollingProvider
では、最初にPollingProviderを見てみましょう。 PollingProviderとは、一定の間隔でポーリングを繰り返すプロバイダーです。
- APIでは、type: ‘polling’ とします。
- url: にサーバー側で実行するurlを指定します。
ポーリングが実行されデータを受信するとdataイベントが発火します。 ですので、サンプルではのように、listnersコンフィグでdataイベントのリスナーを設定しています。
ここには指定はありませんが、ポーリングの間隔は interval コンフィグで設定します。 intervalを指定しない場合のデフォルトの実行間隔は、3000ミリ秒＝3秒です。 30秒間隔にする場合は次のようにします。
RPC – RemotingProvider
RPCはいわばExt Directの本命です。 直接サーバーサイドのメソッドをコールします。 これまで述べたようにExt.data.Manager.addProvider に サーバー側のAPIで吐き出されたオブジェクトを渡すことでプロバイダを追加します。 するとサーバーサイドの関数が使えるようになります。
プロバイダを追加するとサーバーサイドのメソッドがグローバルネームスペースに追加されます。 プロバイダに渡すコンフィグの中でnamespaceを指定するとそのネームスペースに追加されます。 サンプルではグローバルネームスペースに置いていますが、 これはサンプルを単純にするためですので、 現実世界のコードではnamespace指定した方がいいと思います。 僕の場合はアプリケーション名のネームスペース下に置くようにしています。
このサンプルでは2つのリモートプロシージャコールがあります。Echo と Multiply です。
- Echo の方は、入力した値をそのまま返してきます。
- Multiplyの方は、入力した数値を8倍して返してきます。 数値以外を入れるとエラーメッセージを返します。
Echoの方を見てみます。 話を単純にするために、短く書き換えています。
このようにサーバーサイドからの値を受け取る場合は、 サーバーに渡す引数の後にコールバック関数を渡してやります。 すると、サーバーからレスポンスが帰ってきたら、そのコールバックが呼ばれます。