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 2014/06/02 20:19:30 UTC
svn commit: r910971 - in /websites/production/tapestry/content:
cache/main.pageCache javascript-modules.html javascript.html user-guide.html
Author: buildbot
Date: Mon Jun 2 18:19:30 2014
New Revision: 910971
Log:
Production update by buildbot for tapestry
Modified:
websites/production/tapestry/content/cache/main.pageCache
websites/production/tapestry/content/javascript-modules.html
websites/production/tapestry/content/javascript.html
websites/production/tapestry/content/user-guide.html
Modified: websites/production/tapestry/content/cache/main.pageCache
==============================================================================
Binary files - no diff available.
Modified: websites/production/tapestry/content/javascript-modules.html
==============================================================================
--- websites/production/tapestry/content/javascript-modules.html (original)
+++ websites/production/tapestry/content/javascript-modules.html Mon Jun 2 18:19:30 2014
@@ -141,14 +141,14 @@ public class Confirm
...
Â
javaScriptSupport.require("my-module").invoke("setup").with(clientId, actionUrl);]]></script>
-</div></div><p>In the first example, <code>my-module</code> exports a single function of two parameters. In the second example, <code>my-module</code> exports an object and the <code>setup</code> key is the function that is invoked.</p><h3 id="JavaScriptModules-DevelopmentMode">Development Mode</h3><p>In development mode, Tapestry will write details into the client-side console.</p><p><img class="confluence-embedded-image" src="https://cwiki.apache.org/confluence/download/attachments/41813130/Tapestry_Integration_Test_Application_and_JavaScriptSupport__Tapestry_API_Documentation_.png?version=1&modificationDate=1401727827255&api=v2" data-image-src="/confluence/download/attachments/41813130/Tapestry_Integration_Test_Application_and_JavaScriptSupport__Tapestry_API_Documentation_.png?version=1&modificationDate=1401727827255&api=v2"></p><p>This lists modules <em>explicitly</em> loaded (for initialization), but does not include modules loaded only as dependencies. You
can see more details about what was actually loaded using <em>view source</em>; RequireJS adds <code><script></code> tags to the document to load libraries and modules.</p><h3 id="JavaScriptModules-Librariesvs.Modules">Libraries vs. Modules</h3><p>Tapestry still supports JavaScript libraries.  When the page is loading, all libraries are loaded before any modules.</p><p>Libraries are loaded sequentially, so if you can avoid using libraries, so much the better in terms of page load time.</p><p>Libraries work in both normal page rendering, and Ajax partial page updates. Even in partial page updates, the libraries will be loaded sequentially before modules are loaded or exported functions invoked.</p><h3 id="JavaScriptModules-AggregatingModules">Aggregating Modules</h3><p>An important part of performance for production applications is JavaScript aggregation.</p><p>In development mode, you want your modules and other assets to load individually. Unlike assets, modules ca
n't be fingerprinted, so on each page load, the client browser must ask the server for the module again (typically getting a 304 Not Modified response).</p><p>This is acceptable in development mode, but quite undesirable in production.</p><p>With JavaScript aggregation, the module can be included in the single virtual JavaScript library that represents a <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/JavaScriptStack.html">JavaScript stack</a>. This significantly cuts down on both the number of requests from the client to the server, and the overall number of bytes transferred.</p><p>Adding a module to the stack is not the same as <code>require</code>-ing it. In fact, you must still use <code>JavaScriptSupport.require()</code> regardless.</p><p>What adding a module to a stack accomplishes is that the module's code is downloaded in the first, initial JavaScript download. When (and if) the module is required a
s a dependency, the code will already be present in the browser and ready to execute.</p><p>Tapestry <strong>does not</strong> attempt to do dependency analysis; that is left as a manual exercise. Typically, if you aggregate a module, your should look at its dependencies, and aggregate those. Failure to do so will cause unwanted requests back to the Tapestry server for the dependency modules, even though the aggregated module's code is present.</p><p>Because Tapestry is open, it is possible to contribute modules even into the <strong>core</strong> JavaScript stack.  This is done using your application's module:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+</div></div><p>In the first example, <code>my-module</code> exports a single function of two parameters. In the second example, <code>my-module</code> exports an object and the <code>setup</code> key is the function that is invoked.</p><h3 id="JavaScriptModules-DevelopmentMode">Development Mode</h3><p>In development mode, Tapestry will write details into the client-side console.</p><p><img class="confluence-embedded-image" src="https://cwiki.apache.org/confluence/download/attachments/41813130/Tapestry_Integration_Test_Application_and_JavaScriptSupport__Tapestry_API_Documentation_.png?version=1&modificationDate=1401727827255&api=v2" data-image-src="/confluence/download/attachments/41813130/Tapestry_Integration_Test_Application_and_JavaScriptSupport__Tapestry_API_Documentation_.png?version=1&modificationDate=1401727827255&api=v2"></p><p>This lists modules <em>explicitly</em> loaded (for initialization), but does not include modules loaded only as dependencies. You
can see more details about what was actually loaded using <em>view source</em>; RequireJS adds <code><script></code> tags to the document to load libraries and modules.</p><h3 id="JavaScriptModules-Librariesvs.Modules">Libraries vs. Modules</h3><p>Tapestry still supports JavaScript libraries.  When the page is loading, all libraries are loaded before any modules.</p><p>Libraries are loaded sequentially, so if you can avoid using libraries, so much the better in terms of page load time.</p><p>Libraries work in both normal page rendering, and Ajax partial page updates. Even in partial page updates, the libraries will be loaded sequentially before modules are loaded or exported functions invoked.</p><h3 id="JavaScriptModules-AggregatingModules">Aggregating Modules</h3><p>An important part of performance for production applications is JavaScript aggregation.</p><p>In development mode, you want your modules and other assets to load individually. Unlike assets, modules ca
n't be fingerprinted, so on each page load, the client browser must ask the server for the module again (typically getting a 304 Not Modified response).</p><p>This is acceptable in development mode, but quite undesirable in production.</p><p>With JavaScript aggregation, the module can be included in the single virtual JavaScript library that represents a <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/JavaScriptStack.html">JavaScript stack</a>. This significantly cuts down on both the number of requests from the client to the server, and the overall number of bytes transferred.</p><p>Adding a module to the stack is not the same as <code>require</code>-ing it. In fact, you must still use <code>JavaScriptSupport.require()</code> regardless.</p><p>What adding a module to a stack accomplishes is that the module's code is downloaded in the first, initial JavaScript download; the download of the stack's virtual li
brary. When (and if) the module is required as a dependency, the code will already be present in the browser and ready to execute.</p><p>Tapestry <strong>does not</strong> attempt to do dependency analysis; that is left as a manual exercise. Typically, if you aggregate a module, your should look at its dependencies, and aggregate those as well. Failure to do so will cause unwanted requests back to the Tapestry server for the dependency modules, even though the aggregated module's code is present.</p><p>Because Tapestry is open, it is possible to contribute modules even into the <strong>core</strong> JavaScript stack.  This is done using your application's module:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ @Contribute(JavaScriptStack.class)
@Core
public static void addAppModules(OrderedConfiguration<StackExtension> configuration) {
configuration.add("tree-viewer", StackExtension.module("tree-viewer"));
configuration.add("app-utils", StackExtension.module("app-utils"));
}]]></script>
-</div></div><p>To break this down:</p><ul><li>@Contribute indicates we are contributing to a JavaScriptStack service</li><li>Since there are (or at least, could be) multiple services that implement JavaScriptStack, we provide the @Core annotation to indicate which one we are contributing to</li><li>It is possible to contribute libraries, CSS files, other stacks, and modules; here we are contributing modules</li><li>Each contribution has a unique id and a <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/StackExtension.html">StackExtension</a> value</li></ul><p>The core stack includes several libraries and modules; the exact configuration is subject to a number of factors (such as whether Prototype or Scripaculous is the used as the underlying framework). That being said, this is the <em>current</em> list of modules aggregated into the core stack:</p><ul><li>jquery</li><li>underscore</li><li>t5/core/<
ul><li>alert</li><li>ajax</li><li>bootstrap</li><li>console</li><li>dom</li><li>events</li><li>exception-frame</li><li>fields</li><li>pageinit</li><li>messages</li><li>util</li><li>validation</li></ul></li></ul></div>
+</div></div><p>To break this down:</p><ul><li>@Contribute indicates we are contributing to a JavaScriptStack service</li><li>Since there are (or at least, could be) multiple services that implement JavaScriptStack, we provide the @Core annotation to indicate which one we are contributing to</li><li>It is possible to contribute libraries, CSS files, other stacks, and modules; here we are contributing modules</li><li>Each contribution has a unique id and a <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/StackExtension.html">StackExtension</a> value</li></ul><p>The core stack includes several libraries and modules; the exact configuration is subject to a number of factors (such as whether Prototype or jQuery is being used as the underlying framework). That being said, this is the <em>current</em> list of modules aggregated into the core stack:</p><ul><li>jquery</li><li>underscore</li><li>t5/core/<ul><
li>alert</li><li>ajax</li><li>bootstrap</li><li>console</li><li>dom</li><li>events</li><li>exception-frame</li><li>fields</li><li>pageinit</li><li>messages</li><li>util</li><li>validation</li></ul></li></ul><p>The optimum configuration is always a balancing act between including too little and including too much. Generally speaking, including too much is less costly than including too little. It is up to you to analyze the requests coming into your application and determine what modules should be aggregated.</p></div>
</div>
<div class="clearer"></div>
Modified: websites/production/tapestry/content/javascript.html
==============================================================================
--- websites/production/tapestry/content/javascript.html (original)
+++ websites/production/tapestry/content/javascript.html Mon Jun 2 18:19:30 2014
@@ -25,15 +25,6 @@
</title>
<link type="text/css" rel="stylesheet" href="/resources/space.css">
- <link href='/resources/highlighter/styles/shCoreCXF.css' rel='stylesheet' type='text/css' />
- <link href='/resources/highlighter/styles/shThemeCXF.css' rel='stylesheet' type='text/css' />
- <script src='/resources/highlighter/scripts/shCore.js' type='text/javascript'></script>
- <script src='/resources/highlighter/scripts/shBrushJava.js' type='text/javascript'></script>
- <script src='/resources/highlighter/scripts/shBrushXml.js' type='text/javascript'></script>
- <script type="text/javascript">
- SyntaxHighlighter.defaults['toolbar'] = false;
- SyntaxHighlighter.all();
- </script>
<link href="/styles/style.css" rel="stylesheet" type="text/css"/>
@@ -66,320 +57,11 @@
<div id="breadcrumbs">
<a href="index.html">Apache Tapestry</a> > <a href="documentation.html">Documentation</a> > <a href="user-guide.html">User Guide</a> > <a href="javascript.html">JavaScript</a>
- <a class="edit" title="Edit this page (requires approval -- just ask on the mailing list)" href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=21792074">edit</a>
+ <a class="edit" title="Edit this page (requires approval -- just ask on the mailing list)" href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=41813137">edit</a>
</div>
<div id="content">
-<div id="ConfluenceContent"><div class="navmenu" style="float:right; background:#eee; margin:3px; padding:3px">
-<h3>Related Articles</h3>
-<ul class="content-by-label"><li>
- <div>
- <span class="icon icon-page" title="Page">Page:</span> </div>
-
- <div class="details">
- <a shape="rect" href="javascript.html">JavaScript</a>
-
-
- </div>
- </li><li>
- <div>
- <span class="icon icon-page" title="Page">Page:</span> </div>
-
- <div class="details">
- <a shape="rect" href="ajax-and-zones.html">Ajax and Zones</a>
-
-
- </div>
- </li><li>
- <div>
- <span class="icon icon-page" title="Page">Page:</span> </div>
-
- <div class="details">
- <a shape="rect" href="component-cheat-sheet.html">Component Cheat Sheet</a>
-
-
- </div>
- </li><li>
- <div>
- <span class="icon icon-page" title="Page">Page:</span> </div>
-
- <div class="details">
- <a shape="rect" href="javascript-faq.html">JavaScript FAQ</a>
-
-
- </div>
- </li><li>
- <div>
- <span class="icon icon-page" title="Page">Page:</span> </div>
-
- <div class="details">
- <a shape="rect" href="assets.html">Assets</a>
-
-
- </div>
- </li><li>
- <div>
- <span class="icon icon-page" title="Page">Page:</span> </div>
-
- <div class="details">
- <a shape="rect" href="ajax-components-faq.html">Ajax Components FAQ</a>
-
-
- </div>
- </li></ul>
-</div><p><strong>JavaScript</strong> is a first-class concept in Tapestry, and sophisticated JavaScript support is provided right out of the box, including rich <a shape="rect" href="ajax-and-zones.html">AJAX support</a>, download optimization, client-side logging, and localization.</p><p>In production mode, by default, Tapestry will merge JavaScript libraries, add version numbering, and set a far-future expires header to encourage aggressive browser caching. Starting with version 5.3, Tapestry can also automatically minify (compress) JavaScript libraries when in <a shape="rect" href="configuration.html#Configuration-Configuration-ConfigurationSymbolNames">production mode</a>.</p><p>In addition, as will be described in detail <a shape="rect" href="#JavaScript-Built-inLibraries">below</a>, Tapestry comes with the <a shape="rect" class="external-link" href="http://www.prototypejs.org/" >Prototype</a> and <a shape="rect" class="external-link" href="http://script.aculo.us/" >Scriptaculo
us</a> libraries, or you can easily swap in JQuery using a 3rd-party module.</p><h1 id="JavaScript-AddingCustomJavaScript">Adding Custom JavaScript</h1><p>When adding your own custom JavaScript or third-party libraries, just follow the strategies below to take advantage of Tapestry's JavaScript support mechanisms.</p><p>The recommended practice in Tapestry is to package up any significant amount of JavaScript as a static JavaScript library, a .js file that can be downloaded to the client. Keep your in-page JavaScript code to a minimum, just the few statements needed to initialize objects and reference methods in the JavaScript libraries.</p><h2 id="JavaScript-LinkingtoyourJavaScriptlibraries">Linking to your JavaScript libraries</h2><p>Tapestry provides several ways to add a link to a JavaScript library within your page or component. Although you can use direct <code><script type="text/javascript" src="xxx.js"></script></code> approach, you should only use it for JavaScr
ipt that resides outside of your application. For JavaScript within your app, Tapestry provides <em>much</em> better ways to do the same thing. Most users choose the simplest, the @Import annotation approach.</p><div class="navmenu" style="float:right; background:#eee; margin:3px; padding:0 1em">
-<p><strong>JumpStart Demo:</strong> <br clear="none">
-<a shape="rect" class="external-link" href="http://jumpstart.doublenegative.com.au/jumpstart/examples/javascript/javascript" >JavaScript</a> </p></div><h2 id="JavaScript-Approach1:@Import">Approach 1: @Import</h2><p>Use the @<a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Import.html">Import</a> annotation (or @<a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/IncludeJavaScriptLibrary.html">IncludeJavaScriptLibrary</a> in Tapestry 5.0 and 5.1) to include links to JavaScript (and CSS) files in your page or component. Tapestry ensures that each such file is only referenced once in your page.</p><div class="sectionColumnWrapper"><div class="sectionMacro"><div class="sectionMacroRow"><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>For Tapes
try 5.2 and later</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[@Import(library={"context:js/jquery.js",
- "context:js/myeffects.js"})
-public class MyComponent
-{
- . . .
-}
-]]></script>
-</div></div></div><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>For Tapestry 5.0 and 5.1</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[@IncludeJavaScriptLibrary(value={"context:js/jquery.js",
- "context:js/myeffects.js"})
-public class MyComponent
-{
- . . .
-}
-]]></script>
-</div></div></div></div></div></div><p>@Import may also be applied to individual methods, in which case the import operation only occurs when the method is invoked.</p><p>Note: When specifying a file to import, you'll often use the <strong>context:</strong> binding prefix to indicate that the file is stored in the web application context, and not on the classpath. Relative paths will be on the classpath, relative to the Java class. See <a shape="rect" href="component-parameters.html">Component Parameters</a> for other binding prefix options.</p><p>Adding the same JavaScript library multiple times does <em>not</em> create duplicate links. The subsequent ones are simply ignored. In this way, each component can add the libraries it needs, without worrying about conflicts with other components.</p><h2 id="JavaScript-Approach2:JavaScriptSupport">Approach 2: JavaScriptSupport</h2><p>Alternatively, you can use <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/a
pidocs/org/apache/tapestry5/services/javascript/JavaScriptSupport.html">JavaScriptSupport</a> (for Tapestry 5.2 or later) or <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/RenderSupport.html">RenderSupport</a> (for Tapestry 5.0 and 5.1) to include a JavaScript library in your page or component. JavaScriptSupport and RenderSupport are <a shape="rect" href="environmental-services.html">environmental services</a> that include a number of methods that will be used by components, or by services that are called from components. For example:</p><h3 id="JavaScript-TheimportJavaScriptLibrarymethod">The <code>importJavaScriptLibrary</code> method</h3><p>The <code>importJavaScriptLibrary</code> method (or <code>addScriptLink</code> for Tapestry 5.0 and 5.1) adds a link to a JavaScript library. A component can inject such a script and pass one or more of assets to this method:</p><div class="sectionColumnWrapper"><div class="sectionMa
cro"><div class="sectionMacroRow"><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Tapestry 5.2 and later</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ @Inject @Path("context:/js/myeffects.js")
- private Asset myEffects;
-
- @Environmental
- private JavaScriptSupport javaScriptSupport;
-
- void setupRender()
- {
- javaScriptSupport.importJavaScriptLibrary(myEffects);
- }
-]]></script>
-</div></div></div><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Tapestry 5.1 and earlier</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ @Inject @Path("context:/js/myeffects.js")
- private Asset myEffects;
-
- @Environmental
- private RenderSupport renderSupport;
-
- void setupRender()
- {
- renderSupport.addScriptLink(myEffects);
- }
-]]></script>
-</div></div></div></div></div></div><p>Tapestry will ensure that the necessary <link> elements are added to the <em>top</em> of the document (in the <head> element). With Tapestry 5.3 and later the new elements are inserted at the bottom of the <head> element; in versions before 5.3 they appear at the top of the <head> element).</p><p>As with the annotation approach, adding the same asset multiple times does <em>not</em> create duplicate links.</p><p>The <code>setupRender</code> method (the name is specifically linked to a <a shape="rect" href="component-rendering.html">render phase</a>) is the correct place to inform the JavaScriptSupport (or RenderSupport) service that the library is needed.</p><div class="navmenu" style="float:right; background:#eee; margin:3px; padding:0 1em">
-<p><strong>JumpStart Demo:</strong> <br clear="none">
-<a shape="rect" class="external-link" href="http://jumpstart.doublenegative.com.au/jumpstart/examples/javascript/reusable" >Reusable JavaScript</a> </p></div><h3 id="JavaScript-TheaddScriptmethod">The <code>addScript</code> method</h3><p>The <code>addScript</code> method is used when you need to add some JavaScript code directly to the page. This will be inserted at the <em>bottom of the document</em>, and will only be executed when the document has finished loading on the client (i.e., from the window.onload event handler).</p><div class="sectionColumnWrapper"><div class="sectionMacro"><div class="sectionMacroRow"><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Tapestry 5.2 and later</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[void afterRender()
-{
- javaScriptSupport.addScript(
- "$('%s').observe('click', hideMe());",
- container.getClientId());
-}
-]]></script>
-</div></div></div><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Tapestry 5.1 and earlier</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[void afterRender()
-{
- javaScriptSupport.addScript(String.format(
- "$('%s').observe('click', hideMe());",
- container.getClientId()));
-}
-]]></script>
-</div></div></div></div></div></div><p>When calling the method, the format string can include standard substitutions (such as '%s') for arguments. This saves you the trouble of calling String.format() yourself. (For Tapestry 5.1 and earlier, you must call String.format() yourself.) In any case, the formatted JavaScript is added to the script block in the rendered output.</p><h3 id="JavaScript-InjectingJavaScriptSupport">Injecting JavaScriptSupport</h3><p>JavaScriptSupport (like RenderSupport before it) is an <em>environmental</em> object, so you will normally inject it via the @<a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Environmental.html">Environmental</a> annotation:</p><div class="sectionColumnWrapper"><div class="sectionMacro"><div class="sectionMacroRow"><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1p
x;"><b>For Tapestry 5.2 and later</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ @Environmental
- private JavaScriptSupport javaScriptSupport;
-]]></script>
-</div></div></div><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>For Tapestry 5.0 and 5.1</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ @Environmental
- private RenderSupport renderSupport;
-]]></script>
-</div></div></div></div></div></div><p>The @Environmental annotation only works inside components, but occasionally you may want to inject JavaScriptSupport (or RenderSupport) into a service. Fortunately, a proxy has been set up to allow the use of @Inject instead:</p><div class="sectionColumnWrapper"><div class="sectionMacro"><div class="sectionMacroRow"><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>For Tapestry 5.2 and later</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ @Inject
- private JavaScriptSupport javaScriptSupport;
-]]></script>
-</div></div></div><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>For Tapestry 5.0 and 5.1</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ @Inject
- private RenderSupport renderSupport;
-]]></script>
-</div></div></div></div></div></div><p>... or, in a service implementation constructor:</p><div class="sectionColumnWrapper"><div class="sectionMacro"><div class="sectionMacroRow"><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>For Tapestry 5.2 and later</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ public MyServiceImpl(JavaScriptSupport support)
- {
- . . .
- }
-]]></script>
-</div></div></div><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>For Tapestry 5.0 and 5.1</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ public MyServiceImpl(RenderSupport support)
- {
- . . .
- }
-]]></script>
-</div></div></div></div></div></div><p>Inside a component, you should use @Environmental, to highlight the fact that RenderSupport (like most environmental objects) is only available during rendering, not during action requests.</p><h1 id="JavaScript-CombiningJavaScriptlibraries">Combining JavaScript libraries</h1>
-
- <div class="aui-message hint shadowed information-macro">
- <p class="title">Added in 5.1.0.2</p>
- <span class="aui-icon icon-hint">Icon</span>
- <div class="message-content">
-
-
- </div>
- </div>
-
-<div style="border-right: 20px solid #D8E4F1;border-left: 20px solid #D8E4F1;">
-<p> </p></div><p>In production mode, Tapestry automatically <em>combines</em> JavaScript libraries. A single request (for a <em>virtual asset</em>) will retrieve the combined content of all referenced JavaScript library files.</p><p>Note: starting with Tapestry 5.2, JavaScript libraries are only combined if they are part of a JavaScript Stack (see below).</p><p>This is a very useful feature, as it reduces the number of requests needed to present a page to the user. It can be disabled, however, by setting the SymbolConstants.COMBINE_SCRIPTS <a shape="rect" href="configuration.html">configuration symbol</a> to false in your application's module class (normally AppModule.java). By default it is enabled when in production mode and disabled otherwise.</p><p>As elsewhere, if the client browser supports gzip compression, the combined JavaScript will be compressed.</p><h1 id="JavaScript-MinifyingJavaScriptlibraries">Minifying JavaScript libraries</h1>
-
- <div class="aui-message hint shadowed information-macro">
- <p class="title">Added in 5.3</p>
- <span class="aui-icon icon-hint">Icon</span>
- <div class="message-content">
-
-
- </div>
- </div>
-
-<div style="border-right: 20px solid #D8E4F1;border-left: 20px solid #D8E4F1;">
-<p> </p></div><p>In production mode, Tapestry can automatically <em>minify</em> (intelligently compresses) JavaScript libraries (and CSS) when the application starts up. This can significantly decrease the size of static content that the browser needs to download.</p><p>Minification is accomplished using the ResourceMinimizer service. A YUI Compressor-based implementation is available, but this can be overridden.</p><p>IMPORTANT NOTE: The tapestry-core module only provides the empty infrastructure for supporting minification; the actual logic is supplied in the tapestry-yuicompressor module. To use it, you'll need to update your dependencies to include this module.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Maven pom.xml (partial)</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[<dependency>
- <groupId>org.apache.tapestry</groupId>
- <artifactId>tapestry-yuicompressor</artifactId>
- <version>${tapestry-release-version}</version>
-</dependency>
-]]></script>
-</div></div><p>Gradle would be similar, of course. If you aren't using something like Maven or Gradle, you'll have to download the jar and its dependency (com.yahoo.platform.yui: yuicompressor) yourself.</p><p>Minification can be disabled by setting the SymbolConstants.MINIFICATION_ENABLED <a shape="rect" href="configuration.html">configuration symbol</a> to false in your application's module class (usually AppModule.java). By default it is enabled when in production mode and disabled otherwise.</p><p>Please test your applications well: the YUI Compressor code can be somewhat finicky about the application server and JDK version.</p><h1 id="JavaScript-Client-sideLogging">Client-side Logging</h1>
-
- <div class="aui-message problem shadowed information-macro">
- <p class="title">Deprecated since 5.3</p>
- <span class="aui-icon icon-problem">Icon</span>
- <div class="message-content">
-
-
- </div>
- </div>
-
-<div style="border-right: 20px solid #ffcccc;border-left: 20px solid #ffcccc;">
-<p> </p></div><p>In versions prior to 5.3, Tapestry uses a modified version of the <a shape="rect" class="external-link" href="http://www.gscottolson.com/blackbirdjs/" >Blackbird</a> JavaScript console. The Tapestry object includes three functions: debug, warn and error.</p><p>Each of these functions take a message and an optional pattern; if the pattern is provided, the message is <a shape="rect" class="external-link" href="http://prototypejs.org/api/string/interpolate" >interpolated</a> on the pattern. The final message is displayed in the Blackbird console, which will make itself visible automatically.</p><p>In production mode, debug messages will be filtered out (they will not be visible until the user presses F2 to display the console, and then clicks the grayed out icon for debug messages). In development mode, debug messages are not filtered out.</p><p>Example usage:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ Tapestry.debug("Field id is #{id}, value is #{value}", field);
-
- Tapestry.error("Server is not available.");
-
-]]></script>
-</div></div><p>With Tapestry 5.3 and later the Blackbird console has been removed; just use the standard console logging features (e.g. <code>console.log()</code>) built into modern browsers.</p><h1 id="JavaScript-HandlingSlowPageLoads">Handling Slow Page Loads</h1><p>If your page loads slowly (typically, because of scripts loaded from external sites), you may see a race condition where the user can click on a link before an event handler for that link has been wired up.</p><p>The client-side function <code>Tapestry.waitForPage()</code> can be used in an element's onclick handler to force a wait for the page to fully load. In this race condition, the screen will dim and a message will appear advising the user to wait a moment; once the page is fully loaded, this modal dialog will be removed.</p><p>The correct usage is:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ <a href="..." onclick="javascript:Tapestry.waitForPage(event);"> ... </a>
-]]></script>
-</div></div><p>The constant <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/MarkupConstants.html">MarkupConstants.WAIT_FOR_PAGE</a> contains the part of this snippet inside the quotes.</p><h1 id="JavaScript-TheStandardTapestryLibrary">The Standard Tapestry Library</h1><p>Tapestry's client-side support, the standard Tapestry library, consists of <code>tapestry.js</code>, which has dependencies on Prototype and on Scriptaculous Effects. tapestry.js, along with its dependencies. The tapestry.js library is automatically added to the page when your code adds any other JavaScript or JavaScript library.</p><h2 id="JavaScript-TapestryNamespace">Tapestry Namespace</h2><p>Tapestry defines a number of object and classes inside the Tapestry namespace.</p><p>It also adds a handful of methods to the Form class, and to Form elements. These are mostly related to input validation and determining element visibility.</p><h2 id="JavaScript-The
TapestryObject$T()">The Tapestry Object $T()</h2>
-
- <div class="aui-message problem shadowed information-macro">
- <p class="title">Deprecated since 5.2 (no replacement)</p>
- <span class="aui-icon icon-problem">Icon</span>
- <div class="message-content">
-
-
- </div>
- </div>
-
-<div style="border-right: 20px solid #ffcccc;border-left: 20px solid #ffcccc;">
-<p> </p></div><p>The standard library adds a new function, <code>$T()</code>. This function is used much like Prototype's <code>$()</code>, except that instead of returning a DOM object, it returns a hash (an initially empty JavaScript object) that is associated with the DOM object. This hash is known as <em>the Tapestry object</em>.</p><p>You may pass in an object id (as a string) or an object reference. The Tapestry Object is created on first invocation. Note: you'll see it as a property name _tapestry on the DOM object (which may be useful when debugging).</p><p>When Tapestry adds information to a DOM object, it does so in the Tapestry object. This helps avoid name conflicts, and groups all Tapestry-added properties into one place which is much easier to debug.</p><p>For example, you might store a value for an element in one place:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ $T(myid).fadeDuration = .5;
-]]></script>
-</div></div><p>Then use it somewhere else:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ new Effect.Fade($(myId), { duration: $T(myid).fadeDuration });
-]]></script>
-</div></div><h1 id="JavaScript-AjaxComponentsandMixins">Ajax Components and Mixins</h1><p>Tapestry provides easy-to-use support for <em>Ajax</em>, the technique of using JavaScript to dynamically updating parts of a web page with content from the server without redrawing the whole page. See <a shape="rect" href="ajax-and-zones.html">Ajax and Zones</a> for details.</p><h1 id="JavaScript-Built-inLibraries">Built-in Libraries</h1><div class="navmenu" style="float:right; width:30%; background:#eee; margin:3px; padding:3px">
-<p><font color="green"><strong>Alternatives to Prototype</strong></font><br clear="none">
-Tapestry also works well with other JavaScript libraries, such as JQuery and ExtJS:</p>
-<ul><li><strong><a shape="rect" class="external-link" href="https://github.com/got5/tapestry5-jquery" >Tapestry5-Jquery module</a></strong> – Using JQuery <em>instead of</em> Prototype</li><li><a shape="rect" class="external-link" href="http://wiki.apache.org/tapestry/Tapestry5HowToIntegrateJQuery">Tapestry5HowToIntegrateJQuery</a> – Using JQuery <em>in addition to</em> Prototype</li><li><a shape="rect" class="external-link" href="https://issues.apache.org/jira/browse/TAP5-999">TAP5-999</a> tracks work underway to introduce an agnostic tapestry.js layer to allow switching from Prototype to JQuery. See <a shape="rect" href="javascript-rewrite.html" title="JavaScript Rewrite">JavaScript Rewrite</a> for more info.</li><li><a shape="rect" class="external-link" href="https://issues.apache.org/jira/browse/TAP5-1364">TAPS-1364</a> lists some starting points for ExtJS integration</li></ul>
-</div><p>Tapestry comes with the <a shape="rect" class="external-link" href="http://www.prototypejs.org/" >Prototype</a> and <a shape="rect" class="external-link" href="http://script.aculo.us/" >Scriptaculous</a> libraries ... no extra download is required. Tapestry will automatically link into your pages the prototype.js, scriptaculous.js, and effects.js libraries, as well as the Tapestry library, tapestry.js (which largely consists of support for form input validation). Starting with Tapestry 5.3, <a shape="rect" class="external-link" href="http://documentcloud.github.com/underscore/" >Underscore</a> is also included.</p><h2 id="JavaScript-PrototypeandScriptaculousVersions">Prototype and Scriptaculous Versions</h2><div class="table-wrap"><table class="confluenceTable"><tbody><tr><th colspan="1" rowspan="1" class="confluenceTh"><p>Tapestry 5.3.5</p></th><td colspan="1" rowspan="1" class="confluenceTd"><p>Prototype 1.7.1</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Sc
riptaculous 1.9</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Underscore 1.1.7</p></td></tr><tr><th colspan="1" rowspan="1" class="confluenceTh"><p>Tapestry 5.3+</p></th><td colspan="1" rowspan="1" class="confluenceTd"><p>Prototype 1.7</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Scriptaculous 1.9</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Underscore 1.1.7</p></td></tr><tr><th colspan="1" rowspan="1" class="confluenceTh"><p>Tapestry 5.2.6</p></th><td colspan="1" rowspan="1" class="confluenceTd"><p>Prototype 1.7</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Scriptaculous 1.9</p></td></tr><tr><th colspan="1" rowspan="1" class="confluenceTh"><p>Tapestry 5.2</p></th><td colspan="1" rowspan="1" class="confluenceTd"><p>Prototype 1.6.1</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Scriptaculous 1.8.2</p></td></tr><tr><th colspan="1" rowspan="1" class="confluenceTh"><p>Tapestry 5.1</p></th><td colspan="1" rowspan="1"
class="confluenceTd"><p>Prototype 1.6.0.3</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Scriptaculous 1.8.2</p></td></tr><tr><th colspan="1" rowspan="1" class="confluenceTh"><p>Tapestry 5.0</p></th><td colspan="1" rowspan="1" class="confluenceTd"><p>Prototype 1.6.0</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Scriptaculous 1.8.0</p></td></tr></tbody></table></div><p>Tapestry uses a modified version of the main Scriptaculous library, scriptaculous.js, with the library's default <a shape="rect" class="external-link" href="http://wiki.script.aculo.us/scriptaculous/show/Usage" >autoloading</a> behavior turned off. This lets Tapestry and Tapestry components control which Scriptaculus scripts are loaded, rather than having <em>all</em> of them loaded unnecessarily.</p><p>If you need access to other Scriptaculous libraries, you can provide them as follows:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ @Inject @Path("${tapestry.scriptaculous}/dragdrop.js")
- private Asset dragDropLibrary;
-
- @Environmental
- private JavaScriptSupport javaScriptSupport;
-
- void setupRender()
- {
- javaScriptSupport.addScriptLink(dragDropLibrary);
- }
-
-]]></script>
-</div></div><p>The Asset is injected, using the ${tapestry.scriptaculous} <a shape="rect" href="symbols.html">symbol</a> to reference the location of the Scriptaculous library.</p><p>Even though the dragdrop.js library is stored inside a JAR file, Tapestry ensures that it can be accessed from the client web browser. A Tapestry URL within the virtual folder "/assets" is created; the file will be given a version number (the application version number if not specified more specifically) and will be sent to the browser with a far-future expires header (to encourage the browser to cache the file aggressively).</p><h1 id="JavaScript-JavaScriptStacks">JavaScript Stacks</h1>
-
- <div class="aui-message hint shadowed information-macro">
- <p class="title">Added in 5.2</p>
- <span class="aui-icon icon-hint">Icon</span>
- <div class="message-content">
-
-
- </div>
- </div>
-
-<div style="border-right: 20px solid #D8E4F1;border-left: 20px solid #D8E4F1;">
-<p> </p></div><p>Tapestry allows you to define groups of related JavaScript libraries and stylesheets as "stacks". The built-in "core" stack is used to define the core JavaScript libraries needed by Tapestry (currently, this includes Prototype and Scriptaculous, as well as Tapestry-specific libraries). Other component libraries may define additional stacks for related sets of resources, for example, to bundle together some portion of the ExtJS or YUI libraries.</p><p>A <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/services/javascript/JavaScriptStack.html">JavaScriptStack</a> can be thought of as a generalization of Tapestry 5.1's ClientInfrastructure, which exists now to define the "core" JavaScript stack.</p><p>JavaScript assets of a stack may (when enabled) be exposed to the client as a single URL (identifying the stack by name). The individual assets are combined into a single virtual asset, which is then streamed
to the client.</p><p>To group several static resources together in a single stack, you must create a new implementation of the JavaScriptStack interface . This interface has four methods:</p><ul class="alternate"><li><strong>getStylesheets</strong> : This method will return a list of stylesheet files (StylesheetLink-type object) associated to this stack</li></ul><ul class="alternate"><li><strong>getJavaScriptLibraries</strong> : This method will return a list of javascript files (Asset-type object) associated to this stack</li></ul><ul class="alternate"><li><strong>getStacks</strong> : It is also possible to make a stack dependant of other stacks. All the stacks defined in this method will be loaded before the current stack.</li></ul><ul class="alternate"><li><strong>getInitialization</strong> : this method makes it possible to call a JavaScript initialization for the stack. Tapestry will automatically add this initialization to the page that imports the stacks.</li></ul><div class
="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>myStack.java</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[public class myStack implements JavaScriptStack {
-
- private final AssetSource assetSource;
-
- public myStack (final AssetSource assetSource)
- {
- this.assetSource = assetSource;
- }
-
- public String getInitialization()
- {
- return null;
- }
-
-
-
- public List<Asset> getJavaScriptLibraries()
- {
- List<Asset> ret = new ArrayList<Asset>();
-
- ret.add(assetSource.getContextAsset("static/js/jquery.js", null));
-
- ret.add(assetSource.getContextAsset("static/js/jquery.ui.core.js", null));
-
- return ret;
- }
-
- public List<StylesheetLink> getStylesheets()
- {
- List<StylesheetLink> ret = new ArrayList<StylesheetLink>();
-
- ret.add(new StylesheetLink(assetSource.getContextAsset("static/css/style.css", null)));
-
- return ret;
- }
-
- public List<String> getStacks()
- {
- return Collections.emptyList();
- }
-
-}
-]]></script>
-</div></div><p>When your new Stack is created, you have to define it in your AppModule.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>AppModule.java</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[@Contribute(JavaScriptStackSource.class)
-public static void addMyStack (MappedConfiguration<String, JavaScriptStack> configuration)
-{
- configuration.addInstance("MyNewStack", myStack.class);
-}
-]]></script>
-</div></div><p>You can now use it in your pages and components, by using the @Import annotation or the JavaScriptSupport service :</p><div class="sectionColumnWrapper"><div class="sectionMacro"><div class="sectionMacroRow"><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>With @Import</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[ @Import(stack="MyNewStack")
- public class myPage {
- }
-]]></script>
-</div></div></div><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>With JavaScriptSupport</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[@Inject
-private JavaScriptSupport js;
-
-@SetupRender
-public void importStack(){
- js.importStack("MyNewStack");
-}
-]]></script>
-</div></div></div></div></div></div></div>
+<div id="ConfluenceContent"></div>
</div>
<div class="clearer"></div>
Modified: websites/production/tapestry/content/user-guide.html
==============================================================================
--- websites/production/tapestry/content/user-guide.html (original)
+++ websites/production/tapestry/content/user-guide.html Mon Jun 2 18:19:30 2014
@@ -61,7 +61,7 @@
</div>
<div id="content">
-<div id="ConfluenceContent"><p>This <strong>User Guide</strong> serves as the encyclopedia for Tapestry concepts, capabilities and practices.</p><div class="sectionColumnWrapper"><div class="sectionMacro"><div class="sectionMacroRow"><div class="columnMacro" style="width:30%;min-width:30%;max-width:30%;"><h2 id="UserGuide-TapestryBasics">Tapestry Basics</h2><p>Going beyond <a shape="rect" href="getting-started.html">Getting Started</a> and the <a shape="rect" href="tapestry-tutorial.html">Tutorial</a>, these topics will dive into basic Tapestry capabilities that you'll want to understand first.</p><ul><li><a shape="rect" href="project-layout.html">Project Layout</a></li><li><a shape="rect" href="configuration.html">Configuration</a></li><li><a shape="rect" href="class-reloading.html">Class Reloading</a></li><li><a shape="rect" href="component-reference.html">Component Reference</a></li><li><a shape="rect" href="annotations.html">Annotations</a></li></ul><h3 id="UserGuide-PagesandCom
ponents">Pages and Components</h3><ul><li><a shape="rect" href="component-classes.html">Component Classes</a></li><li><a shape="rect" href="component-templates.html">Component Templates</a></li><li><a shape="rect" href="property-expressions.html">Property Expressions</a></li><li><a shape="rect" href="component-parameters.html">Component Parameters</a></li><li><a shape="rect" href="type-coercion.html">Type Coercion</a></li><li><a shape="rect" href="layout-component.html">Layout Component</a></li><li><a shape="rect" href="component-mixins.html">Component Mixins</a></li><li><a shape="rect" href="page-navigation.html">Page Navigation</a></li><li><a shape="rect" href="localization.html">Localization</a></li></ul><h3 id="UserGuide-Request/ResponseProcessing">Request/Response Processing</h3><ul><li><a shape="rect" href="page-life-cycle.html">Page Life Cycle</a></li><li><a shape="rect" href="request-processing.html">Request Processing</a></li><li><a shape="rect" href="component-rendering.ht
ml">Component Rendering</a></li><li><a shape="rect" href="component-events.html">Component Events</a></li><li><a shape="rect" href="url-rewriting.html">URL Rewriting</a></li><li><a shape="rect" href="dom.html">Document Object Model</a> (DOM)</li><li><a shape="rect" href="response-compression.html">Response Compression</a></li><li><a shape="rect" href="https.html">Securing your application with HTTPS</a></li><li><a shape="rect" href="content-type-and-markup.html">Content Type and Markup</a></li></ul><h3 id="UserGuide-Datapersistence">Data persistence</h3><ul><li><a shape="rect" href="persistent-page-data.html">Persistent Page Data</a></li><li><a shape="rect" href="session-storage.html">Session Storage</a></li></ul><h3 id="UserGuide-Interactingwithcomponents">Interacting with components</h3><ul><li><a shape="rect" href="injection.html">Injection</a></li><li><a shape="rect" href="environmental-services.html">Environmental Services</a></li></ul><h3 id="UserGuide-JavaScript,AJAX,CSS&
BinaryData">JavaScript, AJAX, CSS & Binary Data</h3><ul><li><span style="font-size: 14.0px;line-height: 1.4285715;">Client-Side JavaScript</span></li><li><span style="font-size: 14.0px;line-height: 1.4285715;">JavaScript Modules</span></li><li><span style="font-size: 14.0px;line-height: 1.4285715;">CoffeeScript</span></li><li><a shape="rect" href="ajax-and-zones.html">Ajax and Zones</a></li><li><a shape="rect" href="css.html">Cascading Style Sheets</a> (CSS)</li><li><a shape="rect" href="assets.html">Assets</a></li><li><a shape="rect" href="legacy-javascript.html">Legacy JavaScript</a> (prior to Tapestry 5.4)</li></ul><h3 id="UserGuide-Workingwithforms">Working with forms</h3><ul><li><a shape="rect" href="forms-and-validation.html">Forms and Validation</a></li><li><a shape="rect" href="beaneditform-guide.html">BeanEditForm Guide</a></li><li><a shape="rect" href="uploading-files.html">Uploading files</a></li></ul><h3 id="UserGuide-Debugging,Testing&Tooling">Debugging, Testing
& Tooling</h3><ul><li><a shape="rect" href="logging.html">Logging & Debugging</a></li><li><a shape="rect" href="unit-testing-pages-or-components.html">Unit testing pages or components</a></li><li><a shape="rect" href="integration-testing.html">Integration testing with Selenium</a></li><li><a shape="rect" href="service-status.html">Service Status</a></li></ul></div><div class="columnMacro" style="width:30%;min-width:30%;max-width:30%;"><h2 id="UserGuide-TapestryIOC">Tapestry IOC</h2><p>As with Tapestry 5 in general, the goal of Tapestry Inversion of Control (IoC) is greater simplicity and power--without XML. You'll want to explore Tapestry IoC to make full use of the extensibility of the framework.</p><h3 id="UserGuide-Architecture">Architecture</h3><ul><li><a shape="rect" href="ioc.html">Introduction</a></li><li><a shape="rect" href="tapestry-ioc-overview.html">Overview</a></li><li><a shape="rect" href="tapestry-ioc-modules.html">Modules</a></li></ul><h3 id="UserGuide-Featu
res">Features</h3><ul><li><a shape="rect" href="defining-tapestry-ioc-services.html">Services</a></li><li><a shape="rect" href="service-advisors.html">Advisors</a></li><li><a shape="rect" href="tapestry-ioc-decorators.html">Decorators</a></li></ul><h3 id="UserGuide-Configuration">Configuration</h3><ul><li><a shape="rect" href="tapestry-ioc-configuration.html">Configuration</a></li><li><a shape="rect" href="case-insensitivity.html">Case Insensitivity</a></li><li><a shape="rect" href="autoloading-modules.html">Module Autoloading</a></li><li><a shape="rect" href="service-implementation-reloading.html">Service Implementation Reloading</a></li><li><a shape="rect" href="ordering-by-constraints.html">Ordering by Constraints</a></li><li><a shape="rect" href="symbols.html">Symbols</a></li></ul><h3 id="UserGuide-ServiceBuilders">Service Builders</h3><p>Tapestry provides a set of ready-to-use service builders for common design patterns:</p><ul><li><a shape="rect" href="chainbuilder-service.htm
l">Chain of Command</a> (the ChainBuilder service)</li><li><a shape="rect" href="pipelinebuilder-service.html">Pipeline</a> (the PipelineBuilder service)</li><li><a shape="rect" href="shadowbuilder-service.html">Shadow Properties</a> (the PropertyShadowBuilder service)</li><li><a shape="rect" href="strategybuilder-service.html">Strategy</a> (the StrategyBuilder service)</li></ul><h3 id="UserGuide-Usage">Usage</h3><ul><li><a shape="rect" href="injection-in-detail.html">Injection in detail</a></li><li><a shape="rect" href="object-providers.html">Object providers</a></li><li><a shape="rect" href="service-serialization.html">Service Serialization</a></li></ul><h3 id="UserGuide-Built-inservices">Built-in services</h3><ul><li><a shape="rect" href="typecoercer-service.html">Type Coercer</a></li></ul><h3 id="UserGuide-Registrystartup&shutdown">Registry startup & shutdown</h3><ul><li><a shape="rect" href="starting-the-ioc-registry.html">Starting and stopping the registry</a></li><li>
<a shape="rect" href="registry-startup.html">Listening for registry startup</a></li></ul><h3 id="UserGuide-Tooling">Tooling</h3><ul><li><a shape="rect" href="parallel-execution.html">Parallel Execution</a></li><li><a shape="rect" href="logging-in-tapestry.html">Logging</a></li></ul></div><div class="columnMacro" style="width:30%;min-width:30%;max-width:30%;"><h2 id="UserGuide-Built-inmodules">Built-in modules</h2>Tapestry comes with a collection of add-on modules to let you extend the framework beyond its core.
+<div id="ConfluenceContent"><p>This <strong>User Guide</strong> serves as the encyclopedia for Tapestry concepts, capabilities and practices.</p><div class="sectionColumnWrapper"><div class="sectionMacro"><div class="sectionMacroRow"><div class="columnMacro" style="width:30%;min-width:30%;max-width:30%;"><h2 id="UserGuide-TapestryBasics">Tapestry Basics</h2><p>Going beyond <a shape="rect" href="getting-started.html">Getting Started</a> and the <a shape="rect" href="tapestry-tutorial.html">Tutorial</a>, these topics will dive into basic Tapestry capabilities that you'll want to understand first.</p><ul><li><a shape="rect" href="project-layout.html">Project Layout</a></li><li><a shape="rect" href="configuration.html">Configuration</a></li><li><a shape="rect" href="class-reloading.html">Class Reloading</a></li><li><a shape="rect" href="component-reference.html">Component Reference</a></li><li><a shape="rect" href="annotations.html">Annotations</a></li></ul><h3 id="UserGuide-PagesandCom
ponents">Pages and Components</h3><ul><li><a shape="rect" href="component-classes.html">Component Classes</a></li><li><a shape="rect" href="component-templates.html">Component Templates</a></li><li><a shape="rect" href="property-expressions.html">Property Expressions</a></li><li><a shape="rect" href="component-parameters.html">Component Parameters</a></li><li><a shape="rect" href="type-coercion.html">Type Coercion</a></li><li><a shape="rect" href="layout-component.html">Layout Component</a></li><li><a shape="rect" href="component-mixins.html">Component Mixins</a></li><li><a shape="rect" href="page-navigation.html">Page Navigation</a></li><li><a shape="rect" href="localization.html">Localization</a></li></ul><h3 id="UserGuide-Request/ResponseProcessing">Request/Response Processing</h3><ul><li><a shape="rect" href="page-life-cycle.html">Page Life Cycle</a></li><li><a shape="rect" href="request-processing.html">Request Processing</a></li><li><a shape="rect" href="component-rendering.ht
ml">Component Rendering</a></li><li><a shape="rect" href="component-events.html">Component Events</a></li><li><a shape="rect" href="url-rewriting.html">URL Rewriting</a></li><li><a shape="rect" href="dom.html">Document Object Model</a> (DOM)</li><li><a shape="rect" href="response-compression.html">Response Compression</a></li><li><a shape="rect" href="https.html">Securing your application with HTTPS</a></li><li><a shape="rect" href="content-type-and-markup.html">Content Type and Markup</a></li></ul><h3 id="UserGuide-Datapersistence">Data persistence</h3><ul><li><a shape="rect" href="persistent-page-data.html">Persistent Page Data</a></li><li><a shape="rect" href="session-storage.html">Session Storage</a></li></ul><h3 id="UserGuide-Interactingwithcomponents">Interacting with components</h3><ul><li><a shape="rect" href="injection.html">Injection</a></li><li><a shape="rect" href="environmental-services.html">Environmental Services</a></li></ul><h3 id="UserGuide-JavaScript,AJAX,CSS&
BinaryData">JavaScript, AJAX, CSS & Binary Data</h3><ul><li><span style="font-size: 14.0px;line-height: 1.4285715;"><a shape="rect" href="javascript.html">Client-Side JavaScript</a></span></li><li><span style="font-size: 14.0px;line-height: 1.4285715;"><a shape="rect" href="javascript-modules.html">JavaScript Modules</a></span></li><li><span style="font-size: 14.0px;line-height: 1.4285715;">CoffeeScript</span></li><li><a shape="rect" href="ajax-and-zones.html">Ajax and Zones</a></li><li><a shape="rect" href="css.html">Cascading Style Sheets</a> (CSS)</li><li><a shape="rect" href="assets.html">Assets</a></li><li><a shape="rect" href="legacy-javascript.html">Legacy JavaScript</a> (prior to Tapestry 5.4)</li></ul><h3 id="UserGuide-Workingwithforms">Working with forms</h3><ul><li><a shape="rect" href="forms-and-validation.html">Forms and Validation</a></li><li><a shape="rect" href="beaneditform-guide.html">BeanEditForm Guide</a></li><li><a shape="rect" href="uploading-files.html">Up
loading files</a></li></ul><h3 id="UserGuide-Debugging,Testing&Tooling">Debugging, Testing & Tooling</h3><ul><li><a shape="rect" href="logging.html">Logging & Debugging</a></li><li><a shape="rect" href="unit-testing-pages-or-components.html">Unit testing pages or components</a></li><li><a shape="rect" href="integration-testing.html">Integration testing with Selenium</a></li><li><a shape="rect" href="service-status.html">Service Status</a></li></ul></div><div class="columnMacro" style="width:30%;min-width:30%;max-width:30%;"><h2 id="UserGuide-TapestryIOC">Tapestry IOC</h2><p>As with Tapestry 5 in general, the goal of Tapestry Inversion of Control (IoC) is greater simplicity and power--without XML. You'll want to explore Tapestry IoC to make full use of the extensibility of the framework.</p><h3 id="UserGuide-Architecture">Architecture</h3><ul><li><a shape="rect" href="ioc.html">Introduction</a></li><li><a shape="rect" href="tapestry-ioc-overview.html">Overview</a></li><li
><a shape="rect" href="tapestry-ioc-modules.html">Modules</a></li></ul><h3 id="UserGuide-Features">Features</h3><ul><li><a shape="rect" href="defining-tapestry-ioc-services.html">Services</a></li><li><a shape="rect" href="service-advisors.html">Advisors</a></li><li><a shape="rect" href="tapestry-ioc-decorators.html">Decorators</a></li></ul><h3 id="UserGuide-Configuration">Configuration</h3><ul><li><a shape="rect" href="tapestry-ioc-configuration.html">Configuration</a></li><li><a shape="rect" href="case-insensitivity.html">Case Insensitivity</a></li><li><a shape="rect" href="autoloading-modules.html">Module Autoloading</a></li><li><a shape="rect" href="service-implementation-reloading.html">Service Implementation Reloading</a></li><li><a shape="rect" href="ordering-by-constraints.html">Ordering by Constraints</a></li><li><a shape="rect" href="symbols.html">Symbols</a></li></ul><h3 id="UserGuide-ServiceBuilders">Service Builders</h3><p>Tapestry provides a set of ready-to-use service
builders for common design patterns:</p><ul><li><a shape="rect" href="chainbuilder-service.html">Chain of Command</a> (the ChainBuilder service)</li><li><a shape="rect" href="pipelinebuilder-service.html">Pipeline</a> (the PipelineBuilder service)</li><li><a shape="rect" href="shadowbuilder-service.html">Shadow Properties</a> (the PropertyShadowBuilder service)</li><li><a shape="rect" href="strategybuilder-service.html">Strategy</a> (the StrategyBuilder service)</li></ul><h3 id="UserGuide-Usage">Usage</h3><ul><li><a shape="rect" href="injection-in-detail.html">Injection in detail</a></li><li><a shape="rect" href="object-providers.html">Object providers</a></li><li><a shape="rect" href="service-serialization.html">Service Serialization</a></li></ul><h3 id="UserGuide-Built-inservices">Built-in services</h3><ul><li><a shape="rect" href="typecoercer-service.html">Type Coercer</a></li></ul><h3 id="UserGuide-Registrystartup&shutdown">Registry startup & shutdown</h3><ul><li><a shap
e="rect" href="starting-the-ioc-registry.html">Starting and stopping the registry</a></li><li><a shape="rect" href="registry-startup.html">Listening for registry startup</a></li></ul><h3 id="UserGuide-Tooling">Tooling</h3><ul><li><a shape="rect" href="parallel-execution.html">Parallel Execution</a></li><li><a shape="rect" href="logging-in-tapestry.html">Logging</a></li></ul></div><div class="columnMacro" style="width:30%;min-width:30%;max-width:30%;"><h2 id="UserGuide-Built-inmodules">Built-in modules</h2>Tapestry comes with a collection of add-on modules to let you extend the framework beyond its core.
<h3 id="UserGuide-HibernateIntegration">Hibernate Integration</h3>