Author: buildbot
Date: Sat Mar 18 18:19:33 2017
New Revision: 1008592
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
18:19:33 2017
@@ -244,23 +244,14 @@ void onActionFromRegister()
</div></div><p><span style="line-height: 1.4285715;">This example assumes that
there are two zones, "userInput" and "helpPanel", somewhere in the rendered
page, waiting to receive the updated content.</span></p><p><span
style="line-height: 1.4285715;"> </span></p><div
class="confluence-information-macro confluence-information-macro-note"><span
class="aui-icon aui-icon-small aui-iconfont-warning
confluence-information-macro-icon"></span><div
class="confluence-information-macro-body"><p>In this example, the Zone receives
the update but does not provide any content. That's OK, the other client-side
elements (<code>userInput</code> and <code>helpPanel</code>) will be updated,
and the zone's content left unchanged.</p></div></div><p>This demonstrates why
it is necessary for the developer to specify a particular client-side id for
Zone components; if they were dynamically allocated ids, as is typical in most
other elements, it would be impossible for this code to know what client-sid
e id was used for the Zone.</p><h3
id="AjaxandZones-ZoneComponentIdvs.ZoneElementId">Zone Component Id vs. Zone
Element Id</h3><p>Like all Tapestry components, Zones have a component id,
specified using the <code>t:id</code> attribute. If you do not assign a
component id, a unique id is assigned by Tapestry.</p><p>However, to coordinate
things on the client side, it is necessary for components that wish to update
the zone know the <em>client-side element id</em>. This is specified with the
<code>id</code> parameter of the Zone component. If the <code>id</code>
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 <code>clientId</code> property of the Zone
component itself.)</p><p>Remember that the component id (<code>t:id</code>) is
used to <em>inject</em> the Zone component into the containing page or
component. The client-side id (<code>id</code>) is
used on the client side to orchestrate requests and updates. You will often
seen the following construct:</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" id="myzone"> ...
</t:zone>
</pre>
-</div></div><h3 id="AjaxandZones-TheContainingZone(zone="^")">The
Containing Zone (zone="^")</h3>
-
-<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 class="error"><span class="error">Unknown macro: {div}</span>
-<p> </p></div><p>If the Form or Link is enclosed by the Zone itself, and
you're using the <code>zone</code> parameter instead of
the <code>async</code> parameter, then the <code>zone</code>
parameter may be set to the special
value <strong><code>^</code></strong><code> (the carat)</code>. The zone
is found – 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><h3
id="AjaxandZones-AnUpdatedivwithinaZonediv(Tapestry5.3andearlier)">An Update
div within a Zone div (Tapestry 5.3 and earlier)</h3>
-
-<div class="error"><span class="error">Unknown macro: {div}</span>
-<p>This feature is removed starting with Tapestry 5.4</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>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>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" 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></div><h3 id="AjaxandZones-TheContainingZone(zone="^")">The
Containing Zone (zone="^")</h3><p><em><strong>Since 5.2</strong></em></p><p>If
the Form or Link is enclosed by the Zone itself, and you're using
the <code>zone</code> parameter instead of the <code>async</code>
parameter, then the <code>zone</code> parameter may be set to the special
value <strong><code>^</code></strong><code> (the carat)</code>. The zone
is found – 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><h3
id="AjaxandZones-AnUpdatedivwithinaZonediv(Tapestry5.3andearlier)">An Update
div within a Zone div (Tapestry 5.3 and earlier)</h3><p><em><strong>Deprecat
ed</strong><strong>:</strong> This feature is removed starting with Tapestry
5.4</em></p><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><strong><em>Deprecated:</em></strong> This feature refers to
client-side logic on
ly 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><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" rowspan="1"
class="confluenceTd"><p>fade()</p></td><td colspan="1" ro
wspan="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; };
</pre>
-</div></div><h3 id="AjaxandZones-ZoneLimitations">Zone
Limitations</h3><p>Unlike many other situations, Tapestry relies on you to
specify useful and unique ids to Zone components, then reference those ids
inside EventLink (or ActionLink, or Form) components. Using Zone components
inside any kind of loop may cause additional problems, as Tapestry will
<em>uniqueify</em> the client id you specify (appending an index
number).</p><p>The show and update function names (Tapestry 5.3 and earlier
only) are converted to lower case; all the methods of Tapestry.ElementEffect
should have all lower-case names. Because client-side JavaScript is so fluid
(new methods may be added to existing objects), Tapestry makes no attempt to
validate the function names ... however, if the names are not valid, then the
default show and highlight methods will be used.</p><p>Zones may only be used
inside the <em>body</em> of a page, not the head<em>.</em></p><h3
id="AjaxandZones-MoreInformation">More Information
</h3><p>For examples of extending a Form with a Zone and updating multiple
zones at once, see the <a href="ajax-components-faq.html">Ajax Components
FAQ</a>.</p><p>There are also a number of Ajax-related examples at
the  <a class="external-link"
href="http://jumpstart.doublenegative.com.au/jumpstart7/"; rel="nofollow"><span
class="confluence-link">Tapestry JumpStart</span></a> site.</p><p><span
class="confluence-anchor-link" id="AjaxandZones-autocomplete"></span></p><h2
id="AjaxandZones-AutocompleteMixin">Autocomplete Mixin</h2><p></p><div
class="navmenu" style="float:right; background:#eee; margin:3px; padding:0 1em">
+</div></div><h3 id="AjaxandZones-ZoneLimitations">Zone
Limitations</h3><p>Unlike many other situations, Tapestry relies on you to
specify useful and unique ids to Zone components, then reference those ids
inside EventLink (or ActionLink, or Form) components. Using Zone components
inside any kind of loop may cause additional problems, as Tapestry will
<em>uniqueify</em> the client id you specify (appending an index
number).</p><p>If you create a component that contains a zone, and you use that
component in a loop, you'll likely need to set the client-side id like
this:</p><p> </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"
id="prop:componentResources.id"></pre>
+</div></div><p> </p><p>See <a class="external-link"
href="http://jumpstart.doublenegative.com.au/jumpstart7/examples/ajax/components1";
rel="nofollow">this JumpStart Example</a> for details.</p><p>The show and
update function names (Tapestry 5.3 and earlier only) are converted to lower
case; all the methods of Tapestry.ElementEffect should have all lower-case
names. Because client-side JavaScript is so fluid (new methods may be added to
existing objects), Tapestry makes no attempt to validate the function names ...
however, if the names are not valid, then the default show and highlight
methods will be used.</p><p>Zones may only be used inside the <em>body</em> of
a page, not the head<em>.</em></p><h3 id="AjaxandZones-MoreInformation">More
Information</h3><p>For examples of extending a Form with a Zone and updating
multiple zones at once, see the <a href="ajax-components-faq.html">Ajax
Components FAQ</a>.</p><p>There are also a number of Ajax-related examples at
the  
;<a class="external-link"
href="http://jumpstart.doublenegative.com.au/jumpstart7/"; rel="nofollow"><span
class="confluence-link">Tapestry JumpStart</span></a> site.</p><p><span
class="confluence-anchor-link" id="AjaxandZones-autocomplete"></span></p><h2
id="AjaxandZones-AutocompleteMixin">Autocomplete Mixin</h2><p></p><div
class="navmenu" style="float:right; background:#eee; margin:3px; padding:0 1em">
<p> <strong>JumpStart Demo:</strong><br clear="none">
<a class="external-link"
href="http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/autocompletemixin";
rel="nofollow">Autocomplete Mixin</a></p></div>The <a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/mixins/Autocomplete.html";>Autocomplete</a>
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.<p>Autocomplete can be added to an
existing text field:</p><div class="code panel pdl" style="border-width:
1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;"> <t:textfield t:id="accountName"
t:mixins="autocomplete" size="100"/>
Modified: websites/production/tapestry/content/cache/main.pageCache
==============================================================================
Binary files - no diff available.
