[CONF] Apache Tapestry > Ajax and Zones
Howard M. Lewis Ship edited the page: Ajax and Zones ... The show and update functions (see Zone Functions, below) apply to the Zone , not just the update . Zone Effect Functions (Tapestry 5.3 and earlier) deprecated _This feature refers to client-side logic only present in Tapestry 5.3 or earlier. For 5.4, there are client-side events that are triggered before and after changes to the Zone; listeners on those events can trigger whatever animations they like. ... View Online · Like · View Changes Stop watching space · Manage Notifications This message was sent by Atlassian Confluence 5.0.3, Team Collaboration Software
[CONF] Apache Tapestry > Ajax and Zones
Howard M. Lewis Ship edited the page: Ajax and Zones ... Section Column Code Block title For Tapestry 5.3 and later language java
[CONF] Apache Tapestry > Ajax and Zones
Howard M. Lewis Ship edited the page:
Ajax and Zones
...
Zones are Tapestry's approach to performing partial page updates. A Zone component renders as an HTML element, typically a , with the "t-zone" CSS class. (It also adds some _javascript_ to the page to "wire up" a Tapestry.ZoneManager object to control updating that element.).
A zone is recognizable in the DOM because it will have the attribute data-container-type=zone. The client-side support for Zones is keyed off of this attribute and value.
A Zone can be updated via an EventLink, ActionLink or Select component, or by a Form. All of these components support a zone parameter, which provides the id of the Zone's . Clicking such a link will invoke an event handler method on the server as normal ... except that the return value of the event handler method is used to send a partial page response to the client, and the content of that response is used to update the Zone's in place.
Code Block
language
xml
update
...
The current time is ${currentTime}
...
View Online · Like · View Changes
Stop watching space · Manage Notifications
This message was sent by Atlassian Confluence 5.0.3, Team Collaboration Software
[CONF] Apache Tapestry > Ajax and Zones
Ajax and Zones
Page edited by Bob Harner
Comment:
Got rid of the redundant "Your own Ajax Components" section
Changes (4)
...
{code}
Alternatively, an event handler may return a [Link|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/Link.html] and the client will be redirected to that link. Similarly, returning a page name (as a String), or a page class, or a page instance will send a redirect to the indicated page.
The possible return values are:
* A Block or Component to render as the response. The response will be a JSON hash, with a "content" key whose value is the rendered markup. This is the basis for updates with the Zone component. * The zone's own body * A [JSONObject|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/json/JSONObject.html] or [JSONArray|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/json/JSONArray.html], which will be sent as the response. * A [StreamResponse|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/StreamResponse.html], which will be sent as the response. * A [Link|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/Link.html], which will send a redirect to the client. * A page name (as a String), or a page class, or a page instance, which will send a redirect to the indicated page.
h3. Graceful Degradation
...
You may override {{DIV.t-autocomplete-menu UL}} to change the main look and feel, {{DIV.t-autocomplete-menu LI}} for a normal item in the popup list, and {{DIV.t-autocomplete-menu LI.selected}} for the element under the cursor (or selecting using the arrow keys).
h1. Your own Ajax Components A study of the Autocomplete mixin's [source code|http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-core/src/main/java/org/apache/tapestry5/corelib/mixins/Autocomplete.java?view=markup] should be very helpful: it shows how to ask the ComponentResources object to create a link. The key part is the way Tapestry invokes a component event handler method on the component. For an Ajax request, the return value from an event handler method is processed differently than for a traditional action request. In an normal request, the return value is the normally name of a page (to redirect to), or the Class of a page to redirect to, or an instance of a page to redirect to. For an Ajax request, a redirect is not sent: any response is rendered as part of the same request and sent back immediately. The possible return values are: * A Block or Component to render as the response. The response will be a JSON hash, with a "content" key whose value is the rendered markup. This is the basis for updates with the Zone component. * A [JSONObject|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/json/JSONObject.html] or [JSONArray|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/json/JSONArray.html], which will be sent as the response. * A [StreamResponse|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/StreamResponse.html], which will be sent as the response.
Full Content
Related Articles
Page:
_javascript_
Page:
Ajax and Zones
Page:
_javascript_ FAQ
Page:
Ajax Components FAQ
Page:
Assets
Page:
Component Cheat Sheet
Tapestry provides easy-to-use support for Ajax, the technique of using _javascript_ to dynamically updating parts of a web page with content from the server without redrawing the whole page. With Tapestry, you can do simple Ajax updates without having to write any _javascript_ code at all.
Ajax support is included in many built-in components and component mixins via the zone parameter.
Zones
Zones are Tapestry's approach to performing partial page updates. A Zone
[CONF] Apache Tapestry > Ajax and Zones
Ajax and Zones
Page edited by DEMEY Emmanuel
Changes (1)
...
@Inject private Request request;
@InjectComponent private Zone zone;
... Object onClickFromSomeLink()
...
Full Content
Related Articles
Page:
_javascript_
Page:
Ajax and Zones
Page:
_javascript_ FAQ
Page:
Component Cheat Sheet
Page:
Ajax Components FAQ
Page:
Assets
Tapestry provides easy-to-use support for Ajax, the technique of using _javascript_ to dynamically updating parts of a web page with content from the server without redrawing the whole page. But with Tapestry, you don't have to write any _javascript_ code.
Ajax support is included in many built-in components and component mixins.
Zones
Zones are Tapestry's approach to performing partial page updates. A Zone component renders as an HTML element, typically a , with the "t-zone" CSS class. (It also adds some _javascript_ to the page to "wire up" a Tapestry.ZoneManager object to control updating that element.)
A Zone can be updated via an EventLink, ActionLink or Select component, or by a Form. All of these components support a zone parameter, which provides the id of the Zone's . Clicking such a link will invoke an event handler method on the server as normal ... except that the return value of the event handler method is used to send a partial page response to the client, and the content of that response is used to update the Zone's in place.
An Update div within a Zone div
This feature is removed starting with Tapestry 5.4
In many situations, a Zone is a kind of "wrapper" or "container" for dynamic content; one that provides a look and feel ... a bit of wrapping markup to create a border. In that situation, the Zone may contain an update .
An Update is specifically a element marked with the CSS class "t-zone-update", inside the Zone's .
If an Update div exists within a Zone div, then when Tapestry updates a zone only the update 's content will be changed, rather than the entire Zone .
The show and update functions (see Zone Functions, below) apply to the Zone , not just the update .
Event Handler Return Types
In a traditional request, the return value of an event handler method is used to determine which page will render a complete response, and a redirect is sent to the client to render the new page (as a new request).
In contrast, with a Zone update, the return value is used to render a partial response within the same request.
This return value is typically an injected component or block. The value will be rendered, and that markup will be used on the client side to update the Zone's .
Alternatively, an event handler may return a Link and the client will be redirected to that link. Similarly, returning a page name (as a String), or a page class, or a page instance will send a redirect to the indicated page.
Multiple Zone Updates
An event handler may cause multiple zones to be updated on the client side. To accomplish this, return a MultiZoneUpdate object configured with the zones to update. You must know the client-side id for each zone to update (the best way for this is to lock down the zone's id using the id parameter of the Zone component).
The renderer for each zone can be a block or component, or a Renderable or RenderCommand ... or an object, such as String, that can be coerced to either of these. Typically, you will inject a Block or Component and return that:
@Inject
private Form registrationForm;
@Inject Block registrationHelp;
Object onActionFromRegister()
{
return new MultiZoneUpdate("userInput", registrationForm).add("helpPanel", registrationHelp);
}
This implies that there are two zones, "userInput" and "helpPanel", somewhere in the rendered page, waiting to receive the updated content.
Graceful Degradation
Users who do not have _javascri
[CONF] Apache Tapestry > Ajax and Zones
Ajax and Zones
Page edited by Bob Harner
Comment:
Noted removal of t-zone-update starting with 5.4
Changes (1)
...
h3. An Update div within a Zone div
{deprecated}_This feature is removed starting with Tapestry 5.4_{deprecated}
In many situations, a Zone is a kind of "wrapper" or "container" for dynamic content; one that provides a look and feel ... a bit of wrapping markup to create a border. In that situation, the Zone may contain an update .
...
Full Content
Related Articles
Page:
Ajax and Zones
Page:
_javascript_
Page:
_javascript_ FAQ
Page:
Component Cheat Sheet
Page:
Ajax Components FAQ
Page:
Assets
Tapestry provides easy-to-use support for Ajax, the technique of using _javascript_ to dynamically updating parts of a web page with content from the server without redrawing the whole page. But with Tapestry, you don't have to write any _javascript_ code.
Ajax support is included in many built-in components and component mixins.
Zones
Zones are Tapestry's approach to performing partial page updates. A Zone component renders as an HTML element, typically a , with the "t-zone" CSS class. (It also adds some _javascript_ to the page to "wire up" a Tapestry.ZoneManager object to control updating that element.)
A Zone can be updated via an EventLink, ActionLink or Select component, or by a Form. All of these components support a zone parameter, which provides the id of the Zone's . Clicking such a link will invoke an event handler method on the server as normal ... except that the return value of the event handler method is used to send a partial page response to the client, and the content of that response is used to update the Zone's in place.
An Update div within a Zone div
This feature is removed starting with Tapestry 5.4
In many situations, a Zone is a kind of "wrapper" or "container" for dynamic content; one that provides a look and feel ... a bit of wrapping markup to create a border. In that situation, the Zone may contain an update .
An Update is specifically a element marked with the CSS class "t-zone-update", inside the Zone's .
If an Update div exists within a Zone div, then when Tapestry updates a zone only the update 's content will be changed, rather than the entire Zone .
The show and update functions (see Zone Functions, below) apply to the Zone , not just the update .
Event Handler Return Types
In a traditional request, the return value of an event handler method is used to determine which page will render a complete response, and a redirect is sent to the client to render the new page (as a new request).
In contrast, with a Zone update, the return value is used to render a partial response within the same request.
This return value is typically an injected component or block. The value will be rendered, and that markup will be used on the client side to update the Zone's .
Alternatively, an event handler may return a Link and the client will be redirected to that link. Similarly, returning a page name (as a String), or a page class, or a page instance will send a redirect to the indicated page.
Multiple Zone Updates
An event handler may cause multiple zones to be updated on the client side. To accomplish this, return a MultiZoneUpdate object configured with the zones to update. You must know the client-side id for each zone to update (the best way for this is to lock down the zone's id using the id parameter of the Zone component).
The renderer for each zone can be a block or component, or a Renderable or RenderCommand ... or an object, such as String, that can be coerced to either of these. Typically, you will inject a Block or Component and return that:
@Inject
private Form registrationForm;
@Inject Block registrationHelp;
Object onA
[CONF] Apache Tapestry > Ajax and Zones
Ajax and Zones
Page edited by DEMEY Emmanuel
Changes (1)
...
List matches = accountDAO.findByPartialAccountName(partial);
List result = new ArrayList():;
for (Account a : matches)
...
Full Content
Related Articles
Page:
Ajax and Zones
Page:
_javascript_
Page:
Assets
Page:
Component Cheat Sheet
Page:
Ajax Components FAQ
Page:
_javascript_ FAQ
Tapestry provides easy-to-use support for Ajax, the technique of using _javascript_ to dynamically updating parts of a web page with content from the server without redrawing the whole page. But with Tapestry, you don't have to write any _javascript_ code.
Ajax support is included in many built-in components and component mixins.
Zones
Zones are Tapestry's approach to performing partial page updates. A Zone component renders as an HTML element, typically a , with the "t-zone" CSS class. (It also adds some _javascript_ to the page to "wire up" a Tapestry.ZoneManager object to control updating that element.)
A Zone can be updated via an EventLink, ActionLink or Select component, or by a Form. All of these components support a zone parameter, which provides the id of the Zone's . Clicking such a link will invoke an event handler method on the server as normal ... except that the return value of the event handler method is used to send a partial page response to the client, and the content of that response is used to update the Zone's in place.
An Update div within a Zone div
In many situations, a Zone is a kind of "wrapper" or "container" for dynamic content; one that provides a look and feel ... a bit of wrapping markup to create a border. In that situation, the Zone may contain an update .
An Update is specifically a element marked with the CSS class "t-zone-update", inside the Zone's .
If an Update div exists within a Zone div, then when Tapestry updates a zone only the update 's content will be changed, rather than the entire Zone .
The show and update functions (see Zone Functions, below) apply to the Zone , not just the update .
Event Handler Return Types
In a traditional request, the return value of an event handler method is used to determine which page will render a complete response, and a redirect is sent to the client to render the new page (as a new request).
In contrast, with a Zone update, the return value is used to render a partial response within the same request.
This return value is typically an injected component or block. The value will be rendered, and that markup will be used on the client side to update the Zone's .
Alternatively, an event handler may return a Link and the client will be redirected to that link. Similarly, returning a page name (as a String), or a page class, or a page instance will send a redirect to the indicated page.
Multiple Zone Updates
An event handler may cause multiple zones to be updated on the client side. To accomplish this, return a MultiZoneUpdate object configured with the zones to update. You must know the client-side id for each zone to update (the best way for this is to lock down the zone's id using the id parameter of the Zone component).
The renderer for each zone can be a block or component, or a Renderable or RenderCommand ... or an object, such as String, that can be coerced to either of these. Typically, you will inject a Block or Component and return that:
@Inject
private Form registrationForm;
@Inject Block registrationHelp;
Object onActionFromRegister()
{
return new MultiZoneUpdate("userInput", registrationForm).add("helpPanel", registrationHelp);
}
This implies that there are two zones, "userInput" and "helpPanel", somewhere in the rendered page, waiting to receive the updated content.
Graceful Degradation
Users who do not have _javascript_ enabled may click EventL
[CONF] Apache Tapestry > Ajax and Zones
Ajax and Zones
Page edited by Howard M. Lewis Ship
Comment:
Use JavaDoc not 5.2 component reference
Changes (3)
...
h2. Zones
Zones are Tapestry's approach to performing partial page updates. A [Zone component|http://tapestry.apache.org/current/tapestry-core/ref/org/apache/tapestry5/corelib/components/Zone.html] component|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/Zone.html] renders as an HTML element, typically a , with the "t-zone" CSS class. (It also adds some _javascript_ to the page to "wire up" a Tapestry.ZoneManager object to control updating that element.)
A Zone can be updated via an EventLink, ActionLink or Select component, or by a Form. All of these components support a zone parameter, which provides the id of the Zone's . Clicking such a link will invoke an event handler method on the server as normal ... except that the return value of the event handler method is used to send a _partial page response_ to the client, and the content of that response is used to update the Zone's in place.
...
h2. Autocomplete Mixin
The [Autocomplete|http://tapestry.apache.org/current/tapestry-core/ref/org/apache/tapestry5/corelib/mixins/Autocomplete.html] [Autocomplete|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/mixins/Autocomplete.html] mixin exists to allow a text field to query the server for completions for a partially entered phrase. It is often used in situations where the field exists to select a single value from a large set, too large to successfully download to the client as a drop down list; for example, when the number of values to select from is numbered in the thousands.
Autocomplete can be added to an existing text field:
...
{code}
The mixin can be configured in a number of ways, see the [component reference|http://tapestry.apache.org/current/tapestry-core/ref/org/apache/tapestry5/corelib/mixins/Autocomplete.html]. reference|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/mixins/Autocomplete.html].
When the user types into the field, the client-side _javascript_ will send a request to the server to get completions.
...
Full Content
Related Articles
Page:
Ajax and Zones
Page:
_javascript_
Page:
Assets
Page:
_javascript_ FAQ
Page:
Component Cheat Sheet
Page:
Ajax Components FAQ
Tapestry provides easy-to-use support for Ajax, the technique of using _javascript_ to dynamically updating parts of a web page with content from the server without redrawing the whole page. But with Tapestry, you don't have to write any _javascript_ code.
Ajax support is included in many built-in components and component mixins.
Zones
Zones are Tapestry's approach to performing partial page updates. A Zone component renders as an HTML element, typically a , with the "t-zone" CSS class. (It also adds some _javascript_ to the page to "wire up" a Tapestry.ZoneManager object to control updating that element.)
A Zone can be updated via an EventLink, ActionLink or Select component, or by a Form. All of these components support a zone parameter, which provides the id of the Zone's . Clicking such a link will invoke an event handler method on the server as normal ... except that the return value of the event handler method is used to send a partial page response to the client, and the content of that response is used to update the Zone's in place.
An Update div within a Zone div
In many situations, a Zone is a kind of "wrapper" or "container" for dynamic content; one that provides a look and feel ... a bit of wrapping markup to create a border. In that situation, the Zone may contain an update .
An Upda
[CONF] Apache Tapestry > Ajax and Zones
Ajax and Zones
Page edited by Bob Harner
Comment:
Added example code for graceful degredation
Changes (3)
...
Users who do not have _javascript_ enabled may click EventLinks (or ActionLinks, or Forms) that are configured to update a Zone. When that occurs, the request will still be sent to the server, but Tapestry will handle it as a _traditional_ request.
To support graceful degradation, you should detect that case in your event handler method and return a traditional response: a page, page name or page class. This is accomplished by injecting the [Request|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/services/Request.html] object, and invoking the isXHR() method. This value will be true for Ajax requests, and false for traditional request.
This is accomplished by injecting the [Request|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/services/Request.html] object, and invoking the isXHR() method. This value will be true for Ajax requests, and false for traditional request.
{code:java} @Inject private Request request; ... Object onClickFromSomeLink() { if(request.isXHR()) {return zone.getBody(); // AJAX request, return zone body } else {return null; // non-AJAX request, redraw current page } } {code}
...
Full Content
Related Articles
Page:
Ajax and Zones
Page:
_javascript_
Page:
Assets
Page:
_javascript_ FAQ
Page:
Component Cheat Sheet
Page:
Ajax Components FAQ
Tapestry provides easy-to-use support for Ajax, the technique of using _javascript_ to dynamically updating parts of a web page with content from the server without redrawing the whole page. But with Tapestry, you don't have to write any _javascript_ code.
Ajax support is included in many built-in components and component mixins.
Zones
Zones are Tapestry's approach to performing partial page updates. A Zone component renders as an HTML element, typically a , with the "t-zone" CSS class. (It also adds some _javascript_ to the page to "wire up" a Tapestry.ZoneManager object to control updating that element.)
A Zone can be updated via an EventLink, ActionLink or Select component, or by a Form. All of these components support a zone parameter, which provides the id of the Zone's . Clicking such a link will invoke an event handler method on the server as normal ... except that the return value of the event handler method is used to send a partial page response to the client, and the content of that response is used to update the Zone's in place.
An Update div within a Zone div
In many situations, a Zone is a kind of "wrapper" or "container" for dynamic content; one that provides a look and feel ... a bit of wrapping markup to create a border. In that situation, the Zone may contain an update .
An Update is specifically a element marked with the CSS class "t-zone-update", inside the Zone's .
If an Update div exists within a Zone div, then when Tapestry updates a zone only the update 's content will be changed, rather than the entire Zone .
The show and update functions (see Zone Functions, below) apply to the Zone , not just the update .
Event Handler Return Types
In a traditional request, the return value of an event handler method is used to determine which page will render a complete response, and a redirect is sent to the client to render the new page (as a new request).
In contrast, with a Zone update, the return value is used to render a partial response within the same request.
This return value is typically an injected component or block. The value will be rendered, and that markup will be used on the client side to update the Zone's .
Alternatively, an event handler may return a Link and the
[CONF] Apache Tapestry > Ajax and Zones
Ajax and Zones
Page edited by Bob Harner
Comment:
Added Select to list of components that can update a zone
Changes (9)
...
Zones are Tapestry's approach to performing partial page updates. A [Zone component|http://tapestry.apache.org/current/tapestry-core/ref/org/apache/tapestry5/corelib/components/Zone.html] renders as an HTML element, typically a , with the "t-zone" CSS class. (It also adds some _javascript_ to the page to "wire up" a Tapestry.ZoneManager object to control updating that element.)
A Zone can be updated via an EventLink or EventLink, ActionLink or Select component, or by a Form. All of these components support a zone parameter, which provides the id of the Zone's . Clicking such a link will invoke an event handler method on the server as normal ... except that the return value of the event handler method is used to send a _partial page response_ to the client, and the content of that response is used to update the Zone's in place.
h3. An Update div within a Zone div
...
If a Zone is already visible, then a different effect function is used to highlight the change. By default, the highlight() function is called, which performs a yellow fade to highlight that the content of the Zone has changed. Alternatively, you can specify a different effect function with the Zone's update parameter:
|| Tapestry.ElementEffect Function || Purpose Result ||
| highlight() | (the default) highlight changes to an already-visible zone |
| show() | make the zone visible if it isn't already visible |
| highlight() | Highlight changes to an already-visible zone |
| slidedown() | Sscroll the content down |
| slideup() | Sslide the content back up (opposite of slidedown) |
| fade() | Ffade the content out (opposite of show) |
To have Tapestry update a zone without the usual yellow highlight effect, just specify "show" for the update parameter: {{}}
{code}{code}
You may also define and use your own _javascript_ effect function (with lower-case names), like this:
...
Full Content
Related Articles
Page:
_javascript_
Page:
Ajax and Zones
Page:
Component Cheat Sheet
Page:
Ajax Components FAQ
Page:
_javascript_ FAQ
Page:
Assets
Tapestry provides easy-to-use support for Ajax, the technique of using _javascript_ to dynamically updating parts of a web page with content from the server without redrawing the whole page. But with Tapestry, you don't have to write any _javascript_ code.
Ajax support is included in many built-in components and component mixins.
Zones
Zones are Tapestry's approach to performing partial page updates. A Zone component renders as an HTML element, typically a , with the "t-zone" CSS class. (It also adds some _javascript_ to the page to "wire up" a Tapestry.ZoneManager object to control updating that element.)
A Zone can be updated via an EventLink, ActionLink or Select component, or by a Form. All of these components support a zone parameter, which provides the id of the Zone's . Clicking such a link will invoke an event handler method on the server as normal ... except that the return value of the event handler method is used to send a partial page response to the client, and the content of that response is used to update the Zone's in place.
An Update div within a Zone div
In many situations, a Zone is a kind of "wrapper" or "container" for dynamic content; one that provides a look and feel ... a bit of wrapping markup to create a border. In that situation, the Zone may contain an update .
An Update is specifically a element marked with the CSS class "t-zone-update", inside the Zo
[CONF] Apache Tapestry > Ajax and Zones
Ajax and Zones
Page edited by Howard M. Lewis Ship
Changes (2)
...
{code:_javascript_}
Tapestry.ElementEffect.myeffectname = function(element){ YourJavascriptCodeGoesHere; } };
{code}
h2. Zone Component Id vs. Zone Element Id Like all Tapestry components, Zones have a component id, specified using the {{t:id}} attribute. If you do not assign a component id, a unique id is assigned by Tapestry. However, to coordinate things on the client side, it is necessary for components that wish to update the zone know the _client-side element id_. This is specified with the {{id}} parameter of the Zone component. If the {{id}} parameter is not bound, then a unique value (for the current page and render) is generated by Tapestry and this value is difficult to predict. The actual value will be available as the {{clientId}} property of the Zone component itself. Remember that the component id ({{t:id}}) is used to _inject_ the Zone component into the containing page or component. The client-side id ({{id}}) is used ... on the client side to orchestrate requests and updates. You will often seen the following construct: {code:xml} ... update {code} {since:since=5.2} If the Form or Link is enclosed by the Zone itself, then the {{zone}} parameter may be set to the special value {{^}}. The carat is evaluated, on the client side, by searching up form the form or link element for the first enclosing element with the {{t-zone}} CSS class. In this way, the client-side coordination can occur without having to know what the specific client-side id of the Zone is. Because of this, in many cases, it is not longer necessary to specify the Zone's {{id}} parameter. {since}
h3. Zone Limitations
...
Full Content
Related Articles
Page:
Ajax and Zones
Page:
_javascript_
Page:
Component Cheat Sheet
Page:
Assets
Page:
_javascript_ FAQ
Page:
Ajax Components FAQ
Tapestry provides easy-to-use support for Ajax, the technique of using _javascript_ to dynamically updating parts of a web page with content from the server without redrawing the whole page. But with Tapestry, you don't have to write any _javascript_ code.
Ajax support is included in many built-in components and component mixins.
Zones
Zones are Tapestry's approach to performing partial page updates. A Zone component renders as an HTML element, typically a , with the "t-zone" CSS class. (It also adds some _javascript_ to the page to "wire up" a Tapestry.ZoneManager object to control updating that element.)
A Zone can be updated via an EventLink or ActionLink component, or by a Form. All of these components support a zone parameter, which provides the id of the Zone's . Clicking such a link will invoke an event handler method on the server as normal ... except that the return value of the event handler method is used to send a partial page response to the client, and the content of that response is used to update the Zone's in place.
An Update div within a Zone div
In many situations, a Zone is a kind of "wrapper" or "container" for dynamic content; one that provides a look and feel ... a bit of wrapping markup to create a border. In that situation, the Zone may contain an update .
An Update is specifically a element marked with the CSS class "t-zone-update", inside the Zone's .
If an Update div exists within a Zone div, then when Tapestry updates a zone only the update 's content will be changed, rather than the entire Zone .
The show and update functions (see Zone Functions, below) apply to the Zone , not just the update .
Event Handler Return Types
In a traditional request, the return value of an event handler method is used to determine which page will render a complete response, and a redirect is sent to the client to render the ne
[CONF] Apache Tapestry > Ajax and Zones
Ajax and Zones
Page edited by Bob Harner
Comment:
Listed the Tapestry.ElementEffect functions, resolving an old TODO on the _javascript_ page
Changes (7)
...
h2. Zones
Zones are Tapestry's approach to performing partial page updates. A [Zone component|http://tapestry.apache.org/current/tapestry-core/ref/org/apache/tapestry5/corelib/components/Zone.html] renders as an HTML element, typically a , with the "t-zone" CSS class. (It also adds some _javascript_ to the page to "wire up" a Tapestry.ZoneManager object to control updating that element.)
A Zone can be updated via an EventLink or ActionLink component, or by a Form. All of these components support a zone parameter, which provides the id of the Zone's . Clicking such a link will invoke an event handler method on the server as normal ... except that the return value of the event handler method is used to send a _partial page response_ to the client, and the content of that response is used to update the Zone's in place.
...
If an Update div exists within a Zone div, then when Tapestry updates a zone only the update 's content will be changed, rather than the entire Zone .
The show and update functions (see Zone Functions, below) apply to the Zone , not just the update .
h3. Event Handler Return Types
...
h3. Zone Functions
A Zone may be initially visible or invisible. When a Zone is updated, it is made visible if not currently so. This is accomplished via a function on the Tapestry.ElementEffect client-side object. By default, the show() function is used for this purpose. The Zone's show parameter is the _name_ of a Tapestry.ElementEffect function.
A Zone may be initially visible or invisible. When a Zone is updated, it is made visible if not currently so. This is accomplished via a function on the Tapestry.ElementEffect client-side object. By default, the show() function is used for this purpose. If you want Tapestry to call a different Tapestry.ElementEffect function when updates occur, specify its name with the zone's show parameter.
If a Zone is already visible, then a different function is used to highlight the change. Here it is the Zone's update parameter, and a default highlight() function, which performs a yellow fade to highlight that the content of the Zone has changed.
If a Zone is already visible, then a different effect function is used to highlight the change. By default, the highlight() function is called, which performs a yellow fade to highlight that the content of the Zone has changed. Alternatively, you can specify a different effect function with the Zone's update parameter:
|| Tapestry.ElementEffect Function || Purpose || | show() | make the zone visible if it isn't already visible | | highlight() | Highlight changes to an already-visible zone | | slidedown() | Scroll the content down | | slideup() | Slide the content back up (opposite of slidedown) | | fade() | Fade the content out (opposite of show) | To have Tapestry update a zone without the usual yellow highlight effect, just specify "show" for the update parameter: {{}} You may also define and use your own _javascript_ effect function (with lower-case names), like this: {code:_javascript_} Tapestry.ElementEffect.myeffectname = function(element){ YourJavascriptCodeGoesHere; } {code}
h3. Zone Limitations
...
Full Content
Related Articles
Page:
_javascript_
Page:
Ajax and Zones
Page:
Component Cheat Sheet
Page:
Assets
Page:
_javascript_ FAQ
Page:
Ajax Components FAQ
Tapestry provides easy-to-use support for Ajax, the technique of using _javascript_ to dynamically updat
[CONF] Apache Tapestry > Ajax and Zones
Ajax and Zones
Page added by Bob Harner
Related Articles
Page:
Ajax & _javascript_
Page:
Component Cheat Sheet
Page:
Ajax Components FAQ
Page:
_javascript_ FAQ
Page:
Assets
Tapestry provides easy-to-use support for Ajax, the technique of using _javascript_ to dynamically updating parts of a web page with content from the server without redrawing the whole page. But with Tapestry, you don't have to write any _javascript_ code.
Zones
Zones are Tapestry's approach to performing partial page updates. A Zone component renders as an HTML element, typically a , with the "t-zone" CSS class. (It also adds some _javascript_ to the page to "wire up" a Tapestry.ZoneManager object to control updating that element.)
A Zone can be updated via an EventLink or ActionLink component, or by a Form. All of these components support a zone parameter, which provides the id of the Zone's . Clicking such a link will invoke an event handler method on the server as normal ... except that the return value of the event handler method is used to send a partial page response to the client, and the content of that response is used to update the Zone's in place.
An Update div within a Zone div
In many situations, a Zone is a kind of "wrapper" or "container" for dynamic content; one that provides a look and feel ... a bit of wrapping markup to create a border. In that situation, the Zone may contain an update .
An Update is specifically a element marked with the CSS class "t-zone-update", inside the Zone's .
If an Update div exists within a Zone div, then when Tapestry updates a zone only the update 's content will be changed, rather than the entire Zone .
The show and update functions apply to the Zone .
Event Handler Return Types
In a traditional request, the return value of an event handler method is used to determine which page will render a complete response, and a redirect is sent to the client to render the new page (as a new request).
In contrast, with a Zone update, the return value is used to render a partial response within the same request.
This return value is typically an injected component or block. The value will be rendered, and that markup will be used on the client side to update the Zone's .
Alternatively, an event handler may return a Link and the client will be redirected to that link. Similarly, returning a page name (as a String), or a page class, or a page instance will send a redirect to the indicated page.
Multiple Zone Updates
An event handler may cause multiple zones to be updated on the client side. To accomplish this, return a MultiZoneUpdate object configured with the zones to update. You must know the client-side id for each zone to update (the best way for this is to lock down the zone's id using the id parameter of the Zone component).
The renderer for each zone can be a block or component, or a Renderable or RenderCommand ... or an object, such as String, that can be coerced to either of these. Typically, you will inject a Block or Component and return that:
@Inject
private Form registrationForm;
@Inject Block registrationHelp;
Object onActionFromRegister()
{
return new MultiZoneUpdate("userInput", registrationForm).add("helpPanel", registrationHelp);
}
This implies that there are two zones, "userInput" and "helpPanel", somewhere in the rendered page, waiting to receive the updated content.
Graceful Degradation
Users who do not have _javascript_ enabled may click EventLinks (or ActionLinks, or Forms) that are configured to update a Zone. When that occurs, the request will still be sent to the server, but Tapestry will handle it as a traditional request.
To support graceful degradation, you should detect that case and return a traditional response: a page, page name or page class.
This is accomplished by injecting the Request object, and invoking the isXHR() method. This value will be true for Ajax requests, and false for traditional request.
Zone Functions
A Zone may be initially visible or invisible. When a Zone is updated, it is made visible if not currently so. This is accomplished via a function on the Tapestry.ElementE
