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

有没有办法告诉JSF,当使用<h:selectOneRadio>时,它不应该呈现一个<table>元素? 我不使用表格,在这种情况下它绝对没有意义。

任何帮助表示赞赏!

带有group属性的JSF 2.3

根据JSF规范问题329,我已经添加了一个新的group属性<h:selectOneRadio> ,这应该使这一切都不那么繁琐。 在父UIForm具有相同group值的所有单选button组件将被相互分组。 除了单选button本身和可选标签,如果select项目具有非空label它们也不会显示任何标记。 如果有的话,标签直接出现在单选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子项不存在时,则会引用该组的第一个组件。

 <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,请使用其新的直通元素/属性function,从而明确地将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}" /> 

在本博客中可以find深入的技术说明:在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 1.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来build立干净的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> 

辅助豆:

  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上为无线电select指定值,因此您需要从请求参数中获取值,并在您的操作方法中手动分配值。