Dynamic page with JSF

I need to make dynamic web-page/form in JSF. Dynamic: In runtime I get the number of input fields Ill have together with buttons. I'll try to demonstrate you what I need to make.

inputField1 inputField2 inputField3 BUTTON1

inputField4 inputField5 BUTTON2

inputField6 inputFiled7 inputField8 inputField9 BUTTON3

I hope you understand me what I want to make. So I when I click on some of the buttons I have to collect the data from the input fields and do something with the data. If I click BUTTON1 I collect data from inputField1 inputField2 input开发者_如何学编程Field3 BUTTON2 inputField4 inputField5, etc.

Probably I should create the input fields programmatically and group them in forms.

Any idea how to do it? Any idea?

---

As usual (see this and that), my advice would be to not add/remove component dynamically. Solve your problem another way:

• Toggle visibility of components
• Rebind the data belonging to a component

Adding/removing component dynamically is always a source of trouble and chances are that you can do it another way much simpler.

In your case, I would use a table that I bind to a list of String. Within each cell of the table, I render an input text box with the current String. There are three buttons, so there are three lists of String and three tables. Rough sketch for one button:

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

That's just the idea. You can use another component than a table that iterates on a list, or CSS, to customize the display and have the input boxes on one line.

---

If you're interested in programmatic creation of UI with JSF, check this sample project:

Dynamic Faces

In two words, you can use the binding attribute to bind a component instance to a property of a backing bean:

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

In the backing bean you can populate the bound 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;
    }

However, it is not easy.

---

You can use multiple forms in your view and group inputfields with the controling button. When the user click the button1, only data of inputfields 1,2,3 will be sent. idem for button2 and 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>