页面方法上的单个 JSF 表单与多个表单？

Question

将单个页面上的这几个隐藏表单合并为一个大表单是否有意义？

要提交属于特定表单的一组特定参数，process 属性可用于提交所有需要处理的元素。

与使用多个表单相比，这种单一表单方法的优缺点是什么？

   <span class="hiddenForms">
        <h:form>
            <h:inputHidden id="selctdChnlType_in" value="#{channelCntlr.type}"/>
            <h:inputHidden id="selctdChnlId_in" value="#{channelCntlr.channelId}"/>
            <p:remoteCommand name="updateChnlDataPanel" process="@form" actionListener="#{channelCntlr.init()}" update=":channelHeader, :channelDataPanel, :channelSideColumn"/>
        </h:form>

        <h:form>
            <h:inputHidden id="selctdLOBId_in" value="#{lobCntlr.targetLOBId}"/>
            <p:remoteCommand name="updateLOBPanel" process="selctdLOBId_in, @this" actionListener="#{lobCntlr.retrieveCurrentLOB()}" update=":lobFullContentPanel" />
        </h:form>

        <h:form id="lobAction_form" >
            <h:inputText id="targetLOBId_in" value="#{lobCntlr.targetLOBId}"/>
            <h:inputText id="targetResponseId_in" value="#{lobCntlr.targetResponseOrCommmentId}"/>
            <h:inputText id="targetAction_in" value="#{lobCntlr.targetAction}"/>
            <p:remoteCommand name="doLOBAction" process="targetLOBId_in, targetAction_in, targetResponseId_in,@this" actionListener="#{lobCntlr.doLOBAction()}"/>

            <h:inputText id="targetTopics" value="#{lobCntlr.list}" converter="listConverter"/>
            <p:remoteCommand name="suggestAsHotLOB" process="targetLOBId_in, targetTopics, @this" actionListener="#{lobCntlr.addForTryAsHotLOB()}"/>
        </h:form>

        <h:form id="comment_form" >
            <h:inputText id="targetLOBId_in" value="#{lobCntlr.targetLOBId}"/>
            <h:inputText id="targetCommentOrResponseId_in" value="#{lobCntlr.targetResponseOrCommmentId}"/>
            <h:inputText id="comment_in" value="#{lobCntlr.text_input}" required="true">
                <f:validateLength minimum="15" maximum="1000"/>
            </h:inputText>
            <h:inputText id="previousCommenters_in" value="#{lobCntlr.list}" converter="listConverter"/>

            <p:remoteCommand name="addComment" process="@form" actionListener="#{lobCntlr.addUserComment()}" oncomplete="addCommentToPage(args);" />
            <p:remoteCommand name="deleteComment" process="targetLOBId_in, targetCommentOrResponseId_in, @this" actionListener="#{lobCntlr.removeUserComment()}"  oncomplete="removeFromPage(args);" />
        </h:form>

        <h:form id="recosForm">
            <h:inputText id="startFromRecos_in" value="#{recmdnsCntlr.startFromIndex}"/>
            <p:remoteCommand name="fetchAllRecos" actionListener="#{recmdnsCntlr.retrieveAllRecmmndns()}" process="startFromRecos_in,howManyRecos_in,isLocalStorAvailble_in,@this" />
            <p:remoteCommand name="fetchFollowiesList" actionListener="#{recmdnsCntlr.fetchAllFollowiesList()}" process="@this" oncomplete="storeFollowiesList(args)"/>
        </h:form>

        <span id="editsForm" style="display:none">
            <form action="javascript:void(0);" class="edits_submitter" >
                <p:inputTextarea styleClass="editedText"/>
                <input type="submit" value="Save edits"/>
                <a class="cancel-edit" href="javascript:void(0)">Cancel</a>
            </form>
        </span>

    </span>

Answer 1

单一、单一的 JSF 表单控件的一个主要缺点是（不必要地）发送到服务器进行处理的数据量巨大。使用您现有的代码。考虑以下。如果<h:form id="lobAction_form" > 和<h:form id="comment_form" > 中的所有控件都在一个表单中，那么您将拥有

     <h:inputText id="targetLOBId_in" value="#{lobCntlr.targetLOBId}"/>
        <h:inputText id="targetResponseId_in" value="#{lobCntlr.targetResponseOrCommmentId}"/>
        <h:inputText id="targetAction_in" value="#{lobCntlr.targetAction}"/>
        <p:remoteCommand name="doLOBAction" process="targetLOBId_in, targetAction_in, targetResponseId_in,@this" actionListener="#{lobCntlr.doLOBAction()}"/>

        <h:inputText id="targetTopics" value="#{lobCntlr.list}" converter="listConverter"/>
        <p:remoteCommand name="suggestAsHotLOB" process="targetLOBId_in, targetTopics, @this" actionListener="#{lobCntlr.addForTryAsHotLOB()}"/>
        <h:inputText id="targetLOBId_in" value="#{lobCntlr.targetLOBId}"/>
        <h:inputText id="targetCommentOrResponseId_in" value="#{lobCntlr.targetResponseOrCommmentId}"/>
        <h:inputText id="comment_in" value="#{lobCntlr.text_input}" required="true">
            <f:validateLength minimum="15" maximum="1000"/>
        </h:inputText>
        <h:inputText id="previousCommenters_in" value="#{lobCntlr.list}" converter="listConverter"/>

        <p:remoteCommand name="addComment" process="@form" actionListener="#{lobCntlr.addUserComment()}" oncomplete="addCommentToPage(args);" />
        <p:remoteCommand name="deleteComment" process="targetLOBId_in, targetCommentOrResponseId_in, @this" actionListener="#{lobCntlr.removeUserComment()}"  oncomplete="removeFromPage(args);" />
    </h:form>

对于您在该表单中启动的每个命令操作，可能要处理 1 个输入文本组件，无论如何您总是将其中的所有 13 个组件发送到服务器。浪费且不必要。您将有大量的客户端-服务器通信用于小型操作，有时响应时间很慢。根据您使用的任何 JSF 框架，您可能能够在这种情况下发挥创造力，选择性地处理组件等等，但这只是不必要的和痛苦的。清晰的关注点分离也在表示层中发挥作用。

然后就是验证的问题。通常，您会在单个表单中选择标记为required 的组件，并且与该表单中的其余组件无关。您很可能无法在不影响该表单上的所有其他组件的情况下选择性地处理这些组件。

Answer 2

我看到你正在使用 primefaces。您可以考虑使用向导组件。有了这个组件，就有一个表单，在不同的选项卡中有更多的部分。当您从一个选项卡转到下一个选项卡时，验证是在 Ajax 模式下完成的。由于部分验证是使用 Ajax 完成的，因此只有您正在验证的选项卡的字段会被处理并发送到服务器。

将长表单拆分为更易读和用户友好的部分也很有用。