Блог

Главная - Вопросы по программированию - JSF: динамически изменять форму

JSF: динамически изменять форму

#ajax #forms #jsf #jsf-2 #tomahawk

#ajax #формы #jsf #jsf-2 #tomahawk

Вопрос:

Я хочу создать форму, которая динамически изменяет видимые компоненты в зависимости от состояния других компонентов.

Например… Есть несколько текстовых полей и несколько флажков, и если пользователь активирует определенный флажок, должна появиться куча других элементов ввода.

Могу ли я сделать это с помощью JSF 2.0 Tomahawk или мне нужно получить другую библиотеку для этого? И как я могу это сделать? Это не будет работать без AJAX, не так ли?

Заранее спасибо!

Ответ №1:

Ajax — удобный способ сделать это, и JSF 2.0 поставляется в комплекте с ajax.

Вот пример:

 <h:selectOneRadio value="#{a7.myCheckbox.state}">
      <f:selectItem itemLabel="#{bundle.yes}" itemValue="1"/>
      <f:selectItem itemLabel="#{bundle.no}" itemValue="0"/>
      <f:ajax render="uawGroup"/>
</h:selectOneRadio>

<h:panelGroup id="uawGroup" layout="block">
   <h:outputText value="#{bundle.wichmed}"
        rendered="#{a7.myCheckbox.state == 1}"/>
   <h:inputText value="#{}" id="myInput"
        rendered="#{a7.myCheckbox.state == 1}"/> 
</h:panelGroup>

h:panelGroup Будет отображаться при нажатии на «да»-вариант в h:selectOneRadio (значение элемента == 1). Изначально это значение равно 0 (задается в компоненте «a7»).

h:panelGroup Действует как оболочка, поскольку с помощью ajax можно обновлять только те компоненты, которые фактически отображаются на странице ( h:outputText и h:inputText изначально не отображаются).

Комментарии:

1. Это здорово, спасибо! Но как это работает, если я хочу отобразить определенный набор компонентов, если была нажата кнопка h:? Спасибо!

2. Чтобы было понятно, что я пытаюсь сделать: у меня есть несколько панелей, и я хочу, чтобы пользователь просматривал их шаг за шагом (заполнял данные в grid1, нажимал кнопку, которая вызывает отображение grid2, и так далее). Как я могу этого добиться? И могу ли я уже разрешить серверу обрабатывать определенные входные данные из grid1 для отображения результатов в grid2?

3. @geeehhdaa Вы также можете поместить f:ajax внутрь h:commandButton . Используйте execute атрибут для обработки полей ввода во время вызовов ajax: <f:ajax render="ids of components to be re-rendered" execute="ids of components to be processed">

4. Спасибо! Проблема в том, что я хочу, чтобы эти группы панелей были изначально невидимыми. Таким образом, эффект не должен приводить к обработке содержимого, он должен делать видимыми только следующие группы панелей. Как мне выбрать атрибут отображения групп, который должен отображаться, только если тогда была нажата кнопка? Кнопка не имеет состояния, не так ли? Редактировать: На самом деле одна из кнопок должна вызывать некоторое действие. Как я могу AJAX-вызвать действие?