PrimeFaces 布局和 h:form

Question

Primefaces 文档声明以下代码无效，因为每个布局单元都需要自己的形式：

        <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>

但是，当我将 p:layout 嵌套在表单中时，代码可以正常工作：

    <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>

该行为的解释是什么？我在 p:layout 之外只有一个表单标签的方法是否会在某个时间点引起问题？

Answer 1

PrimeFaces 文档确实说明了 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.

他们引用了您的第一个示例。它在技术上不是无效的，但由于布局组件呈现浏览器所需的 html 的方式（并且可能客户端进行 dom 操作）以获得良好的整页体验，它可能（将? 我自己从未尝试过）会导致意外行为。

他们还说

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'（上面强调的是我的）在这里太强了，他们最好说明

如果布局单元中需要表单，请为每个布局单元提供自己的表单。

假设布局不会弄乱事物，例如将部分添加到周围的 body 标签（如果它确实进行 dom 操作以实现某种行为），但我怀疑他们会给你保证。不按照您的要求这样做的另一个原因可能是，当 'partial pages' 的开发人员不完全了解 'god form' 时，您可以运行进入嵌套形式。所以我建议不要这样做。

所以如果南北布局单元包含某种固定功能（带有搜索功能的页眉，带有某些功能的页脚），然后将 h:form 直接放在布局单元中。如果中心部分包含动态的东西，例如a ui:include，将`h:form 放在包含的部分中。

另请参阅：

How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
How to ajax-refresh dynamic include content by navigation menu? (JSF SPA)

PrimeFaces 布局和 h:form

PrimeFaces Layout and h:form

html

jsf

primefaces

jsf-2