3 Replies Latest reply on Jun 18, 2008 11:19 PM by Mark LoSacco

    Decorate Template for Multiple inputs on same 'line'

    Mark LoSacco Newbie

      I am using the seamgen generated edit.xhtml template throughout my application.


      It is great for producing forms that have a single prompt and input per 'line' as follows:


      Prompt1   (Input)

      Prompt2   (Input)

      Prompt3   (Input)


      But in some case I want multiple fields on same 'line' as follows:


      Prompt1   (Input)    Prompt2   (Input)   Prompt3   (Input)


      An example would be City, State and Zip code fields.


      I want the ability to individually require and validate each of the 3 fields independently.


      Can anyone suggest best way to handle this or point me to an example?


      Thanks,
      Mark

        • 1. Re: Decorate Template for Multiple inputs on same 'line'
          Damian Harvey Apprentice

          I've done this by creating a new "edit_inline.xhtml" template and specifying style="display:inline;" on the <s:decorate> (as it wraps your template in a div).


          Cheers,


          Damian.

          • 2. Re: Decorate Template for Multiple inputs on same 'line'
            Mark LoSacco Newbie

            Thanks Damian,


            Would you mind sharing your edit_inline.xhtml?
            I am curious how it differs from the stock edit.xhtml.


            Regards,


            Mark

            • 3. Re: Decorate Template for Multiple inputs on same 'line'
              Mark LoSacco Newbie

              Here is the snippet of xhtml where I am prompting for state, zip and country.  Note that the first field (State) is using the standard edit.xhtml template, while the next two fields use edit_inline.xhtml.


              
                          <s:decorate id="venueStateDecoration" 
              
                              template="../layout/edit.xhtml">
              
                              <ui:define name="label">#{messages['com.leagueunited.admin.venue.state']}</ui:define>
              
                              <h:inputText id="venueStateprov" 
              
                                         size="10"
              
                                    maxlength="10"
              
                                        value="#{venue.venueAddress.stateProv}">
              
                                  <a4j:support event="onblur" reRender="venueStateDecoration" bypassUpdates="true" ajaxSingle="true"/>
              
                              </h:inputText>
              
                          </s:decorate>
              
                          
              
                          <s:decorate id="venueZipDecoration" 
              
                              template="../layout/edit_inline.xhtml">
              
                              <ui:define name="label">#{messages['com.leagueunited.admin.venue.postcode']}</ui:define>
              
                              <h:inputText id="venuePostcode" 
              
                                          size="10"
              
                                    maxlength="10"
              
                                        value="#{venue.venueAddress.postCode}">
              
                                  <a4j:support event="onblur" reRender="venueZipDecoration" bypassUpdates="true" ajaxSingle="true"/>
              
                              </h:inputText>
              
                          </s:decorate>
              
              
                          <s:decorate id="venueCountryDecoration" 
              
                              template="../layout/edit_inline.xhtml">
              
                              <ui:define name="label">#{messages['com.leagueunited.admin.venue.country']}</ui:define>
              
                              <h:inputText id="venueCountry" 
              
                                         size="2"
              
                                    maxlength="2"
              
                                        value="#{venue.venueAddress.country}">
              
                                  <a4j:support event="onblur" reRender="venueCountryDecoration" bypassUpdates="true" ajaxSingle="true"/>
              
                              </h:inputText>
              
                          </s:decorate>
              
              



              Here is my definition of edit_inline.xhtml:


              <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">
              
              
                  <div style="display:inline;" class="prop">
              
              
                      <s:label styleClass="name_inline #{invalid?'errors':''}">
              
                          <ui:insert name="label"/>
              
                          <s:span styleClass="required" rendered="#{required}">*</s:span>
              
                      </s:label>
              
              
                      <span class="value #{invalid?'errors':''}">
              
                          <s:validateAll>
              
                              <ui:insert/>
              
                          </s:validateAll>
              
                      </span>
              
              
                      <span class="error">
              
                          <h:graphicImage value="/img/error.gif" rendered="#{invalid}" styleClass="errors"/>
              
                          <s:message styleClass="errors"/>
              
                      </span>
              
              
                  </div>
              
              
              </ui:composition>
              
              



              Here is my css definition for styleClass name_inline:


              
              .name_inline {
              
                      vertical-align: top;
              
                      font-weight: bold;
              
                      float: left;
              
                      padding-left:10px;
              
                      padding: 5px;
              
                      margin-top: 3px;
              
              }
              
              



              So far this is working well for me.  Thanks to Damian for pointing me in the right direction.


              -Mark