To edit table cells, you merely provide an input component for the cell(s) you want to edit. The application shown in Figure 5-6 allows editing of all its cells. You click on a checkbox to edit a row and then click on the Save Changes button to save your changes. From top to bottom, Figure 5-6 shows a cell being edited. Figure 5-6. Editing Table Cells The table cells in Figure 5-6 use an input component when the cell is being edited and an output component when it's not. Here's how that's implemented:
<h:dataTable value="#{tableData.names}" var="name"> <%-- checkbox column --%> <h:column> <f:facet name="header"> <h:outputText value="#{msgs.editColumn}" style="font-weight: bold"/> </f:facet> <h:selectBooleanCheckbox value="#{name.editable}" onclick="submit()"/> </h:column> <%-- last name column --%> <h:column> ... <h:inputText value='#{name.last}' rendered='#{name.editable}' size='10'/> <h:outputText value='#{name.last}' rendered='#{not name.editable}'/> </h:column> ... </h:dataTable> <p> <h:commandButton value="#{msgs.saveChangesButtonText}"/> The preceding code fragment lists only the code for the checkbox and last name columns. The value of the checkbox corresponds to whether the current name is editable; if so, the checkbox is checked. Two components are specified for the last name column: an h:inputText and an h:outputText. If the name is editable, the input component is rendered. If the name is not editable, the output component is rendered. The full listing for the JSF page shown in Figure 5-6 is given in Listing 5-11. The messages resource bundle for the application is shown in Listing 5-12. The directory structure for the application is the same as the one shown in Figure 5-2 on page 163. Listing 5-11. edit/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.editColumn}" 17. style="font-weight: bold"/> 18. </f:facet> 19. <h:selectBooleanCheckbox value="#{name.editable}" 20. onclick="submit()"/> 21. </h:column> 22. <h:column> 23. <f:facet name="header"> 24. <h:outputText value="#{msgs.lastnameColumn}" 25. style="font-weight: bold"/> 26. </f:facet> 27. <h:inputText value="#{name.last}" rendered="#{name.editable}" 28. size="10"/> 29. <h:outputText value="#{name.last}" 30. rendered="#{not name.editable}"/> 31. </h:column> 32. <h:column> 33. <f:facet name="header"> 34. <h:outputText value="#{msgs.firstnameColumn}" 35. style="font-weight: bold"/> 36. </f:facet> 37. <h:inputText value="#{name.first}" 38. rendered="#{name.editable}" size="10"/> 39. <h:outputText value="#{name.first}" 40. rendered="#{not name.editable}"/> 41. </h:column> 42. </h:dataTable> 43. <p> 44. <h:commandButton value="#{msgs.saveChangesButtonText}"/> 45. </h:form> 46. </body> 47. </f:view> 48. </html> Listing 5-12. edit/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] 6. saveChangesButtonText=Save Changes NOTE | Table cell editing, as illustrated in "Editing Table Cells" on page 173 works for all valid types of table data: Java objects, arrays, lists, result sets, and results. However, for database tables, the result set associated with a table must be updatable for the JSF implementation to update the database. |
|