Before going further, let's configure TextField components for the first and last names. This is easy; you have already done this in the previous application, so I will simply show the relevant pieces of code. In the page template:

...

<input type="text" jwcid="firstName"/>

...

<input type="text" jwcid="lastName"/>

...

In the page specification:

<component id="firstName" type="TextField">

    <binding name="value" value="firstName"/>

</component>

<component id="lastName" type="TextField">

    <binding name="value" value="lastName"/>

</component>

And in the page class:

public abstract String getFirstName();

public abstract String getLastName();

If you run the application again, you will notice that whatever you enter for the names and whichever gender you selected, these values are retained after the form was submitted and the page redisplayed. This is very simple, but it might be worth thinking about. The values we have entered were delivered to the page class and put into its properties, and when the page was redisplayed after form submission, Tapestry checked which values are stored in the properties of the page class and put those values into the components connected to those properties.

Now, let's configure the next component, the one used to select an occupation for the newly added celebrity. Here is its mock up:

<select>

   <option>Actor/Actress</option>

   <option>Wine-maker</option>

   <option>Programmer</option>

</select>

To display a dynamic version of an HTML <select> element in a Tapestry application, we use the PropertySelection component. Mark this <select> with a Tapestry ID:

<select jwcid="occupation">

and then configure it in the page specification:

<component id="occupation" type="PropertySelection">

    <binding name="model" value="occupationsModel"/>

    <binding name="value" value="occupation"/>

</component>

As you can see, this component has two bindings, model and value. As for the value, we are familiar with it from the other components. This binding will pass to the page class the value selected by the user, and when the page is rendered for the first time, it will provide the initial value for the component. Let's configure the appropriate property in the page class:

public abstract String getOccupation();

The model binding is new to us. Basically, it provides to the component the options to display, but the way how it does this might seem a little bit cumbersome at first. Here is the method that the occupation component will expect to find in the page class:

public IPropertySelectionModel getOccupationsModel() {

        // Some code that creates and returns an implementation

        // of IPropertySelectionModel interface

} 

The return value, IPropertySelectionModel, is an interface that has several methods in it, and Tapestry provides a few implementations of this interface. Today we shall use the simplest implementation, but in one of the upcoming parts of the tutorial I am going to show how to unleash the full power of IPropertySelectionModel and explain the logic behind this seemingly cumbersome but potentially very flexible way of providing the options to display. For now, just add to the page class the following method:

public IPropertySelectionModel getOccupationsModel() {

    String[] occupations = {"Actor/Actress",

       "Wine-maker", "Programmer"};

    return new StringPropertySelectionModel(occupations);

}

We have simply created an array of strings and then used it to create an instance of StringPropertySelectionModel, the simplest of IPropertySelectionModel implementations.

Run the application and it should work properly. Well, at the first glance the AddCelebrity page looks exactly as its mock up, but if you select some occupation other than the first, and then submit the form, the selected value will be redisplayed. This this means that the page in your browser and the page class on the server are speaking to each other.

Have a look at the source of the page in your browser, and you will see that the <select> for specifying the occupation was rendered like this:

<select name="occupation" id="occupation">

  <option value="0">Actor/Actress</option>

  <option value="1">Wine-maker</option>

  <option value="2">Programmer</option>

</select>

You can see that each occupation has a label, displayed to the user, and a value associated with that label. This is something we are going to explore soon, but for today we have already covered enough ground.

What comes next

In the next part of the tutorial we are going to complete the AddCelebrity page by adding a DatePicker component to it, and also some code to actually create a new Celebrity object and "record" it into the DataSource.