エンタープライズアプリケーション II 第9回 / 2006年7月23日

Presentation on theme: "エンタープライズアプリケーション II 第9回 / 2006年7月23日"— Presentation transcript:

1 エンタープライズアプリケーション II 第9回 / 2006年7月23日
バリデータ エンタープライズアプリケーション II 第9回 / 2006年7月23日

2 ここでの内容 バリデータ サンプルプログラム バリデータの解説

3 バリデータ

4 バリデータとは何か 入力されたデータが、そのアプリケーションに適合するものかどうかチェックする機能。例えば・・・
ここは必須項目なので、必ず入力しなければならない。 ここには、1～10までの数が入る 適合しなかった場合は、エラーメッセージを表示できる。

5 JSF標準のバリデータ 必須項目のチェック 数の範囲のチェック 文字列の長さのチェック

6 Tomahawkのバリデータ e-mailアドレスのチェック クレジットカードの番号チェック 正規表現によるチェック
２つのコンポーネントの入力値が等しいかチェック

7 サンプルプログラム

8 データの入力

9 エラー

10 成功

11 h:panelGrid タグ (1) UIコンポーネントを表形式でレイアウトするためのコンポーネント
<h:panelGrid columns="3"> <f:facet name="header"> <h:outputText ... /> </f:facet> <h:inputText ... /> <h:message ... /> </h:panelGrid>

12 h:panelGrid タグ (2) f:facet タグは、表形式の直前に「ヘッダ」として表示される
<h:panelGrid columns="3"> <f:facet name="header"> <h:outputText ... /> </f:facet> <h:inputText ... /> <h:message ... /> </h:panelGrid>

13 h:panelGrid タグ (3) <h:panelGrid columns="3">
<f:facet name="header"> <h:outputText ... /> </f:facet> <h:inputText ... /> <h:message ... /> </h:panelGrid> Columns属性で指定された個数のUIコンポーネントを、１行で表示する その後に続く３つのUIコンポーネントが、次の行に

14 バリデータの解説

15 必須項目のチェック お名前を入力してください(必須): <h:inputText id="name" required="true"
value="#{ParameterBean.name}" /> データが入力されていないとエラーになる。

16 h:message 要素 (1) <h:inputText id="name" required="true"
value="#{ParameterBean.name}" /> <h:message for="name" style="error" /> エラーメッセージを表示するUIコンポーネント for 属性で指定した UIコンポーネントに関するエラーメッセージを表示する。 コンバータに適合しなかったらエラーメッセージを表示する。

17 h:message 要素 (2) <h:message for="name" style="error" />
エラーメッセージのスタイルに、style.css の ".error" というクラスセレクタの設定が適用される style.css より .error { font-style: italic; color: red; }

18 文字列の長さのチェック (1) パスワードを設定してください(5文字以上) <h:inputSecret id="password"
value="#{ParameterBean.password}"> <f:validateLength minimum="5" /> </h:inputSecret> <h:message for="password" styleClass="error" />

19 h:inputSecret パスワードを設定してください(5文字以上) <h:inputSecret id="password" value="#{ParameterBean.password}"> …… </h:inputSecret> パスワードなどを入力するときに、入力された文字をそのまま表示せずに、"・・・・・" のように伏せ字にして表示してくれるコンポーネント

20 文字列の長さのチェック (2) <f:validateLength minimum="5" />
文字列の長さをチェックするバリデータ 最小でも5文字は必要になる。 ほかに、maximum 属性もある。最大で何文字までかチェックする

21 文字列の長さのチェック (3) f:validateLength は、h:inputSecret の子要素になっている。
<h:inputSecret id="password" value="#{ParameterBean.password}"> <f:validateLength minimum="5" /> </h:inputSecret> f:validateLength は、h:inputSecret の子要素になっている。 つまり、この f:validateLength は、h:inputSecret に属している。

22 数の範囲のチェック (1) 品物の数を入力してください(1～10): <h:inputText id="quantity"
value="#{ParameterBean.quantity}"> <f:validateLongRange minimum="1" maximum="10" /> </h:inputText> <h:message for="quantity" />

23 数の範囲のチェック (2) <f:validateLongRange minimum="1" maximum="10"/>
整数の数の範囲をチェックする。 1 ～ 10 までの範囲となる。それ以外だとエラーになる。

24 Value Binding と Managed Bean
<h:inputText id="quantity" value="#{ParameterBean.quantity}"> …… </h:inputText> // quantity プロパティは Integer 型 public Integer getQuantity() { return quantity; }

25 コンバータとは何か h:inputText 要素のようなテキスト入力フィールドには、基本的には String 型のデータが入る。
コンバータとは、Value Binding を使うタグと Managed Beanのプロパティ間でデータ変換を行うもの。 h:inputText に入力されたデータを、Integer や Date 型に変換 Integer や Date 型のオブジェクトの値を、h:outputText などで出力

26 E-mailアドレスのチェック e-mailアドレスを入力してください: <h:inputText id="email"
　　value="#{ParameterBean. }"> <t:validate /> </h:inputText> アドレスの形式になっているかどうかチェックする。

27 ２つのコンポーネントの入力値が等しいかチェック
<h:inputText id=" " required="true" value="#{ParameterBean. }" /> <h:inputText id=" 2" required="true" value="#{ParameterBean.anotherEname}”> <t:validateEqual for=" " /> </h:inputText> name1で入力された値とname2で入力された値が等しいかチェックする

28 クレジットカードの番号チェック クレジットカードの番号をチェックする VISA, Master Card など (JCBはダメ)
クレジットカードの番号を入力してください: <h:inputText id="creditCardNumber" value="#{ParameterBean.creditCardNumber}"> <t:validateCreditCard /> </h:inputText> クレジットカードの番号をチェックする VISA, Master Card など (JCBはダメ)

29 正規表現によるチェック 入力データが pattern属性で指定した正規表現にマッチするかどうかチェックする。
郵便番号を入力してください(例: ): <h:inputText id="zipNumber" value="#{ParameterBean.zipNumber}"> <t:validateRegExpr pattern='¥d{3}-¥d{4}' /> </h:inputText> 入力データが pattern属性で指定した正規表現にマッチするかどうかチェックする。

30 ¥d{3}-¥d{4} という正規表現 まず、(0から9までの)数字が３つ並び その後で "-" (ハイフン) がきて
(0から9までの)数字が４つ並ぶ

31 カスタム・バリデータ バリデータは、自分で作成することもできる。