Creating the template with new components - Apache

Now let's convert this mock up into a Tapestry template. Along with the already mentioned RadioGroup and PropertySelection, we are going to use yet another new component, DatePicker. These components are somewhat more complicated than those that you've used before, so I am going to introduce and configure them one by one. The RadioGroup is the simplest of the three, so let's begin from it.

Here is the piece of markup we are going to deal with:

<input type="radio" name="gender" value="M"/> Male &nbsp;&nbsp;

<input type="radio" name="gender" value="F"/> Female

The RadioGroup itself serves as a container for a number of Radio components, so the first task is to convert the existing <input type="radio"> elements into Radio components. This is very easy to do, and in many cases these components will be defined implicitly:

<input type="radio" name="gender" value="M"

                               jwcid="@Radio"/> Male &nbsp;&nbsp;

<input type="radio" name="gender" value="F" jwcid="@Radio"/> Female

The next step is to surround these two with a Tapestry component and then define that component as a RadioGroup. Here is the addition to the template:

<div jwcid="gender">

  <input type="radio" name="gender" value="M"

                 jwcid="@Radio"/> Male &nbsp;&nbsp;

  <input type="radio" name="gender" value="F" jwcid="@Radio"/> Female

</div>

And here is the addition to the page specification:

<component id="gender" type="RadioGroup">

    <binding name="selected" value="gender"/>

</component>

Here we have ensured that when the form is submitted, the value of the selected Radio component is passed to the page class. Finally, declare that you need a property named 'gender' in the page class:

@InitialValue("literal:F")

public abstract String getGender();

We've provided an initial value so that Tapestry knew which of the radio buttons should be selected by default.

And of course, the form surrounding the components should be declared as a Tapestry Form component:

<form jwcid="@Form">

At this point, we might want to test whether the page runs properly, but we need some link to access it. It will be probably most natural to place such a link at the CelebritiesList page, straight under the table:

<p><a href="" jwcid="@PageLink" page="AddCelebrity">

   Add another celebrity

</a></p>

Run the application, click on the new link, and you should see the AddCelebrity page. Try to change the value for gender and press the Submit button. Nothing exciting happens so far, but the fact that everything works smoothly confirms that all components were configured properly - otherwise Tapestry would complain.