Decorate Template for Multiple inputs on same 'line'

[grundor]

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

[damianharvey.damianharvey.gmail.com]

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.

[grundor]

Thanks Damian,

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

Regards,

Mark

[grundor]

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