Multiple use of a custom component containing a zone

Question

I'm facing a problem when using tapestry 5.2.0 : using multiple times a component containing a zone.

At this point, the component is used 3 times on the same page but only one instance is working well. The tml associated to the component looks this way :

<t:container xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd">
    <t:zone t:id="myZoneId">
        <!-- component's zone content goes there -->
    </t:zone>
</t:container>

The cause of this problem is very simple, as we can see, if we use this component multiple times on the same page, then the zone id will not be unique, and multiple zones with the same id will be present in the page.

Now here's my question : what approach can be used in order to make the zone id in the component unique, whenever the component is used once or several times and without using the zone outside of the container.

Thank you in advance for your ideas.

Answer 1

You will have to take care of the zone IDs manually, otherwise they'll all end up with an auto-generated client ID.

In your TML, you can specify the id attribute (without the t: namespace) as well, which then is used as-is in the rendered markup:

<t:zone t:id="myZoneId" id="${zoneClientId}">
    ...
</t:zone>

If there is some kind of unique value present in your component (an ID, for example), use that to construct the client-side ID:

@Parameter
private MyType myParam;

public String getZoneClientId() {
    return "myZone-" + myParam.getId();
}

You can then use the same getter method for the zone parameter on your links or forms that update the zone as well:

<a t:type="ActionLink" t:zone="prop:zoneClientId">...</a>

If the link or form is contained inside the zone itself, there is an even simpler solution:

<t:zone t:id="myZoneId">
   ...
   <a t:type="ActionLink" t:zone="^">...</a>
</t:zone>

The special value ^ causes Tapestry to use the first enclosing zone as the element to update.

Also take a look at the Ajax and Zones section in the docs, which explains some of this in more detail.