TsutomuUchimaの日記

■[SAStruts][ExtJS][JSONIC] Full Ajax な CRUD アプリケーション　その3

前回は画面のモックアップを作成しました。今回は実際にデータベースから取得したデータを表示するよう実装していきます。

データベースのセットアップ

まず最初はデータベースのセットアップを行います。データベースにはデフォルトでEMPテーブルとDEPTテーブルの二つが存在しています。これは必要ないので削除して下さい。

このサンプルで利用する社員テーブルのDDL文を以下に示します。

テーブル名EMPLOYEEのDDL文

create table EMPLOYEE (
	ID integer generated by default as identity,
	NAME varchar(255),
	JOB_TYPE varchar(30),
	SALARY integer,
	DEPARTMENT varchar(255)
)

DbLauncherを利用してH2データベースを立ち上げて上記DDL文を実行してください。その後は以下のテストデータを挿入してください。

テストデータ

insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー01', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー02', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー03', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー04', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー05', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー06', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー07', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー08', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー09', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー10', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー11', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー12', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー13', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー14', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー15', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー16', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー17', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー18', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー19', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー20', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー21', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー22', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー23', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー24', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー25', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー26', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー27', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー28', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー29', '開発', 200000, '開発部');
insert into EMPLOYEE (NAME, JOB_TYPE, SALARY, DEPARTMENT) values ('テストユーザー30', '開発', 200000, '開発部');

S2JDBC-Genで各クラスの自動生成

ajax-app/s2jdbc-gen-build.xmlをAnt Buildで実行します。ビルドファイルを右クリックし「Run as」>「Ant Build...」を選択します。ターゲット一覧が表示されますのでその中から「gen-entity」のみを選択し実行します。実行が完了するとEmployee、EmployeeNames、EmployeeCondition、EmployeeService、AbstractService、EmployeeTestの五つ六つクラスが作成されます。

サーバーサイドのデータ一覧取得実装

EmployeeServiceにJSONデータを出力するメソッドfind()を作成します。ソースを以下に示します。

EmployeeService.java

package webapplication.service;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import webapplication.dto.PagerConditionDto;
import webapplication.entity.Employee;
import webapplication.entity.EmployeeNames;

/**
 * {@link Employee}のサービスクラスです。
 * 
 * @author tom
 */
public class EmployeeService extends AbstractService<Employee> implements EmployeeNames {

    /**
     * 識別子でエンティティを検索します。
     * 
     * @param id
     *            識別子
     * @return エンティティ
     */
    public Employee findById(Integer id) {
        return select().id(id).getSingleResult();
    }

    /**
     * JSONIC RESTモードで使用。エンティティ一覧を検索します。
     * 
     * @param conditionDto
     * 			ページング条件
     * @return	JSONの為のMapオブジェクト
     */
	public Map<String, Object> find(PagerConditionDto conditionDto) {
		long count = 
			jdbcManager
				.from(Employee.class)
					.getCount();
		List<Employee> list = 			
			jdbcManager
				.from(Employee.class)
					.orderBy(id)
					.offset(conditionDto.start)
					.limit(conditionDto.limit)
					.getResultList();
		Map<String, Object> m = new HashMap<String, Object>();
		m.put("totalProperty", count);
		m.put("root", list);
		return m;
	}

}

PagerConditionDto.java

package webapplication.dto;

public class PagerConditionDto {

	public int start;

	public int limit;

}

ブラウザからhttp://localhost:8080/ajax-app/employee/employee.jsonへアクセスしJSONデータが取得出来るのを確認して下さい。この機能はJSONICのサーブレットで実現しています。このサーブレットはSeasar2のコンポーネントを容易に扱う事が出来て、JSONへの変換も非常に簡単に出来る仕組みになっています。

グリッドのデータソースを実装

Ext.data.Storeを定義しサーバーサイドからデータを取得します。

storeのソース

	var fields = [ 'id', 'name', 'jobType', 'salary', 'department' ];

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

	store.load({params:{start:0, limit:pageSize}});

employee.js - storeを定義

Ext.onReady(function(){

	// MODEL, CONTROL

	var fields = [ 'id', 'name', 'jobType', 'salary', 'department' ];

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

	// VIEW

	var colModel = new Ext.grid.ColumnModel([
		{header: "Id", width: 75, sortable: true, dataIndex: 'id'},
		{id:'name', header: "氏名", width: 160, sortable: true, dataIndex: 'name'},
		{header: "職種", width: 75, sortable: true, dataIndex: 'jobType'},
		{header: "給与", width: 75, sortable: true, dataIndex: 'salary'},
		{header: "部署", width: 85, sortable: true, dataIndex: 'department'}
	]);

	var addAction = new Ext.Action({
		text: '追加',
		iconCls: 'addIcon'
	});

	var editAction = new Ext.Action({
		text: '編集',
		iconCls: 'editIcon'
	});

	var deleteAction = new Ext.Action({
		text: '削除',
		iconCls: 'deleteIcon'
	});

	var findAction = new Ext.Action({
		text: '検索',
		iconCls: 'findIcon'
	});

	var tbar = [
		addAction,
		'-',
		editAction,
		deleteAction,
		'-',
		findAction
	];

	var pageSize = 20;

	var bbar = new Ext.PagingToolbar({
		id: 'pagingToolbar',
		pageSize: pageSize,
		store: store,
		displayInfo: true,
		displayMsg: '社員の一覧 {2} 件中 {0} - {1} 件目',
		emptyMsg: "社員の一覧はありません"
	});

	var grid = new Ext.grid.GridPanel({
		title:'社員管理',
		stripeRows: true,
		autoExpandColumn: 'name',
		height:523,
		width:600,
		store: store,
		colModel: colModel,
		tbar: tbar,
		bbar: bbar
	});

	// INIT
	
	grid.render('grid-employee');

	store.load({params:{start:0, limit:pageSize}});

});

ブラウザからhttp://localhost:8080/ajax-app/employee/index.htmlを開くとデータが読み込まれて表示されているのが確認できます。

今回は以上です。サーバーサイドの作成が簡単に出来るのをわかって頂けると思います。

次回はデータの追加、編集、削除機能を実装します。