4 Replies Latest reply on Jul 19, 2008 12:02 PM by Vladimir Kovalyuk

    Better Required Fields Example using Tables

    Robert Stevens Newbie

      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>



        • 2. Re: Better Required Fields Example using Tables
          Robert Stevens Newbie

          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
            Jeremy Barth Newbie

            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 Apprentice

              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.