You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@tapestry.apache.org by bu...@apache.org on 2013/09/23 00:21:27 UTC

svn commit: r879492 [8/30] - in /websites/production/tapestry/content: ./ 2009/ 2009/09/ 2009/09/13/ 2009/10/ 2009/10/27/ 2009/11/ 2009/11/25/ 2010/ 2010/07/ 2010/07/18/ 2010/07/24/ 2010/10/ 2010/10/11/ 2010/10/31/ 2010/11/ 2010/11/18/ 2010/11/19/ 2010...

Modified: websites/production/tapestry/content/component-parameters.html
==============================================================================
--- websites/production/tapestry/content/component-parameters.html (original)
+++ websites/production/tapestry/content/component-parameters.html Sun Sep 22 22:21:21 2013
@@ -24,7 +24,19 @@
     Component Parameters -- Apache Tapestry
   </title>
   <link type="text/css" rel="stylesheet" href="/resources/space.css">
+
+    <link href='http://cxf.apache.org/resources/highlighter/styles/shCoreCXF.css' rel='stylesheet' type='text/css' />
+  <link href='http://cxf.apache.org/resources/highlighter/styles/shThemeCXF.css' rel='stylesheet' type='text/css' />
+  <script src='http://cxf.apache.org/resources/highlighter/scripts/shCore.js' type='text/javascript'></script>
+  <script src='http://cxf.apache.org/resources/highlighter/scripts/shBrushJava.js' type='text/javascript'></script>
+  <script src='http://cxf.apache.org/resources/highlighter/scripts/shBrushXml.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"/>
+
 </head>
 <body>
   <div class="wrapper bs">
@@ -34,9 +46,9 @@
 </div>
 
 <div id="top">
-<div id="smallbanner"><div class="searchbox" style="float:right;margin: .3em 1em .1em 1em">
+<div id="smallbanner"><div class="searchbox" style="float:right;margin: .3em 1em .1em 1em"><p>
 <span style="color: #999; font-size: 90%">Tapestry docs, issues, wikis &amp; blogs:</span>
-<form enctype="application/x-www-form-urlencoded" method="get" action="http://tapestry.apache.org/search.html">
+</p><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>
@@ -66,31 +78,31 @@
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="page-and-component-classes-faq.html">Page And Component Classes FAQ</a>
+                         <a shape="rect" href="supporting-informal-parameters.html">Supporting Informal Parameters</a>
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="enum-parameter-recipe.html">Enum Parameter Recipe</a>
+                         <a shape="rect" href="component-classes.html">Component Classes</a>
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="templating-and-markup-faq.html">Templating and Markup FAQ</a>
+                         <a shape="rect" href="component-cheat-sheet.html">Component Cheat Sheet</a>
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="default-parameter.html">Default Parameter</a>
+                         <a shape="rect" href="templating-and-markup-faq.html">Templating and Markup FAQ</a>
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="supporting-informal-parameters.html">Supporting Informal Parameters</a>
+                         <a shape="rect" href="page-and-component-classes-faq.html">Page And Component Classes FAQ</a>
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="component-cheat-sheet.html">Component Cheat Sheet</a>
+                         <a shape="rect" href="enum-parameter-recipe.html">Enum Parameter Recipe</a>
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="component-classes.html">Component Classes</a>
+                         <a shape="rect" href="default-parameter.html">Default Parameter</a>
         
                                             </td></tr></table>
 </div>
@@ -104,11 +116,11 @@
 <p>In the following example, <tt>page</tt> is a parameter of the <tt>pagelink</tt> component. The page parameter tells the pagelink component which page to go to when the user clicks on the rendered hyperlink:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-xml">
-<span class="code-tag">&lt;html <span class="code-keyword">xmlns:t</span>=<span class="code-quote">"http://tapestry.apache.org/schema/tapestry_5_3.xsd"</span>&gt;</span>
-    <span class="code-tag">&lt;t:pagelink page=<span class="code-quote">"Index"</span>&gt;</span>Go Home<span class="code-tag">&lt;/t:pagelink&gt;</span>
-<span class="code-tag">&lt;/html&gt;</span>
-</pre>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"&gt;
+    &lt;t:pagelink page="Index"&gt;Go Home&lt;/t:pagelink&gt;
+&lt;/html&gt;
+]]></script>
 </div></div>
 
 <p>A component may have any number of parameters. Each parameter has a specific name, a specific Java type (which may be a primitive value), and may be <em>optional</em> or <em>required</em>.</p>
@@ -124,25 +136,25 @@
 <p>The component listed below is a looping component; it renders its body a number of times, defined by its <tt>start</tt> and <tt>end</tt> parameters (which set the boundaries of the loop). The component can update a <tt>result</tt> parameter bound to a property of its container; it will automatically count up or down depending on whether <tt>start</tt> or <tt>end</tt> is larger.</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-<span class="code-keyword">package</span> org.example.app.components;
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+package org.example.app.components;
 
-<span class="code-keyword">import</span> org.apache.tapestry5.annotations.AfterRender;
-<span class="code-keyword">import</span> org.apache.tapestry5.annotations.Parameter;
-<span class="code-keyword">import</span> org.apache.tapestry5.annotations.SetupRender;
+import org.apache.tapestry5.annotations.AfterRender;
+import org.apache.tapestry5.annotations.Parameter;
+import org.apache.tapestry5.annotations.SetupRender;
 
-<span class="code-keyword">public</span> class Count
+public class Count
 {
-    @Parameter (value=<span class="code-quote">"1"</span>)
-    <span class="code-keyword">private</span> <span class="code-object">int</span> start;
+    @Parameter (value="1")
+    private int start;
 
-    @Parameter(required = <span class="code-keyword">true</span>)
-    <span class="code-keyword">private</span> <span class="code-object">int</span> end;
+    @Parameter(required = true)
+    private int end;
 
     @Parameter
-    <span class="code-keyword">private</span> <span class="code-object">int</span> result;
+    private int result;
 
-    <span class="code-keyword">private</span> <span class="code-object">boolean</span> increment;
+    private boolean increment;
 
     @SetupRender
     void initializeValues()
@@ -152,31 +164,31 @@
     }
 
     @AfterRender
