Struts 2にリッチUIを提供する「Struts2 jQueryプラグイン」

続・Struts 2入門（8）

基本的なUIを使って入力フォームを作成する

　ではjQuery UIを利用した画面を出力して、さらにAJAX Validationの機能を盛り込んでみましょう。jQueryが利用可能になりましたので、AJAXの機能を使うことができます。Struts 2は初めからAJAXを利用したサーバ側でのValidationの機能を提供していますので、その情報を受け取る画面であるJSPでStruts 2 jQueryプラグインを利用することで、jQueryによるメッセージ表示や操作が行えます。

　まずは画面から作成し、次にサーバ側であるActionクラス、と順を追って説明していきます。

入力画面を作成する

　最初にJSPを作成します。

リスト4　入力画面（抜粋）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<!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">
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<head>
<sj:head jqueryui="true" jquerytheme="custom" customBasepath="../template/themes" compressed="false" ajaxcache="false" locale="ja" />
<!-- Struts 2から提供されるJavaScript定義 -->
<script language="JavaScript" src="${pageContext.request.contextPath}/struts/utils.js" type="text/javascript"></script>
<script language="JavaScript" src="${pageContext.request.contextPath}/struts/xhtml/validation.js" type="text/javascript"></script>
…（中略）…
</head>
<body>
    <div id="result">以下の項目に入力して「送信する」ボタンを押してみましょう。
        <!-- Actionクラスでのエラーを表示する -->
        <ul id="formerrors" class="errorMessage"></ul>

        <s:form id="formValidate" theme="xhtml" cssClass="yform" onsubmit="return false;">
            <!-- 入力フォームと送信ボタン -->
            <div class="type-text">
                名前(name) :
                <s:textfield id="name" name="model.name" theme="simple" title="ユーザ名"/>
                <label for="echo"><span id="nameError"></span></label>
            </div>
            <div class="type-text">
                パスワード(password) :
                <s:password id="password" name="model.password" theme="simple" title=""/>
                <label for="echo"><span id="passwordError"></span></label>
            </div>
            …（中略）…
            <div class="type-button">
                <sj:submit targets="main" button="true"
                    validate="false"
                    value="送信する"
                    href="check"></sj:submit>
            </div>
        </s:form>
    </div>
</body>
</html>

　ヘッダ部分の内容は先ほど説明したものと同じになります。入力フォームとなる部分は<s:form>の内容です。Struts 2 jQueryプラグイン独自のタグは、<sj:submit>タグのみになります。これはsubmitの名前のとおり、送信処理を行うボタンやリンクを生成するタグです。button属性をtrueとしていますので、jQuery UIで選択したテーマのボタンになります。

　なお、それぞれの入力項目の下に<label for="echo">で囲われている箇所は、入力チェックエラーで出力されるメッセージの領域となります。これらについてはActionクラスの解説の後に説明します。

　実際のサンプルを動かした、http://127.0.0.1:8080/AjavValidationSample/ajax/ の画面は以下のようになります。

図2　サンプル入力フォーム画面

　Query UIのカスタムテーマが適用された［送信する］ボタンが表示されています。