You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tapestry.apache.org by bu...@apache.org on 2013/02/02 14:20:47 UTC
svn commit: r849074 - in /websites/production/tapestry/content:
ajax-and-zones.html cache/main.pageCache component-templates.html
Author: buildbot
Date: Sat Feb 2 13:20:47 2013
New Revision: 849074
Log:
Production update by buildbot for tapestry
Modified:
websites/production/tapestry/content/ajax-and-zones.html
websites/production/tapestry/content/cache/main.pageCache
websites/production/tapestry/content/component-templates.html
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 Feb 2 13:20:47 2013
@@ -57,11 +57,11 @@
<div id="content">
<div id="ConfluenceContent"><div class="navmenu" style="float:right; background:#eee; margin:3px; padding:3px"><table class="tableview" width="100%"><tr><th colspan="1" rowspan="1" style="padding: 3px 3px 3px 0px">Related Articles</th></tr><tr><td colspan="1" rowspan="1">
<span class="icon icon-page" title="Page">Page:</span>
- <a shape="rect" href="ajax-and-zones.html">Ajax and Zones</a>
+ <a shape="rect" href="javascript.html">JavaScript</a>
</td></tr><tr><td colspan="1" rowspan="1">
<span class="icon icon-page" title="Page">Page:</span>
- <a shape="rect" href="javascript.html">JavaScript</a>
+ <a shape="rect" href="ajax-and-zones.html">Ajax and Zones</a>
</td></tr><tr><td colspan="1" rowspan="1">
<span class="icon icon-page" title="Page">Page:</span>
@@ -82,9 +82,9 @@
</td></tr></table>
</div>
-<p>Tapestry provides easy-to-use support for <b>Ajax</b>, 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.</p>
+<p>Tapestry provides easy-to-use support for <b>Ajax</b>, 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>
-<p>Ajax support is included in many <a shape="rect" href="component-reference.html" title="Component Reference">built-in components</a> and <a shape="rect" href="component-mixins.html" title="Component Mixins">component mixins</a>.</p>
+<p>Ajax support is included in many <a shape="rect" href="component-reference.html" title="Component Reference">built-in components</a> and <a shape="rect" href="component-mixins.html" title="Component Mixins">component mixins</a> via the <tt>zone</tt> parameter.</p>
<h2><a shape="rect" name="AjaxandZones-Zones"></a>Zones</h2>
@@ -92,51 +92,46 @@
<p>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 <em>partial page response</em> to the client, and the content of that response is used to update the Zone's <div> in place.</p>
-<h3><a shape="rect" name="AjaxandZones-AnUpdatedivwithinaZonediv"></a>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>
+<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
+<pre class="code-xml">
+<span class="code-tag"><t:actionlink t:id=<span class="code-quote">"someLink"</span> zone=<span class="code-quote">"myzone"</span>></span>update<span class="code-tag"></t:actionlink></span>
+...
+<span class="code-tag"><t:zone t:id=<span class="code-quote">"myZone"</span> id=<span class="code-quote">"myzone"</span>></span>
+ The current time is ${currentTime}
+<span class="code-tag"></t:zone></span>
+</pre>
+</div></div>
<h3><a shape="rect" name="AjaxandZones-EventHandlerReturnTypes"></a>Event Handler Return Types</h3>
+<div class="navmenu" style="float:right; background:#eee; margin:3px; padding:0 1em"><p> <b>JumpStart Demo:</b><br clear="none">
+ <a shape="rect" class="external-link" href="http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/actionlink" >AJAX ActionLink</a></p></div>
+
<p>In a traditional request, the return value of an event handler method is used to determine which page will render a <em>complete</em> response, and a <em>redirect</em> is sent to the client to render the new page (as a new request).</p>
<p>In contrast, with a Zone update, the return value is used to render a <em>partial response</em> within the <em>same request</em>.</p>
-<p>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 <div>.</p>
-
-<p>Alternatively, an event handler may return a <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/Link.html">Link</a> 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.</p>
-
-<h3><a shape="rect" name="AjaxandZones-MultipleZoneUpdates"></a>Multiple Zone Updates</h3>
-
-<p>An event handler may cause multiple zones to be updated on the client side. To accomplish this, return a <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/ajax/MultiZoneUpdate.html">MultiZoneUpdate</a> 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).</p>
-
-<p>The renderer for each zone can be a block or component, or a <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/Renderable.html">Renderable</a> or <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/runtime/RenderCommand.html">RenderCommand</a> ... 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:</p>
+<p>This return value is often just the zone's own body (as below), but it can also be 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 <div>.</p>
<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-java">
@Inject
-<span class="code-keyword">private</span> Form registrationForm;
-
-@Inject Block registrationHelp;
+<span class="code-keyword">private</span> Request request;
-<span class="code-object">Object</span> onActionFromRegister()
+@InjectComponent
+<span class="code-keyword">private</span> Zone myZone;
+...
+<span class="code-object">Object</span> onClickFromSomeLink()
{
- <span class="code-keyword">return</span> <span class="code-keyword">new</span> MultiZoneUpdate(<span class="code-quote">"userInput"</span>, registrationForm).add(<span class="code-quote">"helpPanel"</span>, registrationHelp);
-}
+ <span class="code-keyword">return</span> myZone.getBody(); <span class="code-comment">// AJAX request, <span class="code-keyword">return</span> zone's own body
+</span>}
</pre>
</div></div>
-<p>This implies that there are two zones, "userInput" and "helpPanel", somewhere in the rendered page, waiting to receive the updated content.</p>
+<p>The possible return values are:</p>
+
+<ul><li>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.</li><li>The zone's own body</li><li>A <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/json/JSONObject.html">JSONObject</a> or <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/json/JSONArray.html">JSONArray</a>, which will be sent as the response.</li><li>A <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/StreamResponse.html">StreamResponse</a>, which will be sent as the response.</li><li>A <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/Link.html">Link</a>, which will send a redirect to the client.</li><li>A page name (as a String), or a page
class, or a page instance, which will send a redirect to the indicated page.</li></ul>
+
<h3><a shape="rect" name="AjaxandZones-GracefulDegradation"></a>Graceful Degradation</h3>
@@ -150,22 +145,79 @@
<span class="code-keyword">private</span> Request request;
@InjectComponent
-<span class="code-keyword">private</span> Zone zone;
+<span class="code-keyword">private</span> Zone myZone;
...
<span class="code-object">Object</span> onClickFromSomeLink()
{
- <span class="code-keyword">if</span>(request.isXHR())
- {
- <span class="code-keyword">return</span> zone.getBody(); <span class="code-comment">// AJAX request, <span class="code-keyword">return</span> zone body
-</span> }
- <span class="code-keyword">else</span>
- {
- <span class="code-keyword">return</span> <span class="code-keyword">null</span>; <span class="code-comment">// non-AJAX request, redraw current page
-</span> }
+ <span class="code-comment">// <span class="code-keyword">return</span> either the zone body (ajax) or whole page (non-ajax)
+</span> <span class="code-keyword">return</span> request.isXHR() ? myZone.getBody() : <span class="code-keyword">null</span>;
}
</pre>
</div></div>
+<h3><a shape="rect" name="AjaxandZones-MultipleZoneUpdates"></a>Multiple Zone Updates</h3>
+
+<div class="navmenu" style="float:right; background:#eee; margin:3px; padding:0 1em"><p> <b>JumpStart Demo:</b><br clear="none">
+ <a shape="rect" class="external-link" href="http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/multiplezoneupdate" >AJAX Multiple Zone Update</a></p></div>
+
+<p>An event handler often needs to update multiple zones on the client side. To accomplish this, use an <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/services/ajax/AjaxResponseRenderer.html">AjaxResponseRenderer</a>, indicating 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).</p>
+
+<p><em>AjaxResponseRenderer was introduced in Tapestry 5.3. For Tapestry 5.2 and earlier, return a <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/ajax/MultiZoneUpdate.html">MultiZoneUpdate</a> object instead.</em></p>
+
+<p>The renderer for each zone can be the zone itself, a block, a component, a <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/Renderable.html">Renderable</a> or a <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/runtime/RenderCommand.html">RenderCommand</a> ... or an object, such as String, that can be coerced to either of these.</p>
+
+<table class="sectionMacro" border="0" cellpadding="5" cellspacing="0" width="100%"><tbody><tr><td colspan="1" rowspan="1" valign="top" class="confluenceTd">
+<div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>For Tapestry 5.3 and later</b></div><div class="codeContent panelContent">
+<pre class="code-java">
+@InjectComponent
+<span class="code-keyword">private</span> Zone userInput;
+
+@InjectComponent
+<span class="code-keyword">private</span> Zone helpPanel;
+
+@Inject
+<span class="code-keyword">private</span> AjaxResponseRenderer ajaxResponseRenderer;
+
+void onActionFromRegister()
+{
+ ajaxResponseRenderer.addRender(<span class="code-quote">"userInput"</span>, userInput)
+ .addRender(<span class="code-quote">"helpPanel"</span>, helpPanel);
+}
+</pre>
+</div></div></td><td colspan="1" rowspan="1" valign="top" class="confluenceTd">
+<div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>For Tapestry 5.1, 5.2 and 5.3</b></div><div class="codeContent panelContent">
+<pre class="code-java">
+@Inject
+<span class="code-keyword">private</span> Form registrationForm;
+
+@Inject Block registrationHelp;
+
+<span class="code-object">Object</span> onActionFromRegister()
+{
+ <span class="code-keyword">return</span> <span class="code-keyword">new</span> MultiZoneUpdate(<span class="code-quote">"userInput"</span>, registrationForm)
+ .add(<span class="code-quote">"helpPanel"</span>, registrationHelp);
+}
+</pre>
+</div></div>
+<p>    <em>Note that MultiZoneUpdate is deprecated starting with Tapestry 5.3.</em></p>
+
+</td></tr></tbody></table>
+
+<p>These examples assume that there are two zones, "userInput" and "helpPanel", somewhere in the rendered page, waiting to receive the updated content.</p>
+
+<h3><a shape="rect" name="AjaxandZones-AnUpdatedivwithinaZonediv"></a>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><a shape="rect" name="AjaxandZones-ZoneEffectFunctions"></a>Zone Effect Functions</h3>
@@ -192,8 +244,7 @@ Tapestry.ElementEffect.myeffectname = <s
</pre>
</div></div>
-
-<h2><a shape="rect" name="AjaxandZones-ZoneComponentIdvs.ZoneElementId"></a>Zone Component Id vs. Zone Element Id</h2>
+<h3><a shape="rect" name="AjaxandZones-ZoneComponentIdvs.ZoneElementId"></a>Zone Component Id vs. Zone Element Id</h3>
<p>Like all Tapestry components, Zones have a component id, specified using the <tt>t:id</tt> attribute. If you do not assign a component id, a unique id is assigned by Tapestry.</p>
@@ -225,13 +276,16 @@ client-side id (<tt>id</tt>) is used ...
<p>The show and update function names 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>
-<h3><a shape="rect" name="AjaxandZones-FrequentlyAskedQuestions"></a>Frequently Asked Questions</h3>
+<h3><a shape="rect" name="AjaxandZones-MoreInformation"></a>More Information</h3>
<p>For examples of extending a Form with a Zone and updating multiple zones at once, see the <a shape="rect" href="ajax-components-faq.html" title="Ajax Components FAQ">Ajax Components FAQ</a>.</p>
<p><a shape="rect" name="AjaxandZones-autocomplete"></a></p>
<h2><a shape="rect" name="AjaxandZones-AutocompleteMixin"></a>Autocomplete Mixin</h2>
+<div class="navmenu" style="float:right; background:#eee; margin:3px; padding:0 1em"><p> <b>JumpStart Demo:</b><br clear="none">
+ <a shape="rect" class="external-link" href="http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/autocompletemixin" >Autocomplete Mixin</a></p></div>
+
<p>The <a shape="rect" 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>
<p>Autocomplete can be added to an existing text field:</p>
@@ -275,20 +329,6 @@ client-side id (<tt>id</tt>) is used ...
<p>Tapestry's default stylesheet includes entries for controlling the look of the floating popup of selections.</p>
<p>You may override <tt>DIV.t-autocomplete-menu UL</tt> to change the main look and feel, <tt>DIV.t-autocomplete-menu LI</tt> for a normal item in the popup list, and <tt>DIV.t-autocomplete-menu LI.selected</tt> for the element under the cursor (or selecting using the arrow keys).</p>
-
-<h1><a shape="rect" name="AjaxandZones-YourownAjaxComponents"></a>Your own Ajax Components</h1>
-
-<p>A study of the Autocomplete mixin's <a shape="rect" class="external-link" href="http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-core/src/main/java/org/apache/tapestry5/corelib/mixins/Autocomplete.java?view=markup">source code</a> should be very helpful: it shows how to ask the ComponentResources object to create a link.</p>
-
-<p>The key part is the way Tapestry invokes a component event handler method on the component.</p>
-
-<p>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.</p>
-
-<p>For an Ajax request, a redirect is not sent: any response is rendered as part of the same request and sent back immediately.</p>
-
-<p>The possible return values are:</p>
-
-<ul><li>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.</li><li>A <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/json/JSONObject.html">JSONObject</a> or <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/json/JSONArray.html">JSONArray</a>, which will be sent as the response.</li><li>A <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/StreamResponse.html">StreamResponse</a>, which will be sent as the response.</li></ul>
</div>
</div>
Modified: websites/production/tapestry/content/cache/main.pageCache
==============================================================================
Binary files - no diff available.
Modified: websites/production/tapestry/content/component-templates.html
==============================================================================
--- websites/production/tapestry/content/component-templates.html (original)
+++ websites/production/tapestry/content/component-templates.html Sat Feb 2 13:20:47 2013
@@ -233,7 +233,7 @@
<p>Tapestry elements are elements defined using the Tapestry namespace prefix (usually "t:").</p>
-<p>All other elements should be in the default namespace, with no prefix.</p>
+<p>All other elements in your templates should be in the default namespace, with no prefix (with the possible exception of any Library Namespaces (described <a shape="rect" href="#ComponentTemplates-LibraryNamespaces">below</a>).</p>
<p>There are a certain number of Tapestry elements, listed below, that act as template directives; beyond that, any element in the Tapestry namespace will be a Tapestry component.</p>
@@ -430,6 +430,7 @@
<div class="panelMacro"><table class="infoMacro"><colgroup span="1"><col span="1" width="24"><col span="1"></colgroup><tr><td colspan="1" rowspan="1" valign="top"><img align="middle" src="https://cwiki.apache.org/confluence/images/icons/emoticons/information.gif" width="16" height="16" alt="" border="0"></td><td colspan="1" rowspan="1">When using a component library, the library will map its components to a <em>virtual sub-folder</em> of the application. The same naming mechanism works whether its is a real sub-folder or a component library sub-folder.</td></tr></table></div>
+<p><a shape="rect" name="ComponentTemplates-LibraryNamespaces"></a></p>
<h2><a shape="rect" name="ComponentTemplates-LibraryNamespaces"></a>Library Namespaces</h2>
<p>If you are using many components from a common Tapestry component library, you can use a special namespace to simplify references to those components.</p>