Динамическая страница с JSF

Question

Мне нужно сделать динамическую веб-страницу / форму в JSF. Динамический: во время выполнения я получаю количество полей ввода, которые у меня будут вместе с кнопками. Я постараюсь показать вам, что мне нужно сделать.

inputField1 inputField2 inputField3 BUTTON1

inputField4 inputField5 КНОПКА2

inputField6 inputFiled7 inputField8 inputField9 КНОПКА3

Я надеюсь, вы понимаете, что я хочу сделать. Поэтому, когда я нажимаю на некоторые кнопки, мне нужно собирать данные из полей ввода и что-то делать с данными. Если я нажимаю кнопку BUTTON1, я собираю данные из inputField1 inputField2 inputField3 КНОПКА2 inputField4 inputField5 и т. Д.

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

Есть идеи, как это сделать? Любая идея?

Answer 1

Как обычно (см. это и то ), мой совет будет не добавлять / удалять компонент динамически. Решите вашу проблему другим способом:

• Переключение видимость компонентов
• Перепривязать данные , принадлежащие компоненту

Динамическое добавление / удаление компонента всегда является источником проблем, и есть вероятность, что вы можете сделать это гораздо проще.

В вашем случае я бы использовал таблицу, которую привязал к списку строк. В каждой ячейке таблицы я отображаю текстовое поле ввода с текущей строкой. Есть три кнопки, так что есть три списка строк и три таблицы. Грубый набросок для одной кнопки:

<h:dataTable value="#{bean.list}" var="item">
   <h:column>
       <h:inputText value="#{item}"/>
   </h:column>
</h:dataTable>
<h:commandButton action="#{bean.cmd1}" value="cmd1" />

Это просто идея. Вы можете использовать другой компонент, кроме таблицы, которая выполняет итерации по списку, или CSS, чтобы настроить отображение и разместить поля ввода в одной строке.

Answer 2

Если вы заинтересованы в программном создании пользовательского интерфейса с помощью JSF, проверьте этот пример проекта:

Динамические лица

В двух словах вы можете использовать атрибут привязки для привязки экземпляра компонента к свойству компонента поддержки:

<h:panelGroup id="helloWorldPanel" binding="#{helloWorldBean.component}"/>

В компоненте поддержки вы можете заполнить связанный компонент:

private UIComponent component;

public UIComponent getComponent() {
    return component;

}

public void setComponent(UIComponent component) {
        final UIOutput outputText = (UIOutput) facesContext.getApplication()
                .createComponent(HtmlOutputText.COMPONENT_TYPE);
        outputText.setId("helloAnotherWorldMessage");
        component.getChildren().add(outputText);
        outputText.setValue("Hello, Another World!");
        this.component = component;
    }

Однако это не легко.

Answer 3

Вы можете использовать несколько форм в вашем представлении и группировать поля ввода с помощью кнопки управления. Когда пользователь нажимает кнопку 1, будут отправлены только данные полей ввода 1,2,3. То же самое для button2 и button3.

<f:view>
  <h:form id="form1">
    <h:inputText id="field1" value="#{backingBean.var1}"/>
    <h:inputText id="field2" value="#{backingBean.var2}"/>
    <h:inputText id="field3" value="#{backingBean.var3}"/>
    <h:commandButton value="SAVE" action="#{backingBean.doButton1}"/>
  </h:form>
  <h:form id="form2">
    <h:inputText id="field4" value="#{backingBean.var4}"/>
    <h:inputText id="field5" value="#{backingBean.var5}"/>
    <h:commandButton value="SAVE" action="#{backingBean.doButton2}"/>
  </h:form>
</f:view>