-    <span class="code-object">boolean</span> next()
+    boolean next()
     {
-        <span class="code-keyword">if</span> (increment)
+        if (increment)
         {
-            <span class="code-object">int</span> newResult = value + 1;
+            int newResult = value + 1;
 
-            <span class="code-keyword">if</span> (newResult &lt;= end)
+            if (newResult &lt;= end)
             {
                 result = newResult;
-                <span class="code-keyword">return</span> <span class="code-keyword">false</span>;
+                return false;
             }
         }
-        <span class="code-keyword">else</span>
+        else
         {
-            <span class="code-object">int</span> newResult= value - 1;
-            <span class="code-keyword">if</span> (newResult&gt;= end)
+            int newResult= value - 1;
+            if (newResult&gt;= end)
             {
                 result = newResult;
-                <span class="code-keyword">return</span> <span class="code-keyword">false</span>;
+                return false;
             }
         }
-        <span class="code-keyword">return</span> <span class="code-keyword">true</span>;
+        return true;
     }
 }
-</pre>
+]]></script>
 </div></div>
 
 <p>The name of the parameter is the same as field name (except with leading "_" and "$" characters, if any, removed). Here, the parameter names are "start", "end" and "result".</p>
@@ -188,12 +200,12 @@
 <p>The component above can be referenced in another component or page <a shape="rect" href="component-templates.html" title="Component Templates">template</a>, and its parameters <em>bound</em>:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-xml">
-<span class="code-tag">&lt;html t:type=<span class="code-quote">"layout"</span> <span class="code-keyword">xmlns:t</span>=<span class="code-quote">"http://tapestry.apache.org/schema/tapestry_5_3.xsd"</span>&gt;</span>
-    <span class="code-tag">&lt;p&gt;</span> Merry Christmas: <span class="code-tag">&lt;t:count end=<span class="code-quote">"3"</span>&gt;</span> Ho! <span class="code-tag">&lt;/t:count&gt;</span>
-    <span class="code-tag">&lt;/p&gt;</span>
-<span class="code-tag">&lt;/html&gt;</span>
-</pre>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;html t:type="layout" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"&gt;
+    &lt;p&gt; Merry Christmas: &lt;t:count end="3"&gt; Ho! &lt;/t:count&gt;
+    &lt;/p&gt;
+&lt;/html&gt;
+]]></script>
 </div></div>
 
 <p>The end attribute is used to <em>bind</em> the end parameter of the Count component. Here, it is being bound to the string value "3", which is automatically <a shape="rect" href="type-coercion.html" title="Type Coercion">coerced</a> by Tapestry into the int value, 3.</p>
@@ -229,27 +241,27 @@
 
 <p>For example, the following template code:</p>
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-xml">
-<span class="code-tag">&lt;ul&gt;</span>
-    <span class="code-tag">&lt;li t:type=<span class="code-quote">"loop"</span> source=<span class="code-quote">"1..10"</span> value=<span class="code-quote">"index"</span>&gt;</span>${index}<span class="code-tag">&lt;/li&gt;</span>
-<span class="code-tag">&lt;/ul&gt;</span>
-</pre>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;ul&gt;
+    &lt;li t:type="loop" source="1..10" value="index"&gt;${index}&lt;/li&gt;
+&lt;/ul&gt;
+]]></script>
 </div></div>
 <p>and the following Java code:</p>
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
 @Property
-<span class="code-keyword">private</span> <span class="code-object">int</span> index;
-</pre>
+private int index;
+]]></script>
 </div></div>
 <p>... could be rewritten as just:</p>
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-xml">
-<span class="code-tag">&lt;ul&gt;</span>
-    <span class="code-tag">&lt;li t:type=<span class="code-quote">"loop"</span> source=<span class="code-quote">"1..10"</span> value=<span class="code-quote">"var:index"</span>&gt;</span>${var:index}<span class="code-tag">&lt;/li&gt;</span>
-<span class="code-tag">&lt;/ul&gt;</span>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;ul&gt;
+    &lt;li t:type="loop" source="1..10" value="var:index"&gt;${var:index}&lt;/li&gt;
+&lt;/ul&gt;
 
-</pre>
+]]></script>
 </div></div>
 <p>In other words, you don't have to define a property in the Java code. The disadvantage is that render variables don't work with the property expression syntax, so you can pass around a render variable's <em>value</em> but you can't reference any of the value's properties.</p>
 
@@ -289,9 +301,9 @@
 
 <p>Context bindings are like asset bindings, but the path is <em>always</em> relative to the root of the web application context. This is intended for use inside templates, i.e.:</p>
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-xml">
-  <span class="code-tag">&lt;img src=<span class="code-quote">"${context:images/icon.png}"</span>/&gt;</span>
-</pre>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+  &lt;img src="${context:images/icon.png}"/&gt;
+]]></script>
 </div></div>
 <p>Tapestry will adjust the URL of the image so that it is processed by Tapestry, not the servlet container. It will gain a URL that includes the application's version number, it will have a far-future expires header, and (if the client supports it) its content will be compressed before being sent to the client.</p>
 
@@ -302,15 +314,15 @@
 
 <p>Parameters that are required <b>must</b> be bound. A runtime exception occurs if a component has unbound required parameters.</p>
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java"><span class="code-keyword">public</span> class Component{
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[public class Component{
 
-  @Parameter(required = <span class="code-keyword">true</span>)
-  <span class="code-keyword">private</span> <span class="code-object">String</span> parameter;
+  @Parameter(required = true)
+  private String parameter;
 
-}</pre>
+}]]></script>
 </div></div>
 
-<div class="panelMacro"><table class="tipMacro"><colgroup span="1"><col span="1" width="24"><col span="1"></colgroup><tr><td colspan="1" rowspan="1" valign="top"><img align="middle" src="/images/confluence/check.gif" width="16" height="16" alt="" border="0"></td><td colspan="1" rowspan="1">Sometimes a parameter is marked as required, but may still be omitted if the underlying value is provided by some other means. This is the case, for example, with the Select component's value parameter, which may have its underlying value set by <a shape="rect" href="using-select-with-a-list.html" title="Using Select With a List">contributing a ValueEncoderSource</a>. Be sure to read the component's parameter documentation carefully. Required simply enables checks that the parameter is bound, it does not mean that you must supply the binding in the template (or @Component annotation).</td></tr></table></div>
+<div class="panelMacro"><table class="tipMacro"><colgroup span="1"><col span="1" width="24"><col span="1"></colgroup><tr><td colspan="1" rowspan="1" valign="top"><img align="middle" src="https://cwiki.apache.org/confluence/images/icons/emoticons/check.gif" width="16" height="16" alt="" border="0"></td><td colspan="1" rowspan="1">Sometimes a parameter is marked as required, but may still be omitted if the underlying value is provided by some other means. This is the case, for example, with the Select component's value parameter, which may have its underlying value set by <a shape="rect" href="using-select-with-a-list.html" title="Using Select With a List">contributing a ValueEncoderSource</a>. Be sure to read the component's parameter documentation carefully. Required simply enables checks that the parameter is bound, it does not mean that you must supply the binding in the template (or @Component annotation).</td></tr></table></div>
 
 <h3><a shape="rect" name="ComponentParameters-OptionalParameters"></a>Optional Parameters</h3>
 
