Using Ext Direct with SenchaTouch2

Using Ext Directwith Sencha Touch 2Sencha Touch 2 で Ext Directを使う

13年2月20日水曜日

自己紹介

中村　久司

http://www.sunvisor.net

@martini3oz on Twitter




アジェンダ Ext Directとは

Sencha Touch 2 で使ってみる

RPC

Direct Store (Proxy)

with MVC

リクエストのコンバイン


Ext Direct とはSenchaのExt JS 4のページにこんな記述が

Ext Directは、クライアントサイドからリモートサーバサイドメソッドを呼び出す、プラットフォームや言語にとわられない技術です。Ext Directは、クライアントサイドのExt JSアプリケーションと、ポピュラーなサーバプラットフォームの間でシームレスな通信を可能にします。


夢のよう。(*´-｀*)サーバー上の関数を直接コールできる

StoreやModelと連係できる。DirectProxy

短時間に複数のリクエストがあった場合にそれをまとめて（コンバイン）くれる


Sencha.comの第一資料Sencha.comのページ

http://www.sencha.com/products/extjs/extdirect

サーバーサイドの実装についての解説が書いてある。

クライアントについてはAPIドキュメントに詳しい。日本語版APIでもDirectの部分はほとんど翻訳されています。

http://docs.xenophy.com/ext-js/4-0/






サーバーサイドサーバーサイドでは、APIとRouterという2つの要素で、クライアントサイドからメソッドを実行できるようにします。


APIサーバー側でどんなメソッドが公開されているのかを開示する。

Ext Direct は、それを見て利用できるメソッドや読み出し方がわかる仕組み。


APIScriptタグで読み込まれる

返すコードはこんな感じ1 <script src="Api.php"></script>

1 Ext.app.REMOTING_API = { 2 "url":"remote/router.php", 3 "type":"remoting", 4 "actions":{ 5 "AlbumList":[{ 6 "name":"getAll", 7 "len":0 8 },{ 9 "name":"add",10 "len":111 }]12 }13 };


APIクライアント側では、このオブジェクトをExt.direct.Manager.addProvider に渡してプロバイダーを追加します。

APIを用意しなくても、ここでオブジェクトリテラルを渡してやれば、動くっちゃ動く

Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);


Routerルーターはクライアントがサーバーサイドのメソッドをコールしたときに、リクエストの中身を解析して、実際のメソッドをコールします。

ルーターのURLは、APIの中でクライアントに伝えます。


サーバーサイドの実装サーバーサイドの実装は、Ext.Direct Pack というのがあります。

Senchaのダウンロードページ

http://www.sencha.com/products/extjs/download

Related Download の所からダウンロードできます。




サーバーサイドの実装Sencha.com のページには

Ext Direct has been integrated with many server-side environments including:

PHP Java .NET ColdFusion Ruby Perl

なんて書いてあります。


サーバーサイドの実装Ext.Direct - Server-side Stacks -

http://www.sencha.com/forum/showthread.php?67992-Ext.Direct-Server-side-Stacks

いろいろなフレームワークのものが用意されているみたいです。

僕は、Xenophy さんの xFrameworkPX を使っています。






Sencha Touch でDirectを使Sencha Touch 2 の RC から Ext.Direct が使えるようになった。

examples/direct にサンプルがある


RPCRPCの例は、Sencha Touch 2 のサンプルを検証してみます。

examples/direct/direct.html

このようにスクリプトタグでapiを読み込む。1 <script type="text/javascript" src="php/api.php"></script>


RPCその内容は、こんな感じ

