0
Ext.Direct入門<br />
自己紹介<br />小堤 一弘(こつつみ かずひろ)<br />株式会社ゼノフィhttp://www.xenophy.com/<br />Ext Japanhttp://extjs.co.jp/<br />code:xhttp://code.x...
本日のアジェンダ<br />Ext.Directって何?<br />Ext.Direct Packの準備<br />基本的なRPCの使い方<br />Ext.tree.TreePanelとの連携<br />Ext.grid.GridPanelと...
Ext.Directって何?<br />RPC(Remote Procedure Call、リモートプロシージャコール)が行える便利な機能<br />サーバー通信は、Ext.Ajaxを利用するか、Ext.data.Store経由での通信のみで、...
Ext.Direct Packの準備<br />http://www.extjs.com/products/extjs/download.phpから【Ext.Direct Pack】をダウンロードする。<br />利用したい言語のインタフェース...
Ext.Direct Packの準備 - HTML<br />&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;<br />&lt;!DOCTYPE html PUB...
Ext.Direct Packの準備 – JSコード<br />Ext.onReady(function(){<br />    alert(&apos;Ext.Direct入門&apos;);<br />});<br />
基本的なRPCの使い方<br />APIを設定する<br />上記のapi.phpで何が行われているか?<br />Ext.Directプロバイダ追加<br />classes/Echo.phpのsendをJSから呼び出す。<br />&lt;...
基本的なRPCの使い方<br />コールバックを利用する<br />サーバーサイド側のメソッド引数をプロバイダ追加時に定義しているため、同様の引数で呼び出すことができる。<br />サーバーサイド側のメソッド引数以降は、コールバック関数を設定す...
Ext.tree.TreePanelとの連携<br />ツリーローダーをExt.Directで通信させる。<br />サーバーサイド側で引数(node-id)に応じてツリー配列を返却すればOK!<br />api.phpにTreeクラスを追加す...
Ext.tree.TreePanelとの連携<br />Treeクラスを作る。<br />&lt;?php<br />    class Class_Tree {<br />        /**<br />         * @remota...
Ext.tree.TreePanelとの連携<br />Ext.tree.TreePanelを生成する。<br />var tree = new Ext.tree.TreePanel({<br />autoScroll: true,<br />...
Ext.grid.GridPanelとの連携<br />Ext.data.DirectStoreを使ったグリッドを作成する。<br />api.phpに追加する<br />var grid = new Ext.grid.GridPanel({<...
Ext.grid.GridPanelとの連携<br />Grid.phpを作成する。<br />&lt;?php<br />    class Class_Grid {<br />        /**<br />         * @rem...
Ext.form.FormPanelとの連携<br />apiを指定して、Ext.Directを利用する。<br />varbasicInfo = new Ext.form.FormPanel({<br />    title: &apos;ユ...
Ext.form.FormPanelとの連携<br />サーバーサイドのクラスを準備する。<br />&lt;?php<br />    class Class_Form {<br />        /**<br />         * @...
まとめ<br />サーバーサイドのやりとりが非常に便利になる。<br />感覚的にサーバーサイドへJSコードでアクセスできる。<br />だけど・・・<br />サンプルに入っているExt.Directの書き方が若干違ったり(api.phpとか...
手前味噌ですが・・<br />xFrameworkPXにはxFrameworkPX_Controller_ExtDirectクラスが存在する。<br />モジュールを作成して、コントローラーに登録するだけでモジュール名でJS側からアクセスできる...
時間があまったら<br />JSコードの隠蔽化<br />Googleクロージャーツール<br />http://closure-compiler.appspot.com/home<br />Amateta SWF ENCRYPT<br />h...
Upcoming SlideShare
Loading in...5
×

Ext.Directについて

7,138

Published on

Ext JS勉強会 2010年1月 資料

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,138
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Ext.Directについて"

  1. 1. Ext.Direct入門<br />
  2. 2. 自己紹介<br />小堤 一弘(こつつみ かずひろ)<br />株式会社ゼノフィhttp://www.xenophy.com/<br />Ext Japanhttp://extjs.co.jp/<br />code:xhttp://code.xenophy.com/<br />xFrameworkPXhttp://www.xframeworkpx.com/<br />
  3. 3. 本日のアジェンダ<br />Ext.Directって何?<br />Ext.Direct Packの準備<br />基本的なRPCの使い方<br />Ext.tree.TreePanelとの連携<br />Ext.grid.GridPanelとの連携<br />Ext.form.FormPanelとの連携<br />http://extdirect.xenophy.net/directsample.zip<br />
  4. 4. Ext.Directって何?<br />RPC(Remote Procedure Call、リモートプロシージャコール)が行える便利な機能<br />サーバー通信は、Ext.Ajaxを利用するか、Ext.data.Store経由での通信のみで、サーバー処理との連動は以外とコストがかかる。<br />Ext.Directを使うとサーバーサイドの関数をJavaScriptの関数のように呼び出すことができて、可読性もよい。<br />Ext.Directを使うためには、Ext.Direct Packを使うかサーバーサイドを自分で実装する必要がある。<br />
  5. 5. Ext.Direct Packの準備<br />http://www.extjs.com/products/extjs/download.phpから【Ext.Direct Pack】をダウンロードする。<br />利用したい言語のインタフェースを設置する。<br />いつもどおり、とりあえずExt JSを使用するためのHTMLとExt.onReadyを記述したJSコードを準備する。<br />APIを定義する<br />これでだけで準備は完了!<br />
  6. 6. Ext.Direct Packの準備 - HTML<br />&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;<br />&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;<br />&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;ja&quot; xml:lang=&quot;ja&quot;&gt;<br />&lt;!-- head --&gt;<br />&lt;head&gt;<br /> &lt;!-- content-type --&gt;<br /> &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;<br /> &lt;meta http-equiv=&quot;content-script-Type&quot; content=&quot;text/javascript&quot; /&gt;<br /> &lt;meta http-equiv=&quot;content-style-type&quot; content=&quot;text/css&quot; /&gt;<br /> &lt;!-- /content-type --&gt;<br /> &lt;!-- Title --&gt;<br /> &lt;title&gt;Ext.Direct&lt;/title&gt;<br /> &lt;!-- /Title --&gt;<br /> &lt;!-- Ext JS --&gt;<br /> &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;./extjs/resources/css/ext-all.css&quot; /&gt;<br /> &lt;!-- /Ext JS --&gt;<br />&lt;/head&gt;<br />&lt;!-- /head --&gt;<br />&lt;!-- body --&gt;<br />&lt;body&gt;<br /> &lt;!-- Ext JS --&gt;<br /> &lt;script type=&quot;text/javascript&quot; src=&quot;./extjs/adapter/ext/ext-base.js&quot;&gt;&lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot; src=&quot;./extjs/ext-all.js&quot;&gt;&lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot; src=&quot;./extjs/src/locale/ext-lang-ja.js&quot;&gt;&lt;/script&gt;<br /> &lt;!-- /Ext JS --&gt;<br /> &lt;!-- Application --&gt;<br /> &lt;script type=&quot;text/javascript&quot; src=&quot;./sample1.js&quot;&gt;&lt;/script&gt;<br /> &lt;!-- /Application --&gt;<br />&lt;/body&gt;<br />&lt;!-- /body --&gt;<br />&lt;/html&gt;<br />
  7. 7. Ext.Direct Packの準備 – JSコード<br />Ext.onReady(function(){<br /> alert(&apos;Ext.Direct入門&apos;);<br />});<br />
  8. 8. 基本的なRPCの使い方<br />APIを設定する<br />上記のapi.phpで何が行われているか?<br />Ext.Directプロバイダ追加<br />classes/Echo.phpのsendをJSから呼び出す。<br />&lt;!-- Ext Direct API --&gt;<br />&lt;script type=&quot;text/javascript&quot; src=&quot;api.php&quot;&gt;&lt;/script&gt;<br />&lt;!-- /Ext Direct API --&gt;<br />Ext.ns(&apos;Ext.ss&apos;); Ext.ss.APIDesc = {&quot;url&quot;:&quot;router.php&quot;,&quot;type&quot;:&quot;remoting&quot;,&quot;actions&quot;:{&quot;Echo&quot;:[{&quot;name&quot;:&quot;send&quot;,&quot;len&quot;:1}],&quot;Exception&quot;:[{&quot;name&quot;:&quot;makeError&quot;,&quot;len&quot;:0}],&quot;Time&quot;:[{&quot;name&quot;:&quot;get&quot;,&quot;len&quot;:0}],&quot;File&quot;:[{&quot;name&quot;:&quot;list&quot;,&quot;len&quot;:1,&quot;serverMethod&quot;:&quot;listFiles&quot;},{&quot;name&quot;:&quot;add&quot;,&quot;len&quot;:2,&quot;formHandler&quot;:true}]},&quot;namespace&quot;:&quot;Ext.ss&quot;};<br />Ext.Direct.addProvider(Ext.ss.APIDesc);<br />// sendメソッドコール<br />Ext.ss.Echo.send(&apos;Ext.Direct Sample2!&apos;);<br />
  9. 9. 基本的なRPCの使い方<br />コールバックを利用する<br />サーバーサイド側のメソッド引数をプロバイダ追加時に定義しているため、同様の引数で呼び出すことができる。<br />サーバーサイド側のメソッド引数以降は、コールバック関数を設定することができ、その次にスコープを設定できる。<br />コールバックの引数は、サーバーサイドが返した値になる、PHPの場合配列で返却すると、JS側でも配列になる。<br />// sendメソッドコール<br />Ext.ss.Echo.send(&apos;Ext.Direct Sample3!&apos;, function(ret) {<br /> alert(ret);<br /> }, this);<br />
  10. 10. Ext.tree.TreePanelとの連携<br />ツリーローダーをExt.Directで通信させる。<br />サーバーサイド側で引数(node-id)に応じてツリー配列を返却すればOK!<br />api.phpにTreeクラスを追加する<br />loader: new Ext.tree.TreeLoader({<br />directFn: TreePanel.getTree<br />}),<br />$api-&gt;add(<br /> array(<br /> &apos;Tree&apos; =&gt; array(&apos;prefix&apos; =&gt; &apos;Class_&apos;),<br /> &apos;Echo&apos; =&gt; array(&apos;prefix&apos; =&gt; &apos;Class_&apos;),<br /> &apos;Exception&apos; =&gt; array(&apos;prefix&apos; =&gt; &apos;Class_&apos;),<br /> &apos;Time&apos;,<br /> &apos;File&apos;<br /> )<br />);<br />
  11. 11. Ext.tree.TreePanelとの連携<br />Treeクラスを作る。<br />&lt;?php<br /> class Class_Tree {<br /> /**<br /> * @remotable<br /> */<br /> public function get($id){<br /> $ret = array();<br /> if ($id===&apos;root&apos;) {<br /> $ret[] = array(<br /> &apos;id&apos; =&gt; &apos;node1&apos;,<br /> &apos;text&apos; =&gt; &apos;ノード1&apos;<br /> );<br /> $ret[] = array(<br /> &apos;id&apos; =&gt; &apos;node2&apos;,<br /> &apos;text&apos; =&gt; &apos;ノード2&apos;<br /> );<br /> } else {<br /> $ret[] = array(<br /> &apos;id&apos; =&gt; &apos;leaf1&apos;,<br /> &apos;text&apos; =&gt; &apos;リーフ1&apos;,<br /> &apos;leaf&apos; =&gt; true<br /> );<br /> $ret[] = array(<br /> &apos;id&apos; =&gt; &apos;leaf2&apos;,<br /> &apos;text&apos; =&gt; &apos;リーフ2&apos;,<br /> &apos;leaf&apos; =&gt; true<br /> );<br /> }<br /> return $ret;<br /> }<br /> }<br />?&gt;<br />
  12. 12. Ext.tree.TreePanelとの連携<br />Ext.tree.TreePanelを生成する。<br />var tree = new Ext.tree.TreePanel({<br />autoScroll: true,<br /> root: {<br /> id: &apos;root&apos;,<br /> text: &apos;Root&apos;<br /> },<br /> width: 300,<br /> height: 500,<br /> loader: new Ext.tree.TreeLoader({<br />directFn: Ext.ss.Tree.get<br /> }),<br />renderTo: Ext.getBody()<br />});<br />
  13. 13. Ext.grid.GridPanelとの連携<br />Ext.data.DirectStoreを使ったグリッドを作成する。<br />api.phpに追加する<br />var grid = new Ext.grid.GridPanel({<br /> title: &apos;Ext.Direct for Ext.grid.GridPanel&apos;,<br /> store: new Ext.data.DirectStore({<br />autoLoad: true,<br />paramsAsHash: false,<br />directFn: Ext.ss.Grid.getAll,<br /> root: &apos;users&apos;,<br /> fields: [<br /> { name: &apos;id&apos;, mapping: &apos;id&apos; },<br /> { name: &apos;name&apos;, mapping: &apos;name&apos; },<br /> { name: &apos;email&apos;, mapping: &apos;email&apos; }<br /> ]<br /> }),<br /> columns : [<br /> { header: &apos;名前&apos;, width: 160, sortable: true, dataIndex: &apos;name&apos; },<br /> { header: &apos;メールアドレス&apos;, width: 300, sortable: true, dataIndex: &apos;email&apos; },<br /> ],<br />autoScroll: true,<br /> height: 300,<br />renderTo: Ext.getBody()<br />});<br />&apos;Grid&apos; =&gt; array(&apos;prefix&apos; =&gt; &apos;Class_&apos;),<br />
  14. 14. Ext.grid.GridPanelとの連携<br />Grid.phpを作成する。<br />&lt;?php<br /> class Class_Grid {<br /> /**<br /> * @remotable<br /> */<br /> public function getAll(){<br /> $ret = array();<br /> $users = array();<br /> $users[] = array(<br /> &apos;id&apos; =&gt; &apos;1&apos;,<br /> &apos;name&apos; =&gt; &apos;小堤 一弘&apos;,<br /> &apos;email&apos; =&gt; &apos;kotsutsumi@xenophy.com&apos;<br /> );<br /> $users[] = array(<br /> &apos;id&apos; =&gt; &apos;2&apos;,<br /> &apos;name&apos; =&gt; &apos;斎藤 貴樹&apos;,<br /> &apos;email&apos; =&gt; &apos;saito@xenophy.com&apos;<br /> );<br /> $users[] = array(<br /> &apos;id&apos; =&gt; &apos;3&apos;,<br /> &apos;name&apos; =&gt; &apos;安永 一博&apos;,<br /> &apos;email&apos; =&gt; &apos;yasunaga@xenophy.com&apos;<br /> );<br /> $ret[&apos;total&apos;] = count($users);<br /> $ret[&apos;users&apos;] = $users;<br /> return $ret;<br /> }<br /> }<br />?&gt;<br />
  15. 15. Ext.form.FormPanelとの連携<br />apiを指定して、Ext.Directを利用する。<br />varbasicInfo = new Ext.form.FormPanel({<br /> title: &apos;ユーザー情報&apos;,<br /> padding: 10,<br /> buttons:[{<br /> text: &apos;Submit&apos;,<br /> handler: function(){<br />basicInfo.getForm().submit({<br />params: {<br />foo: &apos;bar&apos;,<br />uid: 34<br /> }<br /> });<br /> }<br /> }],<br /> defaults: {anchor: &apos;-20&apos;},<br />defaultType: &apos;textfield&apos;,<br /> items: [{<br />fieldLabel: &apos;Name&apos;,<br /> name: &apos;name&apos;<br /> },{<br />fieldLabel: &apos;Email&apos;,<br />msgTarget: &apos;side&apos;,<br /> name: &apos;email&apos;<br /> },{<br />fieldLabel: &apos;Company&apos;,<br /> name: &apos;company&apos;<br /> }],<br />api: {<br /> load: Ext.ss.Form.getBasicInfo,<br /> submit: Ext.ss.Form2.updateBasicInfo<br /> },<br />paramOrder: [&apos;uid&apos;, &apos;foo&apos;],<br /> width: 500,<br /> height: 180,<br />renderTo: Ext.getBody()<br />});<br />basicInfo.getForm().load({<br />params: {<br />foo: &apos;bar&apos;,<br />uid: 34 <br /> }<br />});<br />
  16. 16. Ext.form.FormPanelとの連携<br />サーバーサイドのクラスを準備する。<br />&lt;?php<br /> class Class_Form {<br /> /**<br /> * @remotable<br /> */<br /> function getBasicInfo($userId, $foo){<br /> return array(<br /> &apos;success&apos;=&gt;true,<br /> &apos;data&apos;=&gt;array(<br /> &apos;name&apos;=&gt;&apos;Kazuhiro Kotsutsumi&apos;,<br /> &apos;company&apos;=&gt;&apos;Xenophy&apos;,<br /> &apos;email&apos;=&gt;&apos;kotsutsumi@xenophy.com&apos;<br /> )<br /> );<br /> }<br /> }<br />?&gt;<br />&lt;?php<br /> class Class_Form2 {<br /> /**<br /> * @remotable<br /> */<br /> function updateBasicInfo($formPacket){<br /> $response = array();<br /> $response[&apos;errors&apos;] = array(<br /> &apos;email&apos;=&gt;&apos;kotsutsumi@xenophy.comを入力してください。&apos;<br /> );<br /> $response[&apos;success&apos;] = false;<br /> return $response;<br /> }<br /> }<br />?&gt;<br />
  17. 17. まとめ<br />サーバーサイドのやりとりが非常に便利になる。<br />感覚的にサーバーサイドへJSコードでアクセスできる。<br />だけど・・・<br />サンプルに入っているExt.Directの書き方が若干違ったり(api.phpとか)するし、APIの生成(JSON)がおかしかったりする・・・。<br />Symphonyなどのフレームワーク用のExt.Direct用のクラスも配布されている。<br />なんだかんだ、ちゃんと作る前にサーバーサイドのインタフェースの作りはちゃんと理解しておく必要がある。<br />
  18. 18. 手前味噌ですが・・<br />xFrameworkPXにはxFrameworkPX_Controller_ExtDirectクラスが存在する。<br />モジュールを作成して、コントローラーに登録するだけでモジュール名でJS側からアクセスできる。<br />サーバーサイドのやりとり(api.phpとかrouter.phpの部分)は、ちゃんとオリジナルで実装して動作確認済。<br />MVCのModel部分をExt側から透過的に利用できるため、開発が高速。<br />なんていう宣伝。<br />
  19. 19. 時間があまったら<br />JSコードの隠蔽化<br />Googleクロージャーツール<br />http://closure-compiler.appspot.com/home<br />Amateta SWF ENCRYPT<br />http://www.amayeta.com/software/swfencrypt/<br />Motion Decompiler<br />SWFのタイムラインにJSコードを埋め込んで、実行する。SWFが暗号化されているため、デコンパイルしてもJSコードを抽出できない<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×