@@ -322,18 +334,18 @@
 
 <p>The @Parameter annotation's <tt>value</tt> element can be used to specify a <em>binding expression</em> that will be the default binding for the parameter if otherwise left unbound. Typically, this is the name of a property that that will compute the value on the fly.</p>
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-@Parameter(value=<span class="code-quote">"defaultMessage"</span>) <span class="code-comment">// or, equivalently, @Parameter(<span class="code-quote">"defaultMessage"</span>)
-</span><span class="code-keyword">private</span> <span class="code-object">String</span> message;
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+@Parameter(value="defaultMessage") // or, equivalently, @Parameter("defaultMessage")
+private String message;
 
-@Parameter(required=<span class="code-keyword">true</span>)
-<span class="code-keyword">private</span> <span class="code-object">int</span> maxLength;
+@Parameter(required=true)
+private int maxLength;
 
-<span class="code-keyword">public</span> <span class="code-object">String</span> getDefaultMessage(){&#160;
-	<span class="code-keyword">return</span> <span class="code-object">String</span>.format(<span class="code-quote">"Maximum field length is %d."</span>, maxLength);
+public String getDefaultMessage(){ 
+	return String.format("Maximum field length is %d.", maxLength);
 }
 
-</pre>
+]]></script>
 </div></div>
 <p>As elsewhere, you may use a prefix on the value. A common prefix to use is the "message:" prefix, to access a localized message.</p>
 
@@ -353,28 +365,28 @@
 
 <table class="sectionMacro" border="0" cellpadding="5" cellspacing="0" width="100%"><tbody><tr><td colspan="1" rowspan="1" valign="top" class="confluenceTd">
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>This is right</b></div><div class="codeContent panelContent">
-<pre class="code-xml">
-<span class="code-tag">&lt;t:textfield t:id=<span class="code-quote">"color"</span> value=<span class="code-quote">"color"</span>/&gt;</span>
-</pre>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;t:textfield t:id="color" value="color"/&gt;
+]]></script>
 </div></div></td><td colspan="1" rowspan="1" valign="top" class="confluenceTd">
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>This is wrong</b></div><div class="codeContent panelContent">
-<pre class="code-xml">
-<span class="code-tag">&lt;t:textfield t:id=<span class="code-quote">"color"</span> value=<span class="code-quote">"${color}"</span>/&gt;</span>
-</pre>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;t:textfield t:id="color" value="${color}"/&gt;
+]]></script>
 </div></div></td></tr></tbody></table>
 
 <p>The general rule is, only use the ${...} syntax in non-Tapestry-controlled locations in your template, such as in attributes of ordinary HTML elements and in plain-text areas of your template.</p>
 
 <table class="sectionMacro" border="0" cellpadding="5" cellspacing="0" width="100%"><tbody><tr><td colspan="1" rowspan="1" valign="top" class="confluenceTd">
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>This is right</b></div><div class="codeContent panelContent">
-<pre class="code-xml">
-<span class="code-tag">&lt;img src=<span class="code-quote">"${context:images/banner.png}"</span>/&gt;</span>
-</pre>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;img src="${context:images/banner.png}"/&gt;
+]]></script>
 </div></div></td><td colspan="1" rowspan="1" valign="top" class="confluenceTd">
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>This is wrong</b></div><div class="codeContent panelContent">
-<pre class="code-xml">
-<span class="code-tag">&lt;img src=<span class="code-quote">"context:images/banner.png"</span>/&gt;</span>
-</pre>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;img src="context:images/banner.png"/&gt;
+]]></script>
 </div></div></td></tr></tbody></table>
 
 <h1><a shape="rect" name="ComponentParameters-InformalParameters"></a>Informal Parameters</h1>
@@ -398,23 +410,23 @@
 <p>Parameters are not simply variables; each parameter represents a connection, or <em>binding</em>, between a component and a property of its container. When using the prop: binding prefix, the component can force changes <em>into</em> a property of its container, just by assigning a value to its own instance variable.</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-xml">
-<span class="code-tag">&lt;t:layout <span class="code-keyword">xmlns:t</span>=<span class="code-quote">"http://tapestry.apache.org/schema/tapestry_5_3.xsd"</span>&gt;</span>
-    <span class="code-tag">&lt;p&gt;</span> Countdown:
-        <span class="code-tag">&lt;t:count start=<span class="code-quote">"5"</span> end=<span class="code-quote">"1"</span> result=<span class="code-quote">"index"</span>&gt;</span>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;t:layout xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"&gt;
+    &lt;p&gt; Countdown:
+        &lt;t:count start="5" end="1" result="index"&gt;
           ${index} ...
-        <span class="code-tag">&lt;/t:count&gt;</span>
-    <span class="code-tag">&lt;/p&gt;</span>
-<span class="code-tag">&lt;/t:layout&gt;</span>
-</pre>
+        &lt;/t:count&gt;
+    &lt;/p&gt;
+&lt;/t:layout&gt;
+]]></script>
 </div></div>
 
 <p>Because the Count component updates its result parameter (the <tt>result</tt> field), the index property of the containing component is updated. Inside the Count's body, we output the current value of the index property, using the expansion <tt>${index</tt>}. The resulting output will look something like:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-xml">
-  <span class="code-tag">&lt;p&gt;</span> Countdown: 5 ... 4 ... 3 ... 2 ... 1 ... <span class="code-tag">&lt;/p&gt;</span>
-</pre>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+  &lt;p&gt; Countdown: 5 ... 4 ... 3 ... 2 ... 1 ... &lt;/p&gt;
+]]></script>
 </div></div>
 
 <p>(Though the whitespace will be quite different.)</p>
@@ -430,44 +442,44 @@
 <p>Inherited bindings are useful for complex components; they are often used when an inner component has a default value for a parameter, and the outer component wants to make it possible to override that default.</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>Index.tml</b></div><div class="codeContent panelContent">
