In the previous article of this tutorial we learned to use the For component. It (a) iterates through a number of objects, (b) displays any markup surrounded by itself as many times as there are objects to iterate through and (c) exposes each current object to our code. As a result, we can put into markup a few simple components like Insert and have all the objects in the bunch neatly displayed, precisely the way we want them to be displayed.

Now, it is a common pattern to have one of the listed objects to be displayed in more detail. Normally, some kind of link is used for this purpose. Say, in the CelebrityCollector application we've made the surname a link. Click on the surname "Gates" and you will see all the details about Bill Gates. So far, the links do not work like this however, just because they are empty HTML links with empty href attributes and nothing else:

<a href=""> Gates </a>

To achieve the desired result, we should convert these links into Tapestry components.

Meet DirectLink

We are already familiar with one kind of link component -- PageLink. Although quite useful in many cases, PageLink will not suit our current purpose as it simply displays another page while we need to pass to the Details page some data to display.

This is exactly where DirectLink will be helpful as the main features of this component are:

1. It displays itself as a link.
2. It is associated with a listener method. When the link is clicked, that method will be invoked, and we can have any kind of code executed as a result.
3. It can pass to its listener a parameter -- some additional detail that will specify what exactly we want to get done.

Let's see how all this works.

In the CelebritiesList.html, make the link surrounding a surname a Tapestry component:

<a href="" jwcid="detailsLink">

  <span jwcid="lastName">Smith</span>

</a>

And then configure this component in the CelebritiesList page specification:

<component id="detailsLink" type="DirectLink">

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

   <binding name="parameters" value="currentCelebrity.id"/>

</component>

As you can see, we have defined a listener method, onShowDetails(), to be invoked when the link is clicked. Now let's add this method to CelebritiesList.java:

public IPage onShowDetails() {

   // Do something

   return null;

}

There is also a binding named "parameters." Potentially, there can be several parameters, but we need just one -- the ID of the celebrity whose detailed information we want to see. To obtain its value we use an OGNL expression, and I believe there is no need to decipher it for you.

However, it may be useful to review how everything works at the CelebritiesList page.