• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ext.Directについて
 

Ext.Directについて

on

  • 8,533 views

Ext JS勉強会 2010年1月 資料

Ext JS勉強会 2010年1月 資料

Statistics

Views

Total Views
8,533
Views on SlideShare
8,335
Embed Views
198

Actions

Likes
1
Downloads
30
Comments
0

4 Embeds 198

http://extjs.co.jp 147
http://www.slideshare.net 30
http://www.extjs.co.jp 20
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Ext.Directについて Ext.Directについて Presentation Transcript

    • 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 -->
      <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>
    • Ext.Direct Packの準備 – JSコード
      Ext.onReady(function(){
      alert('Ext.Direct入門');
      });
    • 基本的な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!');
    • 基本的な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' => 'ノード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;
      }
      }
      ?>
    • 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コードを抽出できない