Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ext.Directについて

7,486 views

Published on

Ext JS勉強会 2010年1月 資料

Published in: Technology
  • Be the first to comment

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 />

×