Some developers might not like all those preparations required for a single DatePicker to work, but in fact this is not a problem. The Shell component is so useful that in a real life application you will most probably have it in almost every page (you will see in a later tutorial why). And it is not difficult to implicitly declare a Body component.

One of the potential real problems is that some users will not have JavaScript support in their browsers, for different reasons. There might not be too many of these users, of course, and it is up to you to decide whether this is a serious problem. Also, they can always type in the date, as the text box remains available for date entry no matter what. In fact, many web users with advanced typing skills might prefer to type in the date instead of using the beautiful calendar, even if they have JavaScript working properly. And here the second potential problem arises.

Say the user has entered a date: 12/06/2007. How should your application interpret it: as the sixth of December, according to the pattern used in the USA, or as the twelfth of June, as the date would be understood in most other countries? The user will be very surprised if you will book her holiday in December instead of June!

One might think that to solve the problem, it will be enough to provide a notification like this:

PLEASE ENTER THE DATE IN MM/DD/YYYY FORMAT!!!

But the reality of the Web is that many, many users will never notice your notification and will happily type in whatever they consider appropriate.

Finally, and this is yet another potential problem, some of your customers might not appreciate a pop-up calendar in the application you are building for them, just out of aesthetic considerations. I had such a customer in my first commercial Tapestry project, and I had to suggest some more serious looking control for date input.

Please understand me properly: I am not saying that the DatePicker component is bad. It is excellent and might be everything you want in the majority of your projects. But sometimes you will want something else, and this is exactly what moves us to consider the creation a custom component.

Thankfully, creating a custom component is very easy in Tapestry. However, we are going to do this a little bit later, after becoming familiar with the methods of IPropertySelectionModel in the next article. For now, all we have to do is complete the AddCelebrity page, so that the current iteration of our project can work properly.

First of all, let's add to the DataSource a method for storing a newly added celebrity, as simple as this:

public void addCelebrity(Celebrity celebrity) {

   list.add(celebrity);

}

We also need some way to generate a unique ID for every new celebrity. Here is one simple solution:

public int getNewId() {

   return list.size() + 1;

}

As long as we don't remove any celebrities from the list, this solution will work.

Next, we need to create a new Celebrity object, fill it with information and save it using the DataSource. But where are we going to do all this? We need a listener method associated with the form on the AddCelebrity page. We already have an implicit Form component there, but let's define it in the page specification now.

Replace

<form jwcid="@Form">

with

<form jwcid="addCelebrityForm">

and then add the following component declaration to AddCelebrity page specification:

<component id="addCelebrityForm" type="Form">

   <binding name="listener" value="listener:onAddCelebrity"/>

</component>

After the form is submitted, but before the listener method is called, Tapestry will put all the values submitted by the user into the properties of the page class, so we can simply take them from there. Here is the code to add a celebrity to the DataSource:

public String onAddCelebrity() {

   DataSource ds = getDataSource();

   Celebrity celebrity = new Celebrity();

   celebrity.setFirstName(getFirstName());

   celebrity.setLastName(getLastName());

   celebrity.setDateOfBirth(getDateOfBirth());

   celebrity.setId(ds.getNewId());

   String occupation = getOccupation();

   if ("Actor/Actress".equals(occupation)) {

     if ("F".equals(getGender())) {

       occupation = "Actress";

     }

     else {

       occupation = "Actor";

     }

   }

   celebrity.setOccupation(occupation);

   ds.addCelebrity(celebrity);

   return "CelebritiesList";

}

The code is quite simple. We are filling a new Celebrity object with values received from the user and only perform some manipulations when we need to decide whether this is an "Actor" or an "Actress." Finally, we add the new Celebrity to the DataSource and, by returning the "CelebritiesList" string, ask Tapestry to show the page with the table of celebrities.

Let's see how it works. Run the application, navigate to the page for adding a new celebrity and enter some data. Here is an example:

Press Submit, and you should see the new celebrity added to the table:

Click on the Last Name link, and you should see the details:

So it works! And you will probably agree that the amount of code we have written wasn't overwhelming.

Before completing this article, we need to look at one technical issue yet again.