Editing Table Cells To edit table cells, you provide an input component for the cell you want to edit. The application shown in Figure 5-7 allows editing of all its cells. You click a checkbox to edit a row and then click the "Save Changes" button to save your changes. From top to bottom, Figure 5-7 shows a cell being edited. The table cells in Figure 5-7 use an input component when the cell is being edited and an output component when it is not. Here is how that is implemented: ... <h:dataTable value='#{tableData.names}' var='name'> <!-- checkbox column --> <h:column> <f:facet name='header'> <h:output_text 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-7 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 173. Listing 5-11. editing/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. <body> 11. <h:form> 12. <h:dataTable value="#{tableData.names}" var="name"> 13. <h:column> 14. <f:facet name="header"> 15. <h:outputText value="#{msgs.editColumn}" 16. style="font-weight: bold"/> 17. </f:facet> 18. <h:selectBooleanCheckbox value="#{name.editable}" 19. onclick="submit()"/> 20. </h:column> 21. <h:column> 22. <f:facet name="header"> 23. <h:outputText value="#{msgs.lastnameColumn}" 24. style="font-weight: bold"/> 25. </f:facet> 26. <h:inputText value="#{name.last}" rendered="#{name.editable}" 27. size="10"/> 28. <h:outputText value="#{name.last}" 29. rendered="#{not name.editable}"/> 30. </h:column> 31. <h:column> 32. <f:facet name="header"> 33. <h:outputText value="#{msgs.firstnameColumn}" 34. style="font-weight: bold"/> 35. </f:facet> 36. <h:inputText value="#{name.first}" 37. rendered="#{name.editable}" size="10"/> 38. <h:outputText value="#{name.first}" 39. rendered="#{not name.editable}"/> 40. </h:column> 41. </h:dataTable> 42. <h:commandButton value="#{msgs.saveChangesButtonText}"/> 43. </h:form> 44. </body> 45. </f:view> 46. </html>
| Listing 5-12. editing/src/java/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 186, 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. |
|