set to true whenever we verify in some way that the birth date is correct. Run the application, log in, and at the ShowAll page, click on the link leading to the new AddCelebrity page. You will see the BeanEditForm in all its glory:

Isn't it amazing how much can be done for us by Tapestry when we just drop one component onto the page, with virtually no configuration? Let's see how all this magic works:

• Since we didn't specify any object parameter for BeanEditForm, Tapestry decided that the name of the property should be the same as the id of the BeanEditForm component.
• We didn't initialize the celebrity property, so its value is null, and still everything works fine since BeanEditForm can create an instance of the edited property as required. One consequence of this is that the type of property should be a concrete class, not an interface.
• BeanEditForm took all the properties of the edited class and created a field in the form for each of them.
  For each property that it can edit, BeanEditForm automatically selects a certain control. For a string or a numeric property it displays a text box, for an enumeration—a drop-down list, for a boolean property—a checkbox, for a date—a DateField component (which will be described soon). However, we can easily override the default choice if needed.
• BeanEditForm generates a label for each property based on the property name in the same way as the Grid component did. And in the same way we can override the default label by providing an alternative for it in the application's message catalog, with a key like the propertyName label.
• If the object edited by BeanEditForm, as provided by the page class, contains some values in it, those values will be displayed in appropriate fields of the form. As soon as you click on the Create/Update button, the values in the form fields will be put into the appropriate properties of the edited object.

This list of features already looks quite impressive for a default con figuration, but there are more miracles to see. Purely for the purpose of demonstration, enter some
non-numeric value, like abc, into the Id field and click on the Create/Update button. You will see something similar to this:

Which means that in addition to everything else, BeanEditForm comes with a pre-con figured system of user input validation, and applies reasonable restrictions to its fields, like it prevents entering a non-integer value for an integer property. User input validation is the topic for the next chapter, but you can already see that without any efforts from our side, the validation system of Tapestry 5 does quite a lot—it changes the style of the field in error, its label and adds an error marker, and also displays an appropriate error message at the top of the form. In Chapter 7 you will see that it can even display error messages in many different languages! Well, the error message is somewhat misplaced at the moment, but we'll deal with this problem later. Do you still remember that to obtain all this wealth of functionality, all we had to do is to insert a short line of markup into the page template? Here it is again:

<t:beaneditform t:id="celebrity"/>

Tweaking BeanEditForm

There are a few parameters that we could use to tweak the component. First of all, you will probably want the submit button to display a different label, not the default
Create/Update. Nothing could be easier: <t:beaneditform t:id="celebrity" t:submitLabel="Save"/>You can also explicitly specify the object that BeanEditForm should work with, and use an arbitrary id:<t:beaneditform t:id="celebrityEditor" t:object="celebrity" t:submitLabel="Save"/>

Although BeanEditForm made a lot of clever guesses, in many cases we shall want to somehow infl uence the way it works. As with the Grid component in the previous
section, we'll want to remove the Id field and change the order of fields in the form, so that the Birth Date Veri fied check box is underneath the Birth Date control.

By the way, did you notice that the label for this control is Birth Date, not Date Of Birth, as would be automatically generated by Tapestry? This is because of the entry that we've added to the app.properties file. That file is used by the whole application, and every label associated with the dateOfBirth ID will automatically receive the value from the message catalog.

The way we tidy up the BeanEditForm is very similar to what we did with the Grid component:

<t:beaneditform t:id="celebrity" t:submitLabel="Save"
remove="id"
reorder="firstName,lastName,dateOfBirth,birthDateVerified, occupation,biography"/>

The other change we might want to make is to change the control that is used for Biography. Even though the biography will be brief, a text box is not convenient for entering a long string. There is a much more convenient control for this purpose in HTML, <textarea>. In Tapestry, such control can be displayed by the TextArea
component. Here is what we should do to override the default choice for editing the biography property of the displayed object:

<t:beaneditform t:id="celebrity" t:submitLabel="Save" remove="id"
reorder="firstName,lastName,dateOfBirth,birthDateVerified, occupation,biography">
<t:parameter name="biography">
<t:label for="biography"/>
<t:textarea t:id="biography"
t:value="celebrity.biography"/>
</t:parameter>
</t:beaneditform>

In a way similar to what we did with the Grid component to override the default rendering of a certain column, we are using a <t:parameter> element. Here it repeats the name of the property for which we want to provide an alternative editor. Inside this element we are using a TextArea component, in the same way as we used
TextField in the previous chapter. If you run the application now, the form should look like this:


This is already better. If you think that you'd prefer to have more space for a biography, try this:

<t:textarea t:id="biography" t:value="celebrity.biography" cols="30" rows="5"/>

As cols and rows attributes do not belong to parameters of Tapestry's TextArea component, they will be simply passed to the resulting <textarea> HTML control. Run the application and see how the form looks now. At this point, let's distract ourselves to explore the new component that magically appeared in BeanEditForm, it deserves it.

DateField Component

This is a new addition that appeared only in the latest 5.0.6 version of Tapestry. Now we can use this beautiful, JavaScript-powered control without seeing even a single
line of JavaScript.

DateField is based on an open source DHTML/JavaScript calendar that can be found at http://www.dynarch.com/projects/calendar/.

Let's add one more piece of information to those that we already collect from the users at the Registration page—Date Of Birth. Add this table row to the template,
perhaps straight under the controls used for gender selection:

<tr>
  <td>Gender:</td>
  <td>
     <t:radiogroup t:value="gender">
       <input type="radio" t:type="radio" t:value="male"/> Male
       <input type="radio" t:type="radio" t:value="female"/> Female
     </t:radiogroup>
   </td>
   </tr>
<tr>
   <td>Birth Date:</td>
   <td> <input type="text" t:type="datefield" t:value="dateOfBirth"/> </td>
</tr>

We'll also need a property to store the selected date in the Registration page class:
@Persist
private Date dateOfBirth;
public Date getDateOfBirth()
{
  return dateOfBirth;
}
  public void setDateOfBirth(Date dateOfBirth)
{
  this.dateOfBirth = dateOfBirth;
}
Run the application, go to the Registration page, and you will see the new control on it:

Click on the small icon to the right, and in the beautiful calendar that opens you will be able to choose a date:

However, by default the selected date will be displayed in the American format, like 10/31/07 for the 31st of October. What if you would rather prefer to see it in
the European format, 31/10/07? We can use the format property of the DateField component to display the date how we like:

<input type="text" t:type="datefield" t:value="dateOfBirth" t:format="%d/%m/%y"/>

You can also construct a completely different date format. For example, %b %e, %Y will produce the result Oct 31, 2007. For the complete list of formatting characters
check http://www.dynarch.com/demos/jscalendar/doc/html/reference. html#node_sec_5.3.1, but the following are a few that might be most useful:

Page 4 Of 6 - Advanced Components from the book "Tapestry 5 - Building Web Applications"