JSF сложные каскадные радиокнопки

Question

Мне нужно портировать приложение с PHP на JSF 2. Все хорошо, за исключением довольно сложной группы переключателей:

Когда выбрано «Process Application for:», дочерняя группа переключателей включена. В этом случае, когда выбрано «Другое», соответствующее текстовое поле активируется. Когда выбран «Бренды», эти два текстовых поля включены. Конечно, отмена выбора любого из них снова отключает соответствующие теги.

Я не могу придумать никакого способа сделать это, кроме 3-х отдельных <h:selectOneRadioButton /> тегов, с кучей javascript, обрабатывающих отключение / включение тегов, и большей обработкой javascript для выбора / отмены выбора между различными переключателями, чтобы Похоже, это одна группа переключателей. Кто-нибудь может придумать лучшее решение, чем это? Что-то вроде кастома <h:selectItem />?

Спасибо

Answer 1

Лучшая ставка - Томагавк <t:selectOneRadio> с атрибутом layout, установленным на spread. Это дает дополнительное преимущество, заключающееся в том, что вы сможете расположить отдельные переключатели в разметке HTML так, как вы хотите, используя <t:radio>, в отличие от стандартного <h:selectOneRadio>, который поддерживает только layout атрибуты pageDirection и lineDirection и отображает таблицу.

Однако, играя с вашими функциональными требованиями с помощью новой новой библиотеки Tomahawk для JSF 2.0 и добавляя функциональность <f:ajax>, чтобы иметь возможность отключать / включать необходимые компоненты с помощью аксиальных возможностей, я, к сожалению, столкнулся с ошибкой в ​​Tomahawk. Внутри <t:selectOneRadio> <f:ajax> неправильно отображает свой идентификатор клиента вместо одного из <t:radio> в качестве аргумента для вызова ajax, который вызвал прерывание функции ajax. Я сообщил об этом как Томагавк выпуск 1551 .

Я не вижу других чистых решений для выполнения этого сложного (по крайней мере, в терминах компонентов JSF) требования. Пока ребята из Томагавка не исправят это, лучше всего ввести временный обходной путь на основе JS, чтобы исправить неверный аргумент для вызова ajax во время загрузки. Для вашей информации, вот как будет выглядеть форма:

<style>li { list-style-type: none; }</style>
...
<h:form>
    <t:selectOneRadio id="tasks" value="#{bean.task}" layout="spread">
        <f:selectItems value="#{bean.tasks}" />
        <f:ajax event="click" render="@form" />
    </t:selectOneRadio>
    <ul>
        <li><t:radio for="tasks" index="0" /></li>
        <li><t:radio for="tasks" index="1" />
            <t:selectOneRadio id="processes" value="#{bean.process}" layout="spread" disabled="#{bean.task != 'task2value'}">
                <f:selectItems value="#{bean.processes}" />
                <f:ajax event="click" render="@form" />
            </t:selectOneRadio>
            <ul>
                <li><t:radio for="processes" index="0" /></li>
                <li><t:radio for="processes" index="1" /></li>
                <li><t:radio for="processes" index="2" />
                    <h:inputText value="#{bean.otherProcess}" disabled="#{bean.process != 'process3value'}" />
                </li>
            </ul>
        </li>
        <li><t:radio for="tasks" index="2" />
            <ul>
                <li><h:inputText value="#{bean.brand1}" disabled="#{bean.task != 'task3value'}" /></li>
                <li><h:inputText value="#{bean.brand2}" disabled="#{bean.task != 'task3value'}" /></li>
            </ul>
        </li>
    </ul>
</h:form>

Жаль, что стандартная реализация JSF не поддерживает такой гибкий компонент радиокнопки.

Answer 2

Для начала, очевидно, вы не можете отключить радио с помощью css .Я бы

• получил массив дочерних радиоканалов "процесса"
• получил массив дочерних входов "брендов"
• установил события onclick для процесса и брендов
• для каждого события onclick, отключить все объекты в одном массиве, включить все объекты в другом

Возможно ... 20 строк кода, средний / худший случай.