-<pre class="code-xml">
-<span class="code-tag">&lt;html <span class="code-keyword">xmlns:t</span>=<span class="code-quote">"http://tapestry.apache.org/schema/tapestry_5_3.xsd"</span>&gt;</span>
-  <span class="code-tag">&lt;body&gt;</span>
-    <span class="code-tag">&lt;div t:type=<span class="code-quote">"layout"</span> t:menuTitle=<span class="code-quote">"literal:The Title"</span>&gt;</span>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"&gt;
+  &lt;body&gt;
+    &lt;div t:type="layout" t:menuTitle="literal:The Title"&gt;
       ...
-    <span class="code-tag">&lt;/div&gt;</span>
-  <span class="code-tag">&lt;/body&gt;</span>
-<span class="code-tag">&lt;/html&gt;</span>
-</pre>
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+]]></script>
 </div></div>
 
 
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>Layout.tml</b></div><div class="codeContent panelContent">
-<pre class="code-xml">
-<span class="code-tag">&lt;t:container <span class="code-keyword">xmlns:t</span>=<span class="code-quote">"http://tapestry.apache.org/schema/tapestry_5_3.xsd"</span>&gt;</span>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;t:container xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"&gt;
 
-	<span class="code-tag">&lt;div t:type=<span class="code-quote">"title"</span> t:title=<span class="code-quote">"inherit:menuTitle"</span>&gt;</span><span class="code-tag">&lt;/div&gt;</span>
+	&lt;div t:type="title" t:title="inherit:menuTitle"&gt;&lt;/div&gt;
 
-	<span class="code-tag">&lt;t:body /&gt;</span>
+	&lt;t:body /&gt;
 
-<span class="code-tag">&lt;/t:container&gt;</span>
-</pre>
+&lt;/t:container&gt;
+]]></script>
 </div></div>
 
 
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>Title.java</b></div><div class="codeContent panelContent">
-<pre class="code-java">
-<span class="code-keyword">package</span> org.example.app.components;
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+package org.example.app.components;
 
-<span class="code-keyword">import</span> org.apache.tapestry5.annotations.Parameter;
+import org.apache.tapestry5.annotations.Parameter;
 
-<span class="code-keyword">public</span> class Title {
+public class Title {
 
 	@Parameter
-	<span class="code-keyword">private</span> <span class="code-object">String</span> title;
+	private String title;
 
 }
-</pre>
+]]></script>
 </div></div>
 
 <h1><a shape="rect" name="ComponentParameters-ComputedParameterBindingDefaults"></a>Computed Parameter Binding Defaults</h1>
@@ -479,29 +491,29 @@
 <p>Using this approach, the previous example may be rewritten as:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
   @Parameter
-  <span class="code-keyword">private</span> <span class="code-object">String</span> message;
+  private String message;
 
-  @Parameter(required=<span class="code-keyword">true</span>)
-  <span class="code-keyword">private</span> <span class="code-object">int</span> maxLength;
+  @Parameter(required=true)
+  private int maxLength;
 
   @Inject
-  <span class="code-keyword">private</span> ComponentResources resources;
+  private ComponentResources resources;
 
   @Inject
-  <span class="code-keyword">private</span> BindingSource bindingSource;
+  private BindingSource bindingSource;
 
   Binding defaultMessage()
   {
-    <span class="code-keyword">return</span> bindingSource.newBinding(<span class="code-quote">"<span class="code-keyword">default</span> value"</span>, resources, <span class="code-quote">"basicMessage"</span>);
+    return bindingSource.newBinding("default value", resources, "basicMessage");
   }
 
-  <span class="code-keyword">public</span> <span class="code-object">String</span> getBasicMessage()
+  public String getBasicMessage()
   {
-    <span class="code-keyword">return</span> <span class="code-object">String</span>.format(<span class="code-quote">"Maximum field length is %d."</span>, maxLength);
+    return String.format("Maximum field length is %d.", maxLength);
   }
-</pre>
+]]></script>
 </div></div>
 
 <p>In this example, a property expression, "basicMessage", is used to access the message dynamically.</p>
@@ -509,21 +521,21 @@
 <p>Alternately, the previous example may be written even more succinctly as:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
   @Parameter
-  <span class="code-keyword">private</span> <span class="code-object">String</span> message;
+  private String message;
 
-  @Parameter(required=<span class="code-keyword">true</span>)
-  <span class="code-keyword">private</span> <span class="code-object">int</span> maxLength;
+  @Parameter(required=true)
+  private int maxLength;
 
   @Inject
-  <span class="code-keyword">private</span> ComponentResources resources;
+  private ComponentResources resources;
 
-  <span class="code-object">String</span> defaultMessage()
+  String defaultMessage()
   {
-    <span class="code-keyword">return</span> <span class="code-object">String</span>.format(<span class="code-quote">"Maximum field length is %d."</span>, maxLength);
+    return String.format("Maximum field length is %d.", maxLength);
   }
-</pre>
+]]></script>
 </div></div>
 
 <p>This form is more like using the "literal:" binding prefix, except that the literal value is computed by the defaultMessage() method.</p>
@@ -557,25 +569,25 @@
 <p>In rare cases, you may want to take different behaviors based on whether a parameter is bound or not. This can be accomplished by querying the component's resources, which can be <a shape="rect" href="injection.html" title="Injection">injected</a> into the component using the @<a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/ioc/annotations/Inject.html">Inject</a> annotation:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-<span class="code-keyword">public</span> class MyComponent
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+public class MyComponent
 {
   @Parameter
-  <span class="code-keyword">private</span> <span class="code-object">int</span> myParam;
+  private int myParam;
 
   @Inject
-  <span class="code-keyword">private</span> ComponentResources resources;
+  private ComponentResources resources;
 
   @BeginRender
   void setup()
   {
-      <span class="code-keyword">if</span> (resources.isBound(<span class="code-quote">"myParam"</span>))
+      if (resources.isBound("myParam"))
       {
         . . .
       }
   }
 }
-</pre>
+]]></script>
 </div></div>
 
 <p>The above sketch illustrates the approach. Because the parameter type is a primitive type, int, it is hard to distinguish between no binding, and binding explicitly to the value 0.</p>
@@ -591,25 +603,25 @@
 <p>In Tapestry 5.1 and later, you may use the publishParameters attribute of the @<a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Component.html">Component</a> annotation. List one or more parameters separated by commas: those parameters of the inner/embedded component become parameters of the outer component. You should <b>not</b> define a parameter field in the outer component.</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>ContainerComponent.tml</b></div><div class="codeContent panelContent">
