Author: buildbot
Date: Sat Mar 18 12:20:30 2017
New Revision: 1008572

Log:
Production update by buildbot for tapestry

Modified:
    websites/production/tapestry/content/ajax-components-faq.html
    websites/production/tapestry/content/cache/main.pageCache

Modified: websites/production/tapestry/content/ajax-components-faq.html
==============================================================================
--- websites/production/tapestry/content/ajax-components-faq.html (original)
+++ websites/production/tapestry/content/ajax-components-faq.html Sat Mar 18 
12:20:30 2017
@@ -46,13 +46,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 &amp; 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 Components FAQ</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 &amp; 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 Components FAQ</h1></div>
+
+</div>
       <div class="clearer"></div>
       </div>
 
@@ -98,23 +111,7 @@
     return statusZone.getBody();
   }
 </pre>
-</div></div><h3 
id="AjaxComponentsFAQ-HowtoIupdatemultiplezonesinasingleeventhandler?">How to I 
update multiple zones in a single event handler?</h3><p>To do this, you must 
know, on the server, the client ids of each Zone. That's one of the reasons 
that you will generally set the Zone's client id (via the Zone's id parameter), 
rather than let Tapestry assign a client id for you.</p><p>From the event 
handler method, instead of returning a Block or a Component, return a 
multi-zone update:</p><div class="code panel pdl" style="border-width: 
1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 
1px;"><b>Multiple Zone Update (5.2)</b></div><div class="codeContent 
panelContent pdl">
-<pre class="brush: java; gutter: false; theme: Default" 
style="font-size:12px;">  @Inject
-  private Block searchResults;
-
-  @Inject
-  private Block statusBlock;
-
-  Object onSuccessFromSearchForm()
-  {
-    searchHits = searchService.performSearch(query);
-
-    message = String.format("Found %,d matching documents", searchHits.size());
-
-    return new MultiZoneUpdate("results", searchResults).add("status", 
statusBlock);
-  }
-</pre>
-</div></div><p>The above will work in Tapestry 5.3, but MultiZoneUpdate is 
deprecated. For 5.3 and later, use AjaxResponseRenderer instead:</p><div 
class="code panel pdl" style="border-width: 1px;"><div class="codeHeader 
panelHeader pdl" style="border-bottom-width: 1px;"><b>Multiple Zone Update 
(5.3)</b></div><div class="codeContent panelContent pdl">
+</div></div><h3 
id="AjaxComponentsFAQ-HowtoIupdatemultiplezonesinasingleeventhandler?">How to I 
update multiple zones in a single event handler?</h3><p>To do this, you must 
know, on the server, the client ids of each Zone. That's one of the reasons 
that you will generally set the Zone's client id (via the Zone's id parameter), 
rather than let Tapestry assign a client id for you.</p><p>From the event 
handler method, instead of returning a Block or a Component, return a 
multi-zone update:</p><p>&#160;</p><div class="code panel pdl" 
style="border-width: 1px;"><div class="codeHeader panelHeader pdl" 
style="border-bottom-width: 1px;"><b>Multiple Zone Update (5.3+)</b></div><div 
class="codeContent panelContent pdl">
 <pre class="brush: java; gutter: false; theme: Default" 
style="font-size:12px;">  @Inject
   private Block searchResults;
 
@@ -133,7 +130,7 @@
     ajaxResponseRenderer.addRender("results", 
searchResults).addRender("status", statusBlock);
   }
 </pre>
-</div></div><p>AjaxResponseRenderer adds other useful commands as well. It 
also has the advantage that a simple return value can be returned to render 
content for the Zone that triggered the request.</p><h3 
id="AjaxComponentsFAQ-What'sthatweirdnumberinthemiddleoftheclientidsafteraZoneisupdated?">What's
 that weird number in the middle of the client ids after a Zone is 
updated?</h3><p>You might start with markup in your template for a component 
such as a TextField:</p><div class="code panel pdl" style="border-width: 
1px;"><div class="codeContent panelContent pdl">
+</div></div><p>Note: Users of Tapestry 5.2 and earlier (which didn't support 
AjaxResponseRenderer) must replace that last line with: <code>return new 
MultiZoneUpdate("results", searchResults).add("status", 
statusBlock);</code></p><p>AjaxResponseRenderer adds other useful commands as 
well. It also has the advantage that a simple return value can be returned to 
render content for the Zone that triggered the request.</p><h3 
id="AjaxComponentsFAQ-What'sthatweirdnumberinthemiddleoftheclientidsafteraZoneisupdated?">What's
 that weird number in the middle of the client ids after a Zone is 
updated?</h3><p>You might start with markup in your template for a component 
such as a TextField:</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;">  &lt;t:textfield t:id="firstName"/&gt;
 </pre>
 </div></div><p>When the component initially renders as part of a full page 
render, you get a sensible bit of markup:</p><div class="code panel pdl" 
style="border-width: 1px;"><div class="codeContent panelContent pdl">
@@ -142,7 +139,7 @@
 </div></div><p>But when the form is inside a Zone and rendered as part of a 
