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. 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. 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. |
|