解决方法
根据JSF spec issue 329,我已经向< h:selectOneRadio>添加了一个新的组属性这应该使这一切都不那么繁琐.在父UIForm中具有相同组值的所有单选按钮组件将彼此分组.此外,如果选择项目具有非空标签,它们也不会在单选按钮本身和可选标签之外提供任何标记.如果有的话,标签会在单选按钮之后直接出现.
<!-- 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>
以下情况也是可能的.当具有相同组的多个组件,并且值属性和/或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>
根据2.3.0-m07,它将在Mojarra上市.
具有直通元素的JSF 2.2
如果您已经使用JSF 2.2,请使用其新的passthrough elements/attribtues功能,从而将name属性显式设置为passthrough属性.为了在模型中设置提交的值,您只需要一个额外的< 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}" />
深入的技术解释可以在这个博客中找到:Custom layout with h:selectOneRadio in JSF 2.2.
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>
您也可以循环使用可用的项目,您只需要在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,请抓取Tomahawk’s <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
.这只是一点点工作.从第一个“参见”链接开始,如下所示:
也可以看看:
> How to override h:selectOneRadio renderer? Where is the renderer class in jsf-impl?
> Is it possible to use JSF to build clean CSS layouts without using tables?
> Render selectManyCheckbox without HTML table