During the JSF life cycle, any object can create a message and add it to a queue of messages maintained by the faces context. At the end of the life cycle, in the Render Response phase, you can display those messages in a view.

Typically, messages are associated with a particular component and indicate failure to enter data for required fields or conversion or validation errors.

The tags used to display the messages are:

• <h:messages> displays all messages that were stored in the faces context during the course of the JSF life cycle
• <h:message> displays a single message for a particular component, which is designated with the mandatory for attribute of the h:message’s tag

The index.xhtml page in both examples demonstrates their use. The index.xhtml page also demonstrates a good pattern for laying out input widgets along with their labels and error messages using a <h:panelGrid> tag.

The styles.css page in the Styled Example is useful for styling widgets with labels and error messages. The only change to the JSF pages is the addition of a <h:outputStylesheet> tag in the <h:head> tag and a columnClasses attribute to the <panelGrid> tag.

In the example below

• h:panelGrid is used to organize the label, input widget, and error message for each input field.
• h:message is displays a message for each input field if no data is entered.

Note the use of the input text fields' required attribute — if the field is empty on submission an error will be generated.

      <h:panelGrid columns="3">

        <h:outputText value="Login Name:"/>
        <h:inputText id="loginName" required="true" label="Login Name"
                     value="#{panelGridData.loginName}" size="20"/>
        <h:message for="loginName"/>

        <h:outputText value="Password:"/>
        <h:inputSecret id="password" required="true" label="Password"
                       value="#{panelGridData.password}" size="20"/>
        <h:message for="password"/>

      </h:panelGrid>

JSF pages can be layed out using HTML tables, but it is tedious. JSF provides the <h:panelGrid> tag to alleviate some of the tedium. The <h:panelGroup> tag serves to group items in a <h:panelGrid> so that they are treated as a single table entry.

You can lay out components in a grid of rows and columns by using the <h:panelGrid> tag with the columns attribute, like this:

     <h:panelGrid columns="3">
       ...
     </h:panelGrid>
      

Components are laid out in columns from left to right and top to bottom, in the order they appear in the body of the tag.

Within a <h:panelGrid> tag, <h:panelGroup> gives you control over what is treated as a table entry.