使用其他组件自定义 h:selectOneRadio 的布局和标签

Question

我想自定义 <h:selectOneRadio> 的默认布局。

在我的例子中，我需要在每个单选按钮后放置一个 <h:selectManyCheckbox>。这是我目前所拥有的：

<h:selectOneRadio value="#{user.Request}">
    <f:selectItem itemValue="Request1" itemLabel="Request1" />
    <f:selectItem itemValue="Request2" itemLabel="Request2" />
</h:selectOneRadio>

<h:selectManyCheckbox value="#{user.Request1}">
    <f:selectItem itemValue="Certificate1" itemLabel="Certificate1" />
    <f:selectItem itemValue="Certificate2" itemLabel="Certificate2" />
</h:selectManyCheckbox>

<h:selectManyCheckbox value="#{user.Request2}">
    <f:selectItem itemValue="Certificate3" itemLabel="Certificate3" />
    <f:selectItem itemValue="Certificate4" itemLabel="Certificate4" />
</h:selectManyCheckbox>

我试着把它们放在每个 select 项之后：

 <h:selectOneRadio value="#{user.Request}">
    <f:selectItem itemValue="Request1" itemLabel="Request1" />
    <h:selectManyCheckbox value="#{user.Request1}">
        <f:selectItem itemValue="Certificate1" itemLabel="Certificate1" />
        <f:selectItem itemValue="Certificate2" itemLabel="Certificate2" />
    </h:selectManyCheckbox>
    <f:selectItem itemValue="Request2" itemLabel="Request2" />
    <h:selectManyCheckbox value="#{user.Request2}">
        <f:selectItem itemValue="Certificate3" itemLabel="Certificate3" />
        <f:selectItem itemValue="Certificate4" itemLabel="Certificate4" />
    </h:selectManyCheckbox>
</h:selectOneRadio>

但是没有用。这样做的正确方法是什么？

Answer 1

标准 JSF 不支持此标记 <h:selectOneRadio>。

有 JSF 组件库提供更灵活的组件，例如 Tomahawk with <t:selectOneRadio layout="spread"><t:radio>:

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

<!-- This one won't display anything. -->
<t:selectOneRadio id="request" value="#{user.request}" layout="spread">
    <f:selectItem itemValue="#{1}" itemLabel="Request 1" />
    <f:selectItem itemValue="#{2}" itemLabel="Request 2" />
    <f:ajax render="requests" />
</t:selectOneRadio>

<!-- Just markup them the way you want! -->
<h:panelGroup id="requests" layout="block">
    <ul>
        <li>
            <t:radio for="request" index="0" />
            <h:selectManyCheckbox value="#{user.request1}" disabled="#{user.request != 1}">
                ...
            </h:selectManyCheckbox>
        </li>
        <li>
            <t:radio for="request" index="1" />
            <h:selectManyCheckbox value="#{user.request2}" disabled="#{user.request != 2}">
                ...
            </h:selectManyCheckbox>
        </li>
    </ul>
</h:panelGroup>

PrimeFaces has a similar component, the <p:selectOneRadio layout="custom"><p:radioButton>:

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

<!-- This one won't display anything. -->
<p:selectOneRadio id="request" value="#{user.request}" layout="custom">
    <f:selectItem itemValue="#{1}" itemLabel="Request 1" />
    <f:selectItem itemValue="#{2}" itemLabel="Request 2" />
    <p:ajax update="requests" />
</p:selectOneRadio>

<!-- Just markup them the way you want! -->
<h:panelGroup id="requests" layout="block">
    <ul>
        <li>
            <p:radioButton for="request" itemIndex="0" />
            <h:selectManyCheckbox value="#{user.request1}" disabled="#{user.request != 1}">
                ...
            </h:selectManyCheckbox>
        </li>
        <li>
            <p:radioButton for="request" itemIndex="1" />
            <h:selectManyCheckbox value="#{user.request2}" disabled="#{user.request != 2}">
                ...
            </h:selectManyCheckbox>
        </li>
    </ul>
</h:panelGroup>

无论哪种方式，只需让复选框组的 disabled 属性检查当前选定的单选按钮值（我已将其简单地更改为 Long，但 enum可能会更自我记录），并使用通常的 ajax 魔法在更改事件期间部分更新视图。

如果出于某种原因无法重用现有 JSF 组件库中的增强组件，那么您需要自己编写所有组件。最简单的方法是覆盖标准 <h:selectOneRadio> 渲染器以识别新的 layout 属性，然后像上述组件一样相应地生成所需的 HTML 输出。另见 a.o。 How to override h:selectOneRadio renderer? Where is the renderer class in jsf-impl?

使用其他组件自定义 h:selectOneRadio 的布局和标签

Customize layout and labels of h:selectOneRadio with other components

jsf

layout

jsf-2

customization

selectoneradio