You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tapestry.apache.org by bo...@apache.org on 2017/09/16 01:54:20 UTC
svn commit: r1018226 [13/41] - in /websites/production/tapestry/content: ./
cache/ styles/
Modified: websites/production/tapestry/content/css.html
==============================================================================
--- websites/production/tapestry/content/css.html (original)
+++ websites/production/tapestry/content/css.html Sat Sep 16 01:54:19 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 Sat Sep 16 01:54:19 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>