Modified: websites/production/tapestry/content/layout-component.html
==============================================================================
--- websites/production/tapestry/content/layout-component.html (original)
+++ websites/production/tapestry/content/layout-component.html Wed Sep 20
12:29:16 2017
@@ -27,6 +27,15 @@
</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>
+ SyntaxHighlighter.defaults['toolbar'] = false;
+ SyntaxHighlighter.all();
+ </script>
<link href="/styles/style.css" rel="stylesheet" type="text/css"/>
@@ -36,26 +45,13 @@
<div class="wrapper bs">
- <div id="navigation"><div class="nav"><ul class="alternate"><li><a
href="index.html">Home</a></li><li><a href="getting-started.html">Getting
Started</a></li><li><a href="documentation.html">Documentation</a></li><li><a
href="download.html">Download</a></li><li><a
href="about.html">About</a></li><li><a class="external-link"
href="http://www.apache.org/licenses/LICENSE-2.0";>License</a></li><li><a
href="community.html">Community</a></li><li><a class="external-link"
href="http://www.apache.org/security/";>Security</a></li><li><a
class="external-link" href="http://www.apache.org/";>Apache</a></li><li><a
class="external-link"
href="http://www.apache.org/foundation/sponsorship.html";>Sponsorship</a></li><li><a
class="external-link"
href="http://www.apache.org/foundation/thanks.html";>Thanks</a></li></ul></div>
-
-</div>
+ <div id="navigation"><div class="nav"><ul class="alternate"><li><a
href="index.html">Home</a></li><li><a href="getting-started.html">Getting
Started</a></li><li><a href="documentation.html">Documentation</a></li><li><a
href="download.html">Download</a></li><li><a
href="about.html">About</a></li><li><a class="external-link"
href="http://www.apache.org/licenses/LICENSE-2.0";>License</a></li><li><a
href="community.html">Community</a></li><li><a class="external-link"
href="http://www.apache.org/security/";>Security</a></li><li><a
class="external-link" href="http://www.apache.org/";>Apache</a></li><li><a
class="external-link"
href="http://www.apache.org/foundation/sponsorship.html";>Sponsorship</a></li><li><a
class="external-link"
href="http://www.apache.org/foundation/thanks.html";>Thanks</a></li></ul></div></div>
<div id="top">
- <div id="smallbanner"><div class="searchbox"
style="float:right;margin: .3em 1em .1em 1em"><span style="color: #999;
font-size: 90%">Tapestry docs, issues, wikis & blogs:</span>
-<form enctype="application/x-www-form-urlencoded" method="get"
action="http://tapestry.apache.org/search.html";>
- <input type="text" name="q">
- <input type="submit" value="Search">
-</form>
-
-</div>
-
-
-<div class="emblem" style="float:left"><p><a href="index.html"><span
class="confluence-embedded-file-wrapper"><img class="confluence-embedded-image
confluence-external-resource"
src="http://tapestry.apache.org/images/tapestry_small.png";
data-image-src="http://tapestry.apache.org/images/tapestry_small.png";></span></a></p></div>
-
-
-<div class="title" style="float:left; margin: 0 0 0 3em"><h1
id="SmallBanner-PageTitle">Layout Component</h1></div>
-
-</div>
+ <div id="smallbanner"><div class="searchbox"
style="float:right;margin: .3em 1em .1em 1em"><span style="color: #999;
font-size: 90%">Tapestry docs, issues, wikis & blogs:</span><form
enctype="application/x-www-form-urlencoded" method="get"
action="http://tapestry.apache.org/search.html";>
+ <input type="text" name="q">
+ <input type="submit" value="Search">
+</form></div><div class="emblem" style="float:left"><p><a
href="index.html"><span class="confluence-embedded-file-wrapper"><img
class="confluence-embedded-image confluence-external-resource"
src="http://tapestry.apache.org/images/tapestry_small.png";
data-image-src="http://tapestry.apache.org/images/tapestry_small.png";></span></a></p></div><div
class="title" style="float:left; margin: 0 0 0 3em"><h1
id="SmallBanner-PageTitle">Layout Component</h1></div></div>
<div class="clearer"></div>
</div>
@@ -67,7 +63,44 @@
</div>
<div id="content">
- <div id="ConfluenceContent"><parameter
ac:name="style">float:right</parameter><parameter ac:name="title">Related
Articles</parameter><parameter
ac:name="class">aui-label</parameter><rich-text-body><parameter
ac:name="showLabels">false</parameter><parameter
ac:name="showSpace">false</parameter><parameter ac:name="title">Related
Articles</parameter><parameter ac:name="cql">label in
("component-templates","component-classes") and space =
currentSpace()</parameter></rich-text-body><p>You'll see frequent reference to
a <strong>Layout Component</strong> in Tapestry documentation, but you won't
find such a component in the <a href="component-reference.html">component
reference</a>. The Layout component is a component <em>that you create</em> to
provide common elements across all of your pages.</p><p>In traditional servlet
development, you may be familiar with the use of a JSP include to include a
banner across the top of your page and a copyright message across the bottom.
In Tapestry, you <em>could</em> implement those recurring page elements as
components (a banner component, a copyright component, etc.) and then add those
components to every page.</p><p>But there's an even better way. Just create a
layout component that provides the overall structure and recurring content for
your pages:</p><parameter ac:name="language">xml</parameter><parameter
ac:name="title">Layout.tml (a template for a Layout
component)</parameter><plain-text-body><html
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
+ <div id="ConfluenceContent"><div class="aui-label"
style="float:right" title="Related Articles"><h3>Related Articles</h3><ul
class="content-by-label"><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small aui-iconfont-page-default"
title="Page">Page:</span>
+ </div>
+ <div class="details">
+ <a href="component-parameters.html">Component Parameters</a>
+ </div> </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small aui-iconfont-page-default"
title="Page">Page:</span>
+ </div>
+ <div class="details">
+ <a href="templating-and-markup-faq.html">Templating and Markup FAQ</a>
+ </div> </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small aui-iconfont-page-default"
title="Page">Page:</span>
+ </div>
+ <div class="details">
+ <a href="component-classes.html">Component Classes</a>
+ </div> </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small aui-iconfont-page-default"
title="Page">Page:</span>
+ </div>
+ <div class="details">
+ <a href="page-and-component-classes-faq.html">Page And Component Classes
FAQ</a>
+ </div> </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small aui-iconfont-page-default"
title="Page">Page:</span>
+ </div>
+ <div class="details">
+ <a href="component-templates.html">Component Templates</a>
+ </div> </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small aui-iconfont-page-default"
title="Page">Page:</span>
+ </div>
+ <div class="details">
+ <a href="component-cheat-sheet.html">Component Cheat Sheet</a>
+ </div> </li></ul></div><p>You'll see frequent reference to a <strong>Layout
Component</strong> in Tapestry documentation, but you won't find such a
component in the <a href="component-reference.html">component reference</a>.
The Layout component is a component <em>that you create</em> to provide common
elements across all of your pages.</p><p>In traditional servlet development,
you may be familiar with the use of a JSP include to include a banner across
the top of your page and a copyright message across the bottom. In Tapestry,
you <em>could</em> implement those recurring page elements as components (a
banner component, a copyright component, etc.) and then add those components to
every page.</p><p>But there's an even better way. Just create a layout
component that provides the overall structure and recurring content for your
pages:</p><div class="code panel pdl" style="border-width: 1px;"><div
class="codeHeader panelHeader pdl" style="border-bottom-width:
1px;"><b>Layout.tml (a
template for a Layout component)</b></div><div class="codeContent
panelContent pdl">
+<pre class="brush: xml; gutter: false; theme: Default"
style="font-size:12px;"><html
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<head>
<title>My Nifty Web Application</title>
</head>
@@ -83,7 +116,9 @@
</div>
</body>
</html>
-</plain-text-body><p>In a real-world example, the two <div> elements
above might contain the typical recurring content you'll see across the pages
of a web application: banners, menus, login forms and so forth. Often these
layout components get very complex ... in fact, in many applications the Layout
component can grow to be as complex as any other component.</p><h2
id="LayoutComponent-UsingtheLayoutinaPage">Using the Layout in a Page</h2><p>To
use your layout component, just have each page in your application <em>wrap
itself</em> in the layout, like this:</p><parameter
ac:name="language">xml</parameter><parameter ac:name="title">Welcome.tml (the
template for a page)</parameter><plain-text-body><html t:type="layout"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
+</pre>
+</div></div><p>In a real-world example, the two <div> elements above
might contain the typical recurring content you'll see across the pages of a
web application: banners, menus, login forms and so forth. Often these layout
components get very complex ... in fact, in many applications the Layout
component can grow to be as complex as any other component.</p><h2
id="LayoutComponent-UsingtheLayoutinaPage">Using the Layout in a Page</h2><p>To
use your layout component, just have each page in your application <em>wrap
itself</em> in the layout, like this:</p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;"><b>Welcome.tml (the template for a
page)</b></div><div class="codeContent panelContent pdl">
+<pre class="brush: xml; gutter: false; theme: Default"
style="font-size:12px;"><html t:type="layout"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<h1>Welcome to the Nifty Web Application!</h1>
@@ -91,18 +126,24 @@
Would you like to <t:pagelink page="login">Log
In</t:pagelink>?
</p>
</html>
-</plain-text-body><p>Note the "t:type="layout" part. That says, in effect,
"wrap the layout component around my <em>content</em>".</p><p>The magic is in
the <t:body/> element of the layout template; this will be replaced by
each page's <em>content</em>, whatever that is.</p><rich-text-body><p>Remember
that if your layout component includes a link to a resource such as an image or
a stylesheet, you must use an <em>absolute</em> URL. The same component will be
used for pages in many different folders, or with many different activation
contexts, so relative URLs won't work. The best approach is to use the <a
href="assets.html">context binding prefix</a>.</p></rich-text-body><p>To keep
our Welcome.tml page template relatively preview-able, we are using an
<html> element and the t:type attribute to specify that it is a
component. At render time, the page's <html> tag will be removed, and
replaced with the content from the Layout.tml template (which conveniently
starts
with an <html> element). The <t:body> element in Layout.tml will
be replaced with the page-specific content here: the <h1> and <p>
tags.</p><p>Any page in the application that follows this pattern, using the
Layout component, will have the same look and feel.</p><p>Layout is a regular
component like other, with an ordinary component template. Like all component
templates, it will be stored on the classpath (typically under
src/main/resources).</p><p>Components must always have a Java class. But in
this trivial example, the Layout component doesn't need any
logic:</p><parameter ac:name="language">java</parameter><parameter
ac:name="title">Layout.java</parameter><plain-text-body>@Import(stylesheet="context:css/site.css")
+</pre>
+</div></div><p>Note the "t:type="layout" part. That says, in effect, "wrap the
layout component around my <em>content</em>".</p><p>The magic is in the
<t:body/> element of the layout template; this will be replaced by each
page's <em>content</em>, whatever that is.</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>Remember that if your layout
component includes a link to a resource such as an image or a stylesheet, you
must use an <em>absolute</em> URL. The same component will be used for pages in
many different folders, or with many different activation contexts, so relative
URLs won't work. The best approach is to use the <a href="assets.html">context
binding prefix</a>.</p></div></div><p>To keep our Welcome.tml page template
relatively preview-able, we are using an <html> element and the
t:type attribute to specify that it is a component. At render time, the
page's <html> tag will be removed, and replaced with the content from the
Layout.tml template (which conveniently starts with an <html> element).
The <t:body> element in Layout.tml will be replaced with the
page-specific content here: the <h1> and <p> tags.</p><p>Any page
in the application that follows this pattern, using the Layout component, will
have the same look and feel.</p><p>Layout is a regular component like other,
with an ordinary component template. Like all component templates, it will be
stored on the classpath (typically under src/main/resources).</p><p>Components
must always have a Java class. But in this trivial example, the Layout
component doesn't need any logic:</p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;"><b>Layout.java</b></div><div
class="codeContent panelContent pdl">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;">@Import(stylesheet="context:css/site.css")
public class Layout
{
}
-</plain-text-body><p>We use the @<a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Import.html";>Import</a>
annotation (in 5.2 or later), as opposed to directly adding the <link>
element to the template, for significant performance benefits <a
href="assets.html">described elsewhere</a>. (For 5.0 and 5.1, use the
deprecated @<a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/IncludeStylesheet.html";>IncludeStyleSheet</a>
annotation instead.)</p><p>You may find that your application has more than
one look and feel: perhaps user registration pages have one look, while
administrative pages have another. This can be accomplished by having multiple
layout components (using any names you choose) and using those different layout
types for different pages.</p><h2 id="LayoutComponent-NestedLayouts">Nested
Layouts</h2><p>Layouts are really just ordinary components, so they ca
n be nested to any level needed. You can have, for example, a "CommonLayout"
component that provides the peripheral elements for all your pages, and then a
more specialized "AdminLayout" component that provides the layout only for the
administrative pages, and make the AdminLayout component wrap itself in the
CommonLayout component. So then the administrative pages would start with
<code><html t:type="adminLayout" ...></code> and the other pages (and the
AdminLayout component itself) would start with <code><html
t:type="commonLayout" ...></code>.</p><parameter
ac:name="language">xml</parameter><parameter
ac:name="title">AdminLayout.tml</parameter><plain-text-body><html
t:type="commonLayout"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
+</pre>
+</div></div><p>We use the @<a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Import.html";>Import</a>
annotation (in 5.2 or later), as opposed to directly adding the <link>
element to the template, for significant performance benefits <a
href="assets.html">described elsewhere</a>. (For 5.0 and 5.1, use the
deprecated @<a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/IncludeStylesheet.html";>IncludeStyleSheet</a>
annotation instead.)</p><p>You may find that your application has more than
one look and feel: perhaps user registration pages have one look, while
administrative pages have another. This can be accomplished by having multiple
layout components (using any names you choose) and using those different layout
types for different pages.</p><h2 id="LayoutComponent-NestedLayouts">Nested
Layouts</h2><p>Layouts are really just ordinary components, so they can be n
ested to any level needed. You can have, for example, a "CommonLayout"
component that provides the peripheral elements for all your pages, and then a
more specialized "AdminLayout" component that provides the layout only for the
administrative pages, and make the AdminLayout component wrap itself in the
CommonLayout component. So then the administrative pages would start with
<code><html t:type="adminLayout" ...></code> and the other pages (and the
AdminLayout component itself) would start with <code><html
t:type="commonLayout" ...></code>.</p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;"><b>AdminLayout.tml</b></div><div
class="codeContent panelContent pdl">
+<pre class="brush: xml; gutter: false; theme: Default"
style="font-size:12px;"><html t:type="commonLayout"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<h1>Administrative Functions</h1>
<t:body/>
</html>
-</plain-text-body><h2 id="LayoutComponent-Amoreadvancedexample">A more
advanced example</h2><p>Here's an example of a Layout component with a few more
features. It has a "title" parameter, so that every page can pass in its own
title to be rendered in the <title> tag <em>and</em> in an <h1> tag
at the top of the HTML. There is also a "style" parameter that allows each page
to pass in a block of CSS rules to be rendered in the <head> section of
the page (useful for those few CSS rules that can't be put into a static CSS
file). Notice the HTML5-style DOCTYPE declaration at the top, the charset
definition as UTF-8, and the addition of an "alerts" component.</p><parameter
ac:name="language">xml</parameter><parameter ac:name="title">Layout.tml (a
template for a Layout component)</parameter><plain-text-body><!DOCTYPE
html>
+</pre>
+</div></div><h2 id="LayoutComponent-Amoreadvancedexample">A more advanced
example</h2><p>Here's an example of a Layout component with a few more
features. It has a "title" parameter, so that every page can pass in its own
title to be rendered in the <title> tag <em>and</em> in an <h1> tag
at the top of the HTML. There is also a "style" parameter that allows each page
to pass in a block of CSS rules to be rendered in the <head> section of
the page (useful for those few CSS rules that can't be put into a static CSS
file). Notice the HTML5-style DOCTYPE declaration at the top, the charset
definition as UTF-8, and the addition of an "alerts" component.</p><div
class="code panel pdl" style="border-width: 1px;"><div class="codeHeader
panelHeader pdl" style="border-bottom-width: 1px;"><b>Layout.tml (a template
for a Layout component)</b></div><div class="codeContent panelContent pdl">
+<pre class="brush: xml; gutter: false; theme: Default"
style="font-size:12px;"><!DOCTYPE html>
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<head>
<meta charset="UTF-8" />
@@ -127,7 +168,9 @@ public class Layout
</div>
</body>
</html>
-</plain-text-body><p>The <a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/Alerts.html";>Alerts</a>
component above is new in Tapestry 5.3; it allows the application to present
alert messages to the client in a consistent way. If you want alerts to always
appear in the banner of your web site, it may make sense to put it in the
layout component's template, as above.</p><p>The corresponding component class
is still very simple, adding support for the "title" and "style"
parameters:</p><parameter ac:name="language">java</parameter><parameter
ac:name="title">Layout.java</parameter><plain-text-body>@Import(stylesheet="context:css/site.css")
+</pre>
+</div></div><p>The <a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/Alerts.html";>Alerts</a>
component above is new in Tapestry 5.3; it allows the application to present
alert messages to the client in a consistent way. If you want alerts to always
appear in the banner of your web site, it may make sense to put it in the
layout component's template, as above.</p><p>The corresponding component class
is still very simple, adding support for the "title" and "style"
parameters:</p><div class="code panel pdl" style="border-width: 1px;"><div
class="codeHeader panelHeader pdl" style="border-bottom-width:
1px;"><b>Layout.java</b></div><div class="codeContent panelContent pdl">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;">@Import(stylesheet="context:css/site.css")
public class Layout
{
/** The page title, for the <title> element and the <h1>
element. */
@@ -140,7 +183,9 @@ public class Layout
@Parameter(defaultPrefix = BindingConstants.LITERAL)
private Block style;
}
-</plain-text-body><p>Here's how you might use the above layout component for a
UserList page:</p><parameter ac:name="language">xml</parameter><parameter
ac:name="title">UserList.tml</parameter><plain-text-body><html
t:type="layout" title="List of Users"
+</pre>
+</div></div><p>Here's how you might use the above layout component for a
UserList page:</p><div class="code panel pdl" style="border-width: 1px;"><div
class="codeHeader panelHeader pdl" style="border-bottom-width:
1px;"><b>UserList.tml</b></div><div class="codeContent panelContent pdl">
+<pre class="brush: xml; gutter: false; theme: Default"
style="font-size:12px;"><html t:type="layout" title="List of Users"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd";
xmlns:p="tapestry:parameter">
<p:style>
@@ -152,7 +197,9 @@ public class Layout
</div>
</html>
-</plain-text-body><p>The <p:style> element (and its contents) are passed
to the layout component as a <code>style</code> parameter (a block parameter,
in this case, so you must have the <code>xmlns:p="tapestry:parameter"</code>
namespace declared, as above).</p><p>The rendered HTML would look like the
following (whitespace aside, and assuming UserList.java has a backgroundImage
property whose value is the string
"http://www.example.com/fuzzy.gif";):</p><parameter
ac:name="language">xml</parameter><parameter ac:name="title">The rendered
HTML</parameter><plain-text-body><!DOCTYPE html>
+</pre>
+</div></div><p>The <p:style> element (and its contents) are passed to
the layout component as a <code>style</code> parameter (a block parameter, in
this case, so you must have the <code>xmlns:p="tapestry:parameter"</code>
namespace declared, as above).</p><p>The rendered HTML would look like the
following (whitespace aside, and assuming UserList.java has a backgroundImage
property whose value is the string "http://www.example.com/fuzzy.gif";):</p><div
class="code panel pdl" style="border-width: 1px;"><div class="codeHeader
panelHeader pdl" style="border-bottom-width: 1px;"><b>The rendered
HTML</b></div><div class="codeContent panelContent pdl">
+<pre class="brush: xml; gutter: false; theme: Default"
style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
@@ -179,7 +226,8 @@ public class Layout
</div>
</body>
</html>
- </plain-text-body></div>
+ </pre>
+</div></div></div>
</div>
<div class="clearer"></div>
Modified: websites/production/tapestry/content/legacy-javascript.html
==============================================================================
--- websites/production/tapestry/content/legacy-javascript.html (original)
+++ websites/production/tapestry/content/legacy-javascript.html Wed Sep 20
12:29:16 2017
@@ -27,6 +27,16 @@
</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>
+ SyntaxHighlighter.defaults['toolbar'] = false;
+ SyntaxHighlighter.all();
+ </script>
<link href="/styles/style.css" rel="stylesheet" type="text/css"/>
@@ -67,22 +77,122 @@
</div>
<div id="content">
- <div id="ConfluenceContent"><parameter ac:name="title">For
Older Versions of Tapestry</parameter><rich-text-body><p>This page describes
JavaScript usage in Tapestry versions up through 5.3.x. For version 5.4 and
later, see <a href="client-side-javascript.html">Client-Side
JavaScript</a>.</p></rich-text-body><p> </p><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
href="ajax-and-zones.html">AJAX support</a>, download optimization, client-side
logging, and localization.</p><parameter
ac:name="style">float:right</parameter><parameter ac:name="title">Related
Articles</parameter><parameter
ac:name="class">aui-label</parameter><rich-text-body><parameter
ac:name="showLabels">false</parameter><parameter
ac:name="showSpace">false</parameter><parameter ac:name="title">Related
Articles</parameter><parameter ac:name="cql">label in ("javascript","ajax") and
space =
currentSpace()</parameter></rich-text-body><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 href="configuration.html">production mode</a>.</p><p>In
addition, as will be described in detail <a
href="legacy-javascript.html">below</a>, Tapestry comes with the <a
class="external-link" href="http://www.prototypejs.org/";
rel="nofollow">Prototype</a> and <a class="external-link"
href="http://script.aculo.us/"; rel="nofollow">Scriptaculous</a> libraries, or
you can easily swap in JQuery using a 3rd-party module.</p><h1
id="LegacyJavaScript-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="LegacyJavaScript-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
>JavaScript 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.<plain-text-body>{float:right|background=#eee|padding=0 1em}
-*JumpStart Demo:*
-[JavaScript|http://jumpstart.doublenegative.com.au/jumpstart/examples/javascript/javascript]
-{float}</plain-text-body></p><h2
id="LegacyJavaScript-Approach1:@Import">Approach 1: @Import</h2><p>Use the @<a
class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Import.html";>Import</a>
annotation (or @<a 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><rich-text-body><rich-text-body><parameter
ac:name="language">java</parameter><parameter ac:name="title">For Tapestry 5.2
and later</parameter><plain-text-body>@Import(library={"context:js/jquery.js",
+ <div id="ConfluenceContent"><div
class="confluence-information-macro confluence-information-macro-warning"><p
class="title">For Older Versions of Tapestry</p><span class="aui-icon
aui-icon-small aui-iconfont-error
confluence-information-macro-icon"></span><div
class="confluence-information-macro-body"><p>This page describes JavaScript
usage in Tapestry versions up through 5.3.x. For version 5.4 and later, see <a
href="client-side-javascript.html">Client-Side
JavaScript</a>.</p></div></div><p> </p><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
href="ajax-and-zones.html">AJAX support</a>, download optimization, client-side
logging, and localization.</p><div class="aui-label" style="float:right"
title="Related Articles">
+
+
+
+
+
+
+
+
+<h3>Related Articles</h3>
+
+<ul class="content-by-label"><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="ajax-and-zones.html">Ajax and Zones</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="legacy-javascript.html">Legacy JavaScript</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="coffeescript.html">CoffeeScript</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="client-side-javascript.html">Client-Side
JavaScript</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="javascript-modules.html">JavaScript
Modules</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="javascript-faq.html">JavaScript FAQ</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="ajax-components-faq.html">Ajax Components
FAQ</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="component-cheat-sheet.html">Component Cheat
Sheet</a>
+
+
+ </div>
+ </li><li>
+ <div>
+ <span class="icon aui-icon aui-icon-small
aui-iconfont-page-default" title="Page">Page:</span> </div>
+
+ <div class="details">
+ <a href="assets.html">Assets</a>
+
+
+ </div>
+ </li></ul>
+</div>
+
+
+<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
href="configuration.html">production mode</a>.</p><p>In addition, as will be
described in detail <a href="legacy-javascript.html">below</a>, Tapestry comes
with the <a class="external-link" href="http://www.prototypejs.org/";
rel="nofollow">Prototype</a> and <a class="external-link"
href="http://script.aculo.us/"; rel="nofollow">Scriptaculous</a> libraries, or
you can easily swap in JQuery using a 3rd-party module.</p><h1
id="LegacyJavaScript-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="LegacyJavaScript-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 JavaScript 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 class="external-link"
href="http://jumpstart.doublenegative.com.au/jumpstart/examples/javascript/javascript";
rel="nofollow">JavaScript</a> </p></div><h2
id="LegacyJavaScript-Approach1:@Import">Approach 1: @Import</h2><p>Use the @<a
class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Import.html";>Import</a>
annotation (or @<a 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 Tapestry 5.2 and late
r</b></div><div class="codeContent panelContent pdl">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;">@Import(library={"context:js/jquery.js",
"context:js/myeffects.js"})
public class MyComponent
{
. . .
}
-</plain-text-body></rich-text-body><rich-text-body><parameter
ac:name="language">java</parameter><parameter ac:name="title">For Tapestry 5.0
and
5.1</parameter><plain-text-body>@IncludeJavaScriptLibrary(value={"context:js/jquery.js",
+</pre>
+</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">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;">@IncludeJavaScriptLibrary(value={"context:js/jquery.js",
"context:js/myeffects.js"})
public class MyComponent
{
. . .
}
-</plain-text-body></rich-text-body></rich-text-body><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
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="LegacyJavaScript-Approach2:JavaScriptSupport">Approach 2:
JavaScriptSupport</h2><p>Alternatively, you can use <a class="external-link"
href="http://tapestry.apache.org/current/api
docs/org/apache/tapestry5/services/javascript/JavaScriptSupport.html">JavaScriptSupport</a>
(for Tapestry 5.2 or later) or <a 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
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="LegacyJavaScript-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><rich-text-body><rich-text-body><parameter
ac:name="language">java</paramet
er><parameter ac:name="title">Tapestry 5.2 and
later</parameter><plain-text-body> @Inject @Path("context:/js/myeffects.js")
+</pre>
+</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
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="LegacyJavaScript-Approach2:JavaScriptSupport">Approach 2:
JavaScriptSupport</h2><p>Alternatively, you can use <a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/
tapestry5/services/javascript/JavaScriptSupport.html">JavaScriptSupport</a>
(for Tapestry 5.2 or later) or <a 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
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="LegacyJavaScript-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="sectionMacro"><div
class="sectionMacroRow"><d
iv 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">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;"> @Inject @Path("context:/js/myeffects.js")
private Asset myEffects;
@Environmental
@@ -92,7 +202,9 @@ public class MyComponent
{
javaScriptSupport.importJavaScriptLibrary(myEffects);
}
-</plain-text-body></rich-text-body><rich-text-body><parameter
ac:name="language">java</parameter><parameter ac:name="title">Tapestry 5.1 and
earlier</parameter><plain-text-body> @Inject @Path("context:/js/myeffects.js")
+</pre>
+</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">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;"> @Inject @Path("context:/js/myeffects.js")
private Asset myEffects;
@Environmental
@@ -102,38 +214,54 @@ public class MyComponent
{
renderSupport.addScriptLink(myEffects);
}
-</plain-text-body></rich-text-body></rich-text-body><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 href="component-rendering.html">render phase</a>)
is the correct place to inform the JavaScriptSupport (or RenderSupport) service
that the library is
needed.<plain-text-body>{float:right|background=#eee|padding=0 1em}
-*JumpStart Demo:*
-[Reusable
JavaScript|http://jumpstart.doublenegative.com.au/jumpstart/examples/javascript/reusable]
-{float}</plain-text-body></p><h3 id="LegacyJavaScript-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><rich-text-body><rich-text-body><parameter
ac:name="language">text</parameter><parameter ac:name="title">Tapestry 5.2 and
later</parameter><plain-text-body>void afterRender()
+</pre>
+</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 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 class="external-link"
href="http://jumpstart.doublenegative.com.au/jumpstart/examples/javascript/reusable";
rel="nofollow">Reusable JavaScript</a> </p></div><h3
id="LegacyJavaScript-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">
+<pre class="brush: text; gutter: false; theme: Default"
style="font-size:12px;">void afterRender()
{
javaScriptSupport.addScript(
"$('%s').observe('click', hideMe());",
container.getClientId());
}
-</plain-text-body></rich-text-body><rich-text-body><parameter
ac:name="language">text</parameter><parameter ac:name="title">Tapestry 5.1 and
earlier</parameter><plain-text-body>void afterRender()
+</pre>
+</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">
+<pre class="brush: text; gutter: false; theme: Default"
style="font-size:12px;">void afterRender()
{
javaScriptSupport.addScript(String.format(
"$('%s').observe('click', hideMe());",
container.getClientId()));
}
-</plain-text-body></rich-text-body></rich-text-body><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="LegacyJavaScript-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
class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Environmental.html";>Environmental</a>
annotation:</p><rich-text-body><rich-text-body><parameter
ac:name="language">java</parameter><parameter ac:name="title">For Tapestry 5.2
and later</parameter><plain-text-body> @Environmental
+</pre>
+</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="LegacyJavaScript-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
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: 1px;"><b
>For Tapestry 5.2 and later</b></div><div class="codeContent panelContent pdl">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;"> @Environmental
private JavaScriptSupport javaScriptSupport;
-</plain-text-body></rich-text-body><rich-text-body><parameter
ac:name="language">java</parameter><parameter ac:name="title">For Tapestry 5.0
and 5.1</parameter><plain-text-body> @Environmental
+</pre>
+</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">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;"> @Environmental
private RenderSupport renderSupport;
-</plain-text-body></rich-text-body></rich-text-body><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><rich-text-body><rich-text-body><parameter
ac:name="language">java</parameter><parameter ac:name="title">For Tapestry 5.2
and later</parameter><plain-text-body> @Inject
+</pre>
+</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">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;"> @Inject
private JavaScriptSupport javaScriptSupport;
-</plain-text-body></rich-text-body><rich-text-body><parameter
ac:name="language">java</parameter><parameter ac:name="title">For Tapestry 5.0
and 5.1</parameter><plain-text-body> @Inject
+</pre>
+</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">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;"> @Inject
private RenderSupport renderSupport;
-</plain-text-body></rich-text-body></rich-text-body><p>... or, in a service
implementation constructor:</p><rich-text-body><rich-text-body><parameter
ac:name="language">java</parameter><parameter ac:name="title">For Tapestry 5.2
and later</parameter><plain-text-body> public MyServiceImpl(JavaScriptSupport
support)
+</pre>
+</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">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;"> public MyServiceImpl(JavaScriptSupport support)
{
. . .
}
-</plain-text-body></rich-text-body><rich-text-body><parameter
ac:name="language">java</parameter><parameter ac:name="title">For Tapestry 5.0
and 5.1</parameter><plain-text-body> public MyServiceImpl(RenderSupport
support)
+</pre>
+</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">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;"> public MyServiceImpl(RenderSupport support)
{
. . .
}
-</plain-text-body></rich-text-body></rich-text-body><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="LegacyJavaScript-CombiningJavaScriptlibraries">Combining
JavaScript libraries</h1>
+</pre>
+</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="LegacyJavaScript-CombiningJavaScriptlibraries">Combining
JavaScript libraries</h1>
<div class="confluence-information-macro
confluence-information-macro-information"><p class="title">Added in
5.1.0.2</p><span class="aui-icon aui-icon-small aui-iconfont-info
confluence-information-macro-icon"></span><div
class="confluence-information-macro-body">
</div></div>
@@ -143,36 +271,44 @@ public class MyComponent
<div class="confluence-information-macro
confluence-information-macro-information"><p class="title">Added in
5.3</p><span class="aui-icon aui-icon-small aui-iconfont-info
confluence-information-macro-icon"></span><div
class="confluence-information-macro-body">
</div></div>
<div class="error"><span class="error">Unknown macro: {div}</span>
-<p> </p></div><p>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><parameter
ac:name="language">xml</parameter><parameter ac:name="title">Maven pom.xml
(partial)</parameter><plain-text-body><dependency>
+<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">
+<pre class="brush: xml; gutter: false; theme: Default"
style="font-size:12px;"><dependency>
<groupId>org.apache.tapestry</groupId>
<artifactId>tapestry-yuicompressor</artifactId>
<version>${tapestry-release-version}</version>
</dependency>
-</plain-text-body><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
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="LegacyJavaScript-Client-sideLogging">Client-side Logging</h1>
+</pre>
+</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
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="LegacyJavaScript-Client-sideLogging">Client-side Logging</h1>
<div class="confluence-information-macro
confluence-information-macro-warning"><p class="title">Deprecated since
5.3</p><span class="aui-icon aui-icon-small aui-iconfont-error
confluence-information-macro-icon"></span><div
class="confluence-information-macro-body">
</div></div>
<div class="error"><span class="error">Unknown macro: {div}</span>
-<p> </p></div><p>In versions prior to 5.3, Tapestry uses a modified
version of the <a class="external-link"
href="http://www.gscottolson.com/blackbirdjs/"; rel="nofollow">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 class="external-link"
href="http://prototypejs.org/api/string/interpolate";
rel="nofollow">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><parameter
ac:name="language">java</parameter><plain-text-body> Tapestry.debug("Field id
is #{id},
value is #{value}", field);
+<p> </p></div><p>In versions prior to 5.3, Tapestry uses a modified
version of the <a class="external-link"
href="http://www.gscottolson.com/blackbirdjs/"; rel="nofollow">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 class="external-link"
href="http://prototypejs.org/api/string/interpolate";
rel="nofollow">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">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;"> Tapestry.debug("Field id is #{id}, value is #{value}",
field);
Tapestry.error("Server is not available.");
-</plain-text-body><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="LegacyJavaScript-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><parameter
ac:name="language">java</parameter><plain-text-body> <a href="..."
onclick="javascript:Tapestry.waitForPage(event);"> ... </a>
-</plain-text-body><p>The constant <a 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="LegacyJavaScript-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="LegacyJavaScript-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="LegacyJa
vaScript-TheTapestryObject$T()">The Tapestry Object $T()</h2>
+</pre>
+</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="LegacyJavaScript-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">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;"> <a href="..."
onclick="javascript:Tapestry.waitForPage(event);"> ... </a>
+</pre>
+</div></div><p>The constant <a 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="LegacyJavaScript-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="LegacyJavaScript-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="LegacyJavaScri
pt-TheTapestryObject$T()">The Tapestry Object $T()</h2>
<div class="confluence-information-macro
confluence-information-macro-warning"><p class="title">Deprecated since 5.2 (no
replacement)</p><span class="aui-icon aui-icon-small aui-iconfont-error
confluence-information-macro-icon"></span><div
class="confluence-information-macro-body">
</div></div>
<div class="error"><span class="error">Unknown macro: {div}</span>
-<p> </p></div><p>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><parameter
ac:name="language">java</parameter><plain-text-body> $T(myid).fadeDuration =
.5;
-</plain-text-body><p>Then use it somewhere else:</p><parameter
ac:name="language">java</parameter><plain-text-body> new Effect.Fade($(myId),
{ duration: $T(myid).fadeDuration });
-</plain-text-body><h1 id="LegacyJavaScript-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 href="ajax-and-zones.html">Ajax and Zones</a> for details.</p><h1
id="LegacyJavaScript-Built-inLibraries">Built-in
Libraries</h1><p><plain-text-body>{float:right|width=30%|background=#eee}
-{color:green}*Alternatives to Prototype*{color}
-Tapestry also works well with other JavaScript libraries, such as JQuery and
ExtJS:
-* *[Tapestry5-Jquery module|https://github.com/got5/tapestry5-jquery]* --
Using JQuery _instead of_ Prototype
-*
[Tapestry5HowToIntegrateJQuery|http://wiki.apache.org/tapestry/Tapestry5HowToIntegrateJQuery]
-- Using JQuery _in addition to_ Prototype
-* [TAP5-999|https://issues.apache.org/jira/browse/TAP5-999] tracks work
underway to introduce an agnostic tapestry.js layer to allow switching from
Prototype to JQuery. See [JavaScript Rewrite] for more info.
-* [TAPS-1364|https://issues.apache.org/jira/browse/TAP5-1364] lists some
starting points for ExtJS integration
-{float}</plain-text-body>Tapestry comes with the <a class="external-link"
href="http://www.prototypejs.org/"; rel="nofollow">Prototype</a> and <a
class="external-link" href="http://script.aculo.us/";
rel="nofollow">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 class="external-link"
href="http://documentcloud.github.com/underscore/";
rel="nofollow">Underscore</a> is also included.</p><h2
id="LegacyJavaScript-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>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.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
class="external-link"
href="http://wiki.script.aculo.us/scriptaculous/show/Usage";
rel="nofollow">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><parameter
ac:name="language">java</parameter><plain-text-body> @Inject
@Path("${tapestry.scriptaculous}/dragdrop.js")
+<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">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;"> $T(myid).fadeDuration = .5;
+</pre>
+</div></div><p>Then use it somewhere else:</p><div class="code panel pdl"
style="border-width: 1px;"><div class="codeContent panelContent pdl">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;"> new Effect.Fade($(myId), { duration:
$T(myid).fadeDuration });
+</pre>
+</div></div><h1 id="LegacyJavaScript-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
href="ajax-and-zones.html">Ajax and Zones</a> for details.</p><h1
id="LegacyJavaScript-Built-inLibraries">Built-in Libraries</h1><p></p><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 class="external-link"
href="https://github.com/got5/tapestry5-jquery"; rel="nofollow">Tapestry5-Jquery
module</a></strong> – Using JQuery <em>instead of</em>
Prototype</li><li><a class="external-link"
href="http://wiki.apache.org/tapestry/Tapestry5HowToIntegrateJQuery";>Tapestry5HowToIntegrateJQuery</a>
– Using JQuery <em>in addition to</em> Prototype</li><li><a
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 <span class="error">[JavaScript Rewrite]</span> for
more info.</li><li><a 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>Tapestry comes with the <a class="external-link"
href="http://www.prototypejs.org/"; rel="nofollow">Prototype</a> and <a
class="external-link" href="http://script.aculo.us/";
rel="nofollow">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 class="external-link"
href="http://documentcloud.github.com/underscore/";
rel="nofollow">Underscore</a> is also included.<h2
id="LegacyJavaScript-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>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.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
class="external-link"
href="http://wiki.script.aculo.us/scriptaculous/show/Usage";
rel="nofollow">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"
>
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;"> @Inject @Path("${tapestry.scriptaculous}/dragdrop.js")
private Asset dragDropLibrary;
@Environmental
@@ -183,12 +319,14 @@ Tapestry also works well with other Java
javaScriptSupport.addScriptLink(dragDropLibrary);
}
-</plain-text-body><p>The Asset is injected, using the
${tapestry.scriptaculous} <a 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="LegacyJavaScript-JavaScriptStacks">JavaScript
Stacks</h1>
+</pre>
+</div></div><p>The Asset is injected, using the ${tapestry.scriptaculous} <a
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="LegacyJavaScript-JavaScriptStacks">JavaScript Stacks</h1>
<div class="confluence-information-macro
confluence-information-macro-information"><p class="title">Added in
5.2</p><span class="aui-icon aui-icon-small aui-iconfont-info
confluence-information-macro-icon"></span><div
class="confluence-information-macro-body">
</div></div>
<div class="error"><span class="error">Unknown macro: {div}</span>
-<p> </p></div><p>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 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 clie
nt.</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><parameter ac:name="la
nguage">java</parameter><parameter
ac:name="title">myStack.java</parameter><plain-text-body>public class myStack
implements JavaScriptStack {
+<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 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 clie
nt.</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">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;">public class myStack implements JavaScriptStack {
private final AssetSource assetSource;
@@ -230,22 +368,29 @@ Tapestry also works well with other Java
}
}
-</plain-text-body><p>When your new Stack is created, you have to define it in
your AppModule.</p><parameter ac:name="language">java</parameter><parameter
ac:name="title">AppModule.java</parameter><plain-text-body>@Contribute(JavaScriptStackSource.class)
+</pre>
+</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">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;">@Contribute(JavaScriptStackSource.class)
public static void addMyStack (MappedConfiguration<String,
JavaScriptStack> configuration)
{
configuration.addInstance("MyNewStack", myStack.class);
}
-</plain-text-body><p>You can now use it in your pages and components, by using
the @Import annotation or the JavaScriptSupport service
:</p><rich-text-body><rich-text-body><parameter
ac:name="language">java</parameter><parameter ac:name="title">With
@Import</parameter><plain-text-body> @Import(stack="MyNewStack")
+</pre>
+</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">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;"> @Import(stack="MyNewStack")
public class myPage {
}
-</plain-text-body></rich-text-body><rich-text-body><parameter
ac:name="language">java</parameter><parameter ac:name="title">With
JavaScriptSupport</parameter><plain-text-body>@Inject
+</pre>
+</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">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;">@Inject
private JavaScriptSupport js;
@SetupRender
public void importStack(){
js.importStack("MyNewStack");
}
-</plain-text-body></rich-text-body></rich-text-body></div>
+</pre>
+</div></div></div></div></div></div></div>
</div>
<div class="clearer"></div>
![http://tapestry.apache.org/images/tapestry_small.png"](http://tapestry.apache.org/images/tapestry_small.png"){kind=link}
![http://www.example.com/fuzzy.gif"](http://www.example.com/fuzzy.gif"){kind=link}