Making a CelebrityCollector with Apache Tapestry: the For Component (
Page 1 of 4 )
We are going to start a new project today, named CelebrityCollector. At first it will be very simple, but in the following articles we’ll be adding more and more functionality to it. Of course, the purpose at this stage of study is not to build a real-world application but to meet different Tapestry components and to learn various important concepts.Creating the project
Create a new project as explained in the article “Creating Your First Tapestry Project” and name it CelebrityCollector. Don’t forget to add the Tapestry41 library and configure the Tapestry servlet properly.
Add to the project three empty pages: Home, CelebritiesList and Details (see the “Introducing Simple Components in Apache Tapestry” article for an explanation on how to add empty pages; this operation will be simplified significantly when we’ll adopt the NBTapestry module in one of the upcoming articles). Let the package containing page classes be com.devshed.tapestry.celebrities.
Let’s envision what we are going to have in the project so far. The Home page will only have one link (already familiar to you as the PageLink component). Upon clicking this link the user will see the CelebritiesList page.
The CelebritiesList page will display a table with a number of celebrities’ names in it. Each surname will be a link, and if the user clicks on it, the Details page with information on the selected celebrity will open.
As usual, let’s start from mock ups. Here is the Home page mock up and its HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Celebrity Collector: Home</title>
</head>
<body>
<h1>Celebrity Collector</h1>
<p><a href="">List Celebrities</a></p>
</body>
</html>
The CelebritiesList page mock up and its HTML code are shown below. The designer who worked on the mock up didn’t know which celebrities we are going to list, so he put some arbitrary names into the table, just to see how everything might look in the working application.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Celebrity Collector: List</title>
</head>
<body>
<h2>Celebrities in Collection:</h2>
<table width="300" cellpadding="5" border="1">
<tr>
<th>Last Name</th>
<th>First Name</th>
</tr>
<tr>
<td>
<a href="">Smith</a>
</td>
<td>John</td>
</tr>
<tr>
<td>
<a href="">Smithson</a>
</td>
<td>Jane</td>
</tr>
<tr>
<td>
<a href="">Swedenborg</a>
</td>
<td>Emmanuel</td>
</tr>
</table>
</body>
</html>
Finally, here is some content for the Details page mock up:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Celebrity Collector: John Smith</title>
</head>
<body>
<h2>John Smith</h2>
<table>
<tr>
<td><b>Birthday:</b></td>
<td>01/01/1950</td>
</tr>
<tr>
<td><b>Occupation:</b></td>
<td>Actor</td>
</tr>
</table>
<p><a href="">Back to the list</a></p>
</body>
</html>
Now, before going into the specifics of Tapestry development, we need to think about which Java classes we might need in order to manipulate information in our application – store it, transfer, etc. In other words, we need to design an object model. This is not Tapestry specific work but something we would do in any Java Web application.
