...
Where does that content come from? You inject it into your page.
| Code Block |
|---|
| controls | true |
|---|
| linenumberslanguage | truexml |
|---|
|
<t:zone id="search" t:id="searchZone">
<t:form t:id="searchForm" zone="searchZone">
<t:textfield t:id="query" size="20"/>
<input type="submit" value="Search"/>
</t:form>
</t:zone>
<t:block id="searchResults">
<ul>
<li t:type="loop" source="searchHits" value="searchHit">${searchHit}</li>
</ul>
</t:block>
|
| Code Block |
|---|
| controls | true |
|---|
| linenumberslanguage | truejava |
|---|
|
@Inject
private Block searchResults;
Object onSuccessFromSearchForm()
{
searchHits = searchService.performSearch(query);
return searchResults;
}
|
...
In many cases, you just want to re-render the Zone itself, to display updated content. In that case, you don't need a separate <t:block>, instead you can use @InjectComponent to inject the Zone object itself, and return the Zone's body:
| Code Block |
|---|
| controls | true |
|---|
| linenumberslanguage | truejava |
|---|
|
@InjectComponent
private Zone statusZone;
Object onActionFromUpdateStatus()
{
return statusZone.getBody();
}
|
...
From the event handler method, instead of returning a Block or a Component, return a multi-zone update:
| Code Block |
|---|
| controls | true |
|---|
| language | java |
|---|
| title | Multiple Zone Update (5.2) |
|---|
| linenumbers | true |
|---|
|
@Inject
private Block searchResults;
@Inject
private Block statusBlock;
Object onSuccessFromSearchForm()
{
searchHits = searchService.performSearch(query);
message = String.format("Found %,d matching documents", searchHits.size());
return new MultiZoneUpdate("results", searchResults).add("status", statusBlock);
}
|
The above will work in Tapestry 5.3, but MultiZoneUpdate is deprecated. For 5.3 and later, use AjaxResponseRenderer instead:
| Code Block |
|---|
| controls | true |
|---|
| language | java |
|---|
| title | Multiple Zone Update (5.3) | linenumbers | true |
|---|
|
@Inject
private Block searchResults;
@Inject
private Block statusBlock;
@Inject
private AjaxResponseRenderer ajaxResponseRenderer;
void onSuccessFromSearchForm()
{
searchHits = searchService.performSearch(query);
message = String.format("Found %,d matching documents", searchHits.size());
ajaxResponseRenderer.addRender("results", searchResults).addRender("status", statusBlock);
}
|
...
You might start with markup in your template for a component such as a TextField:
| Code Block |
|---|
| controls | true |
|---|
| linenumberslanguage | truexml |
|---|
|
<t:textfield t:id="firstName"/>
|
When the component initially renders as part of a full page render, you get a sensible bit of markup:
| Code Block |
|---|
| controls | true |
|---|
| linenumberslanguage | truexml |
|---|
|
<input id="firstName" name="firstName" type="text">
|
But when the form is inside a Zone and rendered as part of a zone update, the ids get weird:
| Code Block |
|---|
| controls | true |
|---|
| linenumberslanguage | truexml |
|---|
|
<input id="firstName_12a820cc40e" name="firstName" type="text">
|
...
The solution is to add the following to the body of your Zone:
| Code Block |
|---|
|
<div class="t-invisible"/>
|
...