You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@tapestry.apache.org by bu...@apache.org on 2015/06/27 23:21:05 UTC
svn commit: r956226 [21/34] - in /websites/production/tapestry/content: ./
2010/10/11/ 2010/10/31/ 2010/11/18/ 2010/11/19/ 2010/12/16/ 2010/12/17/
2011/01/10/ 2011/03/29/ 2011/06/13/ 2011/06/24/ 2011/06/29/ 2011/07/29/
2011/08/16/ 2011/08/27/ 2011/10/3...
Modified: websites/production/tapestry/content/ioc-order.html
==============================================================================
--- websites/production/tapestry/content/ioc-order.html (original)
+++ websites/production/tapestry/content/ioc-order.html Sat Jun 27 21:21:02 2015
@@ -45,7 +45,7 @@
<input type="submit" value="Search">
</form>
-</div><div class="emblem" style="float:left"><p><a shape="rect" href="index.html"><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"></a></p></div><div class="title" style="float:left; margin: 0 0 0 3em"><h1 id="SmallBanner-PageTitle">IoC - order</h1></div></div>
+</div><div class="emblem" style="float:left"><p><a shape="rect" 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">IoC - order</h1></div></div>
<div class="clearer"></div>
</div>
Modified: websites/production/tapestry/content/ioc-overview.html
==============================================================================
--- websites/production/tapestry/content/ioc-overview.html (original)
+++ websites/production/tapestry/content/ioc-overview.html Sat Jun 27 21:21:02 2015
@@ -45,7 +45,7 @@
<input type="submit" value="Search">
</form>
-</div><div class="emblem" style="float:left"><p><a shape="rect" href="index.html"><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"></a></p></div><div class="title" style="float:left; margin: 0 0 0 3em"><h1 id="SmallBanner-PageTitle">IoC - overview</h1></div></div>
+</div><div class="emblem" style="float:left"><p><a shape="rect" 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">IoC - overview</h1></div></div>
<div class="clearer"></div>
</div>
Modified: websites/production/tapestry/content/ioc-parallel.html
==============================================================================
--- websites/production/tapestry/content/ioc-parallel.html (original)
+++ websites/production/tapestry/content/ioc-parallel.html Sat Jun 27 21:21:02 2015
@@ -45,7 +45,7 @@
<input type="submit" value="Search">
</form>
-</div><div class="emblem" style="float:left"><p><a shape="rect" href="index.html"><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"></a></p></div><div class="title" style="float:left; margin: 0 0 0 3em"><h1 id="SmallBanner-PageTitle">IoC - parallel</h1></div></div>
+</div><div class="emblem" style="float:left"><p><a shape="rect" 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">IoC - parallel</h1></div></div>
<div class="clearer"></div>
</div>
Modified: websites/production/tapestry/content/ioc-pipeline.html
==============================================================================
--- websites/production/tapestry/content/ioc-pipeline.html (original)
+++ websites/production/tapestry/content/ioc-pipeline.html Sat Jun 27 21:21:02 2015
@@ -45,7 +45,7 @@
<input type="submit" value="Search">
</form>
-</div><div class="emblem" style="float:left"><p><a shape="rect" href="index.html"><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"></a></p></div><div class="title" style="float:left; margin: 0 0 0 3em"><h1 id="SmallBanner-PageTitle">IoC - pipeline</h1></div></div>
+</div><div class="emblem" style="float:left"><p><a shape="rect" 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">IoC - pipeline</h1></div></div>
<div class="clearer"></div>
</div>
Modified: websites/production/tapestry/content/ioc-provider.html
==============================================================================
--- websites/production/tapestry/content/ioc-provider.html (original)
+++ websites/production/tapestry/content/ioc-provider.html Sat Jun 27 21:21:02 2015
@@ -45,7 +45,7 @@
<input type="submit" value="Search">
</form>
-</div><div class="emblem" style="float:left"><p><a shape="rect" href="index.html"><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"></a></p></div><div class="title" style="float:left; margin: 0 0 0 3em"><h1 id="SmallBanner-PageTitle">IoC - provider</h1></div></div>
+</div><div class="emblem" style="float:left"><p><a shape="rect" 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">IoC - provider</h1></div></div>
<div class="clearer"></div>
</div>
Modified: websites/production/tapestry/content/ioc-run.html
==============================================================================
--- websites/production/tapestry/content/ioc-run.html (original)
+++ websites/production/tapestry/content/ioc-run.html Sat Jun 27 21:21:02 2015
@@ -45,7 +45,7 @@
<input type="submit" value="Search">
</form>
-</div><div class="emblem" style="float:left"><p><a shape="rect" href="index.html"><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"></a></p></div><div class="title" style="float:left; margin: 0 0 0 3em"><h1 id="SmallBanner-PageTitle">IoC - run</h1></div></div>
+</div><div class="emblem" style="float:left"><p><a shape="rect" 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">IoC - run</h1></div></div>
<div class="clearer"></div>
</div>
Modified: websites/production/tapestry/content/ioc-serialization.html
==============================================================================
--- websites/production/tapestry/content/ioc-serialization.html (original)
+++ websites/production/tapestry/content/ioc-serialization.html Sat Jun 27 21:21:02 2015
@@ -45,7 +45,7 @@
<input type="submit" value="Search">
</form>
-</div><div class="emblem" style="float:left"><p><a shape="rect" href="index.html"><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"></a></p></div><div class="title" style="float:left; margin: 0 0 0 3em"><h1 id="SmallBanner-PageTitle">IoC - serialization</h1></div></div>
+</div><div class="emblem" style="float:left"><p><a shape="rect" 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">IoC - serialization</h1></div></div>
<div class="clearer"></div>
</div>
Modified: websites/production/tapestry/content/ioc-shadow.html
==============================================================================
--- websites/production/tapestry/content/ioc-shadow.html (original)
+++ websites/production/tapestry/content/ioc-shadow.html Sat Jun 27 21:21:02 2015
@@ -45,7 +45,7 @@
<input type="submit" value="Search">
</form>
-</div><div class="emblem" style="float:left"><p><a shape="rect" href="index.html"><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"></a></p></div><div class="title" style="float:left; margin: 0 0 0 3em"><h1 id="SmallBanner-PageTitle">IoC - shadow</h1></div></div>
+</div><div class="emblem" style="float:left"><p><a shape="rect" 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">IoC - shadow</h1></div></div>
<div class="clearer"></div>
</div>
Modified: websites/production/tapestry/content/ioc-startup.html
==============================================================================
--- websites/production/tapestry/content/ioc-startup.html (original)
+++ websites/production/tapestry/content/ioc-startup.html Sat Jun 27 21:21:02 2015
@@ -45,7 +45,7 @@
<input type="submit" value="Search">
</form>
-</div><div class="emblem" style="float:left"><p><a shape="rect" href="index.html"><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"></a></p></div><div class="title" style="float:left; margin: 0 0 0 3em"><h1 id="SmallBanner-PageTitle">IoC - startup</h1></div></div>
+</div><div class="emblem" style="float:left"><p><a shape="rect" 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">IoC - startup</h1></div></div>
<div class="clearer"></div>
</div>
Modified: websites/production/tapestry/content/ioc-strategy.html
==============================================================================
--- websites/production/tapestry/content/ioc-strategy.html (original)
+++ websites/production/tapestry/content/ioc-strategy.html Sat Jun 27 21:21:02 2015
@@ -45,7 +45,7 @@
<input type="submit" value="Search">
</form>
-</div><div class="emblem" style="float:left"><p><a shape="rect" href="index.html"><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"></a></p></div><div class="title" style="float:left; margin: 0 0 0 3em"><h1 id="SmallBanner-PageTitle">IoC - strategy</h1></div></div>
+</div><div class="emblem" style="float:left"><p><a shape="rect" 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">IoC - strategy</h1></div></div>
<div class="clearer"></div>
</div>
Modified: websites/production/tapestry/content/ioc-symbols.html
==============================================================================
--- websites/production/tapestry/content/ioc-symbols.html (original)
+++ websites/production/tapestry/content/ioc-symbols.html Sat Jun 27 21:21:02 2015
@@ -45,7 +45,7 @@
<input type="submit" value="Search">
</form>
-</div><div class="emblem" style="float:left"><p><a shape="rect" href="index.html"><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"></a></p></div><div class="title" style="float:left; margin: 0 0 0 3em"><h1 id="SmallBanner-PageTitle">IoC - symbols</h1></div></div>
+</div><div class="emblem" style="float:left"><p><a shape="rect" 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">IoC - symbols</h1></div></div>
<div class="clearer"></div>
</div>
Modified: websites/production/tapestry/content/ioc.html
==============================================================================
--- websites/production/tapestry/content/ioc.html (original)
+++ websites/production/tapestry/content/ioc.html Sat Jun 27 21:21:02 2015
@@ -27,16 +27,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 src='/resources/highlighter/scripts/shBrushPlain.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"/>
@@ -55,7 +45,7 @@
<input type="submit" value="Search">
</form>
-</div><div class="emblem" style="float:left"><p><a shape="rect" href="index.html"><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"></a></p></div><div class="title" style="float:left; margin: 0 0 0 3em"><h1 id="SmallBanner-PageTitle">IoC</h1></div></div>
+</div><div class="emblem" style="float:left"><p><a shape="rect" 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">IoC</h1></div></div>
<div class="clearer"></div>
</div>
@@ -70,45 +60,7 @@
<div id="ConfluenceContent"><h1 id="IoC-TapestryInversionofControlContainer">Tapestry Inversion of Control Container</h1>
<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="ioc.html">IoC</a>
-
-
- </div>
- </li><li>
- <div>
- <span class="icon icon-page" title="Page">Page:</span> </div>
-
- <div class="details">
- <a shape="rect" href="tapestry-inversion-of-control-faq.html">Tapestry Inversion of Control FAQ</a>
-
-
- </div>
- </li><li>
- <div>
- <span class="icon icon-page" title="Page">Page:</span> </div>
-
- <div class="details">
- <a shape="rect" href="tapestry-ioc-overview.html">Tapestry IoC Overview</a>
-
-
- </div>
- </li><li>
- <div>
- <span class="icon icon-page" title="Page">Page:</span> </div>
-
- <div class="details">
- <a shape="rect" href="ioc-cookbook.html">IoC cookbook</a>
-
-
- </div>
- </li></ul>
-</div>
+<div class="error"><span class="error">Error formatting macro: contentbylabel: com.atlassian.confluence.api.service.exceptions.BadRequestException: Could not parse cql : null</span> </div></div>
<p>The inner construction of the Tapestry framework is based on <a shape="rect" class="external-link" href="http://www.martinfowler.com/articles/injection.html" >inversion of control</a> (IoC), a design approach that allows a working system to be fabricated from many small, easily testable pieces.</p>
@@ -178,14 +130,8 @@
<p>Services are identified by a unique id. Typically, a service id matches the unqualified name of the service interface, but this is simply a convention.</p>
- <div class="aui-message warning shadowed information-macro">
- <span class="aui-icon icon-warning">Icon</span>
- <div class="message-content">
-
-<p>The evolutionary direction of the Tapestry IoC is to eventually eliminate service ids and work totally in terms of service interfaces and marker annotations.</p>
- </div>
- </div>
-
+<div class="confluence-information-macro confluence-information-macro-note"><span class="aui-icon aui-icon-small aui-iconfont-warning confluence-information-macro-icon"></span><div class="confluence-information-macro-body">
+<p>The evolutionary direction of the Tapestry IoC is to eventually eliminate service ids and work totally in terms of service interfaces and marker annotations.</p></div></div>
<p>Services are aggregated into <strong>modules</strong>:</p>
Modified: websites/production/tapestry/content/javascript-faq.html
==============================================================================
--- websites/production/tapestry/content/javascript-faq.html (original)
+++ websites/production/tapestry/content/javascript-faq.html Sat Jun 27 21:21:02 2015
@@ -27,16 +27,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 src='/resources/highlighter/scripts/shBrushPlain.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"/>
@@ -55,7 +45,7 @@
<input type="submit" value="Search">
</form>
-</div><div class="emblem" style="float:left"><p><a shape="rect" href="index.html"><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"></a></p></div><div class="title" style="float:left; margin: 0 0 0 3em"><h1 id="SmallBanner-PageTitle">JavaScript FAQ</h1></div></div>
+</div><div class="emblem" style="float:left"><p><a shape="rect" 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">JavaScript FAQ</h1></div></div>
<div class="clearer"></div>
</div>
@@ -75,13 +65,7 @@ table.ScrollbarTable td.ScrollbarParent
table.ScrollbarTable td.ScrollbarNextName {text-align: right;border: none;}
table.ScrollbarTable td.ScrollbarNextIcon {text-align: center;width: 16px;border: none;}
-/*]]>*/</style><div class="Scrollbar"><table class="ScrollbarTable"><tr><td colspan="1" rowspan="1" class="ScrollbarPrevIcon"><a shape="rect" href="component-events-faq.html"><img align="middle" border="0" src="https://cwiki.apache.org/confluence/images/icons/back_16.gif" width="16" height="16"></a></td><td colspan="1" rowspan="1" class="ScrollbarPrevName" width="33%"><a shape="rect" href="component-events-faq.html">Component Events FAQ</a> </td><td colspan="1" rowspan="1" class="ScrollbarParent" width="33%"><sup><a shape="rect" href="frequently-asked-questions.html"><img align="middle" border="0" src="https://cwiki.apache.org/confluence/images/icons/up_16.gif" width="8" height="8"></a></sup><a shape="rect" href="frequently-asked-questions.html">Frequently Asked Questions</a></td><td colspan="1" rowspan="1" class="ScrollbarNextName" width="33%"> <a shape="rect" href="ajax-components-faq.html">Ajax Components FAQ</a></td><td colspan="1" rowspan="1" class="ScrollbarNextIcon"
><a shape="rect" href="ajax-components-faq.html"><img align="middle" border="0" src="https://cwiki.apache.org/confluence/images/icons/forwd_16.gif" width="16" height="16"></a></td></tr></table></div><h2 id="JavaScriptFAQ-JavaScript">JavaScript</h2><p>Main article: <a shape="rect" href="legacy-javascript.html">Legacy JavaScript</a></p><h3 id="JavaScriptFAQ-WhydoIgeta"Tapestryisundefined"erroronformsubmit?(5.3andearlier)">Why do I get a "Tapestry is undefined" error on form submit? (5.3 and earlier)</h3><p>This client-side error is clear but can be awkward to solve. It means your browser has not been able to load the tapestry.js file properly. The question is, why? It can be due to multiple reasons, some of them below:</p><ul><li>First, check if 'tapestry.js' is present in the head part of your resulting HTML page.</li><li><p>If you have set the <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/SymbolConstants.html#CO
MBINE_SCRIPTS">tapestry.combine-scripts</a> configuration symbol to true, Tapestry generates one single URL to retrieve all the JS files. Sometimes, this can produce long URLs that browsers are unable to retrieve. Try setting the symbol to false.</p> <div class="aui-message warning shadowed information-macro">
- <span class="aui-icon icon-warning">Icon</span>
- <div class="message-content">
- <p>This only applies to Tapestry 5.1.</p>
- </div>
- </div>
-</li><li>If you have included jQuery in conjunction with Tapestry's prototype, that will cause a conflict with the '$' selector used by both. In this case, you should put jQuery on top of the stack and turn on the <a shape="rect" class="external-link" href="http://api.jquery.com/jQuery.noConflict/" >jQuery.noConflict</a> mode.</li><li>Also, if you have included a custom or third-party JS library on top of the stack that causes the JavaScript parsing to fail, then check the JavaScript syntax in that library.</li><li>If you have used a tool to minimize your JavaScript libraries, this can lead to JavaScript syntax errors, so check if it works with all the JavaScript files unpacked.</li></ul><h3 id="JavaScriptFAQ-What'sthedifferencebetweentheT5objectandtheTapestryobjectinthebrowser?(5.3andearlier)">What's the difference between the <code>T5</code> object and the <code>Tapestry</code> object in the browser? (5.3 and earlier)</h3><p>Both of these objects are <em>namespaces</em>: container
s of functions, constants, and nested namespaces.</p><p>The <code>T5</code> object is a replacement for the <code>Tapestry</code> object, starting in release 5.3. Increasingly, functions defined by the <code>Tapestry</code> object are being replaced with similar or equivalent functions in the <code>T5</code> object.</p><p>This is part of an overall goal, spanning at least two releases of Tapestry, to make Tapestry JavaScript framework agnostic; which is to say, not depend specifically on Prototype or jQuery. Much of the code in the <code>Tapestry</code> object is specifically linked to Prototype and Scriptaculous.</p><p>The <code>T5</code> object represents a stable, documented, set of APIs that are preferred when building components for maximum portability between underlying JavaScript frameworks. In other words, when building component libraries, coding to the <code>T5</code> object ensures that your component will be useful regardless of whether the final application is built usi
ng Prototype, jQuery or something else.</p></div>
+/*]]>*/</style><div class="Scrollbar"><table class="ScrollbarTable"><tr><td colspan="1" rowspan="1" class="ScrollbarPrevIcon"><a shape="rect" href="component-events-faq.html"><img align="middle" border="0" src="https://cwiki.apache.org/confluence/images/icons/back_16.gif" width="16" height="16"></a></td><td colspan="1" rowspan="1" class="ScrollbarPrevName" width="33%"><a shape="rect" href="component-events-faq.html">Component Events FAQ</a> </td><td colspan="1" rowspan="1" class="ScrollbarParent" width="33%"><sup><a shape="rect" href="frequently-asked-questions.html"><img align="middle" border="0" src="https://cwiki.apache.org/confluence/images/icons/up_16.gif" width="8" height="8"></a></sup><a shape="rect" href="frequently-asked-questions.html">Frequently Asked Questions</a></td><td colspan="1" rowspan="1" class="ScrollbarNextName" width="33%"> <a shape="rect" href="ajax-components-faq.html">Ajax Components FAQ</a></td><td colspan="1" rowspan="1" class="ScrollbarNextIcon"
><a shape="rect" href="ajax-components-faq.html"><img align="middle" border="0" src="https://cwiki.apache.org/confluence/images/icons/forwd_16.gif" width="16" height="16"></a></td></tr></table></div><h2 id="JavaScriptFAQ-JavaScript">JavaScript</h2><p>Main article: <a shape="rect" href="legacy-javascript.html">Legacy JavaScript</a></p><h3 id="JavaScriptFAQ-WhydoIgeta"Tapestryisundefined"erroronformsubmit?(5.3andearlier)">Why do I get a "Tapestry is undefined" error on form submit? (5.3 and earlier)</h3><p>This client-side error is clear but can be awkward to solve. It means your browser has not been able to load the tapestry.js file properly. The question is, why? It can be due to multiple reasons, some of them below:</p><ul><li>First, check if 'tapestry.js' is present in the head part of your resulting HTML page.</li><li><p>If you have set the <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/SymbolConstants.html#CO
MBINE_SCRIPTS">tapestry.combine-scripts</a> configuration symbol to true, Tapestry generates one single URL to retrieve all the JS files. Sometimes, this can produce long URLs that browsers are unable to retrieve. Try setting the symbol to false.</p><div class="confluence-information-macro confluence-information-macro-note"><span class="aui-icon aui-icon-small aui-iconfont-warning confluence-information-macro-icon"></span><div class="confluence-information-macro-body"><p>This only applies to Tapestry 5.1.</p></div></div></li><li>If you have included jQuery in conjunction with Tapestry's prototype, that will cause a conflict with the '$' selector used by both. In this case, you should put jQuery on top of the stack and turn on the <a shape="rect" class="external-link" href="http://api.jquery.com/jQuery.noConflict/" >jQuery.noConflict</a> mode.</li><li>Also, if you have included a custom or third-party JS library on top of the stack that causes the JavaScript parsing to fail, then che
ck the JavaScript syntax in that library.</li><li>If you have used a tool to minimize your JavaScript libraries, this can lead to JavaScript syntax errors, so check if it works with all the JavaScript files unpacked.</li></ul><h3 id="JavaScriptFAQ-What'sthedifferencebetweentheT5objectandtheTapestryobjectinthebrowser?(5.3andearlier)">What's the difference between the <code>T5</code> object and the <code>Tapestry</code> object in the browser? (5.3 and earlier)</h3><p>Both of these objects are <em>namespaces</em>: containers of functions, constants, and nested namespaces.</p><p>The <code>T5</code> object is a replacement for the <code>Tapestry</code> object, starting in release 5.3. Increasingly, functions defined by the <code>Tapestry</code> object are being replaced with similar or equivalent functions in the <code>T5</code> object.</p><p>This is part of an overall goal, spanning at least two releases of Tapestry, to make Tapestry JavaScript framework agnostic; which is to say, not d
epend specifically on Prototype or jQuery. Much of the code in the <code>Tapestry</code> object is specifically linked to Prototype and Scriptaculous.</p><p>The <code>T5</code> object represents a stable, documented, set of APIs that are preferred when building components for maximum portability between underlying JavaScript frameworks. In other words, when building component libraries, coding to the <code>T5</code> object ensures that your component will be useful regardless of whether the final application is built using Prototype, jQuery or something else.</p></div>
</div>
<div class="clearer"></div>
Modified: websites/production/tapestry/content/javascript-modules.html
==============================================================================
--- websites/production/tapestry/content/javascript-modules.html (original)
+++ websites/production/tapestry/content/javascript-modules.html Sat Jun 27 21:21:02 2015
@@ -27,17 +27,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 src='/resources/highlighter/scripts/shBrushJScript.js' type='text/javascript'></script>
- <script src='/resources/highlighter/scripts/shBrushPlain.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"/>
@@ -56,7 +45,7 @@
<input type="submit" value="Search">
</form>
-</div><div class="emblem" style="float:left"><p><a shape="rect" href="index.html"><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"></a></p></div><div class="title" style="float:left; margin: 0 0 0 3em"><h1 id="SmallBanner-PageTitle">JavaScript Modules</h1></div></div>
+</div><div class="emblem" style="float:left"><p><a shape="rect" 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">JavaScript Modules</h1></div></div>
<div class="clearer"></div>
</div>
@@ -69,82 +58,8 @@
<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-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="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="client-side-javascript.html">Client-Side JavaScript</a>
-
-
- </div>
- </li><li>
- <div>
- <span class="icon icon-page" title="Page">Page:</span> </div>
-
- <div class="details">
- <a shape="rect" href="legacy-javascript.html">Legacy JavaScript</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="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-modules.html">JavaScript Modules</a>
-
-
- </div>
- </li><li>
- <div>
- <span class="icon icon-page" title="Page">Page:</span> </div>
-
- <div class="details">
- <a shape="rect" href="coffeescript.html">CoffeeScript</a>
-
-
- </div>
- </li></ul>
-</div><p><strong>JavaScript Modules</strong> are a mechanism for bringing modern concepts of variable scope and dependency management to JavaScript. <em>Starting with version 5.4</em>, Tapestry uses <a shape="rect" class="external-link" href="http://requirejs.org/" >RequireJS</a> <a shape="rect" class="external-link" href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md" > </a>modules internally, and provides support for using RequireJS modules in your own Tapestry application.</p><h2 id="JavaScriptModules-TheNeedforModules">The Need for Modules</h2><p>As web applications have evolved, the use of JavaScript in the client has expanded almost exponentially. This has caused all kinds of growing pains, since the original design of the web browser, and the initial design of JavaScript, was never intended for this level of complexity. Unlike Java, JavaScript has no native concept of a "package" or "namespace" and has the undesirable tendency to make everything a global.</p><p>I
n the earliest days, client-side JavaScript was constructed as libraries that would define simple functions and variables:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: js; gutter: false" type="syntaxhighlighter"><![CDATA[function onclickHelp(event) {
+<div class="error"><span class="error">Error formatting macro: contentbylabel: com.atlassian.confluence.api.service.exceptions.BadRequestException: Could not parse cql : null</span> </div></div><p><strong>JavaScript Modules</strong> are a mechanism for bringing modern concepts of variable scope and dependency management to JavaScript. <em>Starting with version 5.4</em>, Tapestry uses <a shape="rect" class="external-link" href="http://requirejs.org/" >RequireJS</a> <a shape="rect" class="external-link" href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md" > </a>modules internally, and provides support for using RequireJS modules in your own Tapestry application.</p><h2 id="JavaScriptModules-TheNeedforModules">The Need for Modules</h2><p>As web applications have evolved, the use of JavaScript in the client has expanded almost exponentially. This has caused all kinds of growing pains, since the original design of the web browser, and the initial design of JavaScript, was ne
ver intended for this level of complexity. Unlike Java, JavaScript has no native concept of a "package" or "namespace" and has the undesirable tendency to make everything a global.</p><p>In the earliest days, client-side JavaScript was constructed as libraries that would define simple functions and variables:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+<script class="brush: js; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[function onclickHelp(event) {
if (helpModal === undefined) {
helpModal = ...
}
@@ -152,21 +67,15 @@
}
$("#helpButton").click(onClickHelp);]]></script>
</div></div><p>What's not apparent here is that function <code>onclickHelp()</code> is actually attached to the global window object. Further, the variable <code>helpModal</code> is also not local, it too gets defined on the window object. If you start to mix and match JavaScript from multiple sources, perhaps various kinds of third-party UI widgets, you start to run the risk of name collisions.</p><p>One approach to solving these kinds of problems is a <em>hygienic function wrapper</em>. The concept here is to define a function and immediately execute it. The functions and variables defined inside the function are private to that function.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: js; gutter: false" type="syntaxhighlighter"><![CDATA[(function() {
+<script class="brush: js; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[(function() {
var helpModal = null;
function onClickHelp(event) { ... }
$("#helpButton").click(onClickHelp);
})();]]></script>
-</div></div><p>This is an improvement in so far as it assists with name collisions. The variables and functions can only be referenced by name from inside the wrapper.</p><p>However, if you are building a library of code to reuse across your application (or building a library to share between applications) then something is still missing: a way to expose just the function you want from inside you wrapper to the outside world.</p><p>The old-school route is to choose a hopefully unique prefix, building a cumbersome name (perhaps <code>myapp_onClickHelp</code>), and attach that to the global window object. But that just makes your code that much uglier, and leaves you open to problems if not all members of your development team understand the rules and prefixes.</p><p>Enter the <a shape="rect" class="external-link" href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md" >Asynchronous Module Definition</a>. The AMD is pragmatic way to avoid globals, and adds a number of bells and w
histles that can themselves be quite important.</p> <div class="aui-message hint shadowed information-macro">
- <span class="aui-icon icon-hint">Icon</span>
- <div class="message-content">
- <p>Tapestry uses the <a shape="rect" class="external-link" href="http://requirejs.org/" >RequireJS</a> library as the client-side implementation of AMD. It supplements this on the server-side with Tapestry services for even more flexibility.</p>
- </div>
- </div>
-<p>Under AMD, JavaScript is broken up into <em>modules</em>.</p><ul><li>Modules have a unique name, such as <code>t5/core/dom</code> or <code>app/tree-viewer</code>.</li><li>A module has a constructor function that <em>exports</em> a value.</li><li>A module defines <em>dependencies</em> on any number of other modules.</li><li>The export of each dependency is provided as a parameter to the constructor function.</li></ul><p>Here's an example from Tapestry itself:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Module t5/core/confirm-click</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: js; gutter: false" type="syntaxhighlighter"><![CDATA[(function() {
+</div></div><p>This is an improvement in so far as it assists with name collisions. The variables and functions can only be referenced by name from inside the wrapper.</p><p>However, if you are building a library of code to reuse across your application (or building a library to share between applications) then something is still missing: a way to expose just the function you want from inside you wrapper to the outside world.</p><p>The old-school route is to choose a hopefully unique prefix, building a cumbersome name (perhaps <code>myapp_onClickHelp</code>), and attach that to the global window object. But that just makes your code that much uglier, and leaves you open to problems if not all members of your development team understand the rules and prefixes.</p><p>Enter the <a shape="rect" class="external-link" href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md" >Asynchronous Module Definition</a>. The AMD is pragmatic way to avoid globals, and adds a number of bells and w
histles that can themselves be quite important.</p><div class="confluence-information-macro confluence-information-macro-information"><span class="aui-icon aui-icon-small aui-iconfont-info confluence-information-macro-icon"></span><div class="confluence-information-macro-body"><p>Tapestry uses the <a shape="rect" class="external-link" href="http://requirejs.org/" >RequireJS</a> library as the client-side implementation of AMD. It supplements this on the server-side with Tapestry services for even more flexibility.</p></div></div><p>Under AMD, JavaScript is broken up into <em>modules</em>.</p><ul><li>Modules have a unique name, such as <code>t5/core/dom</code> or <code>app/tree-viewer</code>.</li><li>A module has a constructor function that <em>exports</em> a value.</li><li>A module defines <em>dependencies</em> on any number of other modules.</li><li>The export of each dependency is provided as a parameter to the constructor function.</li></ul><p>Here's an example fro
m Tapestry itself:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Module t5/core/confirm-click</b></div><div class="codeContent panelContent pdl">
+<script class="brush: js; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[(function() {
define(["jquery", "./events", "./dom", "bootstrap/modal"], function($, events, dom) {
var runDialog;
runDialog = function(options) {
@@ -183,26 +92,14 @@ $("#helpButton").click(onClick
};
});
}).call(this);]]></script>
-</div></div> <div class="aui-message hint shadowed information-macro">
- <span class="aui-icon icon-hint">Icon</span>
- <div class="message-content">
- <p>The above code is actually the compiled output of a CoffeeScript source file. The <code><span>confirm-click </span></code>module is used to raise a modal confirmation dialog when certain buttons are clicked; it is loaded by the <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/mixins/Confirm.html">Confirm</a> mixin.</p>
- </div>
- </div>
-<p>This module depends on several other modules: <code>jquery</code>, <code>t5/core/events</code>, <code>t5/core/dom</code>, and <code>bootstrap/modal</code>. These other modules will have been loaded, and their constructor functions executed, before the <code>confirm-click</code> constructor function is executed. The export of each module is provided as a parameter in the order in which the dependencies are defined.</p> <div class="aui-message warning shadowed information-macro">
- <span class="aui-icon icon-warning">Icon</span>
- <div class="message-content">
- <p>With AMD, the JavaScript libraries may be loaded in parallel by the browser (that's the <em>asynchronous</em> part of AMD); RequireJS manages the dependency graph and invokes each function just once, as soon as its dependencies are ready, as libraries are loaded. In some cases, a module may be loaded just for its side effects; such modules will be listed last in the dependency array, and will not have a corresponding parameter in the dependent module's constructor function. In <code>confirm-click</code>, the <code>bootstrap/modal</code> module is loaded for side-effects.</p>
- </div>
- </div>
-<p><code>confirm-click</code> defines a local function, <code>runDialog</code>. It performs some side-effects, attaching event handlers to the body and the document. The module's export is a JavaScript object containing a function that allows other modules to raise the modal dialog.</p><p>If a module truly exports only a single function and is unlikely to change, then it is acceptable to just return the function itself, not an object containing the function. However, returning an object makes it easier to expand the responsibilities of <code>confirm-click</code> in the future; perhaps to add a <code>dismissDialog</code> function.</p><h2 id="JavaScriptModules-LocationofModules">Location of Modules</h2><p>Modules are stored as a special kind of Tapestry <a shape="rect" href="assets.html">asset</a>. On the server, modules are stored on the class path under <code>META-INF/modules</code>. In a typical environment, that means the sources will be in <code>src/main/resources/META-INF/module
s</code>.</p><p>Typically, your application will place it's modules directly in this folder. If you are writing a reusable library, you will put modules for that library into a subfolder to prevent naming conflicts. Tapestry's own modules are prefixed with <code>t5/core</code>.</p><p>If you are using the optional <code><a shape="rect" href="coffeescript.html">tapestry-web-resources</a></code> module (that's a server-side module, not an AMD module), then you can write your modules as CoffeeScript files; Tapestry will take care of compiling them to JavaScript as necessary.</p><p>The service <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/ModuleManager.html">ModuleManager</a> is the central piece of server-side support for modules. It supports <em>overriding</em> of existing modules by contributing overriding <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.4/apidocs/org/apache
/tapestry5/services/javascript/JavaScriptModuleConfiguration.html">module definitions</a>. This can be useful to <a shape="rect" class="external-link" href="http://en.wikipedia.org/wiki/Monkey_patch" >monkey patch</a> an existing module supplied with Tapestry, or as part of a third-party library.</p><h2 id="JavaScriptModules-LoadingModulesfromTapestryCode">Loading Modules from Tapestry Code</h2><p>Often, you will have a Tapestry page or component that defines client-side behavior; such a component will need to load a module.</p><p>The simplest approach is to use the <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/annotations/Import.html">Import</a> annotation:</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[@Import(module = "t5/core/confirm-click")
+</div></div><div class="confluence-information-macro confluence-information-macro-information"><span class="aui-icon aui-icon-small aui-iconfont-info confluence-information-macro-icon"></span><div class="confluence-information-macro-body"><p>The above code is actually the compiled output of a CoffeeScript source file. The <code><span>confirm-click </span></code>module is used to raise a modal confirmation dialog when certain buttons are clicked; it is loaded by the <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/mixins/Confirm.html">Confirm</a> mixin.</p></div></div><p>This module depends on several other modules: <code>jquery</code>, <code>t5/core/events</code>, <code>t5/core/dom</code>, and <code>bootstrap/modal</code>. These other modules will have been loaded, and their constructor functions executed, before the <code>confirm-click</code> constructor function is executed. The export of each module is provided a
s a parameter in the order in which the dependencies are defined.</p><div class="confluence-information-macro confluence-information-macro-note"><span class="aui-icon aui-icon-small aui-iconfont-warning confluence-information-macro-icon"></span><div class="confluence-information-macro-body"><p>With AMD, the JavaScript libraries may be loaded in parallel by the browser (that's the <em>asynchronous</em> part of AMD); RequireJS manages the dependency graph and invokes each function just once, as soon as its dependencies are ready, as libraries are loaded. In some cases, a module may be loaded just for its side effects; such modules will be listed last in the dependency array, and will not have a corresponding parameter in the dependent module's constructor function. In <code>confirm-click</code>, the <code>bootstrap/modal</code> module is loaded for side-effects.</p></div></div><p><code>confirm-click</code> defines a local function, <code>runDialog</code>. It performs some side-effects
, attaching event handlers to the body and the document. The module's export is a JavaScript object containing a function that allows other modules to raise the modal dialog.</p><p>If a module truly exports only a single function and is unlikely to change, then it is acceptable to just return the function itself, not an object containing the function. However, returning an object makes it easier to expand the responsibilities of <code>confirm-click</code> in the future; perhaps to add a <code>dismissDialog</code> function.</p><h2 id="JavaScriptModules-LocationofModules">Location of Modules</h2><p>Modules are stored as a special kind of Tapestry <a shape="rect" href="assets.html">asset</a>. On the server, modules are stored on the class path under <code>META-INF/modules</code>. In a typical environment, that means the sources will be in <code>src/main/resources/META-INF/modules</code>.</p><p>Typically, your application will place it's modules directly in this folder. If you are writi
ng a reusable library, you will put modules for that library into a subfolder to prevent naming conflicts. Tapestry's own modules are prefixed with <code>t5/core</code>.</p><p>If you are using the optional <code><a shape="rect" href="coffeescript.html">tapestry-web-resources</a></code> module (that's a server-side module, not an AMD module), then you can write your modules as CoffeeScript files; Tapestry will take care of compiling them to JavaScript as necessary.</p><p>The service <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/ModuleManager.html">ModuleManager</a> is the central piece of server-side support for modules. It supports <em>overriding</em> of existing modules by contributing overriding <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/JavaScriptModuleConfiguration.html">module definitions</a>. This can be useful
to <a shape="rect" class="external-link" href="http://en.wikipedia.org/wiki/Monkey_patch" >monkey patch</a> an existing module supplied with Tapestry, or as part of a third-party library.</p><h2 id="JavaScriptModules-LoadingModulesfromTapestryCode">Loading Modules from Tapestry Code</h2><p>Often, you will have a Tapestry page or component that defines client-side behavior; such a component will need to load a module.</p><p>The simplest approach is to use the <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/annotations/Import.html">Import</a> annotation:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[@Import(module = "t5/core/confirm-click")
public class Confirm
{
...
}]]></script>
</div></div><p>The <code>module</code> attribute may either a single module name, or a list of module names.</p><p>In many cases, you not only want to require the module, but invoke a function exported by the module. In that case you must use the <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/JavaScriptSupport.html">JavaScriptSupport</a> environmental.</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[ @Environmental
+<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ @Environmental
JavaScriptSupport javaScriptSupport;
...
@@ -212,14 +109,8 @@ 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><h2 id="JavaScriptModules-DevelopmentMode">Development Mode</h2><p>In development mode, Tapestry will write details into the client-side console.</p><p><img class="confluence-embedded-image" src="javascript-modules.data/Tapestry_Integration_Test_Application_and_JavaScriptSupport__Tapestry_API_Documentation_.png" data-image-src="/confluence/download/attachments/41813130/Tapestry_Integration_Test_Application_and_JavaScriptSupport__Tapestry_API_Documentation_.png?version=1&modificationDate=1401727827000&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 ad
ds <code><script></code> tags to the document to load libraries and modules.</p><h2 id="JavaScriptModules-LibrariesversusModules">Libraries versus Modules</h2><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><h2 id="JavaScriptModules-AggregatingModules">Aggregating Modules</h2><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. For both CSS and JavaScript, smaller files that align with corresponding server-side files makes it much easier to de
bug problems.</p><p>Unlike assets, modules can't be fingerprinted, so on each page load, the client browser must ask the server for the module's contents frequently (typically getting a 304 Not Modified response).</p><p><span>This is acceptable in development mode, but quite undesirable in production.</span></p> <div class="aui-message warning shadowed information-macro">
- <span class="aui-icon icon-warning">Icon</span>
- <div class="message-content">
- <p>By default, Tapestry sets a max age of 60 (seconds) on modules, so you won't see module requests on every page load. This is configurable and you may want a much higher value in production. If you are rapidly iterating on the source of a module, you may need to force the browser to reload after clearing local cache. Chrome has an option to disable the client-side cache when its developer tools are open.</p>
- </div>
- </div>
-<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 library. 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 ex
ercise. 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)
+</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><h2 id="JavaScriptModules-DevelopmentMode">Development Mode</h2><p>In development mode, Tapestry will write details into the client-side console.</p><p><span class="confluence-embedded-file-wrapper"><img class="confluence-embedded-image" src="javascript-modules.data/Tapestry_Integration_Test_Application_and_JavaScriptSupport__Tapestry_API_Documentation_.png" data-image-src="/confluence/download/attachments/41813130/Tapestry_Integration_Test_Application_and_JavaScriptSupport__Tapestry_API_Documentation_.png?version=1&modificationDate=1401727827000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="42041399" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Tapestry_Integr
ation_Test_Application_and_JavaScriptSupport__Tapestry_API_Documentation_.png" data-base-url="https://cwiki.apache.org/confluence" data-linked-resource-content-type="image/png" data-linked-resource-container-id="41813130" data-linked-resource-container-version="11"></span></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><h2 id="JavaScriptModules-LibrariesversusModules">Libraries versus Modules</h2><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><h2 id="JavaScriptModules-AggregatingModules">Aggregating Modules</h2><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. For both CSS and JavaScript, smaller files that align with corresponding server-side files makes it much easier to debug problems.</p><p>Unlike assets, modules can't be fingerprinted, so on each page load, the client browser must ask the server for the module's contents frequently (typically getting a 304 Not Modified response).</p><p><span>This is acceptable in development mode, but quite undesirable in production.</span></p><div class="confluence-information-macro confluence-information-macro-note"><span class="aui-icon aui-icon-small aui-iconfont-warning confluence-information-macro-icon"></s
pan><div class="confluence-information-macro-body"><p>By default, Tapestry sets a max age of 60 (seconds) on modules, so you won't see module requests on every page load. This is configurable and you may want a much higher value in production. If you are rapidly iterating on the source of a module, you may need to force the browser to reload after clearing local cache. Chrome has an option to disable the client-side cache when its developer tools are open.</p></div></div><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 mus
t 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 library. 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="cod
eContent panelContent pdl">
+<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ @Contribute(JavaScriptStack.class)
@Core
public static void addAppModules(OrderedConfiguration<StackExtension> configuration) {
configuration.add("tree-viewer", StackExtension.module("tree-viewer"));