-<pre class="code-xml">
-<span class="code-tag">&lt;t:container <span class="code-keyword">xmlns:t</span>=<span class="code-quote">"http://tapestry.apache.org/schema/tapestry_5_3.xsd"</span>&gt;</span>
-<span class="code-tag">&lt;t:pageLink t:id=<span class="code-quote">"link"</span>&gt;</span>Page Link<span class="code-tag">&lt;/t:pageLink&gt;</span>
-<span class="code-tag">&lt;/t:container&gt;</span>
-</pre>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;t:container xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"&gt;
+&lt;t:pageLink t:id="link"&gt;Page Link&lt;/t:pageLink&gt;
+&lt;/t:container&gt;
+]]></script>
 </div></div>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>ContainerComponent.java</b></div><div class="codeContent panelContent">
-<pre class="code-java"><span class="code-keyword">public</span> class ContainerComponent{
-@Component(id=<span class="code-quote">"link"</span>, 	publishParameters=<span class="code-quote">"page"</span>)
-<span class="code-keyword">private</span> PageLink link;
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[public class ContainerComponent{
+@Component(id="link", 	publishParameters="page")
+private PageLink link;
 }
-</pre>
+]]></script>
 </div></div>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>Index.tml</b></div><div class="codeContent panelContent">
-<pre class="code-xml">
-<span class="code-tag">&lt;t:ContainerComponent t:id=<span class="code-quote">"Container"</span> t:page=<span class="code-quote">"About"</span> /&gt;</span>
-</pre>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;t:ContainerComponent t:id="Container" t:page="About" /&gt;
+]]></script>
 </div></div>
 
 <p>There are still cases where you want to use the "inherit:" binding prefix. For example, if you have several components that need to share a parameter, then you must do it the Tapestry 5.0 way: a true parameter on the outer component, and "inherit:" bindings on the embedded components. You can follow a similar pattern to rename a parameter in the outer component.</p></div>
@@ -617,7 +629,7 @@
 
 <div class="clearer"></div>
 <div id="footer">
-<div id="footer"><p>Apache Tapestry, Tapestry, Apache, the Apache feather logo, and the Apache Tapestry project logo are trademarks of The Apache Software Foundation.</p>
+<div id="footer"><p>Apache Tapestry, Tapestry, Apache, the Apache feather logo, and the Apache Tapestry project logo are trademarks of The Apache Software Foundation.<br clear="none">
 <script type="text/javascript">
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-400821-1']);
@@ -628,7 +640,7 @@
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   })();
-</script></div>
+</script></p></div>
 </div>
 		<div id="comments_thread"></div>
 		<script type="text/javascript" src="https://comments.apache.org/show_comments.lua?site=tapestry&amp;page=http://tapestry.apache.org/component-parameters.html" async="true">

Modified: websites/production/tapestry/content/component-reference.html
==============================================================================
--- websites/production/tapestry/content/component-reference.html (original)
+++ websites/production/tapestry/content/component-reference.html Sun Sep 22 22:21:21 2013
@@ -24,7 +24,10 @@
     Component Reference -- Apache Tapestry
   </title>
   <link type="text/css" rel="stylesheet" href="/resources/space.css">
+
+
   <link href="/styles/style.css" rel="stylesheet" type="text/css"/>
+
 </head>
 <body>
   <div class="wrapper bs">
@@ -34,9 +37,9 @@
 </div>
 
 <div id="top">
-<div id="smallbanner"><div class="searchbox" style="float:right;margin: .3em 1em .1em 1em">
+<div id="smallbanner"><div class="searchbox" style="float:right;margin: .3em 1em .1em 1em"><p>
 <span style="color: #999; font-size: 90%">Tapestry docs, issues, wikis &amp; blogs:</span>
-<form enctype="application/x-www-form-urlencoded" method="get" action="http://tapestry.apache.org/search.html">
+</p><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>
@@ -60,15 +63,15 @@
 
 <div class="navmenu" style="float:right; background:#eee; margin:3px; padding:3px"><table class="tableview" width="100%"><tr><th colspan="1" rowspan="1" style="padding: 3px 3px 3px 0px">Related Articles</th></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="templating-and-markup-faq.html">Templating and Markup FAQ</a>
+                         <a shape="rect" href="component-classes.html">Component Classes</a>
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="component-parameters.html">Component Parameters</a>
+                         <a shape="rect" href="templating-and-markup-faq.html">Templating and Markup FAQ</a>
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="component-classes.html">Component Classes</a>
+                         <a shape="rect" href="component-parameters.html">Component Parameters</a>
         
                                             </td></tr></table>
 </div>
@@ -179,7 +182,7 @@
 
 <div class="clearer"></div>
 <div id="footer">
-<div id="footer"><p>Apache Tapestry, Tapestry, Apache, the Apache feather logo, and the Apache Tapestry project logo are trademarks of The Apache Software Foundation.</p>
+<div id="footer"><p>Apache Tapestry, Tapestry, Apache, the Apache feather logo, and the Apache Tapestry project logo are trademarks of The Apache Software Foundation.<br clear="none">
 <script type="text/javascript">
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-400821-1']);
@@ -190,7 +193,7 @@
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   })();
-</script></div>
+</script></p></div>
 </div>
 		<div id="comments_thread"></div>
 		<script type="text/javascript" src="https://comments.apache.org/show_comments.lua?site=tapestry&amp;page=http://tapestry.apache.org/component-reference.html" async="true">

Modified: websites/production/tapestry/content/component-rendering.html
==============================================================================
--- websites/production/tapestry/content/component-rendering.html (original)
+++ websites/production/tapestry/content/component-rendering.html Sun Sep 22 22:21:21 2013
@@ -24,7 +24,18 @@
     Component Rendering -- Apache Tapestry
   </title>
   <link type="text/css" rel="stylesheet" href="/resources/space.css">
+
+    <link href='http://cxf.apache.org/resources/highlighter/styles/shCoreCXF.css' rel='stylesheet' type='text/css' />
+  <link href='http://cxf.apache.org/resources/highlighter/styles/shThemeCXF.css' rel='stylesheet' type='text/css' />
+  <script src='http://cxf.apache.org/resources/highlighter/scripts/shCore.js' type='text/javascript'></script>
+  <script src='http://cxf.apache.org/resources/highlighter/scripts/shBrushJava.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"/>
+
 </head>
 <body>
   <div class="wrapper bs">
