Mais conteúdo relacionado
Semelhante a Ext.Directについて (20)
Mais de Yuki Naotori (20)
Ext.Directについて
- 3. 本日のアジェンダ Ext.Directって何? Ext.Direct Packの準備 基本的なRPCの使い方 Ext.tree.TreePanelとの連携 Ext.grid.GridPanelとの連携 Ext.form.FormPanelとの連携 http://extdirect.xenophy.net/directsample.zip
- 4. Ext.Directって何? RPC(Remote Procedure Call、リモートプロシージャコール)が行える便利な機能 サーバー通信は、Ext.Ajaxを利用するか、Ext.data.Store経由での通信のみで、サーバー処理との連動は以外とコストがかかる。 Ext.Directを使うとサーバーサイドの関数をJavaScriptの関数のように呼び出すことができて、可読性もよい。 Ext.Directを使うためには、Ext.Direct Packを使うかサーバーサイドを自分で実装する必要がある。
- 6. Ext.Direct Packの準備 - HTML <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <!-- head --> <head> <!-- content-type --> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <!-- /content-type --> <!-- Title --> <title>Ext.Direct</title> <!-- /Title --> <!-- Ext JS --> <link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css" /> <!-- /Ext JS --> </head> <!-- /head --> <!-- body --> <body> <!-- Ext JS --> <script type="text/javascript" src="./extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="./extjs/ext-all.js"></script> <script type="text/javascript" src="./extjs/src/locale/ext-lang-ja.js"></script> <!-- /Ext JS --> <!-- Application --> <script type="text/javascript" src="./sample1.js"></script> <!-- /Application --> </body> <!-- /body --> </html>
- 8. 基本的なRPCの使い方 APIを設定する 上記のapi.phpで何が行われているか? Ext.Directプロバイダ追加 classes/Echo.phpのsendをJSから呼び出す。 <!-- Ext Direct API --> <script type="text/javascript" src="api.php"></script> <!-- /Ext Direct API --> Ext.ns('Ext.ss'); Ext.ss.APIDesc = {"url":"router.php","type":"remoting","actions":{"Echo":[{"name":"send","len":1}],"Exception":[{"name":"makeError","len":0}],"Time":[{"name":"get","len":0}],"File":[{"name":"list","len":1,"serverMethod":"listFiles"},{"name":"add","len":2,"formHandler":true}]},"namespace":"Ext.ss"}; Ext.Direct.addProvider(Ext.ss.APIDesc); // sendメソッドコール Ext.ss.Echo.send('Ext.Direct Sample2!');
- 10. Ext.tree.TreePanelとの連携 ツリーローダーをExt.Directで通信させる。 サーバーサイド側で引数(node-id)に応じてツリー配列を返却すればOK! api.phpにTreeクラスを追加する loader: new Ext.tree.TreeLoader({ directFn: TreePanel.getTree }), $api->add( array( 'Tree' => array('prefix' => 'Class_'), 'Echo' => array('prefix' => 'Class_'), 'Exception' => array('prefix' => 'Class_'), 'Time', 'File' ) );
- 11. Ext.tree.TreePanelとの連携 Treeクラスを作る。 <?php class Class_Tree { /** * @remotable */ public function get($id){ $ret = array(); if ($id==='root') { $ret[] = array( 'id' => 'node1', 'text' => 'ノード1' ); $ret[] = array( 'id' => 'node2', 'text' => 'ノード2' ); } else { $ret[] = array( 'id' => 'leaf1', 'text' => 'リーフ1', 'leaf' => true ); $ret[] = array( 'id' => 'leaf2', 'text' => 'リーフ2', 'leaf' => true ); } return $ret; } } ?>
- 12. Ext.tree.TreePanelとの連携 Ext.tree.TreePanelを生成する。 var tree = new Ext.tree.TreePanel({ autoScroll: true, root: { id: 'root', text: 'Root' }, width: 300, height: 500, loader: new Ext.tree.TreeLoader({ directFn: Ext.ss.Tree.get }), renderTo: Ext.getBody() });
- 13. Ext.grid.GridPanelとの連携 Ext.data.DirectStoreを使ったグリッドを作成する。 api.phpに追加する var grid = new Ext.grid.GridPanel({ title: 'Ext.Direct for Ext.grid.GridPanel', store: new Ext.data.DirectStore({ autoLoad: true, paramsAsHash: false, directFn: Ext.ss.Grid.getAll, root: 'users', fields: [ { name: 'id', mapping: 'id' }, { name: 'name', mapping: 'name' }, { name: 'email', mapping: 'email' } ] }), columns : [ { header: '名前', width: 160, sortable: true, dataIndex: 'name' }, { header: 'メールアドレス', width: 300, sortable: true, dataIndex: 'email' }, ], autoScroll: true, height: 300, renderTo: Ext.getBody() }); 'Grid' => array('prefix' => 'Class_'),
- 14. Ext.grid.GridPanelとの連携 Grid.phpを作成する。 <?php class Class_Grid { /** * @remotable */ public function getAll(){ $ret = array(); $users = array(); $users[] = array( 'id' => '1', 'name' => '小堤 一弘', 'email' => 'kotsutsumi@xenophy.com' ); $users[] = array( 'id' => '2', 'name' => '斎藤 貴樹', 'email' => 'saito@xenophy.com' ); $users[] = array( 'id' => '3', 'name' => '安永 一博', 'email' => 'yasunaga@xenophy.com' ); $ret['total'] = count($users); $ret['users'] = $users; return $ret; } } ?>
- 15. Ext.form.FormPanelとの連携 apiを指定して、Ext.Directを利用する。 varbasicInfo = new Ext.form.FormPanel({ title: 'ユーザー情報', padding: 10, buttons:[{ text: 'Submit', handler: function(){ basicInfo.getForm().submit({ params: { foo: 'bar', uid: 34 } }); } }], defaults: {anchor: '-20'}, defaultType: 'textfield', items: [{ fieldLabel: 'Name', name: 'name' },{ fieldLabel: 'Email', msgTarget: 'side', name: 'email' },{ fieldLabel: 'Company', name: 'company' }], api: { load: Ext.ss.Form.getBasicInfo, submit: Ext.ss.Form2.updateBasicInfo }, paramOrder: ['uid', 'foo'], width: 500, height: 180, renderTo: Ext.getBody() }); basicInfo.getForm().load({ params: { foo: 'bar', uid: 34 } });
- 16. Ext.form.FormPanelとの連携 サーバーサイドのクラスを準備する。 <?php class Class_Form { /** * @remotable */ function getBasicInfo($userId, $foo){ return array( 'success'=>true, 'data'=>array( 'name'=>'Kazuhiro Kotsutsumi', 'company'=>'Xenophy', 'email'=>'kotsutsumi@xenophy.com' ) ); } } ?> <?php class Class_Form2 { /** * @remotable */ function updateBasicInfo($formPacket){ $response = array(); $response['errors'] = array( 'email'=>'kotsutsumi@xenophy.comを入力してください。' ); $response['success'] = false; return $response; } } ?>
- 19. 時間があまったら JSコードの隠蔽化 Googleクロージャーツール http://closure-compiler.appspot.com/home Amateta SWF ENCRYPT http://www.amayeta.com/software/swfencrypt/ Motion Decompiler SWFのタイムラインにJSコードを埋め込んで、実行する。SWFが暗号化されているため、デコンパイルしてもJSコードを抽出できない