However, DatePicker has a few downsides, and I am going to mention them, preparing you for the necessity of creating your own custom component for date input. Before building such a custom component, however, we'll need to have a clear understanding of the PropertySelection component and the IPropertySelectionModel interface -- this will be the topic for the next issue.

Meet DatePicker

To begin with, let's add a DatePicker to the AddCelebrity page. Mark the remaining text box (labeled "Date of Birth") as a Tapestry component:

<td>Date of Birth:</td>

<td>

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

</td>

Configure the new component in the page specification:

<component id="dateOfBirth" type="DatePicker">

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

</component>

It has a familiar value binding. The only difference with what we dealt with before is that the data type for this binding has to be java.util.Date. Let's configure a corresponding property in the page class:

public abstract Date getDateOfBirth();

Everything is as usual so far, but now DatePicker will require an additional configuration. This is because the functionality of this component is enabled by JavaScript. First of all, we need to make JavaScript libraries available for the page, and then we shall assist Tapestry in inserting the JavaScript required for DatePicker to work properly.

Tapestry 4.1 comes with an excellent Dojo JavaScript toolkit built into it. All we need to do to make this toolkit available to our page is to use a Shell component.