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