<h:selectOneRadio>呈现表格元素,如何避免这种情况? [英] <h:selectOneRadio> renders table element, how to avoid this?

查看:30
本文介绍了<h:selectOneRadio>呈现表格元素,如何避免这种情况?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有没有办法告诉 JSF 在使用 时它不应该渲染

元素?我不使用表格,在这种情况下完全没有意义.

Is there a way to tell JSF that it should NOT render a <table> element when using <h:selectOneRadio>? I don't use tables and it makes absolutely no sense in this case.

感谢任何帮助!

推荐答案

JSF 2.3 with group 属性

根据 JSF 规范问题 329 我添加了一个新的 属性到 这应该会使这一切变得不那么乏味.在父 UIForm 中具有相同 group 值的所有单选按钮组件将彼此分组.此外,如果选择项具有非空 label,它们将不会呈现除单选按钮本身和可选标签之外的任何标记.如果有,标签会直接出现在单选按钮之后.

JSF 2.3 with group attribute

As per JSF spec issue 329 I have added a new group attribute to <h:selectOneRadio> which should make this all much less tedious. All radio button components having the same group value within a parent UIForm will be grouped with each other. Also they won't render any markup besides the radio button itself and the optional label if the select item has a non-null label. If any, the label appears directly after the radio button.

<!-- Just markup them the way you want! -->
<ul>
    <ui:repeat id="items" value="#{bean.items}" var="item">
        <li>
            <h:selectOneRadio group="foo" value="#{bean.selectedItem}">
                <f:selectItem itemValue="#{item}" />
            </h:selectOneRadio>
        </li>
    </ui:repeat>
</ul>

以下场景也是可能的.当多个组件具有相同的 group,并且 value 属性和/或 UISelectItem 子元素不存在时,那么它将引用第一个组的组成部分.

Following scenarios are also possible. When there are multiple components with same group, and the value attribute and/or UISelectItem child is absent, then it will reference those of the first component of the group.

<h:selectOneRadio group="foo" value="#{bean.selectedItem}">
    <f:selectItems value="#{bean.availableItems}" />
</h:selectOneRadio>
<h:selectOneRadio group="foo" />
<h:selectOneRadio group="foo" />

<h:selectOneRadio group="foo" value="#{bean.selectedItem}">
    <f:selectItem itemValue="one" />
    <f:selectItem itemValue="two" />
    <f:selectItem itemValue="three" />
</h:selectOneRadio>
<h:selectOneRadio group="foo" />
<h:selectOneRadio group="foo" />

<h:selectOneRadio group="foo" value="#{bean.selectedItem}">
    <f:selectItem itemValue="one" />
</h:selectOneRadio>
<h:selectOneRadio group="foo">
    <f:selectItem itemValue="two" />
</h:selectOneRadio>
<h:selectOneRadio group="foo">
    <f:selectItem itemValue="three" />
</h:selectOneRadio>

<h:selectOneRadio group="foo" value="#{bean.selectedItem}">
    <f:selectItem itemValue="one" />
</h:selectOneRadio>
<h:selectOneRadio group="foo" value="#{otherBean.selectedItem}">
    <f:selectItem itemValue="two" />
</h:selectOneRadio>
<h:selectOneRadio group="foo" value="#{lastBean.selectedItem}">
    <f:selectItem itemValue="three" />
</h:selectOneRadio>

它将按照 2.3.0-m07 在 Mojarra 中提供.

It will be available in Mojarra as per 2.3.0-m07.

如果您已经使用 JSF 2.2,请使用其新的 直通元素/属性 功能,您可以通过该功能将 name 属性显式设置为直通属性.为了在模型中设置提交的值,你只需要额外的.

If you're on JSF 2.2 already, make use of its new passthrough elements/attribtues feature whereby you explicitly set the name attribute as a passthrough attribute. In order to set the submitted value in the model, you only need an additional <h:inputHidden>.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:a="http://xmlns.jcp.org/jsf/passthrough">

...

<!-- Just markup them the way you want! -->
<ul>
    <ui:repeat id="items" value="#{bean.items}" var="item">
        <li>
            <input type="radio" jsf:id="item" a:name="#{hiddenItem.clientId}"
                value="#{item}" a:checked="#{item eq bean.selectedItem ? 'checked' : null}" />
            <h:outputLabel for="item" value="#{item}" />
        </li>
    </ui:repeat>
</ul>

<!-- This one won't display anything. -->
<h:inputHidden id="selectedItem" binding="#{hiddenItem}" value="#{bean.selectedItem}"
    rendered="#{facesContext.currentPhaseId.ordinal ne 6}" />

可以在此博客中找到深入的技术解释:在 JSF 2.2 中使用 h:selectOneRadio 自定义布局.

In depth technical explanation can be found in this blog: Custom layout with h:selectOneRadio in JSF 2.2.

如果您碰巧使用了 PrimeFaces,那么您也可以使用 .

If you happen to use PrimeFaces, then you can also use <p:selectOneRadio layout="custom"> with <p:radioButton>.

<html ... xmlns:p="http://primefaces.org/ui">

<!-- This one won't display anything. -->
<p:selectOneRadio id="foo" value="#{bean.selectedFoo}" layout="custom">
    <f:selectItems value="#{bean.availableFoos}" />
</p:selectOneRadio>

<!-- Just markup them the way you want! -->
<ul>
    <li><p:radioButton for="foo" itemIndex="0" /></li>
    <li><p:radioButton for="foo" itemIndex="1" /></li>
    <li><p:radioButton for="foo" itemIndex="2" /></li>
</ul>

你也可以遍历可用的items,你只需要在查看构建时间:

You can also loop over the available items, you only need to do it during view build time:

<ul>
    <c:forEach items="#{bean.availableFoos}" varStatus="loop">
        <li><p:radioButton for="foo" itemIndex="#{loop.index}" /></li>
    </c:forEach>
</ul>

战斧(JSF 1.x 或 2.x)

如果您还没有使用 JSF 2.2 或者您不喜欢 PrimeFaces UI,请获取 战斧的 ; 呈现与 相同的纯 HTML 输出,但支持 layout="spread" 属性,以便您可以通过 你想要的方式.

Tomahawk (JSF 1.x or 2.x)

If you're not on JSF 2.2 yet or if you don't like PrimeFaces UI, grab Tomahawk's <t:selectOneRadio> which renders the same plain HTML output as <h:selectOneRadio>, but supports a layout="spread" attribute so that you can position the items by <t:radio> the way you want.

例如

<html ... xmlns:t="http://myfaces.apache.org/tomahawk">

<!-- This one won't display anything. -->
<t:selectOneRadio id="foo" value="#{bean.selectedFoo}" layout="spread">
    <f:selectItems value="#{bean.availableFoos}" />
</t:selectOneRadio>

<!-- Just markup them the way you want! -->
<ul>
    <li><t:radio for="foo" index="0" /></li>
    <li><t:radio for="foo" index="1" /></li>
    <li><t:radio for="foo" index="2" /></li>
</ul>

自定义渲染器

提供自定义Renderer.这只是一点工作.从下面显示的第一个另请参阅"链接开始:

Custom Renderer

Supply a custom Renderer. It's only a bit of work. Start at the first "See also" link shown below:

这篇关于&lt;h:selectOneRadio&gt;呈现表格元素,如何避免这种情况?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