JSFページのエラー・メッセージの表示形式の変更

JSFページのエラー・メッセージの表示形式を変更する手順は、次のとおりです。

  1. ビジュアル・エディタで、対象のJSFページを開きます。
  2. CSSスタイルシートをページにリンクします。詳細は、「WebページへのCSSファイルのリンク」を参照してください。
  3. h:messageまたはh:messagesコンポーネントを選択します。
  4. プロパティ・インスペクタで、特定のタイプのメッセージに適用するCSSクラスを設定します。

    たとえば、重大度レベルが「ERROR」のメッセージで特定のスタイルシートを使用する場合は、CSSファイルに定義されているスタイル・クラスの名前をErrorClass属性に設定します。

    これを実行するには、プロパティ・インスペクタで、ErrorClassの横にある列をクリックします。次に、下矢印ボタン または 省略記号ボタン をクリックしてスタイル・クラスを選択します。

注意: 1つ以上のインライン・スタイルを使用するには、プロパティ・インスペクタでErrorStyleを開き、指定するスタイルの横(例: background-color)に値を入力するか、または選択します。

コード・サンプル

CSSファイル: mystyles.css

.error {
   font-style: italic;
   color:red;
}

.prompt {
   color:blue;
}    

JSFファイル

...
<f:view>
  <html>
    <head>
      <link media="screen" rel="stylesheet" href="css/mystyles.css"/>
    </head>
    <body>
      <form>
        <h:inputText id="someid" value="{somebean.someproperty}"/>
<h:message for="id" errorClass="error"/> <h:outputText value="{}" styleClass="prompt"/> ... </form> </body> </html> </fview> ...

Cascading Style Sheetの操作