Author: buildbot
Date: Sat Mar 18 14:20:11 2017
New Revision: 1008579
Log:
Production update by buildbot for tapestry
Modified:
websites/production/tapestry/content/ajax-and-zones.html
websites/production/tapestry/content/cache/main.pageCache
Modified: websites/production/tapestry/content/ajax-and-zones.html
==============================================================================
--- websites/production/tapestry/content/ajax-and-zones.html (original)
+++ websites/production/tapestry/content/ajax-and-zones.html Sat Mar 18
14:20:11 2017
@@ -47,13 +47,26 @@
<div class="wrapper bs">
- <div id="navigation"><div class="nav"><ul class="alternate"><li><a
href="index.html">Home</a></li><li><a href="getting-started.html">Getting
Started</a></li><li><a href="documentation.html">Documentation</a></li><li><a
href="download.html">Download</a></li><li><a
href="about.html">About</a></li><li><a class="external-link"
href="http://www.apache.org/licenses/LICENSE-2.0";>License</a></li><li><a
href="community.html">Community</a></li><li><a class="external-link"
href="http://www.apache.org/security/";>Security</a></li><li><a
class="external-link" href="http://www.apache.org/";>Apache</a></li><li><a
class="external-link"
href="http://www.apache.org/foundation/sponsorship.html";>Sponsorship</a></li><li><a
class="external-link"
href="http://www.apache.org/foundation/thanks.html";>Thanks</a></li></ul></div></div>
+ <div id="navigation"><div class="nav"><ul class="alternate"><li><a
href="index.html">Home</a></li><li><a href="getting-started.html">Getting
Started</a></li><li><a href="documentation.html">Documentation</a></li><li><a
href="download.html">Download</a></li><li><a
href="about.html">About</a></li><li><a class="external-link"
href="http://www.apache.org/licenses/LICENSE-2.0";>License</a></li><li><a
href="community.html">Community</a></li><li><a class="external-link"
href="http://www.apache.org/security/";>Security</a></li><li><a
class="external-link" href="http://www.apache.org/";>Apache</a></li><li><a
class="external-link"
href="http://www.apache.org/foundation/sponsorship.html";>Sponsorship</a></li><li><a
class="external-link"
href="http://www.apache.org/foundation/thanks.html";>Thanks</a></li></ul></div>
+
+</div>
<div id="top">
- <div id="smallbanner"><div class="searchbox"
style="float:right;margin: .3em 1em .1em 1em"><span style="color: #999;
font-size: 90%">Tapestry docs, issues, wikis & blogs:</span><form
enctype="application/x-www-form-urlencoded" method="get"
action="http://tapestry.apache.org/search.html";>
- <input type="text" name="q">
- <input type="submit" value="Search">
-</form></div><div class="emblem" style="float:left"><p><a
href="index.html"><span class="confluence-embedded-file-wrapper"><img
class="confluence-embedded-image confluence-external-resource"
src="http://tapestry.apache.org/images/tapestry_small.png";
data-image-src="http://tapestry.apache.org/images/tapestry_small.png";></span></a></p></div><div
class="title" style="float:left; margin: 0 0 0 3em"><h1
id="SmallBanner-PageTitle">Ajax and Zones</h1></div></div>
+ <div id="smallbanner"><div class="searchbox"
style="float:right;margin: .3em 1em .1em 1em"><span style="color: #999;
font-size: 90%">Tapestry docs, issues, wikis & blogs:</span>
+<form enctype="application/x-www-form-urlencoded" method="get"
action="http://tapestry.apache.org/search.html";>
+ <input type="text" name="q">
+ <input type="submit" value="Search">
+</form>
+
+</div>
+
+
+<div class="emblem" style="float:left"><p><a href="index.html"><span
class="confluence-embedded-file-wrapper"><img class="confluence-embedded-image
confluence-external-resource"
src="http://tapestry.apache.org/images/tapestry_small.png";
data-image-src="http://tapestry.apache.org/images/tapestry_small.png";></span></a></p></div>
+
+
+<div class="title" style="float:left; margin: 0 0 0 3em"><h1
id="SmallBanner-PageTitle">Ajax and Zones</h1></div>
+
+</div>
<div class="clearer"></div>
</div>
@@ -65,61 +78,122 @@
</div>
<div id="content">
- <div id="ConfluenceContent"><p>Tapestry provides easy-to-use
support for <strong>Ajax</strong>, 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.</p><div class="aui-label"
style="float:right" title="Related Articles"><h3>Related Articles</h3><ul
class="content-by-label"><li>
- <div>
- <span class="icon aui-icon aui-icon-small aui-iconfont-page-default"
title="Page">Page:</span>
- </div>
- <div class="details">
- <a href="ajax-and-zones.html">Ajax and Zones</a>
- </div> </li><li>
- <div>
- <span class="icon aui-icon aui-icon-small aui-iconfont-page-default"
title="Page">Page:</span>
- </div>
- <div class="details">
- <a href="legacy-javascript.html">Legacy JavaScript</a>
- </div> </li><li>
- <div>
- <span class="icon aui-icon aui-icon-small aui-iconfont-page-default"
title="Page">Page:</span>
- </div>
- <div class="details">
- <a href="coffeescript.html">CoffeeScript</a>
- </div> </li><li>
- <div>
- <span class="icon aui-icon aui-icon-small aui-iconfont-page-default"
title="Page">Page:</span>
- </div>
- <div class="details">
- <a href="client-side-javascript.html">Client-Side JavaScript</a>
- </div> </li><li>
- <div>
- <span class="icon aui-icon aui-icon-small aui-iconfont-page-default"
title="Page">Page:</span>
- </div>
- <div class="details">
- <a href="javascript-modules.html">JavaScript Modules</a>
- </div> </li><li>
- <div>
- <span class="icon aui-icon aui-icon-small aui-iconfont-page-default"
title="Page">Page:</span>
- </div>
- <div class="details">
- <a href="javascript-faq.html">JavaScript FAQ</a>
- </div> </li><li>
- <div>
- <span class="icon aui-icon aui-icon-small aui-iconfont-page-default"
title="Page">Page:</span>
- </div>
- <div class="details">
- <a href="ajax-components-faq.html">Ajax Components FAQ</a>
- </div> </li><li>
- <div>
- <span class="icon aui-icon aui-icon-small aui-iconfont-page-default"
title="Page">Page:</span>
- </div>
- <div class="details">
- <a href="component-cheat-sheet.html">Component Cheat Sheet</a>
- </div> </li><li>
- <div>
- <span class="icon aui-icon aui-icon-small aui-iconfont-page-default"
title="Page">Page:</span>
- </div>
- <div class="details">
- <a href="assets.html">Assets</a>
- </div> </li></ul></div><p>Ajax support is included in many <a
href="component-reference.html">built-in components</a> and <a
href="component-mixins.html">component mixins</a> via the <code>zone</code>
parameter.</p><h2 id="AjaxandZones-Zones">Zones</h2><p>Zones are Tapestry's
approach to performing partial page updates. A <a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/Zone.html";>Zone
component</a> renders as an HTML element, typically a <div>.</p><p>A
zone is recognizable in the DOM because it will have the
attribute <code>data-container-type=zone</code>. The client-side support
for Zones is keyed off of this attribute and value.</p><p><span
style="line-height: 1.4285715;">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 <div>. Clicking such
a link will invoke an event handl
er method on the server as normal ... except that the return value of the
event handler method is used to send a </span><em style="line-height:
1.4285715;">partial page response</em><span style="line-height: 1.4285715;"> to
the client, and the content of that response is used to update the Zone's
<div> in place.</span></p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeContent panelContent pdl">
+ <div id="ConfluenceContent"><p>Tapestry provides easy-to-use
support for <strong>Ajax</strong>, 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.</p><div class="aui-label"
style="float:right" title="Related Articles">
+
+
+
+
+
+
+
+
+<h3>Related Articles</h3>
+
+<ul class="content-by-label"><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="ajax-and-zones.html">Ajax and Zones</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="legacy-javascript.html">Legacy JavaScript</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="coffeescript.html">CoffeeScript</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="client-side-javascript.html">Client-Side
JavaScript</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="javascript-modules.html">JavaScript
Modules</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="javascript-faq.html">JavaScript FAQ</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="ajax-components-faq.html">Ajax Components
FAQ</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="component-cheat-sheet.html">Component Cheat
Sheet</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="assets.html">Assets</a>
+
+
+ </div>
+ </li></ul>
+</div>
+
+
+<p>Ajax support is included in many <a
href="component-reference.html">built-in components</a> and <a
href="component-mixins.html">component mixins</a> via
the <code>async</code> parameter (in Tapestry 5.4+) and
the <code>zone</code> parameter (for earlier versions).</p><div
class="code panel pdl" style="border-width: 1px;"><div class="codeHeader
panelHeader pdl" style="border-bottom-width: 1px;"><b>Page or component
template (partial)</b></div><div class="codeContent panelContent pdl">
+<pre class="brush: xml; gutter: false; theme: Default"
style="font-size:12px;"><t:eventlink event="updateTime"
async="true">update</t:eventlink>
+...
+<t:zone t:id="timeArea" id="timeArea">
+ The current time is ${currentTime}
+</t:zone>
+</pre>
+</div></div><div class="code panel pdl" style="border-width: 1px;"><div
class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Page or
component class (partial)</b></div><div class="codeContent panelContent pdl">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;">@Inject
+private AjaxResponseRenderer ajaxResponseRenderer;
+
+@InjectComponent
+private Zone timeArea;
+...
+void onUpdateTime()
+{
+ ajaxResponseRenderer.addRender(timeArea);
+}
+</pre>
+</div></div><h2 id="AjaxandZones-Zones">Zones</h2><p>Zones are Tapestry's
approach to performing partial page updates. A <a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/Zone.html";>Zone
component</a> renders as an HTML element, typically a <div>.</p><p>A
zone is recognizable in the DOM because it will have the
attribute <code>data-container-type=zone</code>. The client-side support
for Zones is keyed off of this attribute and value.</p><p><span
style="line-height: 1.4285715;">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 <div>. 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 </span><em
style="line-height: 1.4285715;">partial page response</em><span
style="line-height:
1.4285715;"> to the client, and the content of that response is used to
update the Zone's <div> in place.</span></p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: xml; gutter: false; theme: Default"
style="font-size:12px;"><t:actionlink t:id="someLink"
zone="myzone">update</t:actionlink>
...
<t:zone t:id="myZone" id="myzone">
@@ -193,11 +267,15 @@ Object onActionFromRegister()
<div class="confluence-information-macro
confluence-information-macro-information"><p class="title">Added in
5.2</p><span class="aui-icon aui-icon-small aui-iconfont-info
confluence-information-macro-icon"></span><div
class="confluence-information-macro-body">
</div></div>
-<div style="border-right: 20px solid #D8E4F1;border-left: 20px solid
#D8E4F1;"><p>If the Form or Link is enclosed by the Zone itself, then the
<code>zone</code> parameter may be set to the special value <code>^</code>. The
carat is evaluated, on the client side, by searching up form the form or link
element for the first enclosing element that is a Zone. 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 some cases, it is no longer
necessary to specify the Zone's <code>id</code> parameter.</p></div><h3
id="AjaxandZones-AnUpdatedivwithinaZonediv">An Update div within a Zone div</h3>
+<div class="error"><span class="error">Unknown macro: {div}</span>
+<p>If the Form or Link is enclosed by the Zone itself, then the
<code>zone</code> parameter may be set to the special value <code>^</code>. The
carat is evaluated, on the client side, by searching up form the form or link
element for the first enclosing element that is a Zone. 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 some cases, it is no longer
necessary to specify the Zone's <code>id</code> parameter.</p>
+</div><h3 id="AjaxandZones-AnUpdatedivwithinaZonediv">An Update div within a
Zone div</h3>
-<div style="border-right: 20px solid #ffcccc;border-left: 20px solid
#ffcccc;"><p><em>This feature is removed starting with Tapestry
5.4</em></p></div><p>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 <div> may
contain an update <div>.</p><p>An Update <div> is specifically a
<div> element marked with the CSS class "t-zone-update", <em>inside</em>
the Zone's <div>.</p><p>If an Update div exists within a Zone div, then
when Tapestry updates a zone only the update <div>'s content will be
changed, rather than the entire Zone <div>.</p><p>The show and update
functions (see Zone Functions, below) apply to the Zone <div>, not just
the update <div>.</p><h3
id="AjaxandZones-ZoneEffectFunctions(Tapestry5.3andearlier)">Zone Effect
Functions (Tapestry 5.3 and earlier)</h3><p> </p>
+<div class="error"><span class="error">Unknown macro: {div}</span>
+<p><em>This feature is removed starting with Tapestry 5.4</em></p></div><p>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 <div> may contain an update
<div>.</p><p>An Update <div> is specifically a <div> element
marked with the CSS class "t-zone-update", <em>inside</em> the Zone's
<div>.</p><p>If an Update div exists within a Zone div, then when
Tapestry updates a zone only the update <div>'s content will be changed,
rather than the entire Zone <div>.</p><p>The show and update functions
(see Zone Functions, below) apply to the Zone <div>, not just the update
<div>.</p><h3
id="AjaxandZones-ZoneEffectFunctions(Tapestry5.3andearlier)">Zone Effect
Functions (Tapestry 5.3 and earlier)</h3><p> </p>
-<div style="border-right: 20px solid #ffcccc;border-left: 20px solid
#ffcccc;"><p>_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.</p></div><p> </p><p>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.</p><p>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:</p><div class="table-wrap"><table
class="confluenceTable"><tbody><tr><th colspan="1" rowspan="1"
class="confluenceTh"><p>Tapestry.ElementEffect Function</p></th><th colspan="1"
rowspan="1" class="confluenceTh"><p>Result</p></th></tr><tr><td colspan="1"
rowspan="1" class="confluenceTd"><p>highlight()</p></td><td colspan="1"
rowspan="1" class="confluenceTd"><p>(the default) highlight changes to an
already-visible zone</p></td></tr><tr><td colspan="1" rowspan="1"
class="confluenceTd"><p>show()</p></td><td colspan="1" rowspan="1"
class="confluenceTd"><p>make the zone visible if it isn't already
visible</p></td></tr><tr><td colspan="1" rowspan="1"
class="confluenceTd"><p>slidedown()</p></td><td colspan="1" rowspan="1"
class="confluenceTd"><p>scroll the content down</p></td></tr><tr><td
colspan="1" rowspan="1" class="confluenceTd"><p>slideup()</p></td><td
colspan="1" rowspan="1" class="confluenceTd"><p>slide t
he content back up (opposite of slidedown)</p></td></tr><tr><td colspan="1"
rowspan="1" class="confluenceTd"><p>fade()</p></td><td colspan="1" rowspan="1"
class="confluenceTd"><p>fade the content out (opposite of
show)</p></td></tr></tbody></table></div><p>To have Tapestry update a zone
without the usual yellow highlight effect, just specify "show" for the update
parameter:</p><div class="code panel pdl" style="border-width: 1px;"><div
class="codeContent panelContent pdl">
+<div class="error"><span class="error">Unknown macro: {div}</span>
+<p>_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.</p></div><p> </p><p>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.</p><p>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:
</p><div class="table-wrap"><table class="confluenceTable"><tbody><tr><th
colspan="1" rowspan="1" class="confluenceTh"><p>Tapestry.ElementEffect
Function</p></th><th colspan="1" rowspan="1"
class="confluenceTh"><p>Result</p></th></tr><tr><td colspan="1" rowspan="1"
class="confluenceTd"><p>highlight()</p></td><td colspan="1" rowspan="1"
class="confluenceTd"><p>(the default) highlight changes to an already-visible
zone</p></td></tr><tr><td colspan="1" rowspan="1"
class="confluenceTd"><p>show()</p></td><td colspan="1" rowspan="1"
class="confluenceTd"><p>make the zone visible if it isn't already
visible</p></td></tr><tr><td colspan="1" rowspan="1"
class="confluenceTd"><p>slidedown()</p></td><td colspan="1" rowspan="1"
class="confluenceTd"><p>scroll the content down</p></td></tr><tr><td
colspan="1" rowspan="1" class="confluenceTd"><p>slideup()</p></td><td
colspan="1" rowspan="1" class="confluenceTd"><p>slide the content back up
(opposite of slidedown)</p></td></tr><tr><td colspan="1" row
span="1" class="confluenceTd"><p>fade()</p></td><td colspan="1" rowspan="1"
class="confluenceTd"><p>fade the content out (opposite of
show)</p></td></tr></tbody></table></div><p>To have Tapestry update a zone
without the usual yellow highlight effect, just specify "show" for the update
parameter:</p><div class="code panel pdl" style="border-width: 1px;"><div
class="codeContent panelContent pdl">
<pre class="brush: xml; gutter: false; theme: Default"
style="font-size:12px;"><t:zone t:id="myZone" t:update="show"></pre>
</div></div><p>You may also define and use your own JavaScript effect function
(with lower-case names), like this:</p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: js; gutter: false; theme: Default"
style="font-size:12px;">Tapestry.ElementEffect.myeffectname =
function(element){ YourJavascriptCodeGoesHere; };
Modified: websites/production/tapestry/content/cache/main.pageCache
==============================================================================
Binary files - no diff available.
![http://tapestry.apache.org/images/tapestry_small.png"](http://tapestry.apache.org/images/tapestry_small.png"){kind=link}