1 Ext.ns("Ext.app"); 2 Ext.app.REMOTING_API = { 3 "url": "php\/router.php", 4 "type": "remoting", 5 "actions": { 6 "TestAction": [ 7 { 8 "name": "doEcho", 9 "len": 110 },11

クラス名

メソッド名

引数の数


RPCexamples/direct/direct.js: 42行目ここでは2つのプロバイダーを追加しています。

1 Ext.direct.Manager.addProvider(Ext.app.REMOTING_API, {2 type:'polling',3 url: 'php/poll.php',4 listeners: {5 data: function(provider, event) {6 updateMain('<i>' + event.getData() + '</i>');7 }8 }9 });




APIから読み込んだオブジェクトこれはリモーティングプロバイダー




オブジェクトリテラル。ポーリングプロバイダー





PollingProvider一定の間隔でポーリングを繰り返すプロバイダーです。

type: 'polling' とする

url: にサーバー側で実行するurlを指定します。

ポーリングが実行されデータを受信するとdataイベントが発火します。

ポーリングの間隔は interval コンフィグで設定します。


RPC - RemotingProviderDirectの本命

直接サーバーサイドのメソッドをコールする

addProvider でプロバイダを追加する。

するとサーバーサイドの関数が使えるように


RPCプロバイダを追加するとサーバーサイドのメソッドがグローバルネームスペースに追加されます。namespaceコンフィグを使うとそのネームスペースに追加されます。


RPCexamples/direct/direct.js: 8行目話を単純にするために短くします。

サーバーからレスポンスを受け取る場合は、必要な引数の後にコールバックを渡します。

1 function doEcho(field) {2 TestAction.doEcho(field.getValue(), function(result) {3 updateMain(result);4 field.reset();5 });6 }


Direct Store (Proxy)Ext.data.proxy.Direct を使うと、

ストアをDirect関数と関連づけられます。

directFn 1 proxy: {2 type: 'direct',3 directFn: 'AM.users.getAll',4 reader: {5 type: 'json',6 rootProperty: 'data',7 successProperty: 'success'8 }9 }


Direct Store (Proxy)CRUDを指定する場合はapiで 1 proxy: { 2 type: 'direct', 3 api: { 4 create: 'AM.users.addRec', 5 read: 'AM.users.getAll', 6 update: 'AM.users.updateRec', 7 destroy: 'AM.users.removeRec' 8 }, 9 reader: {10 type: 'json',11 rootProperty: 'data',12 successProperty: 'success'13 }14 }


CRUDのServer-sideReadアクション(directFnの場合も同じ)

paramByHash: true だと1つのオブジェクトとして送られる。(デフォルト)

サーバー側では送られてきたパラメーターを解釈して結果を返す。


CRUDのServer-sideProxyのパラメータ

filterParam: ‘filter’sortParam: ‘sort’enablePagingParams: truestartParam: ‘start’limitParam: ‘limit’extraParams


CRUDのServer-sideパラメーターを受け取る

PHPの場合StdClassで渡される

サーバー側で適切に処理をする

2 public function getAll($param) 3 { 4 $limit = $param->limit; 5 $page = $param->page; 6 $start = $param->start; 7 ...


CRUDのServer-sideExt.data.reader.JSONのコンフィグrootProperty: ‘data’データを格納するプロパティ名

successProperty: ‘success’成功フラグを格納するプロパティ名

totalProperty: ‘total’データの全件数を格納するプロパティ名ページングの時に必要


CRUDのServer-sideサーバーからは次のようなデータを返す15 return array(16 'total' => $total,17 'data' => $r,18 'success' => true19 );20 }


CRUDのServer-sideExt.data.writer.JsonのコンフィグallowSingle: true

falseにすると1件だけであっても配列で渡されるroot: undefined設定するとこの名前のプロパティ下にデータがセットされる

writeAllFields: truefalseにすると、更新時に変更のあったフィールドのデータだけを送信する


CRUDのServer-side更新系アクションでは処理対象のRecord(Model)のデータが送られる。

サーバー側では該当の処理をして、Readerが読める形式でリザルトRecordを返す。

というのが基本。


CRUDのServer-sideCreateの場合はIDのないデータ(fantomデータ)が送られるので、サーバー側でIDをつけて返してやる。

Updateの場合は、更新処理をしてその結果を返してやる。

Storeのデータは返されたデータのとおりに更新される

Deleteの場合は、idのみが入ったレコードを返す。


with MVCdirectFnやapiに関数をそのまま指定してはいけない

directFn: Hoge.fooFunc,

文字列で指定する。

directFn: ‘Hoge.fooFunc’,

Ext.Defineでクラス定義されるときには、まだ関数オブジェクトができていないから。


with MVCMVCでaddProviderをどこに置くか

Application.launchでは遅すぎる

Ext.onReadyの中に書くと、ApplicationがProxyをインスタンス化する前にaddProviderできる

ビルドツールでビルドした場合の検証が必要


with MVC10 Ext.require('Ext.direct.*');11 12 Ext.onReady(function() {13 Ext.direct.Manager.addProvider(Ext.REMOTING_API);14 });15 16 Ext.application({17 name: 'AM',18 19 controllers: ['Users'],20 models: ['User'],21 stores: ['Users'],22 views: ['Main', 'List', 'Edit'],23 24 launch: function() {25 Ext.create('AM.view.Main');26 }27 });


リクエストのコンバインExt.direct.RemotingProviderのコンフィグ

enableBuffer: 10

この時間内のリクエストはコンバインされる

falseを指定するとコンバインしなくなる

timeout: undefined

未定義時は30秒



1 Ext.ns('MyApp'); 2 3 Ext.onReady(function () { 4 5 var i; 6 7 Ext.direct.Manager.addProvider(Ext.REMOTING_API); 8 9 for(i=0; i<10; i++) {10 MyApp.directm.test(i, 1, function (ret) {11 var now = new Date();12 13 console.log(ret + ' client time:' + Ext.Date.format(now, 'H:i:s'));14 });15 }16 17 });18

普通の設定で連続リクエストを送る


リクエストのコンバインクライアントは一瞬で終わり


リクエストのコンバイン1回のリクエストで複数のメソッド実行がされている

2012-03-28 09:37:31,23 - Direct Called.2012-03-28 09:37:31,16 - Function Called. param = 02012-03-28 09:37:32,16 - Function Called. param = 12012-03-28 09:37:33,16 - Function Called. param = 22012-03-28 09:37:34,16 - Function Called. param = 32012-03-28 09:37:35,16 - Function Called. param = 42012-03-28 09:37:36,16 - Function Called. param = 52012-03-28 09:37:37,16 - Function Called. param = 62012-03-28 09:37:38,16 - Function Called. param = 72012-03-28 09:37:39,16 - Function Called. param = 82012-03-28 09:37:40,16 - Function Called. param = 9



1 Ext.ns('MyApp'); 2 3 Ext.onReady(function () { 4 5 var i; 6 7 Ext.REMOTING_API.enableBuffer = false; 8 Ext.direct.Manager.addProvider(Ext.REMOTING_API); 9 10 for(i=0; i<10; i++) {11 MyApp.directm.test(i, 1, function (ret) {12 var now = new Date();13 14 console.log(ret + ' client time:' + Ext.Date.format(now, 'H:i:s'));15 });16 }17 18 });19

enableBuffer = false にしてみる


リクエストのコンバインなにかクライアントにレスポンスが帰ってくる順番がランダムっぽくなっている


リクエストのコンバイン1リクエストに1つのメソッド実行になっている

2012-03-28 09:42:13,23 - Direct Called.2012-03-28 09:42:13,16 - Function Called. param = 42012-03-28 09:42:13,23 - Direct Called.2012-03-28 09:42:13,16 - Function Called. param = 52012-03-28 09:42:13,23 - Direct Called.2012-03-28 09:42:13,16 - Function Called. param = 12012-03-28 09:42:13,23 - Direct Called.2012-03-28 09:42:13,16 - Function Called. param = 22012-03-28 09:42:13,23 - Direct Called.2012-03-28 09:42:13,16 - Function Called. param = 32012-03-28 09:42:13,23 - Direct Called.2012-03-28 09:42:13,16 - Function Called. param = 02012-03-28 09:42:14,23 - Direct Called.2012-03-28 09:42:14,16 - Function Called. param = 62012-03-28 09:42:14,23 - Direct Called.2012-03-28 09:42:14,16 - Function Called. param = 92012-03-28 09:42:14,23 - Direct Called.2012-03-28 09:42:14,16 - Function Called. param = 82012-03-28 09:42:14,23 - Direct Called.2012-03-28 09:42:14,16 - Function Called. param = 7


リクエストのコンバイン 1 Ext.ns('MyApp'); 2 3 Ext.onReady(function () { 4 5 var i; 6 7 Ext.direct.Manager.addProvider(Ext.REMOTING_API); 8 9 i = 0;10 MyApp.f = function() {11 MyApp.directm.test(i, 1, function (ret) {12 var now = new Date();13 14 console.log(ret + ' client time:' + Ext.Date.format(now, 'H:i:s'));15 i++;16 if( i < 10 ){17 MyApp.f();18 }19 });20 21 };22 23 MyApp.f();24 25 });26

コールバックの中から実行してみる


リクエストのコンバイン順次実行されているのがわかる


リクエストのコンバインサーバー側でも順次実行されている

2012-03-28 09:43:36,23 - Direct Called.2012-03-28 09:43:36,16 - Function Called. param = 02012-03-28 09:43:37,23 - Direct Called.2012-03-28 09:43:37,16 - Function Called. param = 12012-03-28 09:43:38,23 - Direct Called.2012-03-28 09:43:38,16 - Function Called. param = 22012-03-28 09:43:40,23 - Direct Called.2012-03-28 09:43:40,16 - Function Called. param = 32012-03-28 09:43:41,23 - Direct Called.2012-03-28 09:43:41,16 - Function Called. param = 42012-03-28 09:43:42,23 - Direct Called.2012-03-28 09:43:42,16 - Function Called. param = 52012-03-28 09:43:43,23 - Direct Called.2012-03-28 09:43:43,16 - Function Called. param = 62012-03-28 09:43:44,23 - Direct Called.2012-03-28 09:43:44,16 - Function Called. param = 72012-03-28 09:43:45,23 - Direct Called.2012-03-28 09:43:45,16 - Function Called. param = 82012-03-28 09:43:46,23 - Direct Called.2012-03-28 09:43:46,16 - Function Called. param = 9


Documents

Using Ext Direct with SenchaTouch2