zone update, the ids get weird:</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;">   &lt;input id="firstName_12a820cc40e" 
name="firstName" type="text"&gt;
 </pre>
-</div></div><p>What's happening here is that Tapestry is working to prevent 
unwanted id clashes as part of the page update. In an HTML document, each 
<code>id</code> is expected to be unique; most JavaScript is keyed off of the 
<code>id</code> field, for instance.</p><p>In a full page render, components 
don't just use their component id (<code>t:id</code>) as their client id; 
instead they use the <code>JavaScriptSupport</code> environmental to allocate a 
unique id. When there's no loops or conflicts, the client id matches the 
component id.</p><p>When the component is inside a loop, a suffix is appended: 
<code>firstName</code>, <code>firstName_0</code>, <code>firstName_1</code>, 
etc.</p><p>When the component is rendered as part of an Ajax partial page 
update, the rules are different. Since Tapestry doesn't know what content has 
been rendered onto the page previously, it can't use its normal tricks to 
ensure that ids are unique.</p><p>Instead, Tapestry creates a random-ish unique 
id s
 uffix, such as "12a820cc40e" in the example; this suffix is appended to all 
allocated ids to ensure that they do not conflict with previously rendered 
ids.</p><h3 
id="AjaxComponentsFAQ-WhydoIsometimesgettheexception&quot;Therenderedcontentdidnotincludeanyelementsthatallowforthepositioningofthehiddenformfield'selement.&quot;whenrenderinganemptyZone?">Why
 do I sometimes get the exception "The rendered content did not include any 
elements that allow for the positioning of the hidden form field's element." 
when rendering an empty Zone?</h3><p>As part of Tapestry's form processing, it 
must write a hidden input element with information needed when the form is 
submitted. Since the content of a Zone may be changed or removed, a hidden 
field is created just for the Zone, separate from the rest of the enclosing 
form.</p><p>At the same time, Tapestry wants to position the &lt;input&gt; 
field in a valid location, and HTML defines some constraints for that; an input 
field must appear inside a &l
 t;p&gt; or &lt;div&gt; element. In your empty Zone, there's no place to put 
the hidden element.</p><p>The solution is to add a &lt;div&gt; element to the 
body of the zone; t<span style="line-height: 1.4285715;">his ensures that 
there's a place for the hidden input field. &#160;An empty &lt;div&gt; element 
(even one containing a hidden form field) will not affect page 
layout.</span></p></div>
+</div></div><p>What's happening here is that Tapestry is working to prevent 
unwanted id clashes as part of the page update. In an HTML document, each 
<code>id</code> is expected to be unique; most JavaScript is keyed off of the 
<code>id</code> field, for instance.</p><p>In a full page render, components 
don't just use their component id (<code>t:id</code>) as their client id; 
instead they use the <code>JavaScriptSupport</code> environmental to allocate a 
unique id. When there's no loops or conflicts, the client id matches the 
component id.</p><p>When the component is inside a loop, a suffix is appended: 
<code>firstName</code>, <code>firstName_0</code>, <code>firstName_1</code>, 
etc.</p><p>When the component is rendered as part of an Ajax partial page 
update, the rules are different. Since Tapestry doesn't know what content has 
been rendered onto the page previously, it can't use its normal tricks to 
ensure that ids are unique.</p><p>Instead, Tapestry creates a random-ish unique 
id s
 uffix, such as "12a820cc40e" in the example; this suffix is appended to all 
allocated ids to ensure that they do not conflict with previously rendered 
ids.</p><h3 
id="AjaxComponentsFAQ-WhydoIsometimesgettheexception&quot;Therenderedcontentdidnotincludeanyelementsthatallowforthepositioningofthehiddenformfield'selement.&quot;whenrenderinganemptyZone?">Why
 do I sometimes get the exception "The rendered content did not include any 
elements that allow for the positioning of the hidden form field's element." 
when rendering an empty Zone?</h3><p>As part of Tapestry's form processing, it 
must write a hidden input element with information needed when the form is 
submitted. Since the content of a Zone may be changed or removed, a hidden 
field is created just for the Zone, separate from the rest of the enclosing 
form.</p><p>At the same time, Tapestry wants to position the &lt;input&gt; 
field in a valid location, and HTML defines some constraints for that; an input 
field must appear inside a &l
 t;p&gt; or &lt;div&gt; element. If your zone is initially empty, there's no 
place to put the hidden element, and Tapestry will complain.</p><p>The solution 
is simple: just add a &lt;div&gt; element to the body of the zone. This<span 
style="line-height: 1.4285715;"> ensures that there's a place for the hidden 
input field. &#160;An empty &lt;div&gt; element (even one containing a hidden 
form field) will not affect page layout.</span></p></div>
       </div>
 
       <div class="clearer"></div>

Modified: websites/production/tapestry/content/cache/main.pageCache
==============================================================================
Binary files - no diff available.


Reply via email to