Editing Table Cells

   

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

graphics/05fig06.jpg


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

graphics/note_icon.gif

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.




core JavaServer Faces
Core JavaServer Faces
ISBN: 0131463055
EAN: 2147483647
Year: 2003
Pages: 121

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net