Your SlideShare is downloading. ×
  • Like
Using Ext Direct with SenchaTouch2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Using Ext Direct with SenchaTouch2

  • 369 views
Published

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
369
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Using Ext Direct with Sencha Touch 2 Sencha Touch 2 で Ext Directを使う13年2月20日水曜日
  • 2. 自己紹介 中村 久司 http://www.sunvisor.net @martini3oz on Twitter13年2月20日水曜日
  • 3. アジェンダ Ext Directとは Sencha Touch 2 で使ってみる RPC Direct Store (Proxy) with MVC リクエストのコンバイン13年2月20日水曜日
  • 4. Ext Direct とは SenchaのExt JS 4のページにこんな記述が Ext Directは、クライアントサイドからリモートサー バサイドメソッドを呼び出す、プラットフォームや言 語にとわられない技術です。Ext Directは、クライア ントサイドのExt JSアプリケーションと、ポピュラー なサーバプラットフォームの間でシームレスな通信を 可能にします。13年2月20日水曜日
  • 5. 夢のよう。(*´-`*) サーバー上の関数を直接コールできる StoreやModelと連係できる。DirectProxy 短時間に複数のリクエストがあった場合にそれをま とめて(コンバイン)くれる13年2月20日水曜日
  • 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. サーバーサイド サーバーサイドでは、APIとRouterという2つの要素 で、クライアントサイドからメソッドを実行できるよ うにします。13年2月20日水曜日
  • 8. API サーバー側でどんなメソッドが公開されているのかを 開示する。 Ext Direct は、それを見て利用できるメソッドや読み 出し方がわかる仕組み。13年2月20日水曜日
  • 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. API クライアント側では、このオブジェクトを Ext.direct.Manager.addProvider に渡してプロバイダー を追加します。 Ext.direct.Manager.addProvider(Ext.app.REMOTING_API); APIを用意しなくても、ここでオブジェクトリテラ ルを渡してやれば、動くっちゃ動く13年2月20日水曜日
  • 11. Router ルーターはクライアントがサーバーサイドのメソッド をコールしたときに、リクエストの中身を解析して、 実際のメソッドをコールします。 ルーターのURLは、APIの中でクライアントに伝えま す。13年2月20日水曜日
  • 12. サーバーサイドの実装 サーバーサイドの実装は、Ext.Direct Pack というのが あります。 Senchaのダウンロードページ http://www.sencha.com/products/extjs/download Related Download の所からダウンロードできます。13年2月20日水曜日
  • 13. サーバーサイドの実装 Sencha.com のページには Ext Direct has been integrated with many server-side environments including: PHP Java .NET ColdFusion Ruby Perl なんて書いてあります。13年2月20日水曜日
  • 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. Sencha Touch でDirectを使 Sencha Touch 2 の RC から Ext.Direct が使えるように なった。 examples/direct にサンプルがある13年2月20日水曜日
  • 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. 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. 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. 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. 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. 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. PollingProvider 一定の間隔でポーリングを繰り返すプロバイダーです。 type: polling とする url: にサーバー側で実行するurlを指定します。 ポーリングが実行されデータを受信するとdataイベント が発火します。 ポーリングの間隔は interval コンフィグで設定します。13年2月20日水曜日
  • 23. RPC - RemotingProvider Directの本命 直接サーバーサイドのメソッドをコールする addProvider でプロバイダを追加する。 するとサーバーサイドの関数が使えるように13年2月20日水曜日
  • 24. RPC プロバイダを追加するとサーバーサイドのメソッドが グローバルネームスペースに追加されます。 namespaceコンフィグを使うとそのネームスペースに 追加されます。13年2月20日水曜日
  • 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. 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. 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. CRUDのServer-side Readアクション(directFnの場合も同じ) paramByHash: true だと1つのオブジェクトとして送 られる。(デフォルト) サーバー側では送られてきたパラメーターを解釈して 結果を返す。13年2月20日水曜日
  • 29. CRUDのServer-side Proxyのパラメータ filterParam: ‘filter’ sortParam: ‘sort’ enablePagingParams: true startParam: ‘start’ limitParam: ‘limit’ extraParams13年2月20日水曜日
  • 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. CRUDのServer-side Ext.data.reader.JSONのコンフィグ rootProperty: ‘data’ データを格納するプロパティ名 successProperty: ‘success’ 成功フラグを格納するプロパティ名 totalProperty: ‘total’ データの全件数を格納するプロパティ名 ページングの時に必要13年2月20日水曜日
  • 32. CRUDのServer-side サーバーからは次のようなデータを返す 15 return array( 16 total => $total, 17 data => $r, 18 success => true 19 ); 20 }13年2月20日水曜日
  • 33. CRUDのServer-side Ext.data.writer.Jsonのコンフィグ allowSingle: true falseにすると1件だけであっても配列で渡される root: undefined 設定するとこの名前のプロパティ下にデータがセ ットされる writeAllFields: true falseにすると、更新時に変更のあったフィールドの データだけを送信する13年2月20日水曜日
  • 34. CRUDのServer-side 更新系アクションでは処理対象のRecord(Model)のデ ータが送られる。 サーバー側では該当の処理をして、Readerが読める 形式でリザルトRecordを返す。 というのが基本。13年2月20日水曜日
  • 35. CRUDのServer-side Createの場合はIDのないデータ(fantomデータ)が送られ るので、サーバー側でIDをつけて返してやる。 Updateの場合は、更新処理をしてその結果を返してや る。 Storeのデータは返されたデータのとおりに更新される Deleteの場合は、idのみが入ったレコードを返す。13年2月20日水曜日
  • 36. with MVC directFnやapiに関数をそのまま指定してはいけない directFn: Hoge.fooFunc, 文字列で指定する。 directFn: ‘Hoge.fooFunc’, Ext.Defineでクラス定義されるときには、まだ関数オ ブジェクトができていないから。13年2月20日水曜日
  • 37. with MVC MVCでaddProviderをどこに置くか Application.launchでは遅すぎる Ext.onReadyの中に書くと、ApplicationがProxyをイン スタンス化する前にaddProviderできる ビルドツールでビルドした場合の検証が必要13年2月20日水曜日
  • 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. リクエストのコンバイン Ext.direct.RemotingProviderのコンフィグ enableBuffer: 10 この時間内のリクエストはコンバインされる falseを指定するとコンバインしなくなる timeout: undefined 未定義時は30秒13年2月20日水曜日
  • 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. リクエストのコンバイン クライアントは一瞬で終わり13年2月20日水曜日
  • 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. リクエストのコンバイン 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. リクエストのコンバイン なにかクライアントにレスポンスが帰ってくる順番が ランダムっぽくなっている13年2月20日水曜日
  • 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. リクエストのコンバイン 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. リクエストのコンバイン 順次実行されているのがわかる13年2月20日水曜日
  • 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.