贰虫迟.诲颈谤别肠迟ことはじめ
- 1. Ext.Directことはじめ Japan Sencha UG 勉強会 第４回＠東京
- 2. 自己紹介 セックという会社で働いています。 ロボットとかやってる部署にいるのに関わったことがありません (T_T) http://www.sec.co.jp/robot perl, Ext JS とか
- 3. アジェンダ 1. Ext.Directの紹介 2. しくみについて 3. 実装について 4. デモ
- 5. Sencha Touch / Ext JS (Client Side) JavaScriptフレームワーク ● UIコンポーネント きれいなUIを実現 (tree,grid,form...) ● MVC 疎結合な構成 ● ユーティリティ dom, drag&drop, history, state, keymap, format ...
- 6. Sencha Touch / Ext JS Examples http://www.sencha.com/products/extjs/examples/ Directわかりにくい???そもそも動かないし(??ω?｀)
- 7. Ext.Direct ● サーバとのAjax通信を隠蔽してくれる →JavaScriptからサーバ側のメソッドを呼び出す感じ （Remote Procedure Call） ● Senchaのデータモデルと組み合わせると便利
- 8. Ext.Direct ● サーバとのAjax通信を隠蔽してくれる →JavaScriptからサーバ側のメソッドを呼び出す感じ （Remote Procedure Call） ● Senchaのデータモデルと組み合わせると便利 デモではこちらをメインに紹介
- 9. ２．しくみについて
- 10. Ext.Direct 通常のAjax クライアントJavaScript サーバアプリ ① Ajaxリクエスト＆レスポンス ②レンダリング （Ext JSコンポーネント）
- 11. Ext.Direct Direct（下ごしらえ） クライアントJavaScript サーバアプリ ① 呼び出せるAPIを問い合わせ ② API一覧を登録 Ext.direct ルーター サンプル、Directパックなどに含まれる ● APIの一覧を準備する ● 約束ごとにしたがってAPIを呼び出す
- 12. Ext.Direct Direct（下ごしらえ） クライアントJavaScript サーバアプリ ① 呼び出せるAPIを問い合わせ Ext.ns('Ext.app'); Ext.app.REMOTING_API = {"url":"router.php","type":" remoting","actions":{"EchoClass":[{"name":"echo"," len":1}}}; ② API一覧を登録 Ext.direct ルーター Ext.direct.Manager.addProvider(Ext.app.REMOTING_API); サンプル、Directパックなどに含まれる ● APIの一覧を準備する ● 約束ごとにしたがってAPIを呼び出す
- 13. Ext.Direct Direct（実行） クライアントJavaScript サーバアプリ ① 登録したAPIをメソッド呼び出し 例）EchoClass.echo("hoge",fn); ② Ajaxリクエスト ③ リクエストパース メソッド呼び出し レスポンス作成 Ext.direct ルーター ④ レスポンスパース コールバック呼び出し サンプル、Directパックなどに含まれる ⑤ コールバックで結果を処理 ● APIの一覧を準備する 例）fn = function(res) { ● 約束ごとにしたがってAPIを呼び出す alert(res); };
- 14. Ext.Direct Direct（DirectStore） クライアントJavaScript サーバアプリ ① 登録したAPIをメソッド呼び出し 例）EchoClass.echo("hoge",fn); ② Ajaxリクエスト Ext.data.DirectStoreを利用すると データ更新(CRUD)操作に対して①⑤を自動で実行。 ③ リクエストパース ↓ メソッド呼び出し Grid,Treeなどのデータが自動同期される。 レスポンス作成 Ext.direct ルーター ④ レスポンスパース コールバック呼び出し サンプル、Directパックなどに含まれる ⑤ コールバックで結果を処理 ● APIの一覧を準備する 例）fn = function(res) { ● 約束ごとにしたがってAPIを呼び出す alert(res); };
- 15. ３．実装について
- 16. ルーター ルーターの実装について ● ExampleのDirect (php) ● Ext.Direct Pack (php,ruby,.Net,CF) http://dev.sencha.com/deploy/ext-direct-pack. zip ● Sencha Marketのconnectors https://market.sencha.com ● Ext.Server (node)
- 17. Ext.Server node.jsのライブラリ。 npm対応。 https://github.com/xenophy/ext-server サーバでもExt JSライクにものづくり。 Ext.Directではデータ構造がわかりやすくなるメ リットも。 JavaScript <-> JSON <-> JavaScript
- 18. ４．デモ
- 19. 準備 node.js,npmをインストール 例) % brew install node Ext.Serverをインストール % npm install ext-server サンプル https://github.com/MtBlue81/DirectSample- ExtServer
- 21. ご静聴ありがとうございました。