@@ -34,9 +45,9 @@
 </div>
 
 <div id="top">
-<div id="smallbanner"><div class="searchbox" style="float:right;margin: .3em 1em .1em 1em">
+<div id="smallbanner"><div class="searchbox" style="float:right;margin: .3em 1em .1em 1em"><p>
 <span style="color: #999; font-size: 90%">Tapestry docs, issues, wikis &amp; blogs:</span>
-<form enctype="application/x-www-form-urlencoded" method="get" action="http://tapestry.apache.org/search.html">
+</p><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>
@@ -60,15 +71,15 @@
 
 <div class="navmenu" style="float:right; background:#eee; margin:3px; padding:3px"><table class="tableview" width="100%"><tr><th colspan="1" rowspan="1" style="padding: 3px 3px 3px 0px">Related Articles</th></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="component-events-faq.html">Component Events FAQ</a>
+                         <a shape="rect" href="request-processing.html">Request Processing</a>
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="request-processing.html">Request Processing</a>
+                         <a shape="rect" href="component-events.html">Component Events</a>
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="component-events.html">Component Events</a>
+                         <a shape="rect" href="component-rendering.html">Component Rendering</a>
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
@@ -76,15 +87,15 @@
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="page-navigation.html">Page Navigation</a>
+                         <a shape="rect" href="page-life-cycle.html">Page Life Cycle</a>
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="page-life-cycle.html">Page Life Cycle</a>
+                         <a shape="rect" href="page-navigation.html">Page Navigation</a>
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
-                         <a shape="rect" href="component-rendering.html">Component Rendering</a>
+                         <a shape="rect" href="component-events-faq.html">Component Events FAQ</a>
         
                                             </td></tr></table>
 </div> 
@@ -114,25 +125,25 @@ Each of the orange phases (SetupRender, 
 <p>Here's the source for a looping component that counts up or down between two values, renders its body a number of times, and stores the current index value in a parameter:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-<span class="code-keyword">package</span> org.example.app.components;
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+package org.example.app.components;
 
-<span class="code-keyword">import</span> org.apache.tapestry5.annotations.Parameter;
-<span class="code-keyword">import</span> org.apache.tapestry5.annotations.AfterRender;
-<span class="code-keyword">import</span> org.apache.tapestry5.annotations.SetupRender;
+import org.apache.tapestry5.annotations.Parameter;
+import org.apache.tapestry5.annotations.AfterRender;
+import org.apache.tapestry5.annotations.SetupRender;
 
-<span class="code-keyword">public</span> class Count
+public class Count
 {
     @Parameter
-    <span class="code-keyword">private</span> <span class="code-object">int</span> start = 1;
+    private int start = 1;
 
-    @Parameter(required = <span class="code-keyword">true</span>)
-    <span class="code-keyword">private</span> <span class="code-object">int</span> end;
+    @Parameter(required = true)
+    private int end;
 
     @Parameter
-    <span class="code-keyword">private</span> <span class="code-object">int</span> value;
+    private int value;
 
-    <span class="code-keyword">private</span> <span class="code-object">boolean</span> increment;
+    private boolean increment;
 
     @SetupRender
     void initializeValue()
@@ -143,33 +154,33 @@ Each of the orange phases (SetupRender, 
     }
 
     @AfterRender
-    <span class="code-object">boolean</span> next()
+    boolean next()
     {
-        <span class="code-keyword">if</span> (increment)
+        if (increment)
         {
-            <span class="code-object">int</span> newValue = value + 1;
+            int newValue = value + 1;
 
-            <span class="code-keyword">if</span> (newValue &lt;= end)
+            if (newValue &lt;= end)
             {
                 value = newValue;
-                <span class="code-keyword">return</span> <span class="code-keyword">false</span>;
+                return false;
             }
         }
-        <span class="code-keyword">else</span>
+        else
         {
-            <span class="code-object">int</span> newValue = value - 1;
+            int newValue = value - 1;
 
-            <span class="code-keyword">if</span> (newValue &gt;= end)
+            if (newValue &gt;= end)
             {
                 value = newValue;
-                <span class="code-keyword">return</span> <span class="code-keyword">false</span>; 
+                return false; 
             }
         }
 
-        <span class="code-keyword">return</span> <span class="code-keyword">true</span>;
+        return true;
     }
 }
-</pre>
+]]></script>
 </div></div>
 
 <p>Returning false from next() causes Tapestry to re-run the BeginRender phase, and from there, re-render the component's body (this component does not have a template). Returning true transitions to the CleanupRender phase.</p>
@@ -225,23 +236,23 @@ Each of the orange phases (SetupRender, 
 <p>Using this mechanism, the earlier example can be rewritten as:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-<span class="code-keyword">package</span> org.example.app.components;
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+package org.example.app.components;
 
-<span class="code-keyword">import</span> org.apache.tapestry5.annotations.Parameter;
+import org.apache.tapestry5.annotations.Parameter;
 
-<span class="code-keyword">public</span> class Count
+public class Count
 {
     @Parameter
-    <span class="code-keyword">private</span> <span class="code-object">int</span> start = 1;
+    private int start = 1;
 
-    @Parameter(required = <span class="code-keyword">true</span>)
-    <span class="code-keyword">private</span> <span class="code-object">int</span> end;
+    @Parameter(required = true)
+    private int end;
 
     @Parameter
-    <span class="code-keyword">private</span> <span class="code-object">int</span> value;
+    private int value;
 
-    <span class="code-keyword">private</span> <span class="code-object">boolean</span> increment;
+    private boolean increment;
 
     void setupRender()
     {
@@ -250,33 +261,33 @@ Each of the orange phases (SetupRender, 
         increment = start &lt; end;
     }
 
-    <span class="code-object">boolean</span> afterRender()
+    boolean afterRender()
     {
-        <span class="code-keyword">if</span> (increment)
+        if (increment)
         {
-            <span class="code-object">int</span> newValue = value + 1;
+            int newValue = value + 1;
 
-            <span class="code-keyword">if</span> (newValue &lt;= end)
+            if (newValue &lt;= end)
             {
                 value = newValue;
-                <span class="code-keyword">return</span> <span class="code-keyword">false</span>;
+                return false;
             }
         }
-        <span class="code-keyword">else</span>
+        else
         {
-            <span class="code-object">int</span> newValue = value - 1;
+            int newValue = value - 1;
 
-            <span class="code-keyword">if</span> (newValue &gt;= end)
+            if (newValue &gt;= end)
             {
                 value = newValue;
-                <span class="code-keyword">return</span> <span class="code-keyword">false</span>; 
+                return false; 
             }
         }
 
-        <span class="code-keyword">return</span> <span class="code-keyword">true</span>;
+        return true;
     }
 }
-</pre>
+]]></script>
 </div></div>
 
 <p>This style is a trade off: on the gain side, the code is <em>even</em> simpler and shorter, and the method names will, by design, be more consistent from one class to the next. The down side is that the names are very generic, and may in some cases, be less descriptive than using annotated methods (<tt>initializeValue()</tt> and <tt>next()</tt> are, to some eyes, more descriptive).</p>
