Full Ajax な CRUD アプリケーション　その1

はじめに

2008年09月にGoogleからGoogle Chromeがリリースされました。より快適なAjaxアプリを実現していくのが目標のようです。Chromeを使用した方ならわかって頂けると思いますがAjax Webアプリケーションはまだまだ未成熟で可能性がある事を感じさせてくれます。今後ますますAjaxを多用したWebアプリケーションが重要となっていくでしょう。

この記事ではJavaで美しく実用的なAjaxアプリケーションを作る第一歩としてExtJS、SAStruts、JSONICを用いて簡単なCRUDアプリケーションの作成過程を記載していきたいと思います。

今回作成するアプリケーションは社員マスター管理アプリです。完成イメージを以下に示します。

本記事は以下の順序で進みます。

~~画面モックアップの作成~~
~~データベースの準備~~
~~サーバーサイドでの実装~~

一覧表示機能の実装
新規追加の実装
更新、削除機能の実装
検索機能の実装

対象読者

Seasar2、SAStruts、S2JDBC、ExtJS、JSONICに関して基本的な知識がある事を前提としています。特に重要なのはJavaScriptとJSONに関してです。基本知識を習得されていない方は以下のサイトを参考にして下さい。

開発環境

開発環境はSeasar2の開発環境に沿って準備します。Eclipseで使用するプラグインはそれぞれ最新のDolteng、SAStrutsPlugin、Tomcat Launcher、DbLauncherです。

Dolteng

http://s2container.seasar.org/2.4/ja/setup.html
http://dolteng.sandbox.seasar.org/

SAStrutsPlugin

http://sastruts.seasar.org/sastrutsplugin.html

Tomcat Launcher、DbLauncer

http://s2container.seasar.org/2.4/ja/setup.html
http://www.seasar.org/updates.html

プロジェクトのセットアップ

プロジェクトのセットアップですがJSONICを利用する為のサーブレットの登録、ExtJSのデプロイを説明していきます。

Doltengを用いたプロジェクトの作成を行います。プロジェクト名は「ajax-app」とします。rootパッケージ名は「webapplication」とします。

プロジェクトを作成したら次にJSONICのセットアップを行います。JSONICサイトからダウンロードしてきたアーカイブを展開しjsonic-x.x.x.jarをプロジェクトのajax-app/src/main/webapp/WEB-INF/libへコピーしビルドパスを通します。ビルドパスの設定が終わったら次はweb.xmlの編集を行います。詳細は「http://jsonic.sourceforge.jp/#webservice」を参照してください。以下に編集したweb.xmlの内容を示します。

<?xml version="1.0"?>

<!--
 * Copyright 2004-2006 the Seasar Foundation and the Others.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
 * either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
-->

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
version="2.4">

    <context-param>
        <param-name>sastruts.VIEW_PREFIX</param-name>
        <param-value>/WEB-INF/view</param-value>
    </context-param>

    <filter>
        <filter-name>encodingfilter</filter-name>
        <filter-class>org.seasar.extension.filter.EncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
    </filter>

    <filter>
        <filter-name>s2filter</filter-name>
        <filter-class>org.seasar.framework.container.filter.S2ContainerFilter</filter-class>
    </filter>

    <filter>
        <filter-name>hotdeployfilter</filter-name>
        <filter-class>org.seasar.framework.container.hotdeploy.HotdeployFilter</filter-class>
    </filter>

    <filter>
        <filter-name>routingfilter</filter-name>
        <filter-class>org.seasar.struts.filter.RoutingFilter</filter-class>
        <init-param>
            <param-name>jspDirectAccess</param-name>
            <param-value>false</param-value>
        </init-param>
    </filter>
        
    <filter>
        <filter-name>requestDumpFilter</filter-name>
        <filter-class>org.seasar.extension.filter.RequestDumpFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>encodingfilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <filter-mapping>
        <filter-name>s2filter</filter-name>
        <url-pattern>/*</url-pattern>
        <dispatcher>REQUEST</dispatcher>
        <dispatcher>FORWARD</dispatcher>
        <dispatcher>INCLUDE</dispatcher>
    </filter-mapping>

    <filter-mapping>
        <filter-name>hotdeployfilter</filter-name>
        <url-pattern>/*</url-pattern>
        <dispatcher>REQUEST</dispatcher>
        <dispatcher>FORWARD</dispatcher>
        <dispatcher>INCLUDE</dispatcher>
    </filter-mapping>
    
    <filter-mapping>
        <filter-name>routingfilter</filter-name>
        <url-pattern>/*</url-pattern>
        <dispatcher>REQUEST</dispatcher>
    </filter-mapping>
    
    <filter-mapping>
        <filter-name>requestDumpFilter</filter-name>
        <url-pattern>*.do</url-pattern>
        <dispatcher>REQUEST</dispatcher>
        <dispatcher>FORWARD</dispatcher>
        <dispatcher>INCLUDE</dispatcher>
    </filter-mapping>

    <servlet>
        <servlet-name>action</servlet-name>
        <servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
        <init-param>
            <param-name>config</param-name>
            <param-value>/WEB-INF/struts-config.xml</param-value>
        </init-param>
        <init-param>
            <param-name>configFactory</param-name>
            <param-value>org.seasar.struts.config.S2ModuleConfigFactory</param-value>
        </init-param>
        <init-param>
            <param-name>debug</param-name>
            <param-value>2</param-value>
        </init-param>
        <init-param>
            <param-name>detail</param-name>
            <param-value>2</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    
    <servlet>
        <servlet-name>s2container</servlet-name>
        <servlet-class>org.seasar.framework.container.servlet.S2ContainerServlet</servlet-class>
        <load-on-startup>2</load-on-startup>
    </servlet>
 
 	<servlet>
		<description>JSON-WebService</description>
		<servlet-name>json-ws</servlet-name>
		<servlet-class>net.arnx.jsonic.web.WebServiceServlet</servlet-class>
		<load-on-startup>3</load-on-startup>
		<init-param>
			<param-name>config</param-name>
			<param-value>
				container: 'net.arnx.jsonic.web.S2Container'
				debug: true
				mappings: {
					'/[package]/[class]/[id].[ext]': 'webapplication.service.${class}Service'
					'/[package]/[class].[ext]': 'webapplication.service.${class}Service'
				}
			</param-value>
		</init-param>
	</servlet>
 
    <servlet-mapping>
        <servlet-name>action</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>s2container</servlet-name>
        <url-pattern>/s2container</url-pattern>
    </servlet-mapping>
    
	<servlet-mapping>
		<servlet-name>json-ws</servlet-name>
		<url-pattern>*.json</url-pattern>
	</servlet-mapping>

	<!--
    <session-config>
        <session-timeout>1</session-timeout>
    </session-config>
	-->

	<!--
    <welcome-file-list>
    </welcome-file-list>
	-->
    
    <jsp-config>
    	<jsp-property-group>
    		<url-pattern>*.jsp</url-pattern>
    		<el-ignored>false</el-ignored>
    		<page-encoding>UTF-8</page-encoding>
    		<scripting-invalid>false</scripting-invalid>
    		<include-prelude>/WEB-INF/view/common/common.jsp</include-prelude>
    	</jsp-property-group>
    </jsp-config>
</web-app>

次にExtJSのファイル郡をデプロイします。ダウンロードしてきたExtJSのアーカイブを解凍し作成されたディレクトリからadapter/、resources/、ext-all.js、ext-core.jsをajax-app/src/main/webapp/ext/へ配置して下さい。extディレクトリは自分で作成します。

以上でセットアップは完了です。