基本的な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のカスタムテーマが適用された［送信する］ボタンが表示されています。