@@ -304,24 +315,24 @@ Each of the orange phases (SetupRender, 
 <p>The following component returns a Renderable in the BeginRender phase and skips the BeforeRenderTemplate phase:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-<span class="code-keyword">public</span> class OutputValueComponent
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+public class OutputValueComponent
 {
     @Parameter
-    <span class="code-keyword">private</span> <span class="code-object">String</span> value;
+    private String value;
     
-    <span class="code-object">Object</span> beginRender()
+    Object beginRender()
     {
-        <span class="code-keyword">return</span> <span class="code-keyword">new</span> Renderable()
+        return new Renderable()
         {
-            <span class="code-keyword">public</span> void render(MarkupWriter writer)
+            public void render(MarkupWriter writer)
             {
                 writer.write(value);
             }
         };
     }
 }
-</pre>
+]]></script>
 </div></div>
 
 <h2><a shape="rect" name="ComponentRendering-ShortCircuiting"></a>Short Circuiting</h2>
@@ -372,15 +383,15 @@ Each of the orange phases (SetupRender, 
 <p>To turn on rendering comments only for a particular request, add the query parameter <tt>t:component-trace=true</tt> to the URL:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-  http:<span class="code-comment">//www.example.com/myapp/mypage?t:component-trace=<span class="code-keyword">true</span></span>
-</pre>
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+  http://www.example.com/myapp/mypage?t:component-trace=true
+]]></script>
 </div></div></div>
 </div>
 
 <div class="clearer"></div>
 <div id="footer">
-<div id="footer"><p>Apache Tapestry, Tapestry, Apache, the Apache feather logo, and the Apache Tapestry project logo are trademarks of The Apache Software Foundation.</p>
+<div id="footer"><p>Apache Tapestry, Tapestry, Apache, the Apache feather logo, and the Apache Tapestry project logo are trademarks of The Apache Software Foundation.<br clear="none">
 <script type="text/javascript">
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-400821-1']);
@@ -391,7 +402,7 @@ Each of the orange phases (SetupRender, 
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   })();
-</script></div>
+</script></p></div>
 </div>
 		<div id="comments_thread"></div>
 		<script type="text/javascript" src="https://comments.apache.org/show_comments.lua?site=tapestry&amp;page=http://tapestry.apache.org/component-rendering.html" async="true">

Modified: websites/production/tapestry/content/component-report.html
==============================================================================
--- websites/production/tapestry/content/component-report.html (original)
+++ websites/production/tapestry/content/component-report.html Sun Sep 22 22:21:21 2013
@@ -24,7 +24,19 @@
     Component Report -- Apache Tapestry
   </title>
   <link type="text/css" rel="stylesheet" href="/resources/space.css">
+
+    <link href='http://cxf.apache.org/resources/highlighter/styles/shCoreCXF.css' rel='stylesheet' type='text/css' />
+  <link href='http://cxf.apache.org/resources/highlighter/styles/shThemeCXF.css' rel='stylesheet' type='text/css' />
+  <script src='http://cxf.apache.org/resources/highlighter/scripts/shCore.js' type='text/javascript'></script>
+  <script src='http://cxf.apache.org/resources/highlighter/scripts/shBrushJava.js' type='text/javascript'></script>
+  <script src='http://cxf.apache.org/resources/highlighter/scripts/shBrushXml.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"/>
+
 </head>
 <body>
   <div class="wrapper bs">
@@ -34,9 +46,9 @@
 </div>
 
 <div id="top">
-<div id="smallbanner"><div class="searchbox" style="float:right;margin: .3em 1em .1em 1em">
+<div id="smallbanner"><div class="searchbox" style="float:right;margin: .3em 1em .1em 1em"><p>
 <span style="color: #999; font-size: 90%">Tapestry docs, issues, wikis &amp; blogs:</span>
-<form enctype="application/x-www-form-urlencoded" method="get" action="http://tapestry.apache.org/search.html">
+</p><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>
@@ -75,19 +87,20 @@
 <p>Example:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-xml"><span class="code-tag">&lt;document&gt;</span>
-    <span class="code-tag">&lt;body&gt;</span>
-        <span class="code-tag">&lt;section name=<span class="code-quote">"Related Components"</span>&gt;</span>
-            <span class="code-tag">&lt;ul&gt;</span>
-                <span class="code-tag">&lt;li&gt;</span><span class="code-tag">&lt;a href=<span class="code-quote">"Foo.html"</span>&gt;</span>Foo<span class="code-tag">&lt;/a&gt;</span><span class="code-tag">&lt;/ul&gt;</span>
-                <span class="code-tag">&lt;li&gt;</span><span class="code-tag">&lt;a href=<span class="code-quote">"Bar.html"</span>&gt;</span>Bar<span class="code-tag">&lt;/a&gt;</span><span class="code-tag">&lt;/ul&gt;</span>
-            <span class="code-tag">&lt;/ul&gt;</span>
-         <span class="code-tag">&lt;/section&gt;</span>
-         <span class="code-tag">&lt;section name=<span class="code-quote">"Examples"</span>&gt;</span>
-            <span class="code-tag">&lt;p&gt;</span>The Baz component can be used to generate a gloop style of interface:<span class="code-tag">&lt;/p&gt;</span>
-            <span class="code-tag">&lt;p&gt;</span><span class="code-tag">&lt;img src=<span class="code-quote">"baz_ref.png"</span>/&gt;</span><span class="code-tag">&lt;/p&gt;</span>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;document&gt;
+    &lt;body&gt;
+        &lt;section name="Related Components"&gt;
+            &lt;ul&gt;
+                &lt;li&gt;&lt;a href="Foo.html"&gt;Foo&lt;/a&gt;&lt;/ul&gt;
+                &lt;li&gt;&lt;a href="Bar.html"&gt;Bar&lt;/a&gt;&lt;/ul&gt;
+            &lt;/ul&gt;
+         &lt;/section&gt;
+         &lt;section name="Examples"&gt;
+            &lt;p&gt;The Baz component can be used to generate a gloop style of interface:&lt;/p&gt;
+            &lt;p&gt;&lt;img src="baz_ref.png"/&gt;&lt;/p&gt;
             . . .
