Let's have a look at this fragment again:

<tr jwcid="eachCelebrity">

   <td>

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

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

      </a>

   </td>

   <td>

      <span jwcid="firstName">John</span>

   </td>

</tr>

As you know, eachCelebrity is a For component. We gave it a List containing four Celebrity objects filled with data for Jane Fonda, Ernest Gallo, Bill Gates and Angelina Jolie stored in them.

The eachCelebrity component will take the first object, for Jane Fonda, and assign it to the currentCelebrity property defined in the page specification. After that it will render the piece of markup surrounded by it (shown in bold in the code snippet above).

But the markup contains three Tapestry components: detailsLink, lastName and firstName. Each of them is defined in the page specification in such a way that it gets some information from the currentCelebrity property. In the first iteration, this property is set to Jane Fonda's Celebrity object, so the first chunk of HTML is filled with her data. If in the running application you take a look at the source of the page showing the table of celebrities, you will find this fragment:

<tr id="eachCelebrity">

   <td>

      <a id="detailsLink"

      href="/CelebrityCollector/app? ... service=direct&amp;sp=1">

         Fonda

      </a>

   </td>

   <td>

      Jane

   </td>

</tr>

This is exactly the result of the first iteration of the eachCelebrity component -- a table row for Jane Fonda. I had to abbreviate the contents of the href attribute, otherwise it would not fit into my page. Anyway, for now we can just say that all this long string needs to do is tell Tapestry what to do when the link is clicked. Note however the highlighted "sp=1" piece, which in the language of Tapestry means "service parameter equals 1." You see here how the ID for Jane Fonda was encoded into the link.

The first iteration is completed, and the eachCelebrity component takes the next Celebrity object, for Ernest Gallo, assigns it to the eachCelebrity property and renders the contained markup for the second time. Here is the result:

<tr id="eachCelebrity_0">

   <td>

      <a id="detailsLink_0"

      href="/CelebrityCollector/app? ... direct&amp;sp=2">

         Gallo

      </a>

   </td>

   <td>

      Ernest

   </td>

</tr>

Again, I had to abbreviate the contents of the href attribute of the link, but notice that service parameter this time equals 2, i.e. the ID for Ernest Gallo.

You might also notice how Tapestry takes care of the id attributes of HTML elements. In the first iteration it gave them the names of corresponding components. But id values have to be unique, and in the second iteration Tapestry appended "_0" to the names of the components in attribute values. In the third iteration it appended "_1," and so on.

What is really important to understand however is that whichever link you click, the same listener will be invoked, the onShowDetails() method of the CelebritiesList page class. The only way to know which celebrity was chosen is by using the parameter passed by the link. But how do we get the value of this parameter in the listener method?