Как сделать пользовательский макет h:selectOneRadio

Question

Макет h:selectOneRadio может быть как горизонтальным, так и вертикальным, так что есть ли способ сделать несколько пользовательских макетов. Например, вместо отображения 8 переключателей, отображать их в 2 рядах по 4 в каждом ряду? Пожалуйста, предоставьте свой ответ рядом с решением PrimeFaces p:selectOneRadio, оно использует CSS3, в результате чего IE8 отображает переключатель в форме прямоугольника.

Answer 1

Это не совсем так, но вы можете использовать Томагавк <t:selectOneRadio> с layout атрибут установлен в "spread" иметь рендеринг кнопок без разметки. Вы можете использовать <t:radio> разместить отдельные переключатели в разметке так, как вы хотите, например, в <h:panelGrid columns="4">,

Например

<t:selectOneRadio id="foo" value="#{bean.selectedItem}" layout="spread">
    <f:selectItems value="#{bean.availableItems}" />
</t:selectOneRadio>

<h:panelGrid columns="4">
    <t:radio for="foo" index="0" />
    <t:radio for="foo" index="1" />
    <t:radio for="foo" index="2" />
    <t:radio for="foo" index="3" />

    <t:radio for="foo" index="4" />
    <t:radio for="foo" index="5" />
    <t:radio for="foo" index="6" />
    <t:radio for="foo" index="7" />
</h:panelGrid>

или даже когда количество переключателей не указано

<h:panelGrid columns="4">
    <c:forEach items="#{bean.availableItems}" varStatus="loop">
        <t:radio for="foo" index="#{loop.index}" />
    </c:forEach>
</h:panelGrid>

(Обратите внимание, что <ui:repeat> не подходит, так как выполняется во время визуализации представления и, таким образом, заканчивается как один столбец <h:panelGrid> , вам нужно использовать обычный HTML <table> вместо)