-</pre>
+]]></script>
 </div></div>
 
 <p>External documentation files (the .xdoc files and any related image files) can be either on the Java main path (i.e., src/main/java) or on the resources path (src/main/resources). At this time, you should place them under src/main/java such that the files are not packaged in your library JAR or application WAR.</p>
@@ -97,37 +110,39 @@
 <p>Just add the following to the reporting/plugins section of your POM:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-xml"><span class="code-tag">&lt;plugin&gt;</span>
-    <span class="code-tag">&lt;groupId&gt;</span>org.apache.tapestry<span class="code-tag">&lt;/groupId&gt;</span>
-    <span class="code-tag">&lt;artifactId&gt;</span>tapestry-component-report<span class="code-tag">&lt;/artifactId&gt;</span>
-    <span class="code-tag">&lt;version&gt;</span>5.0.x<span class="code-tag">&lt;/version&gt;</span>
-    <span class="code-tag">&lt;configuration&gt;</span>
-        <span class="code-tag">&lt;rootPackage&gt;</span>org.example.myapp<span class="code-tag">&lt;/rootPackage&gt;</span>
-    <span class="code-tag">&lt;/configuration&gt;</span>
-<span class="code-tag">&lt;/plugin&gt;</span></pre>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;plugin&gt;
+    &lt;groupId&gt;org.apache.tapestry&lt;/groupId&gt;
+    &lt;artifactId&gt;tapestry-component-report&lt;/artifactId&gt;
+    &lt;version&gt;5.0.x&lt;/version&gt;
+    &lt;configuration&gt;
+        &lt;rootPackage&gt;org.example.myapp&lt;/rootPackage&gt;
+    &lt;/configuration&gt;
+&lt;/plugin&gt;]]></script>
 </div></div>
 
 <p>Be sure the update the <em>&lt;version&gt;</em> element with the current version of the Maven plugin, and update the <em>&lt;rootPackage&gt;</em> element with the value for your application (this will match the value you configure inside your <a shape="rect" href="configuration.html" title="Configuration">web.xml</a>).</p>
 
 
 
-<div class="panelMacro"><table class="infoMacro"><colgroup span="1"><col span="1" width="24"><col span="1"></colgroup><tr><td colspan="1" rowspan="1" valign="top"><img align="middle" src="/images/confluence/information.gif" width="16" height="16" alt="" border="0"></td><td colspan="1" rowspan="1"><b>Added in 5.3</b><br clear="none"></td></tr></table></div>
+<div class="panelMacro"><table class="infoMacro"><colgroup span="1"><col span="1" width="24"><col span="1"></colgroup><tr><td colspan="1" rowspan="1" valign="top"><img align="middle" src="https://cwiki.apache.org/confluence/images/icons/emoticons/information.gif" width="16" height="16" alt="" border="0"></td><td colspan="1" rowspan="1"><b>Added in 5.3</b><br clear="none"></td></tr></table></div>
 <div style="border-right: 20px solid #D8E4F1;border-left: 20px solid #D8E4F1;"></div>
 
 <p>In version 5.3 the configuration of the Maven plugin changed in a backward incompatible way. The configuration expects the <em>&lt;rootPackages&gt;</em> element, which may have several <em>&lt;rootPackage&gt;</em> elements. You should change the plugin configuration as shown below or you can still use the 5.2.4 version of the plugin without to change anything.</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-xml"><span class="code-tag">&lt;plugin&gt;</span>
-    <span class="code-tag">&lt;groupId&gt;</span>org.apache.tapestry<span class="code-tag">&lt;/groupId&gt;</span>
-    <span class="code-tag">&lt;artifactId&gt;</span>tapestry-component-report<span class="code-tag">&lt;/artifactId&gt;</span>
-    <span class="code-tag">&lt;version&gt;</span>5.3.x<span class="code-tag">&lt;/version&gt;</span>
-    <span class="code-tag">&lt;configuration&gt;</span>
-        <span class="code-tag">&lt;rootPackages&gt;</span>
-           <span class="code-tag">&lt;rootPackage&gt;</span>org.example.myapp<span class="code-tag">&lt;/rootPackage&gt;</span>
-           <span class="code-tag">&lt;rootPackage&gt;</span>com.acme.lib<span class="code-tag">&lt;/rootPackage&gt;</span>
-        <span class="code-tag">&lt;/rootPackages&gt;</span>
-    <span class="code-tag">&lt;/configuration&gt;</span>
-<span class="code-tag">&lt;/plugin&gt;</span></pre>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;plugin&gt;
+    &lt;groupId&gt;org.apache.tapestry&lt;/groupId&gt;
+    &lt;artifactId&gt;tapestry-component-report&lt;/artifactId&gt;
+    &lt;version&gt;5.3.x&lt;/version&gt;
+    &lt;configuration&gt;
+        &lt;rootPackages&gt;
+           &lt;rootPackage&gt;org.example.myapp&lt;/rootPackage&gt;
+           &lt;rootPackage&gt;com.acme.lib&lt;/rootPackage&gt;
+        &lt;/rootPackages&gt;
+    &lt;/configuration&gt;
+&lt;/plugin&gt;]]></script>
 </div></div>
 
 
@@ -138,7 +153,7 @@
 
 <div class="clearer"></div>
 <div id="footer">
-<div id="footer"><p>Apache Tapestry, Tapestry, Apache, the Apache feather logo, and the Apache Tapestry project logo are trademarks of The Apache Software Foundation.</p>
+<div id="footer"><p>Apache Tapestry, Tapestry, Apache, the Apache feather logo, and the Apache Tapestry project logo are trademarks of The Apache Software Foundation.<br clear="none">
 <script type="text/javascript">
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-400821-1']);
@@ -149,7 +164,7 @@
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   })();
-</script></div>
+</script></p></div>
 </div>
 		<div id="comments_thread"></div>
 		<script type="text/javascript" src="https://comments.apache.org/show_comments.lua?site=tapestry&amp;page=http://tapestry.apache.org/component-report.html" async="true">