Ext.Directについて

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入門');
});

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

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

ツリーローダーを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'
)
);

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を生成する。
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.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,
});
'Grid' => array('prefix' => 'Class_'),

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

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,
});
basicInfo.getForm().load({
params: {
foo: 'bar',
uid: 34
}
});

サーバーサイドのクラスを準備する。
<?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コードを抽出できない

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

Ext.Directについて

by Yuki Naotori on Jan 28, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 193

Statistics

Ext.Directについて — Presentation Transcript