JSF Components

Headers, Footers, and Captions

If you display a list of names as we did in "A Simple Table" on page 173, you need to distinguish last names from first names. You can do that with a column header, as shown in Figure 5-3.

Figure 5-3. Specifying column headers and footers


Besides headers, the table columns in Figure 5-3 also contain footers that indicate the data type of their respective columns; in this case, both columns are [alpha], for alphanumeric.

Column headers and footers are specified with facets, as shown below:

  <h:dataTable>      ...      <h:column headerClass="columnHeader"                footerClass="columnFooter">         <f:facet name="header">            <%-- header components go here --%>         </f:facet>         <%-- column components go here --%>         <f:facet name="footer">            <%-- footer components go here --%>         </f:facet>      </h:column>      ...   </h:dataTable>

h:dataTable places the components specified for the header and footer facets in the HTML table's header and footer, respectively. Notice that we use the h:column headerClass and footerClass attributes to specify CSS styles for column headers and footers, respectively. Those attributes are new for JSF 1.2.

JSF 1.2 adds table captions to h:dataTable. You add a caption facet to your h:dataTable tag, like this:

  <h:dataTable ...>      <f:facet name="caption">         An array of names:      </f:facet>   </h:dataTable>

If you add this facet to the table shown in Figure 5-3, this is what you will see:

You can use captionStyle and captionClass to specify a style or CSS class, respectively, for the caption:

  <h:dataTable ... captionClass="caption">      <f:facet name="caption">         An array of names:      </f:facet>   </h:dataTable>

In the preceding code snippet, we used some plain text for the facet, but like any facet, you can specify a JSF component instead.

The full code for the JSF page shown in Figure 5-4 is given in Listing 5-6. The application's resource bundle is shown in Listing 5-7. The directory structure for the application is identical to the one shown in Figure 5-2 on page 173.

Figure 5-4. A table caption


You will notice we have used the style attribute for output components to format column headers and footers. See "HTML 4.0 Attributes" on page 101 of Chapter 4 for more information on the style attribute in general, and "Styles" on page 189 for more about CSS style classes and JSF tables.

Listing 5-6. headersAndFooters/web/index.jsp

  1. <html>   2.    <%@ taglib uri="http://java.sun.com/jsf/core"  prefix="f" %>   3.    <%@ taglib uri="http://java.sun.com/jsf/html"  prefix="h" %>   4.    <f:view>   5.       <head>   6.          <link href="styles.css" rel="stylesheet" type="text/css"/>   7.          <title>   8.             <h:outputText value="#{msgs.windowTitle}"/>   9.          </title>  10.       </head>  11.       <body>  12.          <h:form>  13.             <h:dataTable value="#{tableData.names}"  14.                var="name"  15.                captionStyle="font-size: 0.95em; font-style:italic"  16.                style="width: 250px;">  17.  18.                <f:facet name="caption">  19.                    <h:outputText value="An array of names:"/>  20.                </f:facet>  21.  22.                <h:column header  23.                   footer>  24.                   <f:facet name="header">  25.                      <h:outputText value="#{msgs.lastnameColumn}"/>  26.                   </f:facet>  27.  28.                   <h:outputText value="#{name.last}"/>  29.  30.                   <f:facet name="footer">  31.                      <h:outputText value="#{msgs.alphanumeric}"/>  32.                   </f:facet>  33.                </h:column>  34.  35.                <h:column header  36.                   footer>  37.                   <f:facet name="header">  38.                      <h:outputText value="#{msgs.firstnameColumn}"/>  39.                   </f:facet>  40.  41.                   <h:outputText value="#{name.first}"/>  42.  43.                   <f:facet name="footer">  44.                      <h:outputText value="#{msgs.alphanumeric}"/>  45.                   </f:facet>  46.                </h:column>  47.             </h:dataTable>  48.          </h:form>  49.       </body>  50.    </f:view>  51. </html>     

Listing 5-7. headersAndFooters/src/java/corejsf/messages.properties

  1. windowTitle=Headers, Footers, and Captions   2. lastnameColumn=Last Name   3. firstnameColumn=First Name   4. editColumn=Edit   5. alphanumeric=[alpha]

Tip

To place multiple components in a table header or footer, you must group them in an h:panelGroup tag or place them in a container component with h:panelGrid or h:dataTable. If you place multiple components in a facet, only the first component will be displayed.




Core JavaServerT Faces
Core JavaServer(TM) Faces (2nd Edition)
ISBN: 0131738860
EAN: 2147483647
Year: 2004
Pages: 84

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net