Modified: websites/production/tapestry/content/css.html
==============================================================================
--- websites/production/tapestry/content/css.html (original)
+++ websites/production/tapestry/content/css.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">CSS</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">CSS</h1></div></div>
<div class="clearer"></div>
</div>
@@ -67,18 +63,49 @@
</div>
<div id="content">
- <div id="ConfluenceContent"><p>Most web applications delegate
to <strong>Cascading Style Sheets</strong> (CSS) the stylistic details of the
page – fonts, colors, margins, borders and alignment. This helps the
remaining HTML to remain simple and semantic, which usually makes it easier to
read and maintain.</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 = "assets" and space =
currentSpace()</parameter></rich-text-body><p>Tapestry includes sophisticated
support for CSS in the form of annotation-based linking, far-future expire
headers, automatic duplicate removal, and other features provided for <a
href="assets.html">assets</a>.</p><h2 id="CSS-Defaultstylesheet
">Default style sheet</h2><p>Tapestry includes a built-in style sheet,
tapestry.css, in all HTML documents (documents that have an outer <html>
element and a nested <head> element), as part of the "core" JavaScript
stack. For Tapestry 5.4 and later, the core JavaScript stack also includes the
CSS for <a class="external-link" href="http://getbootstrap.com/";
rel="nofollow">Bootstrap 3.1.1</a>.</p><h2 id="CSS-AddingyourownCSS">Adding
your own CSS</h2><p>A page or component (for example, a <a
href="layout-component.html">layout component</a>) that is rendering the
<head> tag can add a style sheet directly in the markup.</p><parameter
ac:name="language">java</parameter><plain-text-body><head>
+ <div id="ConfluenceContent"><p>Most web applications delegate
to <strong>Cascading Style Sheets</strong> (CSS) the stylistic details of the
page – fonts, colors, margins, borders and alignment. This helps the
remaining HTML to remain simple and semantic, which usually makes it easier to
read and maintain.</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="layout-component.html">Layout Component</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="css.html">CSS</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="assets.html">Assets</a>
+ </div> </li></ul></div><p>Tapestry includes sophisticated support for CSS in
the form of annotation-based linking, far-future expire headers, automatic
duplicate removal, and other features provided for <a
href="assets.html">assets</a>.</p><h2 id="CSS-Defaultstylesheet">Default style
sheet</h2><p>Tapestry includes a built-in style sheet, tapestry.css, in all
HTML documents (documents that have an outer <html> element and a nested
<head> element), as part of the "core" JavaScript stack. For Tapestry 5.4
and later, the core JavaScript stack also includes the CSS for <a
class="external-link" href="http://getbootstrap.com/"; rel="nofollow">Bootstrap
3.1.1</a>.</p><h2 id="CSS-AddingyourownCSS">Adding your own CSS</h2><p>A page
or component (for example, a <a href="layout-component.html">layout
component</a>) that is rendering the <head> tag can add a style sheet
directly in the markup.</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;"><head>
<link href="/css/site.css" rel="stylesheet" type="text/css"/>
. . .
-</plain-text-body><p>If you want to leverage Tapestry's localization support,
you may want to make use of an expansion and the "asset:" or "context:" binding
prefix:</p><parameter
ac:name="language">java</parameter><plain-text-body><head>
+</pre>
+</div></div><p>If you want to leverage Tapestry's localization support, you
may want to make use of an expansion and the "asset:" or "context:" binding
prefix:</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;"><head>
<link href="${context:css/site.css}" rel="stylesheet" type="text/css"/>
. . .
-</plain-text-body><p>The "context:" prefix means that the remainder of the
expansion is a path to a context asset, a resource in the web application root
(<code>src/main/webapp</code> in your workspace). By contrast, the "asset:"
prefix tells Tapestry to look in the class path. See <a
href="assets.html">Assets</a>.</p><h2 id="CSS-Usingthe@Importannotation">Using
the @Import annotation</h2><p>Another approach to adding a style sheet is to
include an @<a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Import.html";>Import</a>
annotation (starting with Tapestry 5.2) on your component class:</p><parameter
ac:name="language">java</parameter><plain-text-body>@Import(stylesheet="context:css/site.css")
+</pre>
+</div></div><p>The "context:" prefix means that the remainder of the expansion
is a path to a context asset, a resource in the web application root
(<code>src/main/webapp</code> in your workspace). By contrast, the "asset:"
prefix tells Tapestry to look in the class path. See <a
href="assets.html">Assets</a>.</p><h2 id="CSS-Usingthe@Importannotation">Using
the @Import annotation</h2><p>Another approach to adding a style sheet is to
include an @<a class="external-link"
href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Import.html";>Import</a>
annotation (starting with Tapestry 5.2) on your component class:</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;">@Import(stylesheet="context:css/site.css")
public class MyComponent
{
}
-</plain-text-body><p>(For Tapestry 5.0 and 5.1, use the deprecated <a
class="external-link"
href="http://tapestry.apache.org/5.2/apidocs/org/apache/tapestry5/annotations/IncludeStylesheet.html";>@IncludeStyleSheet</a>
annotation instead.)</p><p>As with <a href="legacy-javascript.html">included
JavaScript libraries</a>, each style sheet will only be added once, regardless
of the number of components that include it via the annotation.</p><h2
id="CSS-ConditionallyloadingIE-onlystylesheets">Conditionally loading IE-only
style sheets</h2><p>For Tapestry 5.2 and later, if you need to load a different
style sheet for Internet Explorer browsers, or for certain versions of IE
browsers, you can use Tapestry's built-in support for IE conditional comments.
Just add something like the following to your page or component (or layout)
class:</p><parameter
ac:name="language">java</parameter><plain-text-body>@Environmental
+</pre>
+</div></div><p>(For Tapestry 5.0 and 5.1, use the deprecated <a
class="external-link"
href="http://tapestry.apache.org/5.2/apidocs/org/apache/tapestry5/annotations/IncludeStylesheet.html";>@IncludeStyleSheet</a>
annotation instead.)</p><p>As with <a href="legacy-javascript.html">included
JavaScript libraries</a>, each style sheet will only be added once, regardless
of the number of components that include it via the annotation.</p><h2
id="CSS-ConditionallyloadingIE-onlystylesheets">Conditionally loading IE-only
style sheets</h2><p>For Tapestry 5.2 and later, if you need to load a different
style sheet for Internet Explorer browsers, or for certain versions of IE
browsers, you can use Tapestry's built-in support for IE conditional comments.
Just add something like the following to your page or component (or layout)
class:</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;">@Environmental
private JavaScriptSupport javaScriptSupport;
@Inject @Path("context:layout/ie-only.css")
@@ -89,15 +116,22 @@ void afterRender() {
javaScriptSupport.importStylesheet(new StylesheetLink(ieOnlyStylesheet, new
StylesheetOptions(null, "IE")) );
}
-</plain-text-body><p>The above will render something like:</p><parameter
ac:name="language">xml</parameter><plain-text-body><!--[if IE]>
+</pre>
+</div></div><p>The above will render something like:</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;"><!--[if IE]>
<link type="text/css" rel="stylesheet"
href="/assets/1.0-SNAPSHOT/ctx/layout/ie-only.css"></link>
<![endif]-->
-</plain-text-body><p>Naturally, the conditional part can be any other IE <a
class="external-link" href="http://en.wikipedia.org/wiki/Conditional_comment";
rel="nofollow">conditional expression</a>, such as "lt IE 8".</p><h2
id="CSS-Suppressingthedefaultstylesheet(Tapestry5.3andearlier)">Suppressing the
default style sheet (Tapestry 5.3 and earlier)</h2><p>Though it should be
rarely needed, you can prevent Tapestry's default style sheet from loading by
overriding the configuration in your application's module (normally
AppModule.java):</p><parameter ac:name="language">java</parameter><parameter
ac:name="title">AppModule.java
(partial)</parameter><plain-text-body>@Contribute(MarkupRenderer.class)
+</pre>
+</div></div><p>Naturally, the conditional part can be any other IE <a
class="external-link" href="http://en.wikipedia.org/wiki/Conditional_comment";
rel="nofollow">conditional expression</a>, such as "lt IE 8".</p><h2
id="CSS-Suppressingthedefaultstylesheet(Tapestry5.3andearlier)">Suppressing the
default style sheet (Tapestry 5.3 and earlier)</h2><p>Though it should be
rarely needed, you can prevent Tapestry's default style sheet from loading by
overriding the configuration in your application's module (normally
AppModule.java):</p><div class="code panel pdl" style="border-width: 1px;"><div
class="codeHeader panelHeader pdl" style="border-bottom-width:
1px;"><b>AppModule.java (partial)</b></div><div class="codeContent panelContent
pdl">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;">@Contribute(MarkupRenderer.class)
public static void
deactiveDefaultCSS(OrderedConfiguration<MarkupRendererFilter>
configuration)
{
configuration.override("InjectDefaultStyleheet", null);
}
-</plain-text-body><p>Note: In Tapestry 5.3 and later, the misspelled
"InjectDefaultStyleheet" is corrected to "InjectDefaultStylesheet".</p><p>In
Tapestry 5.4, the "core" JavaScript has a configuration into which you may
inject overrides.</p><h2
id="CSS-OverridingBootstrap(Tapestry5.4andlater)">Overriding Bootstrap
(Tapestry 5.4 and later)</h2><p>The SymbolConstants.BOOTSTRAP_ROOT
("tapestry.bootstrap-root") symbol tells Tapestry where the Bootstrap css file
is. You can override that symbol (see <a
href="configuration.html">Configuration</a>) to have it point to your own
version of Bootstrap (or even to an empty file if you want to eliminate
Bootstrap entirely).</p><parameter
ac:name="language">java</parameter><parameter ac:name="title">AppModule.java
(partial)</parameter><plain-text-body>configuration.add(SymbolConstants.BOOTSTRAP_ROOT,
"classpath:/META-INF/assets");</plain-text-body><p>For the above, your
bootstrap.css file would be in your app's META-INF/assets/css folder.</p><p
> </p></div>
+</pre>
+</div></div><p>Note: In Tapestry 5.3 and later, the misspelled
"InjectDefaultStyleheet" is corrected to "InjectDefaultStylesheet".</p><p>In
Tapestry 5.4, the "core" JavaScript has a configuration into which you may
inject overrides.</p><h2
id="CSS-OverridingBootstrap(Tapestry5.4andlater)">Overriding Bootstrap
(Tapestry 5.4 and later)</h2><p>The SymbolConstants.BOOTSTRAP_ROOT
("tapestry.bootstrap-root") symbol tells Tapestry where the Bootstrap css file
is. You can override that symbol (see <a
href="configuration.html">Configuration</a>) to have it point to your own
version of Bootstrap (or even to an empty file if you want to eliminate
Bootstrap entirely).</p><div class="code panel pdl" style="border-width:
1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width:
1px;"><b>AppModule.java (partial)</b></div><div class="codeContent panelContent
pdl">
+<pre class="brush: java; gutter: false; theme: Default"
style="font-size:12px;">configuration.add(SymbolConstants.BOOTSTRAP_ROOT,
"classpath:/META-INF/assets");</pre>
+</div></div><p>For the above, your bootstrap.css file would be in your app's
META-INF/assets/css folder.</p><p> </p></div>
</div>
<div class="clearer"></div>
Modified: websites/production/tapestry/content/default-parameter.html
==============================================================================
--- websites/production/tapestry/content/default-parameter.html (original)
+++ websites/production/tapestry/content/default-parameter.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">Default Parameter</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">Default Parameter</h1></div></div>
<div class="clearer"></div>
</div>
@@ -67,7 +63,32 @@
</div>
<div id="content">
- <div id="ConfluenceContent"><p> </p><parameter
ac:name="hidden">true</parameter><parameter
ac:name="atlassian-macro-output-type">BLOCK</parameter><rich-text-body><p>Avoiding
repetition when using component parameters by adding
autoconnect=true</p></rich-text-body><p>Many of the components provided with
Tapestry share a common behavior: if the component's id matches a property of
the container, then some parameter of the component (usually value) defaults to
that property.</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 = "parameters" and space =
currentSpace()</parameter></rich-text-body><p>This is desirable, in terms of
not having to specify the component's id
and then specify the same value as some other parameter.</p><p>Let's say you
have created a component, <code>RichTextEditor</code>, which operates like a
normal TextArea component, but provides a JavaScript rich text editor. You
might start with something like:</p><parameter
ac:name="language">java</parameter><plain-text-body>public class RichTextEditor
implements Field
+ <div id="ConfluenceContent"><p> </p><p>Many of the
components provided with Tapestry share a common behavior: if the component's
id matches a property of the container, then some parameter of the component
(usually value) defaults to that property.</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="enum-parameter-recipe.html">Enum Parameter Recipe</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="supporting-informal-parameters.html">Supporting Informal
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="default-parameter.html">Default Parameter</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-parameters.html">Component Parameters</a>
+ </div> </li></ul></div><p>This is desirable, in terms of not having to
specify the component's id and then specify the same value as some other
parameter.</p><p>Let's say you have created a component,
<code>RichTextEditor</code>, which operates like a normal TextArea component,
but provides a JavaScript rich text editor. You might start with something
like:</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;">public class RichTextEditor implements Field
{
@Property
@Parameter(required=true)
@@ -75,13 +96,18 @@
. . . // Lots more code not shown here
}
-</plain-text-body><p>However, the weakness here is when you make use of the
component. You template may look like:</p><parameter
ac:name="language">xml</parameter><plain-text-body> <t:label
for="profile"/>
+</pre>
+</div></div><p>However, the weakness here is when you make use of the
component. You template may look like:</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;"> <t:label for="profile"/>
<br/>
<t:richtexteditor t:id="profile" value="profile"/>
-</plain-text-body><p>Every component has a unique id; if you don't assign one
with the <code>t:id</code> attribute, Tapestry will assign a less meaningful
one. Component ids can end up inside URLs or used as query parameter names, so
using meaningful ids helps if you are ever stuck debugging a
request.</p><p>This repetition can be avoided by adding the
<em>autoconnect</em> attribute to the @Parameter annotation:</p><parameter
ac:name="language">java</parameter><plain-text-body> @Property
+</pre>
+</div></div><p>Every component has a unique id; if you don't assign one with
the <code>t:id</code> attribute, Tapestry will assign a less meaningful one.
Component ids can end up inside URLs or used as query parameter names, so using
meaningful ids helps if you are ever stuck debugging a request.</p><p>This
repetition can be avoided by adding the <em>autoconnect</em> attribute to the
@Parameter annotation:</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;"> @Property
@Parameter(required=true, autoconnect=true)
private String value;
-</plain-text-body><p>This can now be written as <code><t:richtexteditor
t:id="profile"/></code>. The unwanted repetition is gone: we set the id of
the component and the property it edits in a single pass.</p><p>If there is no
matching property, then a runtime exception will be thrown when loading the
page because the value parameter is required and not bound.</p><p>The most
common case of using autoconnect is form control components such as TextField
and friends ... or this RichTextEditor.</p></div>
+</pre>
+</div></div><p>This can now be written as <code><t:richtexteditor
t:id="profile"/></code>. The unwanted repetition is gone: we set the id of
the component and the property it edits in a single pass.</p><p>If there is no
matching property, then a runtime exception will be thrown when loading the
page because the value parameter is required and not bound.</p><p>The most
common case of using autoconnect is form control components such as TextField
and friends ... or this RichTextEditor.</p></div>
</div>
<div class="clearer"></div>
![http://tapestry.apache.org/images/tapestry_small.png"](http://tapestry.apache.org/images/tapestry_small.png"){kind=link}