4 Replies Latest reply on Jul 19, 2008 12:02 PM by vladimir.kovalyuk

    Better Required Fields Example using Tables

    rstevens

      The Seam Chapter 31.1 example for s:decorate at
      http://docs.jboss.com/seam/2.0.1.GA/reference/en/html/controls.html is fine for fields aligned with CSS only.



      For a form with many required fields, all defined in rows and columns in a table, is there a better way to do this than to repeat s:decorate so many times?


      An example of a table row


      <tr>
           <s:decorate template="/tags/required.xhtml">
                <ui:define name="label">First Name:</ui:define>
                <h:inputText id="firstname" value="#{user.firstName}" styleId="firstname" required="true"/>
           </s:decorate>
      
           <s:decorate template="/tags/required.xhtml">
                <ui:define name="label">Last Name:</ui:define>
                <h:inputText id="lastname" value="#{user.lastName}" styleId="lastname" required="true"/>
           </s:decorate>
      </tr>




      The required.xhtml file:


      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                      xmlns:ui="http://java.sun.com/jsf/facelets"
                      xmlns:h="http://java.sun.com/jsf/html"
                      xmlns:f="http://java.sun.com/jsf/core"
                      xmlns:s="http://jboss.com/products/seam/taglib">              
           <td>
              <s:label styleClass="#{invalid?'error':''}">
                  <ui:insert name="label"/>
                  <s:span styleClass="required" rendered="#{required}">*</s:span>
              </s:label>
           </td>
           
           <td>  
              <span class="#{invalid?'error':''}">
                  <h:graphicImage value="/img/error.gif" rendered="#{invalid}"/>
                  <s:validateAll>
                      <ui:insert/>
                  </s:validateAll>
              </span>
              
              <s:message styleClass="error"/>
          </td>
      </ui:composition>



        • 1. Re: Better Required Fields Example using Tables
          pmuir

          No.

          • 2. Re: Better Required Fields Example using Tables
            rstevens

            Controlling the position of the label and control in CSS with colspan works


            <tr>
                 <td colspan="2">
                      <s:decorate template="/tags/required.xhtml">
                        <ui:define name="label">#{messages['register.firstName']}</ui:define>
                        <h:inputText id="firstname" value="#{user.firstName}" styleId="firstname" required="true" />
                    </s:decorate>
                </td>
                 <td colspan="2">
                      <s:decorate template="/tags/required.xhtml">
                        <ui:define name="label">#{messages['register.lastName']}</ui:define>
                        <h:inputText id="lastname" value="#{user.lastName}" styleId="lastname" required="true"/>
                    </s:decorate>
                </td>
            </tr>


            • 3. Re: Better Required Fields Example using Tables
              bartj07

              I created a custom component (composition) so I didn't have to use the decorate tag a thousand times.  Hightower's 'Facelets fits JSF like a glove' is invaluable.



              <ui:composition>
                   
                        <c:if test="${empty rendered}">
                            <c:set var="rendered" value="${true}" />
                        </c:if>
                        
                        <s:decorate rendered="${rendered}" template="../../../layout/edit.xhtml">
                             <ui:define name="label">${label}:</ui:define>
                             <h:inputText value="${value}" required="${required}" size="${length}"/>
                        </s:decorate>
              </ui:composition>



              Use it like this


              <xxx:inputField required="true" length="5" label="Field Label" value="#{action.field}"/>


              • 4. Re: Better Required Fields Example using Tables
                vladimir.kovalyuk

                Does the following work?


                <ui:composition>
                                <s:decorate rendered="${rendered or empty rendered}" template="../../../layout/edit.xhtml">
                                        <ui:define name="label">${label}:</ui:define>
                                        <h:inputText value="${value}" required="${required}" size="${length}"/>
                                </s:decorate>
                </ui:composition>
                




                I personally strive to avoid mixing EL expressions in facelets tags and JSF components because they are evaluated at differents stages.