Using Ext Direct      with Sencha Touch 2      Sencha Touch 2 で Ext Directを使う13年2月20日水曜日
自己紹介              中村 久司              http://www.sunvisor.net              @martini3oz on Twitter13年2月20日水曜日
アジェンダ         Ext Directとは         Sencha Touch 2 で使ってみる         RPC         Direct Store (Proxy)         with MVC        ...
Ext Direct とは         SenchaのExt JS 4のページにこんな記述が         Ext Directは、クライアントサイドからリモートサー         バサイドメソッドを呼び出す、プラットフォームや言   ...
夢のよう。(*´-`*)         サーバー上の関数を直接コールできる         StoreやModelと連係できる。DirectProxy         短時間に複数のリクエストがあった場合にそれをま         とめて(コ...
Sencha.comの第一資料         Sencha.comのページ              http://www.sencha.com/products/extjs/extdirect         サーバーサイドの実装についての...
サーバーサイド         サーバーサイドでは、APIとRouterという2つの要素         で、クライアントサイドからメソッドを実行できるよ         うにします。13年2月20日水曜日
API         サーバー側でどんなメソッドが公開されているのかを         開示する。         Ext Direct は、それを見て利用できるメソッドや読み         出し方がわかる仕組み。13年2月20日水曜日
API         Scriptタグで読み込まれる              1 <script src="Api.php"></script>         返すコードはこんな感じ            1 Ext.app.REMOTI...
API         クライアント側では、このオブジェクトを         Ext.direct.Manager.addProvider に渡してプロバイダー         を追加します。          Ext.direct.Mana...
Router         ルーターはクライアントがサーバーサイドのメソッド         をコールしたときに、リクエストの中身を解析して、         実際のメソッドをコールします。         ルーターのURLは、APIの中でク...
サーバーサイドの実装         サーバーサイドの実装は、Ext.Direct Pack というのが         あります。         Senchaのダウンロードページ         http://www.sencha.com/...
サーバーサイドの実装         Sencha.com のページには         Ext Direct has been integrated with many server-side         environments inc...
サーバーサイドの実装         Ext.Direct - Server-side Stacks -         http://www.sencha.com/forum/showthread.php?         67992-Ext...
Sencha Touch でDirectを使         Sencha Touch 2 の RC から Ext.Direct が使えるように         なった。         examples/direct にサンプルがある13年2...
RPC         RPCの例は、Sencha Touch 2 のサンプルを検証して         みます。         examples/direct/direct.html          1 <script type="tex...
RPC         その内容は、こんな感じ           1 Ext.ns("Ext.app");           2 Ext.app.REMOTING_API = {           3     "url": "php/ro...
RPC         examples/direct/direct.js: 42行目         ここでは2つのプロバイダーを追加しています。       1 Ext.direct.Manager.addProvider(Ext.app....
RPC         examples/direct/direct.js: 42行目         ここでは2つのプロバイダーを追加しています。       APIから読み込んだオブジェクトこれはリモーティングプロバイダー       1 ...
RPC         examples/direct/direct.js: 42行目         ここでは2つのプロバイダーを追加しています。       1 Ext.direct.Manager.addProvider(Ext.app....
RPC         examples/direct/direct.js: 42行目         ここでは2つのプロバイダーを追加しています。       1 Ext.direct.Manager.addProvider(Ext.app....
PollingProvider         一定の間隔でポーリングを繰り返すプロバイダーです。         type: polling とする         url: にサーバー側で実行するurlを指定します。         ポーリ...
RPC - RemotingProvider         Directの本命         直接サーバーサイドのメソッドをコールする         addProvider でプロバイダを追加する。         するとサーバーサイドの...
RPC         プロバイダを追加するとサーバーサイドのメソッドが         グローバルネームスペースに追加されます。         namespaceコンフィグを使うとそのネームスペースに         追加されます。13年2...
RPC         examples/direct/direct.js: 8行目         話を単純にするために短くします。      1 function doEcho(field) {      2     TestAction....
Direct Store (Proxy)         Ext.data.proxy.Direct を使うと、         ストアをDirect関数と関連づけられます。         directFn   1 proxy: {     ...
Direct Store (Proxy)         CRUDを指定する場合はapiで           1 proxy: {           2     type: direct,           3     api: {   ...
CRUDのServer-side         Readアクション(directFnの場合も同じ)         paramByHash: true だと1つのオブジェクトとして送         られる。(デフォルト)         サ...
CRUDのServer-side         Proxyのパラメータ         filterParam: ‘filter’         sortParam: ‘sort’         enablePagingParams: t...
CRUDのServer-side         パラメーターを受け取る              PHPの場合StdClassで渡される              2 public function getAll($param)       ...
CRUDのServer-side         Ext.data.reader.JSONのコンフィグ         rootProperty: ‘data’           データを格納するプロパティ名         successP...
CRUDのServer-side         サーバーからは次のようなデータを返す          15     return array(          16         total => $total,          17...
CRUDのServer-side         Ext.data.writer.Jsonのコンフィグ         allowSingle: true           falseにすると1件だけであっても配列で渡される         ...
CRUDのServer-side         更新系アクションでは処理対象のRecord(Model)のデ         ータが送られる。         サーバー側では該当の処理をして、Readerが読める         形式でリザル...
CRUDのServer-side         Createの場合はIDのないデータ(fantomデータ)が送られ         るので、サーバー側でIDをつけて返してやる。         Updateの場合は、更新処理をしてその結果を返...
with MVC         directFnやapiに関数をそのまま指定してはいけない              directFn: Hoge.fooFunc,         文字列で指定する。              directF...
with MVC         MVCでaddProviderをどこに置くか         Application.launchでは遅すぎる         Ext.onReadyの中に書くと、ApplicationがProxyをイン   ...
with MVC          10   Ext.require(Ext.direct.*);          11          12   Ext.onReady(function() {          13       Ext...
リクエストのコンバイン         Ext.direct.RemotingProviderのコンフィグ              enableBuffer: 10               この時間内のリクエストはコンバインされる    ...
リクエストのコンバイン     普通の設定で連続リクエストを送る      1 Ext.ns(MyApp);      2      3 Ext.onReady(function () {      4      5     var i;   ...
リクエストのコンバイン         クライアントは一瞬で終わり13年2月20日水曜日
リクエストのコンバイン         1回のリクエストで複数のメソッド実行がされている              2012-03-28 09:37:31,23   - Direct Called.              2012-03-2...
リクエストのコンバイン       enableBuffer = false にしてみる       1 Ext.ns(MyApp);       2       3 Ext.onReady(function () {       4     ...
リクエストのコンバイン         なにかクライアントにレスポンスが帰ってくる順番が         ランダムっぽくなっている13年2月20日水曜日
リクエストのコンバイン         1リクエストに1つのメソッド実行になっている              2012-03-28 09:42:13,23   - Direct Called.              2012-03-28 ...
リクエストのコンバイン       1 Ext.ns(MyApp);       2       3 Ext.onReady(function () {       4       5     var i;       6       7   ...
リクエストのコンバイン         順次実行されているのがわかる13年2月20日水曜日
リクエストのコンバイン         サーバー側でも順次実行されている              2012-03-28 09:43:36,23   - Direct Called.              2012-03-28 09:43:...
Upcoming SlideShare
Loading in …5
×

Using Ext Direct with SenchaTouch2

628 views
554 views

Published on

2011/03にSencha Perfect Day #008での発表資料です。当時、急な不幸毎で小堤さんに代理発表してもらいました。

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
628
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Using Ext Direct with SenchaTouch2

  1. 1. Using Ext Direct with Sencha Touch 2 Sencha Touch 2 で Ext Directを使う13年2月20日水曜日
  2. 2. 自己紹介 中村 久司 http://www.sunvisor.net @martini3oz on Twitter13年2月20日水曜日
  3. 3. アジェンダ Ext Directとは Sencha Touch 2 で使ってみる RPC Direct Store (Proxy) with MVC リクエストのコンバイン13年2月20日水曜日
  4. 4. Ext Direct とは SenchaのExt JS 4のページにこんな記述が Ext Directは、クライアントサイドからリモートサー バサイドメソッドを呼び出す、プラットフォームや言 語にとわられない技術です。Ext Directは、クライア ントサイドのExt JSアプリケーションと、ポピュラー なサーバプラットフォームの間でシームレスな通信を 可能にします。13年2月20日水曜日
  5. 5. 夢のよう。(*´-`*) サーバー上の関数を直接コールできる StoreやModelと連係できる。DirectProxy 短時間に複数のリクエストがあった場合にそれをま とめて(コンバイン)くれる13年2月20日水曜日
  6. 6. Sencha.comの第一資料 Sencha.comのページ http://www.sencha.com/products/extjs/extdirect サーバーサイドの実装についての解説が書いてある。 クライアントについてはAPIドキュメントに詳しい。日本語 版APIでもDirectの部分はほとんど翻訳されています。 http://docs.xenophy.com/ext-js/4-0/13年2月20日水曜日
  7. 7. サーバーサイド サーバーサイドでは、APIとRouterという2つの要素 で、クライアントサイドからメソッドを実行できるよ うにします。13年2月20日水曜日
  8. 8. API サーバー側でどんなメソッドが公開されているのかを 開示する。 Ext Direct は、それを見て利用できるメソッドや読み 出し方がわかる仕組み。13年2月20日水曜日
  9. 9. 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 };13年2月20日水曜日
  10. 10. API クライアント側では、このオブジェクトを Ext.direct.Manager.addProvider に渡してプロバイダー を追加します。 Ext.direct.Manager.addProvider(Ext.app.REMOTING_API); APIを用意しなくても、ここでオブジェクトリテラ ルを渡してやれば、動くっちゃ動く13年2月20日水曜日
  11. 11. Router ルーターはクライアントがサーバーサイドのメソッド をコールしたときに、リクエストの中身を解析して、 実際のメソッドをコールします。 ルーターのURLは、APIの中でクライアントに伝えま す。13年2月20日水曜日
  12. 12. サーバーサイドの実装 サーバーサイドの実装は、Ext.Direct Pack というのが あります。 Senchaのダウンロードページ http://www.sencha.com/products/extjs/download Related Download の所からダウンロードできます。13年2月20日水曜日
  13. 13. サーバーサイドの実装 Sencha.com のページには Ext Direct has been integrated with many server-side environments including: PHP Java .NET ColdFusion Ruby Perl なんて書いてあります。13年2月20日水曜日
  14. 14. サーバーサイドの実装 Ext.Direct - Server-side Stacks - http://www.sencha.com/forum/showthread.php? 67992-Ext.Direct-Server-side-Stacks いろいろなフレームワークのものが用意されているみ たいです。 僕は、Xenophy さんの xFrameworkPX を使っていま す。13年2月20日水曜日
  15. 15. Sencha Touch でDirectを使 Sencha Touch 2 の RC から Ext.Direct が使えるように なった。 examples/direct にサンプルがある13年2月20日水曜日
  16. 16. RPC RPCの例は、Sencha Touch 2 のサンプルを検証して みます。 examples/direct/direct.html 1 <script type="text/javascript" src="php/api.php"></script> このようにスクリプトタグでapiを読み込む。13年2月20日水曜日
  17. 17. 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 }, 引数の数 1113年2月20日水曜日
  18. 18. 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 });13年2月20日水曜日
  19. 19. RPC examples/direct/direct.js: 42行目 ここでは2つのプロバイダーを追加しています。 APIから読み込んだオブジェクトこれはリモーティングプロバイダー 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 });13年2月20日水曜日
  20. 20. 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 }); オブジェクトリテラル。ポーリングプロバイダー13年2月20日水曜日
  21. 21. 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 });13年2月20日水曜日
  22. 22. PollingProvider 一定の間隔でポーリングを繰り返すプロバイダーです。 type: polling とする url: にサーバー側で実行するurlを指定します。 ポーリングが実行されデータを受信するとdataイベント が発火します。 ポーリングの間隔は interval コンフィグで設定します。13年2月20日水曜日
  23. 23. RPC - RemotingProvider Directの本命 直接サーバーサイドのメソッドをコールする addProvider でプロバイダを追加する。 するとサーバーサイドの関数が使えるように13年2月20日水曜日
  24. 24. RPC プロバイダを追加するとサーバーサイドのメソッドが グローバルネームスペースに追加されます。 namespaceコンフィグを使うとそのネームスペースに 追加されます。13年2月20日水曜日
  25. 25. RPC examples/direct/direct.js: 8行目 話を単純にするために短くします。 1 function doEcho(field) { 2 TestAction.doEcho(field.getValue(), function(result) { 3 updateMain(result); 4 field.reset(); 5 }); 6 } サーバーからレスポンスを受け取る場合は、必要な引 数の後にコールバックを渡します。13年2月20日水曜日
  26. 26. 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 }13年2月20日水曜日
  27. 27. 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 }13年2月20日水曜日
  28. 28. CRUDのServer-side Readアクション(directFnの場合も同じ) paramByHash: true だと1つのオブジェクトとして送 られる。(デフォルト) サーバー側では送られてきたパラメーターを解釈して 結果を返す。13年2月20日水曜日
  29. 29. CRUDのServer-side Proxyのパラメータ filterParam: ‘filter’ sortParam: ‘sort’ enablePagingParams: true startParam: ‘start’ limitParam: ‘limit’ extraParams13年2月20日水曜日
  30. 30. CRUDのServer-side パラメーターを受け取る PHPの場合StdClassで渡される 2 public function getAll($param) 3 { 4 $limit = $param->limit; 5 $page = $param->page; 6 $start = $param->start; 7 ... サーバー側で適切に処理をする13年2月20日水曜日
  31. 31. CRUDのServer-side Ext.data.reader.JSONのコンフィグ rootProperty: ‘data’ データを格納するプロパティ名 successProperty: ‘success’ 成功フラグを格納するプロパティ名 totalProperty: ‘total’ データの全件数を格納するプロパティ名 ページングの時に必要13年2月20日水曜日
  32. 32. CRUDのServer-side サーバーからは次のようなデータを返す 15 return array( 16 total => $total, 17 data => $r, 18 success => true 19 ); 20 }13年2月20日水曜日
  33. 33. CRUDのServer-side Ext.data.writer.Jsonのコンフィグ allowSingle: true falseにすると1件だけであっても配列で渡される root: undefined 設定するとこの名前のプロパティ下にデータがセ ットされる writeAllFields: true falseにすると、更新時に変更のあったフィールドの データだけを送信する13年2月20日水曜日
  34. 34. CRUDのServer-side 更新系アクションでは処理対象のRecord(Model)のデ ータが送られる。 サーバー側では該当の処理をして、Readerが読める 形式でリザルトRecordを返す。 というのが基本。13年2月20日水曜日
  35. 35. CRUDのServer-side Createの場合はIDのないデータ(fantomデータ)が送られ るので、サーバー側でIDをつけて返してやる。 Updateの場合は、更新処理をしてその結果を返してや る。 Storeのデータは返されたデータのとおりに更新される Deleteの場合は、idのみが入ったレコードを返す。13年2月20日水曜日
  36. 36. with MVC directFnやapiに関数をそのまま指定してはいけない directFn: Hoge.fooFunc, 文字列で指定する。 directFn: ‘Hoge.fooFunc’, Ext.Defineでクラス定義されるときには、まだ関数オ ブジェクトができていないから。13年2月20日水曜日
  37. 37. with MVC MVCでaddProviderをどこに置くか Application.launchでは遅すぎる Ext.onReadyの中に書くと、ApplicationがProxyをイン スタンス化する前にaddProviderできる ビルドツールでビルドした場合の検証が必要13年2月20日水曜日
  38. 38. 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 });13年2月20日水曜日
  39. 39. リクエストのコンバイン Ext.direct.RemotingProviderのコンフィグ enableBuffer: 10 この時間内のリクエストはコンバインされる falseを指定するとコンバインしなくなる timeout: undefined 未定義時は30秒13年2月20日水曜日
  40. 40. リクエストのコンバイン 普通の設定で連続リクエストを送る 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 }); 1813年2月20日水曜日
  41. 41. リクエストのコンバイン クライアントは一瞬で終わり13年2月20日水曜日
  42. 42. リクエストのコンバイン 1回のリクエストで複数のメソッド実行がされている 2012-03-28 09:37:31,23 - Direct Called. 2012-03-28 09:37:31,16 - Function Called. param = 0 2012-03-28 09:37:32,16 - Function Called. param = 1 2012-03-28 09:37:33,16 - Function Called. param = 2 2012-03-28 09:37:34,16 - Function Called. param = 3 2012-03-28 09:37:35,16 - Function Called. param = 4 2012-03-28 09:37:36,16 - Function Called. param = 5 2012-03-28 09:37:37,16 - Function Called. param = 6 2012-03-28 09:37:38,16 - Function Called. param = 7 2012-03-28 09:37:39,16 - Function Called. param = 8 2012-03-28 09:37:40,16 - Function Called. param = 913年2月20日水曜日
  43. 43. リクエストのコンバイン enableBuffer = false にしてみる 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 }); 1913年2月20日水曜日
  44. 44. リクエストのコンバイン なにかクライアントにレスポンスが帰ってくる順番が ランダムっぽくなっている13年2月20日水曜日
  45. 45. リクエストのコンバイン 1リクエストに1つのメソッド実行になっている 2012-03-28 09:42:13,23 - Direct Called. 2012-03-28 09:42:13,16 - Function Called. param = 4 2012-03-28 09:42:13,23 - Direct Called. 2012-03-28 09:42:13,16 - Function Called. param = 5 2012-03-28 09:42:13,23 - Direct Called. 2012-03-28 09:42:13,16 - Function Called. param = 1 2012-03-28 09:42:13,23 - Direct Called. 2012-03-28 09:42:13,16 - Function Called. param = 2 2012-03-28 09:42:13,23 - Direct Called. 2012-03-28 09:42:13,16 - Function Called. param = 3 2012-03-28 09:42:13,23 - Direct Called. 2012-03-28 09:42:13,16 - Function Called. param = 0 2012-03-28 09:42:14,23 - Direct Called. 2012-03-28 09:42:14,16 - Function Called. param = 6 2012-03-28 09:42:14,23 - Direct Called. 2012-03-28 09:42:14,16 - Function Called. param = 913年2月20日水曜日
  46. 46. リクエストのコンバイン 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 }); 2613年2月20日水曜日
  47. 47. リクエストのコンバイン 順次実行されているのがわかる13年2月20日水曜日
  48. 48. リクエストのコンバイン サーバー側でも順次実行されている 2012-03-28 09:43:36,23 - Direct Called. 2012-03-28 09:43:36,16 - Function Called. param = 0 2012-03-28 09:43:37,23 - Direct Called. 2012-03-28 09:43:37,16 - Function Called. param = 1 2012-03-28 09:43:38,23 - Direct Called. 2012-03-28 09:43:38,16 - Function Called. param = 2 2012-03-28 09:43:40,23 - Direct Called. 2012-03-28 09:43:40,16 - Function Called. param = 3 2012-03-28 09:43:41,23 - Direct Called. 2012-03-28 09:43:41,16 - Function Called. param = 4 2012-03-28 09:43:42,23 - Direct Called. 2012-03-28 09:43:42,16 - Function Called. param = 5 2012-03-28 09:43:43,23 - Direct Called. 2012-03-28 09:43:43,16 - Function Called. param = 6 2012-03-28 09:43:44,23 - Direct Called. 2012-03-28 09:43:44,16 - Function Called. param = 713年2月20日水曜日 2012-03-28 09:43:45,23 - Direct Called.

×