カスタムタグを使用した入力チェック

JSF2.0

今回はJSFでの入力チェックのうち、
カスタムタグによる入力チェックについて書きます。

【前提条件】

[環境]

【内容】

今まで使ってた「index.xhtml」のユーザIDとパスワードに
必須チェックを行うようにします。
ソースは↓のようになります。

<?xml version="1.0" encoding="Windows-31J" ?>
<!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"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"> 
    <f:view>
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=Windows-31J" />
            <title>ログイン</title>
            <style>
            li.errorStyle {
                color : red;
            }
            </style>
        </h:head>
        <h:body>
            <h:form id="loginForm">
                <div id="userIdRow">
                    <span id="userIdLabel">ユーザID</span>
                    <span id="userIdInput">
                        <h:inputText id="userId" value="#{indexPage.userId}" label="ユーザID" >
                            <f:validateRequired/>
                        </h:inputText>
                        <h:message for="userId"/>
                    </span>
                </div>
                <div id="passwordRow">
                    <span id="passwordLabel">パスワード</span>
                    <span id="passwordInput">
                        <h:inputSecret id="password" value="#{indexPage.password}"  label="パスワード" >
                            <f:validateRequired/>
                        </h:inputSecret>
                    </span>
                    <h:message for="password" errorStyle="color : blue;"/>
                </div>
                <div>
                    <h:commandButton action="#{indexPage.login}" value="ログイン" />
                </div>
                <h:messages errorClass="errorStyle"/>
            </h:form>
        </h:body>
    </f:view>
</html>

タグを使用します。
タグはタグやタグの子要素として書きます。

タグ、タグでエラーメッセージを表示します。
タグは入力チェックエラーとなった全てのメッセージを表示します。

タグは対象の入力項目のチェックエラーのメッセージを表示します。
対象の項目はfor属性で指定します。

また、errorStyle属性には適用するCSSのスタイルを、errorClassには適用するCSSのクラスを指定します。
（info、warn、error、fatalと4つレベルがあり、それぞれスタイルとクラスが指定できます。）

変更したら、「index.xhtml」で何も入力せずにログインボタンをクリックしてみます。

タグで指定した箇所には対象項目のエラーメッセージのみが、
タグで指定した箇所には全てのエラーメッセージが表示されます。

特にエラーメッセージを設定したわけでもないのに
エラーメッセージが表示されました。
これはデフォルトでJSFがメッセージファイルを持っているからです。

Glassfishの場合、「javax.faces.jar」にそのファイルが入っています。
「javax.faces.Message.properties」がメッセージファイルのベースになります。
JVMのデフォルトのロケールが日本になっているので、
「javax.faces.Message_ja.properties」の内容が出力されています。

Eclipseのプロパティエディタで中身を見てみると
「javax.faces.component.UIInput.REQUIRED」というキーに対応する
メッセージが表示されていることがわかります。

javax.faces.component.UIInput.REQUIRED={0}: 検証エラー: 値が必要です。

メッセージパラメータの一つ目は対象の項目のlabel属性の値が出力されます。

基本的にはJSF2.0のデフォルトのメッセージを使うのではなく、
独自に定義したメッセージを使うと思います。

JSF2.0のカスタムタグによるチェックのメッセージを変更します。
最初に「faces-config.xml」に設定を追加します。

<?xml version="1.0" encoding="UTF-8"?>

<faces-config
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
    version="2.0">

    <application>
        <message-bundle>jp.glory.darts.ui.jsf.jsfMessage</message-bundle>
        <locale-config>
            <default-locale>ja</default-locale>
        </locale-config>
    </application>
</faces-config>

タグの子要素全てが追加した箇所です。

タグにサポートするロケールを指定します。
タグでデフォルトのロケールを、
タグでサポートするロケールを指定します。
今回は日本語のみなのでタグのみ指定します。

タグにクラスパス内のメッセージファイルを指定します。

次に独自のメッセージファイルを用意します。
今回は日本のロケールを対象としているので、
「jp.glory.darts.ui.jsf」パッケージの下に「jsfMessage_ja.properties」を用意します。

メッセージファイルの中身は↓のようになります。
（Eclipseのプロパティエディタで開いた状態）

javax.faces.component.UIInput.REQUIRED={0}を入力してください。

設定が終わったらGlassfishを再起動して、再度、
「index.xhtml」の入寮項目を未入力の状態でログインボタンをクリックしてみます。

メッセージが変更されました。

必須チェック以外のチェックに関してはカスタムタグの
Javadocのうち、「f:validate」で始まるものを参照してください。
http://docs.oracle.com/cd/E17802_01/j2ee/javaee/javaserverfaces/2.0/docs/pdldocs/facelets/index.html

それぞれの入力チェックごとにメッセージが異なります。
独自のメッセージに変更する場合は
デフォルトのメッセージから対応するキーを探します。
（何かドキュメントがあればよいのですが・・・）

今回はJSF2.0のカスタムタグによる入力チェックの方法を書きました。
次回はJavaでの入力チェックを行う方法について書きます。