如何使用在 JSF 页面中？单一形式？多种形式？嵌套表格？

发布于 2024-12-03 22:09:42 字数 1189 浏览 1 评论 0 原文

我正在使用 Facelet 模板技术在我正在开发的 JSF 2 应用程序中布局我的页面。

在我的 header.xhtml 中，primefaces 要求菜单栏包含在 h:form 中。

<h:form>
    <p:menubar autoSubmenuDisplay="true">
        Menu Items here!
    </p:menubar>
</h:form>

因此，在我的内容页面中，我将有另一个 h:form 或更多。

如果我将 h:form 放在 template.xhtml 中，它会起作用吗？

<h:body>
    <h:form>
        <div id="top">
            <ui:insert name="header"><ui:include src="sections/header.xhtml"/></ui:insert>
        </div>
        <div>
            <div id="left">
                <ui:insert name="sidebar"><ui:include src="sections/sidebar.xhtml"/></ui:insert>
            </div>
            <div id="content" class="left_content">
                <ui:insert name="content">Content</ui:insert>
            </div>
        </div>
        <div id="bottom">
            <ui:insert name="footer"><ui:include src="sections/footer.xhtml"/></ui:insert>
        </div>
    <h:form>
</h:body>

我实际上正在考虑一个用例，我需要在页面中使用多个 h:form 。

谢谢

原文

I am using the Facelet Templating Technology to layout my page in a JSF 2 app that I am working on.

In my header.xhtml, primefaces requires that menubar be enclosed in h:form.

<h:form>
    <p:menubar autoSubmenuDisplay="true">
        Menu Items here!
    </p:menubar>
</h:form>

So, in my contents pages, I will have another h:form or more.

Will it just work if I just place the h:form in my template.xhtml?

<h:body>
    <h:form>
        <div id="top">
            <ui:insert name="header"><ui:include src="sections/header.xhtml"/></ui:insert>
        </div>
        <div>
            <div id="left">
                <ui:insert name="sidebar"><ui:include src="sections/sidebar.xhtml"/></ui:insert>
            </div>
            <div id="content" class="left_content">
                <ui:insert name="content">Content</ui:insert>
            </div>
        </div>
        <div id="bottom">
            <ui:insert name="footer"><ui:include src="sections/footer.xhtml"/></ui:insert>
        </div>
    <h:form>
</h:body>

I am actually thinking of a use case where I need multiple h:form in a page.

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

贱贱哒 2024-12-10 22:09:42

您可以在 JSF 页面中安全地使用多个表单。这与使用纯 HTML 没有什么不同。

在无效 www.w3.org/TR/html401/interact/forms.html" rel="noreferrer">HTML。由于 JSF 只是生成一堆 HTML，因此在 JSF 中没有什么不同。因此，嵌套在 JSF 中也是无效的。

<h:form>
    ...
    <h:form> <!-- This is INVALID! -->
        ...
    </h:form>
    ...
</h:form>

浏览器提交嵌套表单的行为未指定。它可能会也可能不会按您期望的方式工作。例如，它可能只是刷新页面而不调用 bean 操作方法。即使您使用 dom 操作（或例如使用 PrimeFaces appendTo="@(body)"）将嵌套表单（或包含它的组件）移动到父表单之外，它仍然会获胜不起作用，并且在加载页面时应该没有嵌套表单。

至于您需要保留哪些表单，拥有一个“上帝” 实际上是一种糟糕的做法。因此，您最好从主模板中删除外部并让 header、sidebar、 content 等部分各自定义自己的。多个并行形式有效。

<h:form>
    ...
</h:form>
<h:form> <!-- This is valid. -->
    ...
</h:form>

每个表格必须有一个明确的职责。例如，登录表单、搜索表单、主表单、对话框表单等。当您提交某个表单时，您不希望不必要地处理所有其他表单/输入。

请注意，当您提交特定表单时，其他表单不会被处理。因此，如果您打算处理另一种形式的输入，那么您就会遇到设计问题。要么将其放在相同的表单中，要么加入一些丑陋的 JavaScript hack，将所需的信息复制到包含提交按钮的表单的隐藏字段中。

然而，在某种形式中，您可以使用 ajax 将输入的处理限制为较小的子集。例如将仅处理（提交/转换/验证/调用）当前组件，而不处理同一表单中的其他组件。这通常用于需要动态填充/渲染/切换同一表单中的其他输入的用例，例如依赖下拉菜单、自动完成列表、选择表等。

另请参阅：

You can safely use multiple forms in a JSF page. It's not different than when using plain HTML.

Nesting <form> elements is invalid in HTML. Since JSF just generates a bunch of HTML, it's not different in JSF. Nesting <h:form> is therefore also invalid in JSF.

<h:form>
    ...
    <h:form> <!-- This is INVALID! -->
        ...
    </h:form>
    ...
</h:form>

The browser behavior as to submitting a nested form is unspecified. It may or may not work the way you expect. It may for instance just refresh the page without invoking the bean action method. Even if you move the nested form (or a component that contains it) outside of the parent form with dom manipulation (or by e.g. using the PrimeFaces appendTo="@(body)"), it still won't work and there should be no nested forms at time of loading the page.

As to which forms you need to keep, having a single "god" <h:form> is actually a poor practice. So, you'd best remove the outer <h:form> from the master template and let the header, sidebar, content etc sections each define its own <h:form>. Multiple parallel forms is valid.

<h:form>
    ...
</h:form>
<h:form> <!-- This is valid. -->
    ...
</h:form>

Each form must have one clear responsibility. E.g. a login form, a search form, the main form, the dialog form, etc. You don't want to unnecessarily process all other forms/inputs, when you submit a certain form.

Note thus that when you submit a certain form, other forms are NOT processed. So, if you intend to process an input of another form anyway, then you've a design problem. Either put it in the same form or throw in some ugly JavaScript hacks to copy the needed information into a hidden field of the form containing the submit button.

Within a certain form, you can however use ajax to limit the processing of the inputs to a smaller subset. E.g. <f:ajax execute="@this"> will process (submit/convert/validate/invoke) only the current component and not others within the same form. This is usually to be used in use cases wherein other inputs within the same form need to be dynamically filled/rendered/toggled, e.g. dependent dropdown menus, autocomplete lists, selection tables, etc.