By Jim White (Director of Training and Java Instructor) ? jwhite@intertech.com

Just before the holiday break, a former student of mine (thanks Don) sent me an email asking if an array of Strings property on a managed bean can be bound to a group of input fields in a JSF form? Can the String array be used to both populate and collect data from the input fields?

Binding Input Fields to Properties

If you have started to explore JSF, you are aware that a managed bean?s property can be bound to an input field in a JSP. For example, a VoteBean with a name property (and associated getter and setter methods) as shown can be bound to a JSF form?s input field as shown in the JSP also shown here.

Managed bean code

public class VoteBean {
    private String name = "Enter your name";

    public String getName() { 
        return name;
    }

    public void setName(String name) { 
        this.name = name;
    }

   ?

}

JSP code

<f:view>
    <h:form>
Your name:
        <h:inputText value="#{vote.name }" />
        <br />
        <h:commandButton value="Submit" action="#{vote.collectFavorites}" />
    </h:form>
</f:view>

Faces config

<managed-bean>
    <managed-bean-name>vote</managed-bean-name>
    <managed-bean-class>com.intertech.beans.VoteBean</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

As the JSP is initially displayed, the getter method on the name field is called and the data from the property (initially ?Enter your name?) is used to populate the associated input field in the form. Conversely, when the form is submitted, the data from the form input field is used to call the setter method to update the data back into the managed bean?s name property.

Binding Input Fields to String Arrays/Collections

So what if a JSP needs to collect several strings in a group of input fields? How can the data in the group of input fields be captured? Indeed, you can bind a String array or java.util collection property to the JSF form?s input fields.

It?s the New Year and I was passed this year?s list of ?national days? by a friend.  January 23rd is National Pie Day.  No ? I?m not joking (check it out at American Pie Council).  So what if you wanted to build a Web application (JSF driven of course) to collect people?s choice for favorite pies in honor of National Pie Day?  In the managed bean, define a property called favorites that is either a String array or collection (like a List<String>). Create getters and setters for the property. Importantly, make sure the array or collection object is initialized and populated (when necessary) before the form that uses the data is displayed (the static initialization block does that work here).

Managed Bean Code Using an Array

    private String[] favorites;

    {
        favorites = new String[5];
    }
    public String[] getFavorites() {
        return favorites;
    }

    public void setFavorites(String[] favorites) {
        this.favorites = favorites;
    }

Managed Bean Code Using an ArrayList

    private List<String> favorites;

    {
         favorites = new ArrayList<String>();
         for(int i = 1; i<=5; i++)
             favorites.add("");
    }

    public List<String> getFavorites() {
        return favorites;
    }

    public void setFavorites(List<String> favorites) {
        this.favorites = favorites;
    }

Now, using JSF?s tag library, define input fields in the JSP to collect the favorite pie votes. The input fields value attribute should use Unified Expression Language to reference each of the array or collection elements using square bracket [ ] notation.

JSP Code

<f:view>
    <h:form>
Your name:
        <h:inputText value="#{vote.name }" />
        <br />
Your age:
        <h:inputText value="#{vote.age }" />
        <br />
Your favorite types of pie:<br />
        <h:inputText value="#{vote.favorites[0] }" />
        <br />
        <h:inputText value="#{vote.favorites[1] }" />
        <br />
        <h:inputText value="#{vote.favorites[2] }" />
        <br />
        <h:inputText value="#{vote.favorites[3] }" />
        <br />
        <h:inputText value="#{vote.favorites[4] }" />
        <br />
        <h:commandButton value="Submit" action="#{vote.collectFavorites}" />
    </h:form>
</f:view>

Click here for a complete (Eclipse 3/Tomcat 6) working example of the code shown in this blog entry.

Have a wonderful year, and if you would like to join me to learn more about JSF in the New Year, you can sign up and learn more about Intertech?s Complete JavaServer Faces class here.