<h:selectOneRadio>渲染表元素,如何避免这种情况?



是否有一种方法告诉JSF在使用<h:selectOneRadio>时不应该呈现<table>元素?我不使用表格,在这种情况下它完全没有意义。

任何帮助都是感激的!

JSF 2.3与group属性

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

<!-- 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子属性不存在时,它将引用组中第一个组件的属性。

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

它将在Mojarra的2.3.0-m07版本中可用。

带有传递元素的JSF 2.2

如果您已经在使用JSF 2.2,可以利用它的新的直通元素/属性特性,通过该特性可以显式地将name属性设置为一个直通属性。为了在模型中设置提交的值,您只需要一个额外的<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自定义布局

PrimeFaces (JSF 2.x)

如果你碰巧使用PrimeFaces,那么你也可以使用<p:selectOneRadio layout="custom"><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>

您也可以遍历可用的项,您只需要在视图构建时这样做:

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

战斧(JSF)X或2.x)

如果您还没有使用JSF 2.2,或者如果您不喜欢PrimeFaces UI,请抓取Tomahawk的<t:selectOneRadio>,它呈现与<h:selectOneRadio>相同的纯HTML输出,但支持layout="spread"属性,以便您可以按照自己的方式通过<t:radio>来定位项目。

<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。这只是一点点工作。从下面所示的第一个"See also"链接开始:

参见:

    如何重写h:selectOneRadio渲染器?jsf-impl中的渲染器类在哪里?是否有可能使用JSF来构建干净的CSS布局而不使用表?
  • 渲染没有HTML表的selectManyCheckbox

我不知道这对你来说是否足够合理,但是,这里有一个示例解决方法。

xhtml代码:

<ui:repeat value="#{myBean.valueList}" var="radioValue">
    <input type="radio" name="radioSelection" value="#{radioValue}" checked="#{radioValue == myBean.selectedRadioValue ? 'checked' : ''}">#{radioValue}</input>
</ui:repeat>

支持bean:

    private String selectedRadioValue;
    private List<Integer> valueList;
    public MyBean() {
        valueList = new ArrayList<Integer>();
        for (int i = 0; i < 15; i++) {
            valueList.add(i);
        }
    }
    public String getSelectedRadioValue() {
        return selectedRadioValue;
    }
    public List<Integer> getValueList() {
        return valueList;
    }
    public void actionMethod() {
        HttpServletRequest request = (HttpServletRequest)FacesContext.getCurrentInstance().getExternalContext().getRequest();
        selectedRadioValue = request.getParameter("radioSelection");
    }

由于不能在xhtml上直接为单选项赋值,因此需要从请求参数中获取该值,并在action方法中手动赋值。

相关内容

  • 没有找到相关文章

最新更新