Styles

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.

Figure 5-7. Editing table cells


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.




Core JavaServerT Faces
Core JavaServer(TM) Faces (2nd Edition)
ISBN: 0131738860
EAN: 2147483647
Year: 2004
Pages: 84

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