A Simple Table Figure 5-1 shows a table of names. The directory structure for the application shown in Figure 5-1 is shown in Figure 5-2. The application's JSF page is given in Listing 5-1. In Listing 5-1, we use h:dataTable to iterate over an array of names. The last name followed by a comma is placed in the left column and the first name is placed in the right column. The array of names in this example is instantiated by a bean, which is managed by JSF. That bean is an instance of com.corejsf.TableData, which is shown in Listing 5-3. Listing 5-2 shows the Name class. The faces configuration file and message resource bundle are shown in Listing 5-4 and Listing 5-5, respectively. Listing 5-1. simple/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. <title> 7. <h:outputText value="#{msgs.windowTitle}"/> 8. </title> 9. </head> 10. 11. <body> 12. <h:outputText value="#{msgs.pageTitle}"/> 13. <p> 14. <h:form> 15. <h:dataTable value="#{tableData.names}" 16. var="name"> 17. <h:column> 18. <h:outputText value="#{name.last}, "/> 19. </h:column> 20. 21. <h:column> 22. <h:outputText value="#{name.first}"/> 23. </h:column> 24. </h:dataTable> 25. </h:form> 26. </body> 27. </f:view> 28. </html>
| Listing 5-2. simple/src/java/com/corejsf/Name.java 1. package com.corejsf; 2. 3. public class Name { 4. private String first; 5. private String last; 6. 7. public Name(String first, String last) { 8. this.first = first; 9. this.last = last; 10. } 11. 12. public void setFirst(String newValue) { first = newValue; } 13. public String getFirst() { return first; } 14. 15. public void setLast(String newValue) { last = newValue; } 16. public String getLast() { return last; } 17. }
| Listing 5-3. simple/src/java/com/corejsf/TableData.java 1. package com.corejsf; 2. 3. public class TableData { 4. private static final Name[] names = new Name[] { 5. new Name("William", "Dupont"), 6. new Name("Anna", "Keeney"), 7. new Name("Mariko", "Randor"), 8. new Name("John", "Wilson") 9. }; 10. 11. public Name[] getNames() { return names;} 12. }
| Listing 5-4. simple/web/WEB-INF/faces-config.xml 1. <?xml version="1.0"?> 2. <faces-config xmlns="http://java.sun.com/xml/ns/javaee" 3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 4. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 5. http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd" 6. version="1.2"> 7. <application> 8. <resource-bundle> 9. <base-name>com.corejsf.messages</base-name> 10. <var>msgs</var> 11. </resource-bundle> 12. </application> 13. 14. <managed-bean> 15. <managed-bean-name>tableData</managed-bean-name> 16. <managed-bean-class>com.corejsf.TableData</managed-bean-class> 17. <managed-bean-scope>session</managed-bean-scope> 18. </managed-bean> 19. </faces-config>
| Listing 5-5. simple/src/java/com/corejsf/messages.properties 1. windowTitle=A Simple Table 2. pageTitle=An array of names:
| The table in Figure 5-1 is intentionally vanilla. Throughout this chapter we will see how to add bells and whistles, such as CSS styles and column headers, to tables. But first we take a short tour of h:dataTable attributes. Caution | h:dataTable data is row oriented for example, the names in Listing 5-3 correspond to table rows, but the names say nothing about what is stored in each column it is up to the page author to specify column content. Row-oriented data might be different from what you are used to; Swing table models, for example, keep track of what is in each row and column. | h:dataTable Attributes h:dataTable attributes are listed in Table 5-1. Table 5-1. Attributes for h:dataTable Attribute | Description | bgcolor | Background color for the table | border | Width of the table's border | captionClass (JSF 1.2) | The CSS class for the table caption | captionStyle (JSF 1.2) | A CSS style for the table caption | cellpadding | Padding around table cells | cellspacing | Spacing between table cells | columnClasses | Comma-separated list of CSS classes for columns | dir | Text direction for text that does not inherit directionality; valid values: LTR (left to right) and RTL (right to left) | first | A zero-relative index of the first row shown in the table | footerClass | CSS class for the table footer | frame | Specification for sides of the frame surrounding the table; valid values: none, above, below, hsides, vsides, lhs, rhs, box, border | headerClass | CSS class for the table header | rowClasses | Comma-separated list of CSS classes for columns | rows | The number of rows displayed in the table, starting with the row specified with the first attribute; if you set this value to zero, all table rows will be displayed | rules | Specification for lines drawn between cells; valid values: groups, rows, columns, all | summary | Summary of the table's purpose and structure used for nonvisual feedback such as speech | var | The name of the variable created by the data table that represents the current item in the value | binding, id, rendered, styleClass, value | Basic | lang, style, title, width | HTML 4.0 | onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup | DHTML events | The binding and id attributes are discussed in "IDs and Bindings" on page 98 of Chapter 4, and rendered attributes are discussed in "An Overview of the JSF HTML Tags" on page 94 of Chapter 4. h:dataTable also comes with a full complement of DHTML event and HTML 4.0 pass-through attributes. You can read more about those attributes in Chapter 4. The first attribute specifies a zero-relative index of the first visible row in the table. The value attribute points to the data over which h:dataTable iterates. At the start of each iteration, h:dataTable creates a request-scoped variable that you name with h:dataTable's var attribute. Within the body of the h:dataTable tag, you can reference the current item with that name. h:column Attributes h:column attributes are listed in Table 5-2. Table 5-2. Attributes for h:column Attribute | Description | footerClass (JSF 1.2) | The CSS class for the column's footer | headerClass (JSF 1.2) | The CSS class for the column's header | binding, id, rendered, styleClass, value | Basic |
|