2007 年 3 月 24 日 23 時 53 分

HTML タグライブラリに書き換える


このアーカイブは同期化されません。 mixi の日記が更新されても、このアーカイブには反映されません。


Struts には html:message 以外にも色々とタグがある。

今日は、HTML タグライブラリを利用して、
JSP を全体的に書き換えてみよう。

HTML タグライブラリを使うメリットは、
HTML フォームと ActioForm を関連付け、
その値に連動して画面に表示することができることだ。

========== /WEB-INF/pages/login.jsp ==========
<?xml version="1.0" encoding="UTF-8" ?>

<%@ page contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8" %>
<%@ taglib prefix="html"
        uri="http://struts.apache.org/tags-html" %>
<%@ taglib prefix="bean"
        uri="http://struts.apache.org/tags-bean" %>

<!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html:html xhtml="true">

<head>
    <meta http-equiv="Content-type"
            content="text/html; charset=UTF-8" />
    <title>struts-test ログイン</title>
</head>

<body>
    <h1>ログイン</h1>
    <ul style="color: red">
        <html:messages id="msg">
            <li><bean:write name="msg" /></li>
        </html:messages>
    </ul>
    <html:form action="/login" style="line-height: 2">
        <div>
            ユーザ名:
            <html:text property="user" />
        </div>
        <div>
            パスワード:
            <html:password property="password"
                    redisplay="false" />
        </div>
        <div>
            <html:checkbox property="persistent" />
            次回から入力を省略
        </div>
        <div>
            <html:submit>ログイン</html:submit>
        </div>
    </html:form>
</body>

</html:html>
========== end of /WEB-INF/pages/login.jsp ==========

昨日の日記と比較すると、タグの対応が良く分かる。
変更点を順に見ていこう。

1. <html> => <html:html>

<html> は HTML のルート要素である。
この要素は言語や名前空間(XHTML の場合)等の属性を持つ。

HTML タグライブラリの html タグを使えば、
現在の画面の表示のために利用されている言語を、
それら属性に自動的に値を設定してくれるようになる。

また、xhtml 属性を true にしておけば、
xhtml の名前空間を既定として宣言する上に、
このページ内で利用する他の HTML ライブラリのタグが、
XHTML に準拠した形式で出力するようになる。

XHTML を使う場合はほぼ必須となるし、
HTML を使う場合でも使っておけば便利だ。

2. <form> => <html:form>

HTML ライブラリの form タグは、HTML フォームの内容と
ActionForm インスタンスを関連付ける役割を持つ。

フォーム内の各入力項目で HTML タグを利用する場合は、
必ず form 用にこのタグを使わなければならない。

通常の form タグと大きな違いはない。
action 属性の値を Web アプリケーションのパスで指定する、
フォームの送信方式が既定で POST になることくらいか。

action 属性で指定したパスは設定ファイルから検索され、
設定の <action> の name 属性に割り当てられたフォームが、
form タグが利用する ActionForm として関連付けられる。

これにより、ActionForm のインスタンスが、
このタグに関連付けられ、このタグの内部では、
フォームの値を ActionForm から取り出すことができる。

2. <input type="text"> => <html:text>
   <input type="password"> => <html:password>
   <input type="checkbox"> => <html:checkbox>
   <input type="submit"> => <html:submit>

入力項目である <input> や、<textarea>, <select> 等は、
HTML タグライブラリを使う場合、
より分かりやすい名前で扱うことができるようになる。

HTML タグライブラリを使う場合は、name 属性の代わりに、
property 属性を使って名前を指定することになる。
この名前を使って対応する ActionForm の getter が呼ばれ、
入力項目に自動的に値が設定される仕組みとなる。

submit は特殊で、フォームのプロパティというよりは、
「送信」というメソッドのような意味合いであるため、
property 属性を指定する必要はない。
ボタンの名前は、value 属性でも指定できるが、
要素の内部にテキストとして記入することもできる。

さて、上記のように書き換えたところで、
フォームの見た目は全く変わっていない。
ブラウザでソースを眺めてみると分かるが、
生成される HTML は、昨日のそれとほとんど同じだからだ。

では何がメリットになっているかというと、
フォーム値の自動レンダリングである。

ログインフォームに誤ったユーザ名やパスワードを入力し、
送信すると、当然ながら検証エラーが発生し、
元の入力画面の JSP に戻されているが、
その際に、入力フォームを良く見てみよう。

最初に入力したユーザ名やチェックボックスの状態が、
ページ遷移後も維持されている事が分かる。

但し、パスワード用のフィールドでは、
フィールドの値は常に空となっている。
これはパスワード入力用の一般的な流儀だ。
redisplay="false" という属性を指定しなければ、
パスワード項目でも値を維持することができる。

フォームの入力内容は、Struts によって、
ActionForm インスタンスに変換されて記憶される。
JSP に書いた HTML タグライブラリがこれを参照し、
適切に入力項目の値を(value 属性)生成しているのである。

この機能を利用すれば、JSP はレイアウトだけに専念でき、
フォームの値を JSP で管理する必要がなくなるのである。



Copyright (c) 1994-2007 Project Loafer. All rights reserved.