Contenu connexe
Similaire à Ext.directことはじめ (20)
Ext.directことはじめ
- 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わかりにくい・・・そもそも動かないし(´・ω・｀)
- 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);
};
