演習 1.2: スタイルと妥当性検査の設定

Web ページの他のコンポーネントと同様、JSF コンポーネントの外観も、スタイルによって制御することができます。この演習では、スタイルを変更して JSF コンポーネントの外観を変更する方法を学習します。また、入力フィールドに関する単純または複雑な妥当性検査基準を設定する方法についても学習します。

入力フィールドの背景色の設定

  1. JSFComponentTest.jsp ページで、入力フィールドをクリックして選択する。
  2. プロパティー・ビューを見つける。

    通常、プロパティー・ビューは、ワークベンチの下部にあります。プロパティー・ビューが見つからない場合は、「ウィンドウ」>「ビューの表示」>「プロパティー」をクリックしてください。

    プロパティー・ビューでは、JSF コンポーネントの外観および振る舞いの変更、および JSF コンポーネントの妥当性検査の方法を設定することができます。

  3. プロパティー・ビューで、「スタイル: プロパティー (Style: Props)」フィールドの横の「スタイルの追加」ボタン をクリックする。「スタイルの追加」ウィンドウが開きます。
  4. 「スタイルの追加」ウィンドウの左側で、「背景」をクリックする。
  5. ページの上部のドロップダウン・メニューで、「色 (Color)」の横に次のテキストを入力する。

    #EEEEEE

    これは、入力フィールドにライト・グレーの背景色が使用されることを表しています。一般的には、コントラストを付けると入力フィールドが見やすくなるので、入力フィールドには Web ページの背景色と異なる色を使用することをお勧めします。

    「スタイルの追加」ウィンドウは次のようになります。

    「スタイルの追加」ウィンドウ

  6. OK」をクリックする。
  7. プロパティー・ビューで、「幅 (Width)」フィールドに 44 と入力して、入力フィールドの幅を 44 文字に設定する。

    プロパティー・ビューは次のようになります。

    プロパティー・ビューの外観

入力フィールドの最小長の設定

JSF コンポーネントでは、最小長や最大長、または英字や数字の有無の妥当性検査を行うこともできます。以下のステップでは、入力フィールドに妥当性検査を設定して、最小長が 4 文字の必須値が入力されるようにします。

  1. プロパティー・ビューで、「h:inputText」の下のビューの左側にある「妥当性検査 (Validation)」タブをクリックする。
  2. 値を必須にする」チェック・ボックスを選択する。
  3. 最小長 (Minimum length)」ボックスに数値 4を入力する。
  4. エラー・メッセージ・コントロールに妥当性検査エラー・メッセージを表示する (Display validation error messages in an error message control)」チェック・ボックスを選択する。ページ上の入力フィールドの右側にエラー・メッセージ・フィールドが表示されるようになります。
  5. ページを保管する。
  6. プロジェクト・エクスプローラー・ビューで、JSFComponentTest.jsp ファイルを右クリックし、ポップアップ・メニューから「実行」>「サーバーで実行」をクリックする。Web ページがブラウザーで開きます。
  7. 入力フィールドをブランクのままにして、「実行」ボタンをクリックする。

    ページ上で、入力フィールドの右側に「検証エラー: 値を必須にする (Validation Error: Value is required)」というエラー・メッセージが表示されます。

  8. 入力フィールドに任意の文字を 2 つ入力して、「実行」ボタンをクリックする。

    ページ上で、入力フィールドの右側に「Validation Error: Value is less than allowable minimum of '4'」というエラー・メッセージが表示されます。

  9. 入力フィールドに 4 文字以上入力して、「実行」ボタンをもう一度クリックする。

    ページが正常に動作します。

書式マスクの定義

書式マスクを使用すると、有効な入力データのモデルを指定することによって、ユーザーが無効なデータを入力することを防ぐことができます。ブラウザーでページを表示したときに、書式マスクに一致するデータのみが入力フィールドで受け入れられます。

  1. エディターで開いている JSFComponentTest.jsp ファイルで、再び、入力フィールドをクリックして選択する。
  2. プロパティー・ビューで、「h:inputText」タブをクリックする。
  3. 書式 (Format)」リストで「マスク (Mask)」をクリックする。
  4. マスク (Mask)」フィールドに次のテキストを入力する。

    (###)###-####

    このマスクは、米国における電話番号のマスクです。# 記号はユーザーによって入力される数字を、その他の文字はユーザーが変更できない書式制御文字を表しています。

  5. 入力支援」の下で、「プロンプト文字の表示」を選択する。
  6. プロンプト文字」リストで「#」記号をクリックする。
  7. ページを保管する。
  8. ページをサーバーでテストする。あるいは、ページをブラウザーで開いている場合には、「最新表示 (Refresh)」ボタン をクリックして、ページを最新表示にします。

    これで、入力フィールド内をクリックしたときに電話番号の入力方法を案内するマスクが表示されるようになります。文字 ()、および - を変更することはできませんが、# 記号の位置には新たに数字を入力することができます。また、この入力フィールドに入力できるのは数字のみであり、文字は入力できないことに注意してください。

プロパティー・ビューには、他にも多数のスタイルおよび妥当性検査オプションがあります。

これで、「演習 1.3: JSF コントロールへの EGL データ・タイプのマップ」を開始する準備ができました。

ご利用条件 | フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.