Creating input fields dynamically in JSF 2.0 and linking it to a backing bean

Question

My requirement is something like this. In a JSF(2.0) page, I have a section called Address. I have added a button which says "Add an Address". When the user clicks the button, new address fields(input text) should be generated dynamically (Line1, Line2, City etc..,). And when I click submit, all the values (Address 1, Address 2 ... Address N) should go to an array list.

So I need to

Dynamically generate UI components on click on a button
Link those UI components to a backing bean (Preferably to a list)
Data tables should not be used for the above

It is very difficult to find proper JSF documentations online, so if anyone can help me out it would be great

Update : The answer posted by noone works good, but I want something more robust, like creating dynamic UI components from the Java Controller (The java bean, using HtmlPanelGrid component). I have been able to create components dynamically using htmlPanelGrid, but I cannot find a way to bind those generated components to the address list in the bean (The one which stores details of all the addresses)

This question is too broad. Firstly you should try something by yourself and after that ask if you have some problem. By the way, you have dozens of JSF online tutorials and how-tos, starting from this site. — Xtreme Biker
I have tried many things, the reason I haven't put it here because, I wanted to see different approaches by different people — Bharath Bhandarkar
I still think you should give it a try by yourself. By the way, one tip, JSF provides tools to avoid component binding in most of the cases. It is better to store data in your own data structure rather than a binded jsf component. That way if you ever want to change your view layer's framework it'll be easier (decoupled) ;-) — Xtreme Biker
What exactly is the reason that you don't want to use data tables? Is it because they generate a table? Use <ui:repeat> then. I'm really not seeing why programmatically creating components in Java side would be "more robust" instead of just building/declaring them in the view side. — BalusC

noone noone · Accepted Answer · 2013-09-05T06:23:47

I assume that you have a class Address for the addresses. And a AddressBean with a List to keep the adresses.

The code might look like this (for the most basic scenario I can think of):

<h:form id="addressForm">
    <h:commandButton value="Add Address" action="#{addressBean.addAddress()}" immediate="true" execute="@this">
        <f:ajax render="addressForm" />
    </h:commandButton>
    <c:forEach items="#{addressBean.addressList}" var="address">
        <h:inputText value="#{address.street}" /><br />
    </c:forEach>
    <h:commandButton value="Save" action="#{addressBean.persistAddresses}" />
</h:form>

@ManagedBean
@ViewScoped
public class AddressBean {
    private List<Address> addressList = new ArrayList<Address>(); // getter+setter

    public void addAddress() {
        addressList.add(new Address());
    }

    public void persistAddresses() {
        // store the addressList filled with addresses
    }
}

public class Address {
    private String address; // getter+setter
}

<c:forEach> is taken from the JSTL. It might work with <ui:repeat>, but depending on your actual scenario it might not.

Creating input fields dynamically in JSF 2.0 and linking it to a backing bean

1 Answers