CodeZine(コードジン)

特集ページ一覧

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

続・Struts 2入門(8)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/10/19 14:00
目次

基本的な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 サンプル入力フォーム画面
図2 サンプル入力フォーム画面

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:続 Struts 2入門

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 東 浩二(アズマ コウジ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5