To manipulate dates, we use an instance of java.util.Calendar class and simply get or set appropriate values using the appropriate keys (like Calendar.YEAR). In the very beginning, we need to set this Calendar to some initial value. In the simplest case, we just set it to the value received from the parameter (through getDate() method). Quite often, however, the initial value can be null. What should we do in this case? One reasonable option is to display the current date, hence the code:

c.setTime(getDate() == null ? new Date() : getDate());

But when should we run this line of code? Perhaps just before the DateInput component will have to render itself, as it will need to know which values to display. We can imagine that our component tells the page: “Hey, Page, could you please let me know when you’re going to render me? I am going to do some initialization just before that.” Translated into Tapestry API, this will make our component a PageBeginRenderListener (you see, the component class implements this interface).

The PageBeginRenderListener interface has only one method, pageBeginRender(), and this method will be invoked by the page just before it begins rendering itself and any components contained by itself.

Now that we’ve sorted out initialization, the PropertySelection components displaying the day, month and year can obtain their values from the Calendar and report whatever was selected by the user back to the Calendar.

When the page is submitted to the server, the setters will work exactly in the order in which the components are placed: setMonth(), then setDay() and finally setYear(). Since setYear() runs last, we made it responsible for setting the value of the date parameter to whatever was put into the Calendar by this time:

public void setYear(int year) {

   c.set(Calendar.YEAR, year);

   setDate(c.getTime());

}

This completes the explanation of how the DateInput component works. The explanation was somewhat verbose, but only because I wanted to explain every detail. All we need to do now is put this component on some page and test it.

One possible solution is to replace the existing DatePicker component. It is used on the AddCelebrity page and configured like this:

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

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

</component>

To make the change, we just edit the type of component and the name for its binding:

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

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

</component>

Now you can run the application, add some new celebrity, and the date-related functionality should work exactly as it worked before, with the only difference that we don’t need any JavaScript harness now and there is no way to misinterpret user input.

To summarize, I think you will agree that creating a fully functional custom component wasn’t more difficult than creating a simple Tapestry page. We did have to write a number of methods, but most of them contained just one line of code (and the remaining few contained two lines of code).

We could further enhance the DateInput component – for example, add a parameter for disabling it, or enable tabulation through its drop-down lists. This however has to be left until a later article, or you might want to try and do this yourself.

What comes next

In the next article I am planning to show you how using the NBTapestry module for NetBeans can make our life somewhat easier. I also plan to demonstrate different ways of submitting forms in Tapestry, something I have been putting off since the very beginning of the series.