Sencha Touch 2 で Ext Direct を使う (2)

さて、Sencha Touchです。これまでExt JSでしか使えなかったExt Directが Sencha Touch 2 の RC から使えるようになりました。

ダウンロードしたSencha Touchのexamples/direct にサンプルがありますが、RCの頃は動いたのに 製品版ではそのままでは動かない罠がかけられています。 一部のファイルを修正すれば動作するようになります。

取りあえず動くようにしたものを Githubに載せておきました。

リモートプロシージャコールの例として、 そのSencha Touch 2 のサンプルを検証してみます。

examples/direct/direct.htmlに次の記述があります。

    <script type="text/javascript" src="php/api.php"></script>

これは、前回説明したようにapiを読み込んでいるのですね。 そして、スクリプトタグで読み込まれるその内容は次のようになります。

    Ext.ns("Ext.app");
    Ext.app.REMOTING_API = {
        "url": "php/router.php",
        "type": "remoting",
        "actions": {
            "TestAction": [
                {
                    "name": "doEcho",
                    "len": 1
                },

こんな感じです。 実際にサンプルを動かせるのであれば、ブラウザで、php/api.php にアクセスしてみると内容を確認できます。

url
Routerのurl
type
Providerのタイプ
actions
クラス名がキーで、値がメソッド定義の配列のオブジェクト

メソッド定義は、name: メソッド名, len: 引数の数 となります。 名前付き引数の場合は、lenのかわりにparamsを指定して、params: に引数名の配列を指定できるようです。 (len: 1 としてオブジェクトを渡しても同じだと思うのですが、その違いがいまのところ僕にはわかりません)

では、APIをプロバイダーに追加しているところを見てみます。

examples/direct/direct.js: 42行目

    Ext.direct.Manager.addProvider(Ext.app.REMOTING_API, {
        type:'polling',
        url: 'php/poll.php',
        listeners: {
            data: function(provider, event) {
                updateMain('<i>' + event.getData() + '</i>');
            }
        }
    });

ここでは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秒間隔にする場合は次のようにします。

    Ext.direct.Manager.addProvider(Ext.app.REMOTING_API, {
        type:'polling',
        url: 'php/poll.php',
        interval: 30000,  // 間隔を30秒に設定
        listeners: {
            data: function(provider, event) {
                updateMain('<i>' + event.getData() + '</i>');
            }
        }
    });

RPC – RemotingProvider

RPCはいわばExt Directの本命です。 直接サーバーサイドのメソッドをコールします。 これまで述べたようにExt.data.Manager.addProvider に サーバー側のAPIで吐き出されたオブジェクトを渡すことでプロバイダを追加します。 するとサーバーサイドの関数が使えるようになります。

プロバイダを追加するとサーバーサイドのメソッドがグローバルネームスペースに追加されます。 プロバイダに渡すコンフィグの中でnamespaceを指定するとそのネームスペースに追加されます。 サンプルではグローバルネームスペースに置いていますが、 これはサンプルを単純にするためですので、 現実世界のコードではnamespace指定した方がいいと思います。 僕の場合はアプリケーション名のネームスペース下に置くようにしています。

このサンプルでは2つのリモートプロシージャコールがあります。Echo と Multiply です。

  • Echo の方は、入力した値をそのまま返してきます。
  • Multiplyの方は、入力した数値を8倍して返してきます。 数値以外を入れるとエラーメッセージを返します。

Echoの方を見てみます。 話を単純にするために、短く書き換えています。

    function doEcho(field) {
        TestAction.doEcho(field.getValue(), function(result) {
            updateMain(result);
            field.reset();
        });
    }

このようにサーバーサイドからの値を受け取る場合は、 サーバーに渡す引数の後にコールバック関数を渡してやります。 すると、サーバーからレスポンスが帰ってきたら、そのコールバックが呼ばれます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です