第 8 章 Component Binding 61
9.3 バリデータの解説
9.3.1
必須項目のチェックでは、まず「必須項目のチェック」からです。
<h:outputText value="お名前を入力してください(必須)" />
<h:inputText id="name" required="true" value="#{ParameterBean.name}" />
<h:message for="name" styleClass="error" />
h:inputText
タグに次の属性があります。required="true"
この
required
属性がtrue
になっていると、このh:inputText
は必須項目となります。この
h:inputText
に入力されたデータがバリデータに適合しなかったとき（つまり、文字列が入力されていなかったとき）、エラーメッセージが表示されます。
9.3.2 h:message
タグこのエラーメッセージの表示は、次の部分で行われます。
<h:message for="name" styleClass="error" />
h:message
タグは、エラーメッセージを表示するUI
コンポーネントです。for
属性で指 定したUI
コンポーネントに関するエラーメッセージを表示します。ここでは、すぐ上にある
”name”
というid
を持つh:inputText
について、バリデータの 結果を表示するということです。styleClass
属性では、このJSP
で使っているスタイルシートの中から、エラーメッセージ表示用のクラス名を指定しています。
この
JSP
では、次の部分で指定されているように、style.css
というスタイルシートが使 われています。<link href="style.css" type="text/css" rel="stylesheet" />
style.css
には、次のような記述があります。この記述（「クラスセレクタ」といいます）では、フォントにイタリック体と赤色が指定されています。
.error {
font-style: italic;
color: red;
}
h:message
のstyleClass
属性が”error”
になっていると、エラーメッセージを表示すると きに、スタイルシート中の”.error”
というクラスセレクタの設定が適用されるのです。styleClass
属性は、このバリデータだけなく、HTML
出力に関係するようなUI
コンポー ネントすべてに利用できる属性です。9.3.3
文字列の長さのチェック次に、入力された文字列の長さをチェックするバリデータです。
<h:outputText value="パスワードを設定してください(5文字以上)" />
<h:inputSecret id="password" value="#{ParameterBean.password}">
<f:validateLength minimum="5" />
</h:inputSecret>
<h:message for="password" styleClass="error" />
ここでは、
h:inputSecret
というタグが登場しています。このタグは、パスワードなどを 入力するときに、入力された文字をそのまま表示せずに、”
・・・・・”
のように伏せ字にしてf:validateLength
というタグは、文字列の長さをチェックするバリデータです。ここで は、入力される文字列は、最小でも5
文字以上になることを指定しています。f:validateLength
タグは、”password”
というid
を持つh:inputText
タグの子要素になって います。つまり、このf:validateLength
タグは、”password”
というid
を持つh:inputSecret
に属しているということになります。f:validateLength
タグには、ほかにmaximum
属性もあります。最大で何文字までかチェッ クします。<f:validateLength maximum="10" />
9.3.4
数の範囲のチェック数の範囲をチェックするバリデータです。
<h:outputText value="品物の数を入力してください(1〜10)" />
<h:inputText id="quantity" value="#{ParameterBean.quantity}">
<f:validateLongRange minimum="1" maximum="10"/>
</h:inputText>
<h:message for="quantity" styleClass="error" />
f:validateLongRange
というタグは、整数の数の範囲をチェックするバリデータです。こ の例では、入力される数は1
〜10
までの範囲となります。それ以外だとエラーになるの です。<f:validateLongRange minimum="1" maximum="10"/>
9.3.5
コンバータなお、この
h:inputText
タグは、Managed Bean
のquantity
プロパティとValue Binding
しています。では、Managed Bean
のquantity
プロパティのgetter
とsetter
を見てみま しょう。public Integer getQuantity() { return quantity;
}
public void setQuantity(Integer q) { quantity = q;
}
通常のプロパティは
String
型ですが、ここではquantity
プロパティはInteger
型になっ ています。先に見たように、このプロパティに関連づけられている
h:inputText
には、f:validateLongRange
バリデータが設定されています。つまり、このh:inputText
には整数が入るということで すね。こうした場合、プロパティの型をInteger
にすることができます。このしくみのこ とを、「コンバータ」と言います。コンバータは、
h:inputText
タグやh:outputText
タグなどのValue Binding
が必要とな るタグと、Managed Bean
のプロパティ間でデータ変換を行います。例えば、テキスト入力 フィールドに入力された文字列をJava
のInteger
やDate
型に変換します。また、Integer
やDate
型のオブジェクトを、h:outputText
タグなどで画面上に出力します。9.3.6 e-mail
アドレスのチェックt:validateEmail
タグで、入力データがそして、この
h:inputText
には、required
属性があり、”true”
という値になっています。このことは、この
h:inputText
は必須項目であり、必ず何らかの文字列が入らなければな らないことを意味していました。<h:outputText value="e-mailアドレス(必須)" />
<h:inputText id="email" required="true" value="#{ParameterBean.email}">
<t:validateEmail />
</h:inputText>
<h:message for="email" styleClass="error" />
9.3.7
２つのコンポーネントの入力値が等しいかチェックt:validateEqual
では、２つのコンポーネントの入力値が等しいかどうかチェックします。Web
アプリケーションでは、パスワードやt:validateEqual
では、こうした処理を実現できる のです。ここでは、
”email”
というid
を持つh:inputText
の入力内容と、”email2”
というid
を持つ
h:inputText
の入力内容が同じかどうかチェックしています。<h:outputText value="e-mailアドレス(必須)" />
<h:inputText id="email" required="true" value="#{ParameterBean.email}">
...
</h:inputText>
...
<h:outputText value="もう一度e-mailアドレス" />
<h:inputText id="email2" required="true"
value="#{ParameterBean.anotherEmail}">
<t:validateEqual for="email" />
</h:inputText>
<h:message for="email2" styleClass="error" />
細かく見てみましょう。
t:validateEqual
タグは、”email2”
というid
を持つh:inputText
に属しています。<h:inputText id="email2" required="true"
value="#{ParameterBean.anotherEmail}">
<t:validateEqual for="email" />
</h:inputText>
そして、
t:validateEqual
のfor
属性の値は、”email”
となっています。これは、最初にh:inputText
のid
属性の値です。こうして、
”email2”
に入力された文字列が”email”
に入力された文字列と同じものであ るかどうかチェックできるようになります。9.3.8
クレジットカードの番号チェックt:validateCreditCard
は、入力された文字列がクレジットカードの番号として正しいか どうかチェックします。残念ながら、
JCB
のカードには対応していないようです。筆者はJCB
のカード（だけ）を所有しているのですが、筆者のカードの番号だとこのバリデータに引っかかってしまい ます。
MyFaces
では、Apache Software Foundation
のJakarta Project
で作成している「Jakarta Commons
」のライブラリを利用しています。このt:validateCreditCard
は、「Jakarta Com-mons
」のコンポーネントのひとつである「commons validator
」のクレジットカードのチェッ ク機構をベースにしていますが、この「commons validator
」でJCB
がサポートされてい ないのです。こうした理由のため、筆者はこのバリデータが正しく動作しているかどうか検証できて いません。
<h:outputText value="クレジットカードの番号" />
<h:inputText id="creditCardNumber"
value="#{ParameterBean.creditCardNumber}">
<t:validateCreditCard />
</h:inputText>
9.3.9
正規表現によるチェックt:validateRegExpr
では、入力データがpattern
属性で指定した正規表現にマッチするか どうかチェックします。この
’
\d
{3
}-
\d
{4
}’
という正規表現は、次のことを意味します。• まず、
(0
から9
までの)
数字が３つ並び• その後で
”-” (
ハイフン)
がきて•
(0
から9
までの)
数字が４つ並ぶつまり、郵便番号のパターンになるわけですね。
正規表現のおかげで、カスタムバリデータを作らなくても、かなりのことができるよう になるでしょう。
<h:outputText value="郵便番号 (例: 097-0013)" />
<h:inputText id="zipNumber" value="#{ParameterBean.zipNumber}">
<t:validateRegExpr pattern=’\d{3}-\d{4}’ />
</h:inputText>
9.3.10
カスタム・バリデータJSF
では、バリデータを自作することもできます。作成方法については、本講義では扱 いません。第 10 章 JSF のライフサイクル
10.1 UI コンポーネント・ツリー
10.1.1 UI
コンポーネント・ツリーとは「
JSF
のライフサイクル」というものについて解説する前に、まず「UI
コンポーネン ト・ツリー」というものについてお話ししましょう。JSF
では、JSF
独自のタグでJSP
の画面を構成します。JSF
のアプリケーションの内部 では、このタグの階層構造をJava
オブジェクトの階層構造に置き換えたものを管理して います。このJava
オブジェクトの階層構造のことを「コンポーネント・ツリー」と言い ます。JSF
では、この「コンポーネント・ツリー」を使って、さまざまな処理を行います。10.1.2 guessNumber
とUI
コンポーネント・ツリーこの連載の第１回
(2005
年1
月号)
では、JSF
のReference Implementation (RI)
に付属し ているguessNumber
サンプルアプリケーションについて解説しました。では、guessNumber
では、どのようなUI
コンポーネント・ツリーが構築されるのでしょうか？guessNumber
を起動すると、図10.1
のようなJSP
が表示されます。この
JSP
のうち、JSF
のタグの部分だけを抜き出すと、次のようになります。<f:view>
<h:form id="helloForm">
<h:outputText ... />
<h:outputText ... />
<h:graphicImage ... />
<h:inputText ... />
<h:commandButton ... />
<h:message ... />
</h:form>
</f:view>
f:view
がいちばん上の階層にあり、その下にh:form
があり、さらにその下にh:outputText,
h:graphicImage, h:inputText, h:commandButton, h:message
といったタグがあることが わかります。図
10.1: guessNumber
の最初のJSP
UICommandButton UIOuputText UIOuputText
UIInputText
UIMessage UIViewRoot
UIForm
図
10.2: guessNumber
のUI
コンポーネント・ツリーでは、
UI
コンポーネント・ツリーではどのようになるのでしょうか？図10.2
が、このJSP
に対応するUI
コンポーネント・ツリーです。UI
コンポーネント・ツリーの各コンポーネントとJSP
のタグが対応しています。その 対応関係を表10.1
で見てみましょう。この表と
UI
コンポーネント・ツリーの階層構造、そしてJSP
のタグの階層構造を見比 べると、UI
コンポーネント・ツリーとJSP
のタグの２つの階層構造が一致していること がわかりますね。10.1.3 UI
コンポーネント・ツリーの保存場所この
UI
コンポーネント・ツリーは、JSF
のアプリケーションの中で保存されている必 要があります。表
10.1: UI
コンポーネント・ツリーとJSP
のタグの対応 ツリー中のJava
オブジェクトJSP
のタグUIViewRoot f:view
UIForm h:form
UIOutputText h:outputText
UIInputText h:inputText
UICommandButton h:commandButton
UIMessage h:message
この保存場所は２通りあります。１つめはサーバ上です。この場合は、
HttpSession
に 保存されます。２つめはクライアント上です。この場合は、表示されるHTML
のhidden
タグに記述されます。デフォルトではサーバ上で保存されることになります。クライアント上で保存したいと
きには、
web.xml
で次のように設定します。<context-param>
<param-name>
javax.faces.STATE_SAVING_METHOD
</param-name>
<param-value>client</param-value>
</context-param>