| If you display a list of names as we did in "A Simple Table" on page 162, 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> <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. The full code for the JSF page shown in Figure 5-3 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 163. You'll notice we've used the style attribute for output components to format column headers and footers. See Chapter 4 for more information about the style attribute in general and "Styles for Rows and Columns" on page 177 for more about CSS style classes and JSF tables. Listing 5-6. headersAndFooters/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. <title> 7. <f:loadBundle basename="com.corejsf.messages" var="msgs"/> 8. <h:outputText value="#{msgs.windowTitle}"/> 9. </title> 10. </head> 11. <body> 12. <h:form> 13. <h:dataTable value="#{tableData.names}" var="name"> 14. <h:column> 15. <f:facet name="header"> 16. <h:outputText value="#{msgs.lastnameColumn}" 17. style="font-weight: bold"/> 18. </f:facet> 19. <h:outputText value="#{name.last}"/> 20. <f:facet name="footer"> 21. <h:outputText value="#{msgs.alphanumeric}" 22. style="font-size: .75em"/> 23. </f:facet> 24. </h:column> 25. <h:column> 26. <f:facet name="header"> 27. <h:outputText value="#{msgs.firstnameColumn}" 28. style="font-weight: bold"/> 29. </f:facet> 30. <h:outputText value="#{name.first}"/> 31. <f:facet name="footer"> 32. <h:outputText value="#{msgs.alphanumeric}" 33. style="font-size: .75em"/> 34. </f:facet> 35. </h:column> 36. </h:dataTable> 37. </h:form> 38. </body> 39. </f:view> 40. </html>
Listing 5-7. headersAndFooters/WEB-INF/classes/com/corejsf/messages.properties 1. windowTitle=Editing Table Cells 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. |
| 