You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tapestry.apache.org by bu...@apache.org on 2015/07/19 23:21:30 UTC
svn commit: r958985 [18/29] - in /websites/production/tapestry/content: ./
2009/09/13/ 2009/10/27/ 2009/11/25/ 2010/07/18/ 2010/07/24/ 2010/10/11/
2010/10/31/ 2010/11/18/ 2010/12/16/ 2010/12/17/ 2011/01/18/ 2011/03/23/
2011/03/29/ 2011/03/30/ 2011/03/3...
Modified: websites/production/tapestry/content/layout-component.html
==============================================================================
--- websites/production/tapestry/content/layout-component.html (original)
+++ websites/production/tapestry/content/layout-component.html Sun Jul 19 21:21:27 2015
@@ -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 type="text/javascript">
+ SyntaxHighlighter.defaults['toolbar'] = false;
+ SyntaxHighlighter.all();
+ </script>
<link href="/styles/style.css" rel="stylesheet" type="text/css"/>
@@ -59,60 +69,60 @@
<div id="content">
<div id="ConfluenceContent"><div class="navmenu" style="float:right; background:#eee; margin:3px; padding:3px">
<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>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 shape="rect" 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 r
ecurring 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">
-<script class="brush: xml; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
+<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>
<body>
- <div class="nav-top">
+ <div class="nav-top">
Nifty Web Application
</div>
<t:body/>
- <div class="nav-bottom">
+ <div class="nav-bottom">
(C) 2012 NiftyWebCo, Inc.
</div>
</body>
</html>
-]]></script>
+</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">
-<script class="brush: xml; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[<html t:type="layout" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
+<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>
<p>
- Would you like to <t:pagelink page="login">Log In</t:pagelink>?
+ Would you like to <t:pagelink page="login">Log In</t:pagelink>?
</p>
</html>
-]]></script>
+</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 shape="rect" 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> ele
ment 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 panelConten
t pdl">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[@Import(stylesheet="context:css/site.css")
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">@Import(stylesheet="context:css/site.css")
public class Layout
{
}
-]]></script>
+</pre>
</div></div><p>We use the @<a shape="rect" 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 shape="rect" href="assets.html">described elsewhere</a>. (For 5.0 and 5.1, use the deprecated @<a shape="rect" 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 o
rdinary components, so they can 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><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">
-<script class="brush: xml; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[<html t:type="commonLayout" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
+<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>
-]]></script>
+</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">
-<script class="brush: xml; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[<!DOCTYPE html>
-<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
+<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" />
+ <meta charset="UTF-8" />
<title>${title} - NiftyWebCo, Inc</title>
- <style type="text/css">
- <t:delegate to="style" />
+ <style type="text/css">
+ <t:delegate to="style" />
</style>
</head>
<body>
- <div class="nav-top">
+ <div class="nav-top">
Nifty Web Application
</div>
@@ -122,14 +132,14 @@ public class Layout
<t:body/>
- <div class="nav-bottom">
+ <div class="nav-bottom">
(C) 2012 NiftyWebCo, Inc.
</div>
</body>
</html>
-]]></script>
+</pre>
</div></div><p>The <a shape="rect" 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">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[@Import(stylesheet="context:css/site.css")
+<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. */
@@ -142,13 +152,13 @@ public class Layout
@Parameter(defaultPrefix = BindingConstants.LITERAL)
private Block style;
}
-]]></script>
+</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">
-<script class="brush: xml; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[<html t:type="layout" title="List of Users"
- xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd"
- xmlns:p="tapestry:parameter">
+<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>
- TD.profile { background: url('${backgroundImage}') }
+ TD.profile { background: url('${backgroundImage}') }
</p:style>
<div>
@@ -156,36 +166,36 @@ public class Layout
</div>
</html>
-]]></script>
+</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">
-<script class="brush: xml; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[<!DOCTYPE html>
+<pre class="brush: xml; gutter: false; theme: Default" style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
- <meta charset="UTF-8" />
+ <meta charset="UTF-8" />
<title>List of Users - NiftyWebCo, Inc</title>
- <style type="text/css">
- TD.profile { background: url('http://www.example.com/fuzzy.gif') }
+ <style type="text/css">
+ TD.profile { background: url('http://www.example.com/fuzzy.gif') }
</style>
</head>
<body>
- <div class="nav-top">
+ <div class="nav-top">
Nifty Web Application
</div>
<h1>List of Users</h1>
- <div id="alerts"></div>
+ <div id="alerts"></div>
<div>
Imagine a table of user account information here.
</div>
- <div class="nav-bottom">
+ <div class="nav-bottom">
(C) 2012 NiftyWebCo, Inc.
</div>
</body>
</html>
-Â ]]></script>
+ </pre>
</div></div></div>
</div>
Modified: websites/production/tapestry/content/legacy-javascript.html
==============================================================================
--- websites/production/tapestry/content/legacy-javascript.html (original)
+++ websites/production/tapestry/content/legacy-javascript.html Sun Jul 19 21:21:27 2015
@@ -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 type="text/javascript">
+ SyntaxHighlighter.defaults['toolbar'] = false;
+ SyntaxHighlighter.all();
+ </script>
<link href="/styles/style.css" rel="stylesheet" type="text/css"/>
@@ -57,27 +67,27 @@
</div>
<div id="content">
-<div id="ConfluenceContent"><p> </p><p> </p><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 the state of Tapestry up through version 5.3.x. For version 5.4, see <a shape="rect" 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 shape="rect" href="ajax-and-zones.html">AJAX support</a>, download optimization, client-side logging, and localization.</p><p>In production mode, by default, Tapestry will merge JavaScript libraries, add version numbering, and set a far-future expires header to encourage aggressive browser caching. Starting wi
th version 5.3, Tapestry can also automatically minify (compress) JavaScript libraries when in <a shape="rect" href="configuration.html#Configuration-Configuration-ConfigurationSymbolNames">production mode</a>.</p><div class="navmenu" style="float:right; background:#eee; margin:3px; padding:3px">
-<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>In addition, as will be described in detail <a shape="rect" href="#LegacyJavaScript-Built-inLibraries">below</a>, Tapestry comes with the <a shape="rect" class="external-link" href="http://www.prototypejs.org/" >Prototype</a> and <a shape="rect" class="external-link" href="http://script.aculo.us/" >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 t
he 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">
+<div id="ConfluenceContent"><p> </p><p> </p><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 the state of Tapestry up through version 5.3.x. For version 5.4, see <a shape="rect" 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 shape="rect" href="ajax-and-zones.html">AJAX support</a>, download optimization, client-side logging, and localization.</p><p>In production mode, by default, Tapestry will merge JavaScript libraries, add version numbering, and set a far-future expires header to encourage aggressive browser caching. Starting wi
th version 5.3, Tapestry can also automatically minify (compress) JavaScript libraries when in <a shape="rect" href="configuration.html">production mode</a>.</p><div class="navmenu" style="float:right; background:#eee; margin:3px; padding:3px">
+<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>In addition, as will be described in detail <a shape="rect" href="legacy-javascript.html">below</a>, Tapestry comes with the <a shape="rect" class="external-link" href="http://www.prototypejs.org/" >Prototype</a> and <a shape="rect" class="external-link" href="http://script.aculo.us/" >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. Ke
ep 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 shape="rect" class="external-link" href="http://jumpstart.doublenegative.com.au/jumpstart/examples/javascript/javascript" >JavaScript</a> </p></div><h2 id="LegacyJavaScript-Approach1:@Import">Approach 1: @Import</h2><p>Use the @<a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Import.html">Import</a> annotation (or @<a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/IncludeJavaScriptLibrary.html">IncludeJavaScriptLibrary</a> in Tapestry 5.0 and 5.1) to include links to JavaScript (and CSS) files in your page or component. Tapestry ensures that each such file is only referenced once in your page.</p><div class="sectionColumnWrapper"><div class="sectionMacro"><div class="sectionMacroRow"><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>For
Tapestry 5.2 and later</b></div><div class="codeContent panelContent pdl">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[@Import(library={"context:js/jquery.js",
- "context:js/myeffects.js"})
+<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
{
. . .
}
-]]></script>
+</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">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[@IncludeJavaScriptLibrary(value={"context:js/jquery.js",
- "context:js/myeffects.js"})
+<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
{
. . .
}
-]]></script>
+</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 shape="rect" href="component-parameters.html">Component Parameters</a> for other binding prefix options.</p><p>Adding the same JavaScript library multiple times does <em>not</em> create duplicate links. The subsequent ones are simply ignored. In this way, each component can add the libraries it needs, without worrying about conflicts with other components.</p><h2 id="LegacyJavaScript-Approach2:JavaScriptSupport">Approach 2: JavaScriptSupport</h2><p>Alternatively, you can use <a shape="rect" class="external-link" href="http://tapestry.apache.org/cur
rent/apidocs/org/apache/tapestry5/services/javascript/JavaScriptSupport.html">JavaScriptSupport</a> (for Tapestry 5.2 or later) or <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/RenderSupport.html">RenderSupport</a> (for Tapestry 5.0 and 5.1) to include a JavaScript library in your page or component. JavaScriptSupport and RenderSupport are <a shape="rect" href="environmental-services.html">environmental services</a> that include a number of methods that will be used by components, or by services that are called from components. For example:</p><h3 id="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 clas
s="sectionMacro"><div class="sectionMacroRow"><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Tapestry 5.2 and later</b></div><div class="codeContent panelContent pdl">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ @Inject @Path("context:/js/myeffects.js")
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> @Inject @Path("context:/js/myeffects.js")
private Asset myEffects;
@Environmental
@@ -87,9 +97,9 @@ public class MyComponent
{
javaScriptSupport.importJavaScriptLibrary(myEffects);
}
-]]></script>
+</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">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ @Inject @Path("context:/js/myeffects.js")
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> @Inject @Path("context:/js/myeffects.js")
private Asset myEffects;
@Environmental
@@ -99,53 +109,53 @@ public class MyComponent
{
renderSupport.addScriptLink(myEffects);
}
-]]></script>
+</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 shape="rect" href="component-rendering.html">render phase</a>) is the correct place to inform the JavaScriptSupport (or RenderSupport) service that the library is needed.</p><div class="navmenu" style="float:right; background:#eee; margin:3px; padding:0 1em">
<p><strong>JumpStart Demo:</strong> <br clear="none">
<a shape="rect" class="external-link" href="http://jumpstart.doublenegative.com.au/jumpstart/examples/javascript/reusable" >Reusable JavaScript</a> </p></div><h3 id="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">
-<script class="brush: text; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[void afterRender()
+<pre class="brush: text; gutter: false; theme: Default" style="font-size:12px;">void afterRender()
{
javaScriptSupport.addScript(
- "$('%s').observe('click', hideMe());",
+ "$('%s').observe('click', hideMe());",
container.getClientId());
}
-]]></script>
+</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">
-<script class="brush: text; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[void afterRender()
+<pre class="brush: text; gutter: false; theme: Default" style="font-size:12px;">void afterRender()
{
javaScriptSupport.addScript(String.format(
- "$('%s').observe('click', hideMe());",
+ "$('%s').observe('click', hideMe());",
container.getClientId()));
}
-]]></script>
+</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 shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Environmental.html">Environmental</a> annotation:</p><div class="sectionColumnWrapper"><div class="sectionMacro"><div class="sectionMacroRow"><div class="columnMacro"><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-wid
th: 1px;"><b>For Tapestry 5.2 and later</b></div><div class="codeContent panelContent pdl">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ @Environmental
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> @Environmental
private JavaScriptSupport javaScriptSupport;
-]]></script>
+</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">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ @Environmental
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> @Environmental
private RenderSupport renderSupport;
-]]></script>
+</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">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ @Inject
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> @Inject
private JavaScriptSupport javaScriptSupport;
-]]></script>
+</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">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ @Inject
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> @Inject
private RenderSupport renderSupport;
-]]></script>
+</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">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ public MyServiceImpl(JavaScriptSupport support)
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> public MyServiceImpl(JavaScriptSupport support)
{
. . .
}
-]]></script>
+</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">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ public MyServiceImpl(RenderSupport support)
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> public MyServiceImpl(RenderSupport support)
{
. . .
}
-]]></script>
+</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">
@@ -157,43 +167,43 @@ public class MyComponent
</div></div>
<div style="border-right: 20px solid #D8E4F1;border-left: 20px solid #D8E4F1;">
<p> </p></div><p>In production mode, Tapestry can automatically <em>minify</em> (intelligently compresses) JavaScript libraries (and CSS) when the application starts up. This can significantly decrease the size of static content that the browser needs to download.</p><p>Minification is accomplished using the ResourceMinimizer service. A YUI Compressor-based implementation is available, but this can be overridden.</p><p>IMPORTANT NOTE: The tapestry-core module only provides the empty infrastructure for supporting minification; the actual logic is supplied in the tapestry-yuicompressor module. To use it, you'll need to update your dependencies to include this module.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Maven pom.xml (partial)</b></div><div class="codeContent panelContent pdl">
-<script class="brush: xml; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[<dependency>
+<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>
-]]></script>
+</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 shape="rect" href="configuration.html">configuration symbol</a> to false in your application's module class (usually AppModule.java). By default it is enabled when in production mode and disabled otherwise.</p><p>Please test your applications well: the YUI Compressor code can be somewhat finicky about the application server and JDK version.</p><h1 id="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 style="border-right: 20px solid #ffcccc;border-left: 20px solid #ffcccc;">
<p> </p></div><p>In versions prior to 5.3, Tapestry uses a modified version of the <a shape="rect" class="external-link" href="http://www.gscottolson.com/blackbirdjs/" >Blackbird</a> JavaScript console. The Tapestry object includes three functions: debug, warn and error.</p><p>Each of these functions take a message and an optional pattern; if the pattern is provided, the message is <a shape="rect" class="external-link" href="http://prototypejs.org/api/string/interpolate" >interpolated</a> on the pattern. The final message is displayed in the Blackbird console, which will make itself visible automatically.</p><p>In production mode, debug messages will be filtered out (they will not be visible until the user presses F2 to display the console, and then clicks the grayed out icon for debug messages). In development mode, debug messages are not filtered out.</p><p>Example usage:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ Tapestry.debug("Field id is #{id}, value is #{value}", field);
+<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.");
+ Tapestry.error("Server is not available.");
-]]></script>
+</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">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ <a href="..." onclick="javascript:Tapestry.waitForPage(event);"> ... </a>
-]]></script>
+<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 shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/MarkupConstants.html">MarkupConstants.WAIT_FOR_PAGE</a> contains the part of this snippet inside the quotes.</p><h1 id="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="Le
gacyJavaScript-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 style="border-right: 20px solid #ffcccc;border-left: 20px solid #ffcccc;">
<p> </p></div><p>The standard library adds a new function, <code>$T()</code>. This function is used much like Prototype's <code>$()</code>, except that instead of returning a DOM object, it returns a hash (an initially empty JavaScript object) that is associated with the DOM object. This hash is known as <em>the Tapestry object</em>.</p><p>You may pass in an object id (as a string) or an object reference. The Tapestry Object is created on first invocation. Note: you'll see it as a property name _tapestry on the DOM object (which may be useful when debugging).</p><p>When Tapestry adds information to a DOM object, it does so in the Tapestry object. This helps avoid name conflicts, and groups all Tapestry-added properties into one place which is much easier to debug.</p><p>For example, you might store a value for an element in one place:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ $T(myid).fadeDuration = .5;
-]]></script>
+<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">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ new Effect.Fade($(myId), { duration: $T(myid).fadeDuration });
-]]></script>
+<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 shape="rect" href="ajax-and-zones.html">Ajax and Zones</a> for details.</p><h1 id="LegacyJavaScript-Built-inLibraries">Built-in Libraries</h1><div class="navmenu" style="float:right; width:30%; background:#eee; margin:3px; padding:3px">
<p><font color="green"><strong>Alternatives to Prototype</strong></font><br clear="none">
Tapestry also works well with other JavaScript libraries, such as JQuery and ExtJS:</p>
<ul><li><strong><a shape="rect" class="external-link" href="https://github.com/got5/tapestry5-jquery" >Tapestry5-Jquery module</a></strong> – Using JQuery <em>instead of</em> Prototype</li><li><a shape="rect" class="external-link" href="http://wiki.apache.org/tapestry/Tapestry5HowToIntegrateJQuery">Tapestry5HowToIntegrateJQuery</a> – Using JQuery <em>in addition to</em> Prototype</li><li><a shape="rect" class="external-link" href="https://issues.apache.org/jira/browse/TAP5-999">TAP5-999</a> tracks work underway to introduce an agnostic tapestry.js layer to allow switching from Prototype to JQuery. See <span class="error">[JavaScript Rewrite]</span> for more info.</li><li><a shape="rect" class="external-link" href="https://issues.apache.org/jira/browse/TAP5-1364">TAPS-1364</a> lists some starting points for ExtJS integration</li></ul>
</div><p>Tapestry comes with the <a shape="rect" class="external-link" href="http://www.prototypejs.org/" >Prototype</a> and <a shape="rect" class="external-link" href="http://script.aculo.us/" >Scriptaculous</a> libraries ... no extra download is required. Tapestry will automatically link into your pages the prototype.js, scriptaculous.js, and effects.js libraries, as well as the Tapestry library, tapestry.js (which largely consists of support for form input validation). Starting with Tapestry 5.3, <a shape="rect" class="external-link" href="http://documentcloud.github.com/underscore/" >Underscore</a> is also included.</p><h2 id="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" rowspa
n="1" class="confluenceTd"><p>Prototype 1.6.0.3</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Scriptaculous 1.8.2</p></td></tr><tr><th colspan="1" rowspan="1" class="confluenceTh"><p>Tapestry 5.0</p></th><td colspan="1" rowspan="1" class="confluenceTd"><p>Prototype 1.6.0</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Scriptaculous 1.8.0</p></td></tr></tbody></table></div><p>Tapestry uses a modified version of the main Scriptaculous library, scriptaculous.js, with the library's default <a shape="rect" class="external-link" href="http://wiki.script.aculo.us/scriptaculous/show/Usage" >autoloading</a> behavior turned off. This lets Tapestry and Tapestry components control which Scriptaculus scripts are loaded, rather than having <em>all</em> of them loaded unnecessarily.</p><p>If you need access to other Scriptaculous libraries, you can provide them as follows:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ @Inject @Path("${tapestry.scriptaculous}/dragdrop.js")
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> @Inject @Path("${tapestry.scriptaculous}/dragdrop.js")
private Asset dragDropLibrary;
@Environmental
@@ -204,14 +214,14 @@ Tapestry also works well with other Java
javaScriptSupport.addScriptLink(dragDropLibrary);
}
-]]></script>
+</pre>
</div></div><p>The Asset is injected, using the ${tapestry.scriptaculous} <a shape="rect" href="symbols.html">symbol</a> to reference the location of the Scriptaculous library.</p><p>Even though the dragdrop.js library is stored inside a JAR file, Tapestry ensures that it can be accessed from the client web browser. A Tapestry URL within the virtual folder "/assets" is created; the file will be given a version number (the application version number if not specified more specifically) and will be sent to the browser with a far-future expires header (to encourage the browser to cache the file aggressively).</p><h1 id="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 style="border-right: 20px solid #D8E4F1;border-left: 20px solid #D8E4F1;">
<p> </p></div><p>Tapestry allows you to define groups of related JavaScript libraries and stylesheets as "stacks". The built-in "core" stack is used to define the core JavaScript libraries needed by Tapestry (currently, this includes Prototype and Scriptaculous, as well as Tapestry-specific libraries). Other component libraries may define additional stacks for related sets of resources, for example, to bundle together some portion of the ExtJS or YUI libraries.</p><p>A <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/services/javascript/JavaScriptStack.html">JavaScriptStack</a> can be thought of as a generalization of Tapestry 5.1's ClientInfrastructure, which exists now to define the "core" JavaScript stack.</p><p>JavaScript assets of a stack may (when enabled) be exposed to the client as a single URL (identifying the stack by name). The individual assets are combined into a single virtual asset, which is then streamed
to the client.</p><p>To group several static resources together in a single stack, you must create a new implementation of the JavaScriptStack interface . This interface has four methods:</p><ul class="alternate"><li><strong>getStylesheets</strong> : This method will return a list of stylesheet files (StylesheetLink-type object) associated to this stack</li></ul><ul class="alternate"><li><strong>getJavaScriptLibraries</strong> : This method will return a list of javascript files (Asset-type object) associated to this stack</li></ul><ul class="alternate"><li><strong>getStacks</strong> : It is also possible to make a stack dependant of other stacks. All the stacks defined in this method will be loaded before the current stack.</li></ul><ul class="alternate"><li><strong>getInitialization</strong> : this method makes it possible to call a JavaScript initialization for the stack. Tapestry will automatically add this initialization to the page that imports the stacks.</li></ul><div class
="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>myStack.java</b></div><div class="codeContent panelContent pdl">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[public class myStack implements JavaScriptStack {
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">public class myStack implements JavaScriptStack {
private final AssetSource assetSource;
@@ -231,9 +241,9 @@ Tapestry also works well with other Java
{
List<Asset> ret = new ArrayList<Asset>();
- ret.add(assetSource.getContextAsset("static/js/jquery.js", null));
+ ret.add(assetSource.getContextAsset("static/js/jquery.js", null));
- ret.add(assetSource.getContextAsset("static/js/jquery.ui.core.js", null));
+ ret.add(assetSource.getContextAsset("static/js/jquery.ui.core.js", null));
return ret;
}
@@ -242,7 +252,7 @@ Tapestry also works well with other Java
{
List<StylesheetLink> ret = new ArrayList<StylesheetLink>();
- ret.add(new StylesheetLink(assetSource.getContextAsset("static/css/style.css", null)));
+ ret.add(new StylesheetLink(assetSource.getContextAsset("static/css/style.css", null)));
return ret;
}
@@ -253,28 +263,28 @@ Tapestry also works well with other Java
}
}
-]]></script>
+</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">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[@Contribute(JavaScriptStackSource.class)
+<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);
+ configuration.addInstance("MyNewStack", myStack.class);
}
-]]></script>
+</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">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[ @Import(stack="MyNewStack")
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> @Import(stack="MyNewStack")
public class myPage {
}
-]]></script>
+</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">
-<script class="brush: java; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[@Inject
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">@Inject
private JavaScriptSupport js;
@SetupRender
public void importStack(){
- js.importStack("MyNewStack");
+ js.importStack("MyNewStack");
}
-]]></script>
+</pre>
</div></div></div></div></div></div></div>
</div>
Modified: websites/production/tapestry/content/limitations.html
==============================================================================
--- websites/production/tapestry/content/limitations.html (original)
+++ websites/production/tapestry/content/limitations.html Sun Jul 19 21:21:27 2015
@@ -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 type="text/javascript">
+ SyntaxHighlighter.defaults['toolbar'] = false;
+ SyntaxHighlighter.all();
+ </script>
<link href="/styles/style.css" rel="stylesheet" type="text/css"/>
@@ -57,16 +67,8 @@
</div>
<div id="content">
-<div id="ConfluenceContent"><style type="text/css">/*<![CDATA[*/
-table.ScrollbarTable {border: none;padding: 3px;width: 100%;padding: 3px;margin: 0px;background-color: #f0f0f0}
-table.ScrollbarTable td.ScrollbarPrevIcon {text-align: center;width: 16px;border: none;}
-table.ScrollbarTable td.ScrollbarPrevName {text-align: left;border: none;}
-table.ScrollbarTable td.ScrollbarParent {text-align: center;border: none;}
-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="request-processing-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="request-processing-faq.html">Request Processing 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="specific-errors-faq.html">Specific Errors FAQ</a></td><td colspan="1" rowspan="1" class="ScrollbarNex
tIcon"><a shape="rect" href="specific-errors-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="Limitations-Limitations">Limitations</h2><h3 id="Limitations-HowdoIaddnewcomponentstoanexistingpagedynamically?">How do I add new components to an existing page dynamically?</h3><p>The short answer here is: <strong>you don't</strong>. The long answer here is <strong>you don't have to, to get the behavior you desire</strong>.</p><p>One of Tapestry basic values is high scalability: this is expressed in a number of ways, reflecting scalability concerns within a single server, and within a cluster of servers.</p><p>Although you code Tapestry pages and components as if they were ordinary POJOs (<span style="line-height: 1.4285715;">Plain Old Java Objects -- Tapestry does not require you to extend any base classes or implement any special interfaces)</span><span style="line-heigh
t: 1.4285715;">, as deployed by Tapestry they are closer to a traditional servlet: a single instance of each page services requests from multiple threads. Behind the scenes, Tapestry transforms you code, rewriting it on the fly.</span></p><p>What this means is that <em>any</em> incoming request must be handled by a <em>single page instance</em>. Therefore, Tapestry enforces the concept of <strong>static structure, dynamic behavior</strong>.</p><p>Tapestry provides quite a number of ways to vary what content is rendered, well beyond simple conditionals and loops. It is possible to "drag in" components from other pages when rendering a page (other FAQs will expand on this concept). The point is, that although a Tapestry page's structure is very rigid, the order in which the components of the page render does not have to be top to bottom.</p><h3 id="Limitations-Whydoesn'tmyserviceimplementationreloadwhenIchangeit?">Why doesn't my service implementation reload when I change it?</h3><p>M
ain article: <a shape="rect" href="service-implementation-reloading.html">Service Implementation Reloading</a></p><p>Live service reloading has some limitations:</p><ul><li>The service must define a service interface.</li><li>The service implementation must be on the file system (not inside a JAR).</li><li>The implementation must be instantiated by Tapestry, not inside code (even code inside a module class).</li><li>The service must use the default <a shape="rect" href="defining-tapestry-ioc-services.html#DefiningTapestryIOCServices-ServiceScope">scope</a> (reloading of perthread scopes is not supported).</li></ul><p>Consider the following example module:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
-<script class="brush: java; gutter: true; theme: Default" type="syntaxhighlighter"><![CDATA[public static void bind(ServiceBinder binder)
+<div id="ConfluenceContent"><h2 id="Limitations-Limitations">Limitations</h2><h3 id="Limitations-HowdoIaddnewcomponentstoanexistingpagedynamically?">How do I add new components to an existing page dynamically?</h3><p>The short answer here is: <strong>you don't</strong>. The long answer here is <strong>you don't have to, to get the behavior you desire</strong>.</p><p>One of Tapestry basic values is high scalability: this is expressed in a number of ways, reflecting scalability concerns within a single server, and within a cluster of servers.</p><p>Although you code Tapestry pages and components as if they were ordinary POJOs (<span style="line-height: 1.4285715;">Plain Old Java Objects -- Tapestry does not require you to extend any base classes or implement any special interfaces)</span><span style="line-height: 1.4285715;">, as deployed by Tapestry they are closer to a traditional servlet: a single instance of each page services requests from multiple threads. Behind the scenes, Tap
estry transforms you code, rewriting it on the fly.</span></p><p>What this means is that <em>any</em> incoming request must be handled by a <em>single page instance</em>. Therefore, Tapestry enforces the concept of <strong>static structure, dynamic behavior</strong>.</p><p>Tapestry provides quite a number of ways to vary what content is rendered, well beyond simple conditionals and loops. It is possible to "drag in" components from other pages when rendering a page (other FAQs will expand on this concept). The point is, that although a Tapestry page's structure is very rigid, the order in which the components of the page render does not have to be top to bottom.</p><h3 id="Limitations-Whydoesn'tmyserviceimplementationreloadwhenIchangeit?">Why doesn't my service implementation reload when I change it?</h3><p>Main article: <a shape="rect" href="service-implementation-reloading.html">Service Implementation Reloading</a></p><p>Live service reloading has some limitations:</p><ul><li>The
service must define a service interface.</li><li>The service implementation must be on the file system (not inside a JAR).</li><li>The implementation must be instantiated by Tapestry, not inside code (even code inside a module class).</li><li>The service must use the default <a shape="rect" href="defining-tapestry-ioc-services.html">scope</a> (reloading of perthread scopes is not supported).</li></ul><p>Consider the following example module:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+<pre class="brush: java; gutter: true; theme: Default" style="font-size:12px;">public static void bind(ServiceBinder binder)
{
binder.bind(ArchiveService.class, ArchiveServiceImpl.class);
}
@@ -79,16 +81,8 @@ public static JobQueue buildJobQueue(Mes
return service;
}
-]]></script>
-</div></div><p>ArchiveService is reloadable, because Tapestry instantiates <code>ArchiveServiceImpl</code> itself. On the other hand, Tapestry invokes <code>buildJobQueue()</code> and it is your code inside the method that instantiates <code>JobQueueImpl</code>, so the JobQueue service will not be reloadable.</p><p>Finally, only classes whose class files are stored directly on the file system, and not packaged inside JARs, are ever reloadable ... generally, only the services of the application being built (and not services from libraries) will be stored on the file system. This reflects the intent of reloading: as an agile development tool, but not something to be used in deployment.</p><h3 id="Limitations-HowdoIrunmultipleTapestryapplicationsinthesamewebapplication?">How do I run multiple Tapestry applications in the same web application?</h3><p>Running multiple Tapestry 5 applications is not supported; there's only one place to identify the application root package, so even config
uring multiple filters into multiple folders will not work.</p><p>Support for multiple Tapestry applications in the same web application was a specific non-goal in Tapestry 5 (it needlessly complicated Tapestry 4). Given how loosely connected Tapestry 5 pages are from each other, there doesn't seem to be an advantage to doing so ... and certainly, in terms of memory utilization, there is a significant down side, were it even possible.</p><p>You <em>can</em> <span style="color: rgb(0,0,0);">run a Tapestry 4 app and a Tapestry 5 app side-by-side (the package names are different, for just this reason), but they know nothing of each other, and can't interact directly. This is just like the way you could have a single WAR with multiple servlets; the different applications can only communicate via URLs, or shared state in the HttpSession.</span></p><style type="text/css">/*<![CDATA[*/
-table.ScrollbarTable {border: none;padding: 3px;width: 100%;padding: 3px;margin: 0px;background-color: #f0f0f0}
-table.ScrollbarTable td.ScrollbarPrevIcon {text-align: center;width: 16px;border: none;}
-table.ScrollbarTable td.ScrollbarPrevName {text-align: left;border: none;}
-table.ScrollbarTable td.ScrollbarParent {text-align: center;border: none;}
-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="request-processing-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="request-processing-faq.html">Request Processing 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="specific-errors-faq.html">Specific Errors FAQ</a></td><td colspan="1" rowspan="1" class="ScrollbarNex
tIcon"><a shape="rect" href="specific-errors-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><p> </p><p> </p><p> </p></div>
+</pre>
+</div></div><p>ArchiveService is reloadable, because Tapestry instantiates <code>ArchiveServiceImpl</code> itself. On the other hand, Tapestry invokes <code>buildJobQueue()</code> and it is your code inside the method that instantiates <code>JobQueueImpl</code>, so the JobQueue service will not be reloadable.</p><p>Finally, only classes whose class files are stored directly on the file system, and not packaged inside JARs, are ever reloadable ... generally, only the services of the application being built (and not services from libraries) will be stored on the file system. This reflects the intent of reloading: as an agile development tool, but not something to be used in deployment.</p><h3 id="Limitations-HowdoIrunmultipleTapestryapplicationsinthesamewebapplication?">How do I run multiple Tapestry applications in the same web application?</h3><p>Running multiple Tapestry 5 applications is not supported; there's only one place to identify the application root package, so even config
uring multiple filters into multiple folders will not work.</p><p>Support for multiple Tapestry applications in the same web application was a specific non-goal in Tapestry 5 (it needlessly complicated Tapestry 4). Given how loosely connected Tapestry 5 pages are from each other, there doesn't seem to be an advantage to doing so ... and certainly, in terms of memory utilization, there is a significant down side, were it even possible.</p><p>You <em>can</em> <span style="color: rgb(0,0,0);">run a Tapestry 4 app and a Tapestry 5 app side-by-side (the package names are different, for just this reason), but they know nothing of each other, and can't interact directly. This is just like the way you could have a single WAR with multiple servlets; the different applications can only communicate via URLs, or shared state in the HttpSession.</span></p><p> </p><p> </p><p> </p></div>
</div>
<div class="clearer"></div>
Modified: websites/production/tapestry/content/link-components-faq.html
==============================================================================
--- websites/production/tapestry/content/link-components-faq.html (original)
+++ websites/production/tapestry/content/link-components-faq.html Sun Jul 19 21:21:27 2015
@@ -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 type="text/javascript">
+ SyntaxHighlighter.defaults['toolbar'] = false;
+ SyntaxHighlighter.all();
+ </script>
<link href="/styles/style.css" rel="stylesheet" type="text/css"/>
@@ -57,37 +67,29 @@
</div>
<div id="content">
-<div id="ConfluenceContent"><style type="text/css">/*<![CDATA[*/
-table.ScrollbarTable {border: none;padding: 3px;width: 100%;padding: 3px;margin: 0px;background-color: #f0f0f0}
-table.ScrollbarTable td.ScrollbarPrevIcon {text-align: center;width: 16px;border: none;}
-table.ScrollbarTable td.ScrollbarPrevName {text-align: left;border: none;}
-table.ScrollbarTable td.ScrollbarParent {text-align: center;border: none;}
-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="beaneditform-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="beaneditform-faq.html">BeanEditForm 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="component-events-faq.html">Component Events FAQ</a></td><td colspan="1" rowspan="1" class="ScrollbarNextIcon"><a shape=
"rect" href="component-events-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="LinkComponentsFAQ-LinkComponents">Link Components</h2><h3 id="LinkComponentsFAQ-HowdoIaddqueryparameterstoaPageLinkorActionLink?">How do I add query parameters to a PageLink or ActionLink?</h3><p>These components do not have parameters to allow you to specify query parameters for the link; they both allow you to specify a <em>context</em> (one or more values to encode into the request path).</p><p>However, you can accomplish the same thing with a little code and markup. For example, to create a link to another page and pass a query parameter, you can replace your PageLink component with a standard <code><a></code> tag:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
-<script class="brush: xml; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[<a href="${profilePageLink}">Display Profile (w/ full details)</a>
-]]></script>
+<div id="ConfluenceContent"><h2 id="LinkComponentsFAQ-LinkComponents">Link Components</h2><h3 id="LinkComponentsFAQ-HowdoIaddqueryparameterstoaPageLinkorActionLink?">How do I add query parameters to a PageLink or ActionLink?</h3><p>These components do not have parameters to allow you to specify query parameters for the link; they both allow you to specify a <em>context</em> (one or more values to encode into the request path).</p><p>However, you can accomplish the same thing with a little code and markup. For example, to create a link to another page and pass a query parameter, you can replace your PageLink component with a standard <code><a></code> tag:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+<pre class="brush: xml; gutter: false; theme: Default" style="font-size:12px;"><a href="${profilePageLink}">Display Profile (w/ full details)</a>
+</pre>
</div></div><p>In the matching Java class, you can create the Link programmatically:</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[ @Inject
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> @Inject
private PageRenderLinkSource linkSource;
public Link getProfilePageLink()
{
Link link = linkSource.createPageRenderLinkWithContext(DisplayProfile.class, user);
- link.addParameterValue("detail", true);
+ link.addParameterValue("detail", true);
return link;
}
-]]></script>
+</pre>
</div></div><p>... and in the DisplayProfile page:</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[public class DisplayProfile
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">public class DisplayProfile
{
- void onActivate(@RequestParameter("detail") boolean detail)
+ void onActivate(@RequestParameter("detail") boolean detail)
{
. . .
}
}
-]]></script>
+</pre>
</div></div><p>The @RequestParameter annotation directs Tapestry to extract the query parameter from the request and coerce it to type boolean. You can use any reasonable type for such a parameter (int, long and Date are common).</p><p>A similar technique can be used to add query parmeters to component event URLs (the type generated by the ActionLink or EventLink components), by injecting the ComponentResources, and invoking method <code>createEventLink()</code>.</p>
<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">
@@ -96,17 +98,9 @@ table.ScrollbarTable td.ScrollbarNextIco
<p>You may also bind a link component's <code>parameters</code> parameter; this is a Map of additional query parameters to add to the URL. The Map keys should be strings, and the Map values will be encoded to strings. Tapestry 5.3 also adds a literal map syntax to the <a shape="rect" href="property-expressions.html" title="Property Expressions">property expression language</a>.</p>
</div><h3 id="LinkComponentsFAQ-HowdoIcreateaLinkbacktothecurrentpagefromacomponent?">How do I create a Link back to the current page from a component?</h3><p>Sometimes it is useful to create a link back to the current page, but you don't always know the name of the page (the link may appear inside a deeply nested subcomponent). Fortunately, this is easy.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
-<script class="brush: xml; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[<t:pagelink page="prop:componentResources.pageName">refresh page</t:pagelink>
-]]></script>
-</div></div><p>Every component has an extra property, componentResources, added to it: it's the instance of <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/ComponentResources.html">ComponentResources</a> that represents the link between your code and all of Tapestry's structure around your class. One of the properties of ComponentResources is pageName, the name of the page. By binding the PageLink's page parameter with the "prop:" binding prefix, we ensure that we bind to a computed property; this is necessary because the PageLink.page parameter defaults to the "literal:" binding prefix.</p><p>As an added benefit, if the page class is ever renamed or moved to a different package, the pageName property will automatically adjust to the new name.</p><style type="text/css">/*<![CDATA[*/
-table.ScrollbarTable {border: none;padding: 3px;width: 100%;padding: 3px;margin: 0px;background-color: #f0f0f0}
-table.ScrollbarTable td.ScrollbarPrevIcon {text-align: center;width: 16px;border: none;}
-table.ScrollbarTable td.ScrollbarPrevName {text-align: left;border: none;}
-table.ScrollbarTable td.ScrollbarParent {text-align: center;border: none;}
-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="beaneditform-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="beaneditform-faq.html">BeanEditForm 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="component-events-faq.html">Component Events FAQ</a></td><td colspan="1" rowspan="1" class="ScrollbarNextIcon"><a shape=
"rect" href="component-events-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></div>
+<pre class="brush: xml; gutter: false; theme: Default" style="font-size:12px;"><t:pagelink page="prop:componentResources.pageName">refresh page</t:pagelink>
+</pre>
+</div></div><p>Every component has an extra property, componentResources, added to it: it's the instance of <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/ComponentResources.html">ComponentResources</a> that represents the link between your code and all of Tapestry's structure around your class. One of the properties of ComponentResources is pageName, the name of the page. By binding the PageLink's page parameter with the "prop:" binding prefix, we ensure that we bind to a computed property; this is necessary because the PageLink.page parameter defaults to the "literal:" binding prefix.</p><p>As an added benefit, if the page class is ever renamed or moved to a different package, the pageName property will automatically adjust to the new name.</p></div>
</div>
<div class="clearer"></div>