PrimeFaces Layout and h:form

Question

The Primefaces Documentation states that the following code will be invalid due to the fact that every layoutUnit needs its own form:

        <p:layout fullPage="true">
        <h:form> 
            <p:layoutUnit position="north">
                <p:inputText value="#{testBean.input1}" />
            </p:layoutUnit>
            <p:layoutUnit position="center">
                <p:inputText value="#{testBean.input2}" />
                <p:commandButton value="save" action="#{testBean.save}" />
            </p:layoutUnit>
            <p:layoutUnit position="south">
                <p:inputText value="#{testBean.input3}" />
            </p:layoutUnit>
        </h:form> 
    </p:layout>

However, when I nest p:layout inside of a form, the code works without any problem:

    <h:form>
        <p:layout fullPage="true">
                <p:layoutUnit position="north">
                    <p:inputText value="#{testBean.input1}" />
                </p:layoutUnit>
                <p:layoutUnit position="center">
                    <p:inputText value="#{testBean.input2}" />
                    <p:commandButton value="save" action="#{testBean.save}" />
                </p:layoutUnit>
                <p:layoutUnit position="south">
                    <p:inputText value="#{testBean.input3}" />
                </p:layoutUnit>
        </p:layout>
    </h:form>

What is the explanation for that behaviour? Can my approach of having just a single form tag outside of p:layout cause problems at some time point?

Can you point to where your first paragraph is mentiond in PrimeFaces? — Kukeltje, Aug 02 '17 at 12:33
In the Primeface Documentation (https://www.primefaces.org/docs/guide/primefaces_user_guide_6_1.pdf, page 309). — FP93, Aug 02 '17 at 13:39
Oh I completely forgot that. Now, it is accepted! Thanks again for your help! You are awesome! — FP93, Sep 04 '17 at 08:26

Kukeltje · Accepted Answer · 2017-08-02T15:07:31.973

The PrimeFaces documentation does indeed state on Page 309 of the 6.1 documentation

When working with forms and full page layout, avoid using a form that contains layoutunits as generated dom may not be the same. So following is invalid.

And in that they reference your first example. It is technically not invalid but due to the way the layout component renders the html needed in the browser (and maybe client-side does dom manipulation) to get the good full page experience, it might (will? never tried it myself) result in unexpected behaviour.

They also state

A layout unit must have it’s own form instead, also avoid trying to update layout units because of same reason, update it’s content instead.

'Must have' (emphasis above is mine) is to strong here, they'd better have stated

give each layout unit its own form if a form is needed in the layout unit.

A full form around the full page layout might work now assuming the layout will not mess with things and e.g. add parts to the surrounding body tag (if it does do dom manipulation to achieve a certain behaviour), but I doubt they'd give you guarantees. An additional reason to not do it like you ask might be that you can run into nested forms when developers of 'partial pages' a not fully aware of the 'god form'. So I would advise against it.

So if e.g. the north and south layoutunit contain sort of fixed functionality (header with search, footer with some features) then put a h:form directly in the layout unit. If the center part contains dynamic things e.g. a ui:include, put the `h:form in the included parts.

PrimeFaces Layout and h:form

1 Answers1