Dynamic page with JSF

Question

Hello everybody!

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 inputField3 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?

Answer 1

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.

Answer 2

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.