Ext.Directについて

自己紹介小堤　一弘（こつつみ　かずひろ）株式会社ゼノフィhttp://www.xenophy.com/ Ext Japanhttp://extjs.co.jp/ code:xhttp://code.xenophy.com/ xFrameworkPXhttp://www.xframeworkpx.com/

本日のアジェンダ Ext.Directって何？ Ext.Direct Packの準備基本的なRPCの使い方 Ext.tree.TreePanelとの連携 Ext.grid.GridPanelとの連携 Ext.form.FormPanelとの連携 http://extdirect.xenophy.net/directsample.zip

Ext.Directって何？ RPC（Remote Procedure Call、リモートプロシージャコール）が行える便利な機能サーバー通信は、Ext.Ajaxを利用するか、Ext.data.Store経由での通信のみで、サーバー処理との連動は以外とコストがかかる。 Ext.Directを使うとサーバーサイドの関数をJavaScriptの関数のように呼び出すことができて、可読性もよい。 Ext.Directを使うためには、Ext.Direct Packを使うかサーバーサイドを自分で実装する必要がある。

Ext.Direct Packの準備 http://www.extjs.com/products/extjs/download.phpから【Ext.Direct Pack】をダウンロードする。利用したい言語のインタフェースを設置する。いつもどおり、とりあえずExt JSを使用するためのHTMLとExt.onReadyを記述したJSコードを準備する。 APIを定義するこれでだけで準備は完了！

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>  <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" />   <title>Ext.Direct</title>   <link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css" />  </head>   <body>  <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>   <script type="text/javascript" src="./sample1.js"></script>  </body>  </html>

Ext.Direct Packの準備 – JSコード Ext.onReady(function(){ alert('Ext.Direct入門'); });

基本的なRPCの使い方 APIを設定する上記のapi.phpで何が行われているか？ Ext.Directプロバイダ追加 classes/Echo.phpのsendをJSから呼び出す。  <script type="text/javascript" src="api.php"></script>  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!');

基本的なRPCの使い方コールバックを利用するサーバーサイド側のメソッド引数をプロバイダ追加時に定義しているため、同様の引数で呼び出すことができる。サーバーサイド側のメソッド引数以降は、コールバック関数を設定することができ、その次にスコープを設定できる。コールバックの引数は、サーバーサイドが返した値になる、PHPの場合配列で返却すると、JS側でも配列になる。 // sendメソッドコール Ext.ss.Echo.send('Ext.Direct Sample3!', function(ret) { alert(ret); }, this);

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' ) );

Ext.tree.TreePanelとの連携 Treeクラスを作る。 <?php class Class_Tree { /** * @remotable */ public function get($id){ $ret = array(); if ($id==='root') { $ret[] = array( 'id' => 'node1', 'text' => 'ノード１' ); $ret[] = array( 'id' => 'node2', 'text' => 'ノード２' ); } else { $ret[] = array( 'id' => 'leaf1', 'text' => 'リーフ１', 'leaf' => true ); $ret[] = array( 'id' => 'leaf2', 'text' => 'リーフ２', 'leaf' => true ); } return $ret; } } ?>

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() });

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_'),

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; } } ?>

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 } });

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; } } ?>

まとめサーバーサイドのやりとりが非常に便利になる。感覚的にサーバーサイドへJSコードでアクセスできる。だけど・・・サンプルに入っているExt.Directの書き方が若干違ったり（api.phpとか）するし、APIの生成（JSON）がおかしかったりする・・・。 Symphonyなどのフレームワーク用のExt.Direct用のクラスも配布されている。なんだかんだ、ちゃんと作る前にサーバーサイドのインタフェースの作りはちゃんと理解しておく必要がある。

手前味噌ですが・・ xFrameworkPXにはxFrameworkPX_Controller_ExtDirectクラスが存在する。モジュールを作成して、コントローラーに登録するだけでモジュール名でJS側からアクセスできる。サーバーサイドのやりとり（api.phpとかrouter.phpの部分）は、ちゃんとオリジナルで実装して動作確認済。 MVCのModel部分をExt側から透過的に利用できるため、開発が高速。なんていう宣伝。

時間があまったら JSコードの隠蔽化 Googleクロージャーツール http://closure-compiler.appspot.com/home Amateta SWF ENCRYPT http://www.amayeta.com/software/swfencrypt/ Motion Decompiler SWFのタイムラインにJSコードを埋め込んで、実行する。SWFが暗号化されているため、デコンパイルしてもJSコードを抽出できない

Ext.Directについて

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Viewers also liked

Viewers also liked (8)

Similar to Ext.Directについて

Similar to Ext.Directについて (20)

More from Yuki Naotori

More from Yuki Naotori (20)

Ext.Directについて