JavaServer Faces ユーザーズガイド
目次 前ページ次ページ

第3章 JavaServer Facesアプリケーションの開発

3.7 メッセージの表示

JavaServer Facesには、UIコンポーネントにメッセージを関連付けて画面に表示する機能があります。 主にバリデータでエラーを検出した場合にエラーメッセージを表示する目的で使用します。 例えば、入力が必須のテキストフィールドが空のままフォームが送信された場合に、そのテキストフィールドの直下に「この項目は省略できません」といったメッセージを表示させることができます。

■UIコンポーネントへの関連付け

・バリデータの処理で関連付ける場合
バリデータの処理でメッセージを関連付ける方法については、 カスタムバリデータを参照してください。
・バリデータ以外の処理で関連付ける場合
javax.faces.context.FacesContextクラスのaddMessageメソッドを使って、 メッセージをUIコンポーネントに関連付けます。 メッセージは、javax.faces.application.FacesMessageクラスで表します。 以下は、アクションメソッドの中でメッセージを関連付ける例です。
[addMessageメソッドによるメッセージの関連付け]
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;

  ...

  public String buyProduct() {
    ...
  
    // FacesContextを取得します。
    FacesContext context = FacesContext.getCurrentInstance();

    // メッセージを関連付けるUIコンポーネントを取得します。
    // ここでは、id="myForm"を指定したフォームの中の、
    // id="productCodeField"を指定したテキストフィールドを
    // 取得しています。
    UIComponent component = context.getViewRoot().findComponent("myForm:productCodeField");

    // UIコンポーネントのクライアントIDを取得します。
    String clientId = component.getClientId(context);

    // メッセージを作成します。
    FacesMessage message = new FacesMessage("存在しない商品コードです。内容を確認してください。");

    // メッセージをUIコンポーネントに関連付けます。
    context.addMessage(clientId, message);

    ...

  }

■UIコンポーネントに関連付けたメッセージの表示

メッセージを表示するには入出力ページでh:messageタグまたはh:messagesタグを使用します。 h:messageタグは、特定のUIコンポーネントのメッセージのみ表示します。 h:messagesタグは、全てのUIコンポーネントのメッセージを表示します。

以下は、h:messageタグの使用例です。 どのUIコンポーネントに関連付けられたメッセージを表示するのかを、forアトリビュートにコンポーネントIDで指定します。

[h:messageタグによるメッセージの表示]

<f:view>
  <h:form id="myForm">
    商品コード <h:inputText id="productCodeField" value="#{myBean.product}" /> <br>
    <!-- 「商品コード」テキストフィールドについてのメッセージを表示します。 -->
    <h:message for="productCodeField" /> <br>


    個数 <h:inputText id="countField" value="#{myBean.count}" /> <br>
    <!-- 「個数」テキストフィールドについてのメッセージを表示します。 -->
    <h:message for="countField" /> <br>
        
    ...
    <h:commandButton action="#{myBean.buyProduct}" value="購入"/>
  </h:form>
</f:view>

全てのメッセージをまとめて1ヶ所に表示する場合は、h:messagesタグを使用します。

[h:messagesタグによるメッセージの表示]

<f:view>
  <h:form id="myForm">
    <!-- すべてメッセージを表示します。 -->
    <h:messages /> 

    商品コード <h:inputText id="productCodeField" value="#{myBean.product}" /> <br>
    個数 <h:inputText id="countField" value="#{myBean.count}" /> <br>
    ...

    <h:commandButton action="#{myBean.buyProduct}" value="購入"/>
  </h:form>
</f:view>

目次 前ページ次ページ

All Rights Reserved, Copyright © 富士通株式会社 2005