基本的なUIを使って入力フォームを作成する
ではjQuery UIを利用した画面を出力して、さらにAJAX Validationの機能を盛り込んでみましょう。jQueryが利用可能になりましたので、AJAXの機能を使うことができます。Struts 2は初めからAJAXを利用したサーバ側でのValidationの機能を提供していますので、その情報を受け取る画面であるJSPでStruts 2 jQueryプラグインを利用することで、jQueryによるメッセージ表示や操作が行えます。
まずは画面から作成し、次にサーバ側であるActionクラス、と順を追って説明していきます。
入力画面を作成する
最初にJSPを作成します。
<%@ 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/ の画面は以下のようになります。
Query UIのカスタムテーマが適用された[送信する]ボタンが表示されています。