Grid サンプル

Seasar2 ExtJS JSONIC

至る所でExtJS(エクストジェーエスって読むんだって。)の Grid サンプルは掲載されているからわざわざ書くまでも無いけど S2、JSONIC、ExtJS って組み合わせで書く事に意義があるので書いてみる。まずは「JSON-RPCでAjax」からセットアップ。

サーバーサイド

セットアップが完了したら最初にサーバーサイドのサービスクラスから作成してみる。

Entity.java
package sample.web.grid;

import java.util.Date;

public class Entity {

	public String company;

	public float price;

	public float change;

	public float pctChange;

	public Date lastChange;

}
EntityService.java
package sample.web.grid;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

public class EntityService {

	public List<Entity> getList() {
		Entity entity = null;
		List<Entity> list = new ArrayList<Entity>();
		for (int i = 0; i < 1000; i++) {
			entity = new Entity();
			entity.company = "ほげ Co. " + i;
			entity.price = i;
			entity.change = 0.42f;
			entity.pctChange = 1.47f;
			entity.lastChange = new Date();
			list.add(entity);
		}
		return list;
	}

	public List<Entity> find() {
		return getList();
	}

}

内容としてはいい加減だけど、サンプルなので内容の理解がし易い事をまず第一としてみた。find() に関しては後ほど解説。ごく簡単なオブジェクト配列を返すメソッドを持つクラス。こんな典型的な POJO を簡単にパパっと JSON に変換してしまう JSONIC は偉いね。

フロントエンド

次は HTML 。ExtJS の Grid について色々調べてみたところ JSONIC とは RPC-JSON ではなく REST でやり取りする方が都合が良いのがわかったので今回は REST でやってみる。

entity-grid.html
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>グリッド</title>

<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../ext/resources/css/xtheme-gray.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../ext/ext-all.js"></script>

<style type="text/css">
</style>

<script type="text/javascript">
<!--
//<![CDATA[

fields = [ 'company', 'price', 'change', 'pctChange', {name:'lastChange', type:'date', dateFormat:'u'} ];

store = new Ext.data.Store({
	proxy: new Ext.data.HttpProxy({
		url: 'entity.json', method: 'GET'
	}),
	reader: new Ext.data.JsonReader({
		fields: fields
	})
});

colModel = new Ext.grid.ColumnModel([
	{header: "Company", width: 160, sortable: true, dataIndex: 'company'},
	{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
	{header: "Change", width: 75, sortable: true, dataIndex: 'change'},
	{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'},
	{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);

// create the Grid
grid = new Ext.grid.GridPanel({
	title: 'Array Grid',
	stripeRows: true,
	height:400,
	width:600,
	store: store,
	colModel: colModel
});

Ext.onReady(function(){
	grid.render('grid-example');
	store.load();
});

//]]>
//-->
</script>

</head>

<body>

<div id="center">
<div id="grid-example"></div>
</div>


</body>

</html>

まず Ext.data.Store から。Ext.data.Store は MVC モデルのコントローラーとモデルになる部分でサーバーサイドから取得したデータを Grid の内容に変換保持するクラス。proxy 属性にデータを取得する手段を書く。proxy の名前から様々な取得方法があるんだなってわかる。今回は JSONIC の RESTモードを利用するので Ext.data.HttpProxy でサーバーサイドにアクセス。 url は サービスクラスアクセスの命名規約により"entity.json"となった。method はデフォルトでも GET だけど今回は理解する事が目的なのであえて記述。
ここで先ほど書いたサービスクラスの find() の解説。JSONIC の RESTモードでは、GET/POST/PUT/DELETEの四つのHTTP Methodに従い対象となったクラスの次の名前のメソッドが呼び出される。そして、実行後、戻り値がJSONに変換されクライアントに返される。

HTTP Method Java メソッド名 引数
GET find URLのQueryを「.」で区切られた階層構造とみなし引数の型に従い変換し設定
POST create メッセージボディのJSONを引数の型に従い変換し設定
PUT update メッセージボディのJSONを引数の型に従い変換し設定
DELETE delete メッセージボディのJSONを引数の型に従い変換し設定

reader 属性は取得したデータを Grid に読み込む方法を記述する。今回は JSON 形式のデータを読み込むので Ext.data.JsonReade を用いた。fields 属性は取得データのマッピングの為に用いる。今回注目すべきは 

{name:'lastChange', type:'date', dateFormat:'u'}

の部分。日付型の扱いである。JSON 形式で返ってくる日付の書式はミリセコンド秒で表現されている。その為、ミリセコンド秒の書式であると明記する必要があるので「dateFormat:'u'」と記述する。

次に Ext.grid.ColumnModel。これは Grid に表示するデータの列の表示方法に関しての設定を行っている。そして Ext.grid.GridPanel。Grid の生成を行う。この二つで MVC のビューにあたる記述となる。

最後に実際に Grid を描画するにはブロック要素を指定して grid.render で Grid の骨格を描画。 store.load() でデータを取得し Grid の内容として描画する仕組みとなっている。

以上が Grid の基本である。