Using Ext Direct with SenchaTouch2

Using Ext Direct
with Sencha Touch 2
Sencha 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 は、それを見て利用できるメソッドや読み
出し方がわかる仕組み。


API
Scriptタグで読み込まれる
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":1
11 }]
12 }
13 };

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

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 にサンプルがある


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

examples/direct/direct.html
1 <script type="text/javascript" src="php/api.php"></script>

このようにスクリプトタグでapiを読み込む。


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": 1
10 }, 引数の数
11


RPC
examples/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 });


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

2 type:'polling',
4 listeners: {
7 }
8 }
9 });


RPC

2 type:'polling',
4 listeners: {
7 }
8 }
9 });

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


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

type: 'polling' とする

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

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

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


RPC - RemotingProvider
Directの本命

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

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

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


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


RPC
話を単純にするために短くします。
1 function doEcho(field) {
2 TestAction.doEcho(field.getValue(), function(result) {
3 updateMain(result);
4 field.reset();
5 });
6 }

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


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 }


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-side
Readアクション(directFnの場合も同じ)

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

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


CRUDのServer-side
Proxyのパラメータ

filterParam: ‘filter’
sortParam: ‘sort’
enablePagingParams: true
startParam: ‘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-side
Ext.data.reader.JSONのコンフィグ
rootProperty: ‘data’
データを格納するプロパティ名
successProperty: ‘success’
成功フラグを格納するプロパティ名
totalProperty: ‘total’
データの全件数を格納するプロパティ名
ページングの時に必要


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


CRUDのServer-side
Ext.data.writer.Jsonのコンフィグ
allowSingle: true
falseにすると1件だけであっても配列で渡される
root: undefined
設定するとこの名前のプロパティ下にデータがセ
ットされる
writeAllFields: true
falseにすると、更新時に変更のあったフィールドの
データだけを送信する


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

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

というのが基本。


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

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

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

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


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

directFn: Hoge.fooFunc,
文字列で指定する。

directFn: ‘Hoge.fooFunc’,
Ext.Deﬁneでクラス定義されるときには、まだ関数オ
ブジェクトができていないから。


with MVC
MVCでaddProviderをどこに置くか

Application.launchでは遅すぎる

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

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


with MVC
10 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
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 = 0


enableBuffer = false にしてみる
1 Ext.ns('MyApp');
2
4
5 var i;
6
7 Ext.REMOTING_API.enableBuffer = false;
9
10 for(i=0; i<10; i++) {
13
15 });
16 }
17
18 });
19


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


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

2012-03-28 09:42:13,23 - Direct Called.
2012-03-28 09:42:13,23 - Direct Called.
2012-03-28 09:42:13,23 - Direct Called.
2012-03-28 09:42:13,23 - Direct Called.
2012-03-28 09:42:13,23 - Direct Called.
2012-03-28 09:42:13,23 - Direct Called.
2012-03-28 09:42:14,23 - Direct Called.
2012-03-28 09:42:14,23 - Direct Called.

1 Ext.ns('MyApp');
2
4
5 var i;
6
8
9 i = 0;
10 MyApp.f = function() {
13
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:37,23 - Direct Called.
2012-03-28 09:43:38,23 - Direct Called.
2012-03-28 09:43:40,23 - Direct Called.
2012-03-28 09:43:41,23 - Direct Called.
2012-03-28 09:43:42,23 - Direct Called.
2012-03-28 09:43:43,23 - Direct Called.
2012-03-28 09:43:44,23 - Direct Called.
13年2月20日水曜日 2012-03-28 09:43:45,23 - Direct Called.

Using Ext Direct with SenchaTouch2

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Using Ext Direct with SenchaTouch2

Ähnlich wie Using Ext Direct with SenchaTouch2 (20)

Mehr von 久司中村

Mehr von 久司中村 (11)