Making a CelebrityCollector with Apache Tapestry: the For Component - Creating pages (
Page 3 of 4 )
Making Home.html a Tapestry template is easy. All we need to do is convert the existing HTML link into an already familiar PageLink component, and it is okay to do this implicitly:
<p><a href="" jwcid="@PageLink" page="CelebritiesList">
List Celebrities</a></p>
You might want to run the project at this point and see if clicking on the link produces the desired result. It should.
As the Home page is so simple and its page specification remains empty, we don’t actually need any Home page class for it. In fact, you could simply remove the class attribute from the page specification:
<?xml version="1.0"?>
<!DOCTYPE page-specification PUBLIC
"-//Apache Software Foundation//Tapestry Specification 4.0//EN"
"http://tapestry.apache.org/dtd/Tapestry_4_0.dtd">
<page-specification>
</page-specification>
In this case Tapestry will use its BasePage class as a Home page class. However with time, as the CelebrityCollector application becomes more complex, we might decide to add something to the Home page. So I suggest leaving in place both the Home.page specification and the Home.java class; it doesn’t matter that they are empty so far.
Converting Details.html is also straightforward. All we need is a number of Insert components and another PageLink. Let’s suppose for now that we have a celebrity property already available in the Details class. We shall add it in a few minutes. Here is the Details page template:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Celebrity Collector: <span jwcid="fullName">
John Smith</span></title>
</head>
<body>
<h2><span jwcid="fullName2">John Smith</span></h2>
<table>
<tr>
<td><b>Birthday:</b></td>
<td><span jwcid="birthday">01/01/1950</span></td>
</tr>
<tr>
<td><b>Occupation:</b></td>
<td><span jwcid="occupation">Actor</span></td>
</tr>
</table>
<p><a href="" jwcid="@PageLink" page="CelebritiesList">
Back to the list</a></p>
</body>
</html>
And here is the corresponding Details page specification (note that all Insert components are configured in the specification while PageLink is defined implicitly):
<?xml version="1.0"?>
<!DOCTYPE page-specification PUBLIC
"-//Apache Software Foundation//Tapestry Specification 4.0//EN"
"http://tapestry.apache.org/dtd/Tapestry_4_0.dtd">
<page-specification class="com.devshed.tapestry.celebrities.Details">
<component id="fullName" type="Insert">
<binding name="value"
value="celebrity.firstName + ' ' + celebrity.lastName"/>
</component>
<component id="fullName2" copy-of="fullName"/>
<component id="birthday" type="Insert">
<binding name="value" value="celebrity.dateOfBirth"/>
</component>
<component id="occupation" type="Insert">
<binding name="value" value="celebrity.occupation"/>
</component>
</page-specification>
Before discussing how components were configured, let’s add a celebrity property to the Details page by providing abstract public getter and setter methods:
public abstract class Details extends BasePage {
public abstract Celebrity getCelebrity();
public abstract void setCelebrity(Celebrity c);
}
At some point, we are going to use the setter to assign some Celebrity object to this property, but for now we don’t care when and where that will be done. Let’s concentrate on how different Insert components were configured in the page specification or, most importantly, on their bindings.
The component named occupation is the simplest one. It is bound to the OGNL expression
celebrity.occupation
Which means that to obtain a value to display, Tapestry will first invoke the getCelebrity() method of the Details class. We have provided this method, and although we made it abstract, Tapestry will take care of creating a concrete implementation of it at runtime. So we’ll get a Celebrity object as a return value from this method.
Then, according to the rules of OGNL, Tapestry will try to invoke the getOccupation() method on the Celebrity object. Sure enough, we have provided such method, and it returns a String. That same string will be displayed by the component then.
The birthday component is different in only one respect: its binding returns a Date. To display it, Tapestry will invoke the Date’s toString() method which will produce… well, some result. In fact, we can have complete control of how the value is displayed by an Insert component by using its format binding, but let me delay the explanation until the next article.
In two cases we want to display the full name of the celebrity: first, in the title element of the resulting HTML page (this is the piece of information displayed by a browser’s title bar), and second, in the header of the page. The fullName component does the job in the title element. Have a look at its binding expression:
celebrity.firstName + ' ' + celebrity.lastName
According to this OGNL expression, Tapestry will obtain the first and the last names of the celebrity by invoking appropriate methods of the Details and Celebrity classes and then glue both names together leaving a blank space between them. So you see, OGNL can be quite useful.
In order to insert the full name into the page header, we use the fullName2 component. As we need exactly the same result, we could use exactly the same binding – but there is a more rational way to achieve the desired result. We can simply state that fullName2 component is a copy of the fullName component, and this is exactly what we are doing here.
Finally, we are coming to the CelebritiesList page, and here we are going to need the new component named For. Let’s see what it can do for us.
