Web ページの他のコンポーネントと同様、JSF コンポーネントの外観も、スタイルによって制御することができます。この演習では、スタイルを変更して JSF コンポーネントの外観を変更する方法を学習します。また、入力フィールドに関する単純または複雑な妥当性検査基準を設定する方法についても学習します。
通常、プロパティー・ビューは、ワークベンチの下部にあります。プロパティー・ビューが見つからない場合は、「ウィンドウ」>「ビューの表示」>「プロパティー」をクリックしてください。
プロパティー・ビューでは、JSF コンポーネントの外観および振る舞いの変更、および JSF コンポーネントの妥当性検査の方法を設定することができます。
#EEEEEE
これは、入力フィールドにライト・グレーの背景色が使用されることを表しています。一般的には、コントラストを付けると入力フィールドが見やすくなるので、入力フィールドには Web ページの背景色と異なる色を使用することをお勧めします。
「スタイルの追加」ウィンドウは次のようになります。
プロパティー・ビューは次のようになります。
JSF コンポーネントでは、最小長や最大長、または英字や数字の有無の妥当性検査を行うこともできます。以下のステップでは、入力フィールドに妥当性検査を設定して、最小長が 4 文字の必須値が入力されるようにします。
ページ上で、入力フィールドの右側に「検証エラー: 値を必須にする (Validation Error: Value is required)」というエラー・メッセージが表示されます。
ページ上で、入力フィールドの右側に「Validation Error: Value is less than allowable minimum of '4'」というエラー・メッセージが表示されます。
ページが正常に動作します。
書式マスクを使用すると、有効な入力データのモデルを指定することによって、ユーザーが無効なデータを入力することを防ぐことができます。ブラウザーでページを表示したときに、書式マスクに一致するデータのみが入力フィールドで受け入れられます。
(###)###-####
このマスクは、米国における電話番号のマスクです。# 記号はユーザーによって入力される数字を、その他の文字はユーザーが変更できない書式制御文字を表しています。
これで、入力フィールド内をクリックしたときに電話番号の入力方法を案内するマスクが表示されるようになります。文字 (、)、および - を変更することはできませんが、# 記号の位置には新たに数字を入力することができます。また、この入力フィールドに入力できるのは数字のみであり、文字は入力できないことに注意してください。
プロパティー・ビューには、他にも多数のスタイルおよび妥当性検査オプションがあります。
これで、「演習 1.3: JSF コントロールへの EGL データ・タイプのマップ」を開始する準備ができました。