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 [7/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-events.html
==============================================================================
--- websites/production/tapestry/content/component-events.html (original)
+++ websites/production/tapestry/content/component-events.html Sun Sep 22 22:21:21 2013
@@ -24,7 +24,19 @@
     Component Events -- 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>
@@ -60,10 +72,6 @@
 
 <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>
-        
-                                            </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>
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
@@ -76,11 +84,15 @@
         
                                             </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>
+        
+                                            </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>
         
                                             </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="component-events-faq.html">Component Events FAQ</a>
         
                                             </td></tr></table>
 </div>
@@ -90,14 +102,14 @@
 <p>Let's review a simple example. Here's a portion of the template for a page (let's call it "Chooser") that lets the user choose a number between 1 and 10:</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> Choose a number from 1 to 10:
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;p&gt; Choose a number from 1 to 10:
 
-    <span class="code-tag">&lt;t:count end=<span class="code-quote">"10"</span> value=<span class="code-quote">"index"</span>&gt;</span>
-        <span class="code-tag">&lt;a t:id=<span class="code-quote">"select"</span> t:type=<span class="code-quote">"actionlink"</span> context=<span class="code-quote">"index"</span>&gt;</span>${index}<span class="code-tag">&lt;/t:comp&gt;</span>
-    <span class="code-tag">&lt;/t:count&gt;</span>
-<span class="code-tag">&lt;/p&gt;</span>
-</pre>
+    &lt;t:count end="10" value="index"&gt;
+        &lt;a t:id="select" t:type="actionlink" context="index"&gt;${index}&lt;/t:comp&gt;
+    &lt;/t:count&gt;
+&lt;/p&gt;
+]]></script>
 </div></div>
 
 <p>Notice that Chooser.tml contains an ActionLink component. When rendered on the page, the ActionLink component creates a component event request URL, with the event type set to "action". In this case the URL might look like <tt><a shape="rect" class="external-link" href="http://localhost:8080/chooser.select/3" >http://localhost:8080/chooser.select/3</a></tt></p>
@@ -115,13 +127,13 @@
 <p>When a component event occurs, Tapestry invokes any event handler methods that you have identified for that event. You can identify your event handler methods via a naming convention (see Method Naming Convention below), or via the @<a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/OnEvent.html">OnEvent</a> annotation.</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-  @OnEvent(component = <span class="code-quote">"select"</span>)
-  void valueChosen(<span class="code-object">int</span> value)
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+  @OnEvent(component = "select")
+  void valueChosen(int value)
   {
-    <span class="code-keyword">this</span>.value = value;
+    this.value = value;
   }
-</pre>
+]]></script>
 </div></div>
 
 <p>Tapestry does two things here:</p>
@@ -131,7 +143,7 @@
 
 
 
-<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;">
 <p>Starting in release 5.3, Tapestry will validate that the component, if any, identified for the event handler method actually exists in the containing component's template. This helps with typos in annotations (or in the naming conventions identified below).</p>
 </div>
@@ -141,20 +153,20 @@
 <p>For some components, more than one type of event can occur, in which case you will want to be more specific:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-  @OnEvent(value = <span class="code-quote">"action"</span>, component = <span class="code-quote">"select"</span>)
-  void valueChosen(<span class="code-object">int</span> value)
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+  @OnEvent(value = "action", component = "select")
+  void valueChosen(int value)
   {
-    <span class="code-keyword">this</span>.value = value;
+    this.value = value;
   }
-</pre>
+]]></script>
 </div></div>
 
 <p>The <tt>value</tt> attribute of the OnEvent annotation is the name of the event to match. The default event type is "action"; the ActionLink and Form components each use this event type. Alternatively, we could have used an EventLink component, in which case the name of the event is determined by the element's ID, rather than being "action".</p>
 
 <p>If you omit the <tt>component</tt> part of the OnEvent annotation, then you'll receive notifications from <em>all</em> contained components, possibly including nested components (due to event bubbling).</p>
 
-<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">You should usually specify exactly which component(s) you wish to receive events from. Using @OnEvent on a method and not specifying a specific component id means that the method will be invoked for events from <em>any</em> component.</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">You should usually specify exactly which component(s) you wish to receive events from. Using @OnEvent on a method and not specifying a specific component id means that the method will be invoked for events from <em>any</em> component.</td></tr></table></div>
 
 <p>Event handler methods are normally given package-private visibility, to support testing, although technically they may have any visibility (even private).</p>
 
@@ -171,15 +183,15 @@
 <p>The previous example may be rewritten as:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-  void onActionFromSelect(<span class="code-object">int</span> value)
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+  void onActionFromSelect(int value)
   {
-    <span class="code-keyword">this</span>.value = value;
+    this.value = value;
   }
-</pre>
+]]></script>
 </div></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="/images/confluence/information.gif" width="16" height="16" alt="" border="0"></td><td colspan="1" rowspan="1">Note from Howard: I've found that I prefer the naming convention approach, and reserve the annotation just for situations that don't otherwise fit.</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">Note from Howard: I've found that I prefer the naming convention approach, and reserve the annotation just for situations that don't otherwise fit.</td></tr></table></div>
 
 <h2><a shape="rect" name="ComponentEvents-MethodReturnValues"></a>Method Return Values</h2>
 
@@ -258,30 +270,30 @@
 <p>In other words, there's no need to do this:</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[
   void onActionFromRunQuery()
   {
-    <span class="code-keyword">try</span>
+    try
     {
       dao.executeQuery();
     }
-    <span class="code-keyword">catch</span> (JDBCException ex)
+    catch (JDBCException ex)
     {
-      <span class="code-keyword">throw</span> <span class="code-keyword">new</span> RuntimeException(ex);
+      throw new RuntimeException(ex);
     }
   }
-</pre>
+]]></script>
 </div></div>
 
 <p>Instead, you may simply say:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-  void onActionFromRunQuery() <span class="code-keyword">throws</span> JDBCException
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+  void onActionFromRunQuery() throws JDBCException
   {
     dao.executeQuery();
   }
-</pre>
+]]></script>
 </div></div>
 
 <p>Your event handler method may even declare that it "throws Exception" if that is more convenient.</p>
@@ -295,14 +307,14 @@
 <p>Thus:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-  <span class="code-object">Object</span> onException(Throwable cause)
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+  Object onException(Throwable cause)
   {
     message = cause.getMessage();
 
-    <span class="code-keyword">return</span> <span class="code-keyword">this</span>;
+    return this;
   }
-</pre>
+]]></script>
 </div></div>
 
 <p>The return value of the exception event handler <em>replaces</em> the return value of original event handler method. For the typical case (an exception thrown by an "activate" or "action" event), this will be a <a shape="rect" href="page-navigation.html" title="Page Navigation">navigational response</a> such as a page instance or page name.</p>
@@ -317,7 +329,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']);
@@ -328,7 +340,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-events.html" async="true">

Modified: websites/production/tapestry/content/component-libraries.html
==============================================================================
--- websites/production/tapestry/content/component-libraries.html (original)
+++ websites/production/tapestry/content/component-libraries.html Sun Sep 22 22:21:21 2013
@@ -24,7 +24,19 @@
     Component Libraries -- 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>
@@ -64,7 +76,7 @@ table.ScrollbarTable td.ScrollbarParent 
 table.ScrollbarTable td.ScrollbarNextName {text-align: right;border: none;}
 table.ScrollbarTable td.ScrollbarNextIcon {text-align: center;width: 16px;border: none;}
 
-/*]]>*/</style><div class="Scrollbar"><table class="ScrollbarTable"><tr><td colspan="1" rowspan="1" class="ScrollbarPrevIcon"><a shape="rect" href="supporting-informal-parameters.html"><img align="middle" border="0" src="/images/confluence/back_16.gif" width="16" height="16"></a></td><td colspan="1" rowspan="1" class="ScrollbarPrevName" width="33%"><a shape="rect" href="supporting-informal-parameters.html">Supporting Informal Parameters</a>&#160;</td><td colspan="1" rowspan="1" class="ScrollbarParent" width="33%"><sup><a shape="rect" href="cookbook.html"><img align="middle" border="0" src="/images/confluence/up_16.gif" width="8" height="8"></a></sup><a shape="rect" href="cookbook.html">Cookbook</a></td><td colspan="1" rowspan="1" class="ScrollbarNextName" width="33%">&#160;<a shape="rect" href="switching-cases.html">Switching Cases</a></td><td colspan="1" rowspan="1" class="ScrollbarNextIcon"><a shape="rect" href="switching-cases.html"><img align="middle" border="0" src="/images/con
 fluence/forwd_16.gif" width="16" height="16"></a></td></tr></table></div>
+/*]]>*/</style><div class="Scrollbar"><table class="ScrollbarTable"><tr><td colspan="1" rowspan="1" class="ScrollbarPrevIcon"><a shape="rect" href="supporting-informal-parameters.html"><img align="middle" border="0" src="https://cwiki.apache.org/confluence/images/icons/back_16.gif" width="16" height="16"></a></td><td colspan="1" rowspan="1" class="ScrollbarPrevName" width="33%"><a shape="rect" href="supporting-informal-parameters.html">Supporting Informal Parameters</a>&#160;</td><td colspan="1" rowspan="1" class="ScrollbarParent" width="33%"><sup><a shape="rect" href="cookbook.html"><img align="middle" border="0" src="https://cwiki.apache.org/confluence/images/icons/up_16.gif" width="8" height="8"></a></sup><a shape="rect" href="cookbook.html">Cookbook</a></td><td colspan="1" rowspan="1" class="ScrollbarNextName" width="33%">&#160;<a shape="rect" href="switching-cases.html">Switching Cases</a></td><td colspan="1" rowspan="1" class="ScrollbarNextIcon"><a shape="rect" href="switching
 -cases.html"><img align="middle" border="0" src="https://cwiki.apache.org/confluence/images/icons/forwd_16.gif" width="16" height="16"></a></td></tr></table></div>
 
 
 <h1><a shape="rect" name="ComponentLibraries-CreatingComponentLibraries"></a>Creating Component Libraries</h1>
@@ -78,75 +90,75 @@ table.ScrollbarTable td.ScrollbarNextIco
 <p>Tapestry doesn't mandate that you use any build system, but we'll assume for the moment that you are using Maven 2. In that case, you'll have a pom.xml file something like the following:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>pom.xml</b></div><div class="codeContent panelContent">
-<pre class="code-xml">
-<span class="code-tag">&lt;project&gt;</span>
-  <span class="code-tag">&lt;modelVersion&gt;</span>4.0.0<span class="code-tag">&lt;/modelVersion&gt;</span>
-  <span class="code-tag">&lt;groupId&gt;</span>org.example<span class="code-tag">&lt;/groupId&gt;</span>
-  <span class="code-tag">&lt;artifactId&gt;</span>happylib<span class="code-tag">&lt;/artifactId&gt;</span>
-  <span class="code-tag">&lt;version&gt;</span>1.0-SNAPSHOT<span class="code-tag">&lt;/version&gt;</span>
-  <span class="code-tag">&lt;packaging&gt;</span>jar<span class="code-tag">&lt;/packaging&gt;</span>
-  <span class="code-tag">&lt;name&gt;</span>happylib Tapestry 5 Library<span class="code-tag">&lt;/name&gt;</span>
-
-  <span class="code-tag">&lt;dependencies&gt;</span>
-    <span class="code-tag">&lt;dependency&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-core<span class="code-tag">&lt;/artifactId&gt;</span>
-      <span class="code-tag">&lt;version&gt;</span>${tapestry-release-version}<span class="code-tag">&lt;/version&gt;</span>
-    <span class="code-tag">&lt;/dependency&gt;</span>
-
-    <span class="code-tag">&lt;dependency&gt;</span>
-      <span class="code-tag">&lt;groupId&gt;</span>org.testng<span class="code-tag">&lt;/groupId&gt;</span>
-      <span class="code-tag">&lt;artifactId&gt;</span>testng<span class="code-tag">&lt;/artifactId&gt;</span>
-      <span class="code-tag">&lt;version&gt;</span>5.1<span class="code-tag">&lt;/version&gt;</span>
-      <span class="code-tag">&lt;classifier&gt;</span>jdk15<span class="code-tag">&lt;/classifier&gt;</span>
-      <span class="code-tag">&lt;scope&gt;</span>test<span class="code-tag">&lt;/scope&gt;</span>
-    <span class="code-tag">&lt;/dependency&gt;</span>
-  <span class="code-tag">&lt;/dependencies&gt;</span>
-
-  <span class="code-tag">&lt;build&gt;</span>
-    <span class="code-tag">&lt;plugins&gt;</span>
-      <span class="code-tag">&lt;plugin&gt;</span>
-        <span class="code-tag">&lt;groupId&gt;</span>org.apache.maven.plugins<span class="code-tag">&lt;/groupId&gt;</span>
-        <span class="code-tag">&lt;artifactId&gt;</span>maven-compiler-plugin<span class="code-tag">&lt;/artifactId&gt;</span>
-        <span class="code-tag">&lt;configuration&gt;</span>
-          <span class="code-tag">&lt;source&gt;</span>1.5<span class="code-tag">&lt;/source&gt;</span>
-          <span class="code-tag">&lt;target&gt;</span>1.5<span class="code-tag">&lt;/target&gt;</span>
-          <span class="code-tag">&lt;optimize&gt;</span>true<span class="code-tag">&lt;/optimize&gt;</span>
-        <span class="code-tag">&lt;/configuration&gt;</span>
-      <span class="code-tag">&lt;/plugin&gt;</span>
-
-      <span class="code-tag">&lt;plugin&gt;</span>
-           <span class="code-tag">&lt;groupId&gt;</span>org.apache.maven.plugins<span class="code-tag">&lt;/groupId&gt;</span>
-           <span class="code-tag">&lt;artifactId&gt;</span>maven-jar-plugin<span class="code-tag">&lt;/artifactId&gt;</span>
-           <span class="code-tag">&lt;configuration&gt;</span>
-           <span class="code-tag">&lt;archive&gt;</span>
-             <span class="code-tag">&lt;manifestEntries&gt;</span>
-               <span class="code-tag">&lt;Tapestry-Module-Classes&gt;</span>org.example.happylib.services.HappyModule<span class="code-tag">&lt;/Tapestry-Module-Classes&gt;</span>
-             <span class="code-tag">&lt;/manifestEntries&gt;</span>
-           <span class="code-tag">&lt;/archive&gt;</span>
-           <span class="code-tag">&lt;/configuration&gt;</span>
-       <span class="code-tag">&lt;/plugin&gt;</span>
-
-    <span class="code-tag">&lt;/plugins&gt;</span>
-  <span class="code-tag">&lt;/build&gt;</span>
-
-  <span class="code-tag">&lt;repositories&gt;</span>
-    <span class="code-tag">&lt;repository&gt;</span>
-      <span class="code-tag">&lt;id&gt;</span>codehaus.snapshots<span class="code-tag">&lt;/id&gt;</span>
-      <span class="code-tag">&lt;url&gt;</span>http://snapshots.repository.codehaus.org<span class="code-tag">&lt;/url&gt;</span>
-    <span class="code-tag">&lt;/repository&gt;</span>
-    <span class="code-tag">&lt;repository&gt;</span>
-      <span class="code-tag">&lt;id&gt;</span>OpenQA_Release<span class="code-tag">&lt;/id&gt;</span>
-      <span class="code-tag">&lt;name&gt;</span>OpenQA Release Repository<span class="code-tag">&lt;/name&gt;</span>
-      <span class="code-tag">&lt;url&gt;</span>http://archiva.openqa.org/repository/releases/<span class="code-tag">&lt;/url&gt;</span>
-    <span class="code-tag">&lt;/repository&gt;</span>
-  <span class="code-tag">&lt;/repositories&gt;</span>
-
-  <span class="code-tag">&lt;properties&gt;</span>
-    <span class="code-tag">&lt;tapestry-release-version&gt;</span>5.2.0<span class="code-tag">&lt;/tapestry-release-version&gt;</span>
-  <span class="code-tag">&lt;/properties&gt;</span>
-<span class="code-tag">&lt;/project&gt;</span>
-</pre>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;project&gt;
+  &lt;modelVersion&gt;4.0.0&lt;/modelVersion&gt;
+  &lt;groupId&gt;org.example&lt;/groupId&gt;
+  &lt;artifactId&gt;happylib&lt;/artifactId&gt;
+  &lt;version&gt;1.0-SNAPSHOT&lt;/version&gt;
+  &lt;packaging&gt;jar&lt;/packaging&gt;
+  &lt;name&gt;happylib Tapestry 5 Library&lt;/name&gt;
+
+  &lt;dependencies&gt;
+    &lt;dependency&gt;
+      &lt;groupId&gt;org.apache.tapestry&lt;/groupId&gt;
+      &lt;artifactId&gt;tapestry-core&lt;/artifactId&gt;
+      &lt;version&gt;${tapestry-release-version}&lt;/version&gt;
+    &lt;/dependency&gt;
+
+    &lt;dependency&gt;
+      &lt;groupId&gt;org.testng&lt;/groupId&gt;
+      &lt;artifactId&gt;testng&lt;/artifactId&gt;
+      &lt;version&gt;5.1&lt;/version&gt;
+      &lt;classifier&gt;jdk15&lt;/classifier&gt;
+      &lt;scope&gt;test&lt;/scope&gt;
+    &lt;/dependency&gt;
+  &lt;/dependencies&gt;
+
+  &lt;build&gt;
+    &lt;plugins&gt;
+      &lt;plugin&gt;
+        &lt;groupId&gt;org.apache.maven.plugins&lt;/groupId&gt;
+        &lt;artifactId&gt;maven-compiler-plugin&lt;/artifactId&gt;
+        &lt;configuration&gt;
+          &lt;source&gt;1.5&lt;/source&gt;
+          &lt;target&gt;1.5&lt;/target&gt;
+          &lt;optimize&gt;true&lt;/optimize&gt;
+        &lt;/configuration&gt;
+      &lt;/plugin&gt;
+
+      &lt;plugin&gt;
+           &lt;groupId&gt;org.apache.maven.plugins&lt;/groupId&gt;
+           &lt;artifactId&gt;maven-jar-plugin&lt;/artifactId&gt;
+           &lt;configuration&gt;
+           &lt;archive&gt;
+             &lt;manifestEntries&gt;
+               &lt;Tapestry-Module-Classes&gt;org.example.happylib.services.HappyModule&lt;/Tapestry-Module-Classes&gt;
+             &lt;/manifestEntries&gt;
+           &lt;/archive&gt;
+           &lt;/configuration&gt;
+       &lt;/plugin&gt;
+
+    &lt;/plugins&gt;
+  &lt;/build&gt;
+
+  &lt;repositories&gt;
+    &lt;repository&gt;
+      &lt;id&gt;codehaus.snapshots&lt;/id&gt;
+      &lt;url&gt;http://snapshots.repository.codehaus.org&lt;/url&gt;
+    &lt;/repository&gt;
+    &lt;repository&gt;
+      &lt;id&gt;OpenQA_Release&lt;/id&gt;
+      &lt;name&gt;OpenQA Release Repository&lt;/name&gt;
+      &lt;url&gt;http://archiva.openqa.org/repository/releases/&lt;/url&gt;
+    &lt;/repository&gt;
+  &lt;/repositories&gt;
+
+  &lt;properties&gt;
+    &lt;tapestry-release-version&gt;5.2.0&lt;/tapestry-release-version&gt;
+  &lt;/properties&gt;
+&lt;/project&gt;
+]]></script>
 </div></div>
 
 <p>You will need to modify the Tapestry release version number ("5.2.0" in the listing above) to reflect the current version of Tapestry when you create your component library.</p>
@@ -164,29 +176,29 @@ table.ScrollbarTable td.ScrollbarNextIco
 <p>Our component is very simple:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>HappyIcon.java</b></div><div class="codeContent panelContent">
-<pre class="code-java">
-<span class="code-keyword">package</span> org.example.happylib.components;
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+package org.example.happylib.components;
 
-<span class="code-keyword">import</span> org.apache.tapestry5.Asset;
-<span class="code-keyword">import</span> org.apache.tapestry5.MarkupWriter;
-<span class="code-keyword">import</span> org.apache.tapestry5.annotations.Path;
-<span class="code-keyword">import</span> org.apache.tapestry5.ioc.annotations.Inject;
+import org.apache.tapestry5.Asset;
+import org.apache.tapestry5.MarkupWriter;
+import org.apache.tapestry5.annotations.Path;
+import org.apache.tapestry5.ioc.annotations.Inject;
 
-<span class="code-keyword">public</span> class HappyIcon
+public class HappyIcon
 {
     @Inject
-    @Path(<span class="code-quote">"happy.jpg"</span>)
-    <span class="code-keyword">private</span> Asset happyIcon;
+    @Path("happy.jpg")
+    private Asset happyIcon;
 
-    <span class="code-object">boolean</span> beginRender(MarkupWriter writer)
+    boolean beginRender(MarkupWriter writer)
     {
-        writer.element(<span class="code-quote">"img"</span>, <span class="code-quote">"src"</span>, happyIcon);
+        writer.element("img", "src", happyIcon);
         writer.end();
 
-        <span class="code-keyword">return</span> <span class="code-keyword">false</span>;
+        return false;
     }
 }
-</pre>
+]]></script>
 </div></div>
 
 <p>HappyIcon appears inside the components sub-package. The happyIcon field is injected with the the Asset for the file <tt>happy.jpg</tt>. The path specified with the @Path annotation is relative to the <tt>HappyIcon.class</tt> file; it should be stored in the project under <tt>src/main/resources/org/example/happylib/components</tt>.</p>
@@ -211,17 +223,17 @@ table.ScrollbarTable td.ScrollbarNextIco
 <p>The above naming is somewhat clumsy, and can be improved by introducing an additional namespace into the template:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-xml">
-&lt;html <span class="code-keyword">xmlns:t</span>=<span class="code-quote">"http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"</span>
-  <span class="code-keyword">xmlns:h</span>=<span class="code-quote">"tapestry-library:happy"</span>&gt;
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
+  xmlns:h="tapestry-library:happy"&gt;
 
   ...
 
-  <span class="code-tag">&lt;h:icon/&gt;</span>
+  &lt;h:icon/&gt;
 
   ...
-<span class="code-tag">&lt;/html&gt;</span>
-</pre>
+&lt;/html&gt;
+]]></script>
 </div></div>
 
 <p>The special namespace mapping for sets up namespace prefix "h:" to mean the same as "happy/". It then becomes possible to reference components within the happy virtual folder directly.</p>
@@ -233,46 +245,46 @@ table.ScrollbarTable td.ScrollbarNextIco
 <p>At application startup, Tapestry will read the library module along with all other modules and configure the ComponentClassResolver service using information in the module:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>HappyModule.java</b></div><div class="codeContent panelContent">
-<pre class="code-java">
-<span class="code-keyword">package</span> org.example.happylib.services;
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+package org.example.happylib.services;
 
-<span class="code-keyword">import</span> org.apache.tapestry5.ioc.Configuration;
-<span class="code-keyword">import</span> org.apache.tapestry5.services.LibraryMapping;
+import org.apache.tapestry5.ioc.Configuration;
+import org.apache.tapestry5.services.LibraryMapping;
 
-<span class="code-keyword">public</span> class HappyModule
+public class HappyModule
 {
-    <span class="code-keyword">public</span> <span class="code-keyword">static</span> void contributeComponentClassResolver(Configuration&lt;LibraryMapping&gt; configuration)
+    public static void contributeComponentClassResolver(Configuration&lt;LibraryMapping&gt; configuration)
     {
-        configuration.add(<span class="code-keyword">new</span> LibraryMapping(<span class="code-quote">"happy"</span>, <span class="code-quote">"org.example.happylib"</span>));
+        configuration.add(new LibraryMapping("happy", "org.example.happylib"));
     }
 }
-</pre>
+]]></script>
 </div></div>
 
 <p>The ComponentClassResolver service is responsible for mapping libraries to packages; it takes as a contribution a collection of these LibraryMapping objects. Every module may make its own contribution to the ComponentClassResolver service, mapping its own package ("org.example.happylib") to its own folder ("happy").</p>
 
 <p>This module class is also where you would define new services that can be accessed by your components (or other parts of the application).</p>
 
-<div class="panelMacro"><table class="noteMacro"><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/warning.gif" width="16" height="16" alt="" border="0"></td><td colspan="1" rowspan="1">It is possible to add a mapping for "core", the core library for Tapestry components; all the built-in Tapestry components (TextField, BeanEditForm, Grid, etc.) are actually in the core library. When Tapestry doesn't find a component in your application, it next searches inside the "core" library. Contributing an additional package as "core" simply extends the number of packages searched for core components (it doesn't replace Tapestry's default package, org.apache.tapestry5.corelib). Adding to "core" is sometimes reasonable, if you ensure that there is virtually no chance of a naming conflict (via different modules contributing packages to core with conflicting class names).</td></tr></table><
 /div>
+<div class="panelMacro"><table class="noteMacro"><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/warning.gif" width="16" height="16" alt="" border="0"></td><td colspan="1" rowspan="1">It is possible to add a mapping for "core", the core library for Tapestry components; all the built-in Tapestry components (TextField, BeanEditForm, Grid, etc.) are actually in the core library. When Tapestry doesn't find a component in your application, it next searches inside the "core" library. Contributing an additional package as "core" simply extends the number of packages searched for core components (it doesn't replace Tapestry's default package, org.apache.tapestry5.corelib). Adding to "core" is sometimes reasonable, if you ensure that there is virtually no chance of a naming conflict (via different modules contributing packages to core with conf
 licting class names).</td></tr></table></div>
 
 <h2><a shape="rect" name="ComponentLibraries-Step5%3AConfigurethemoduletoautoload"></a>Step 5: Configure the module to autoload</h2>
 
 <p>For Tapestry to load your module at application startup, it is necessary to put an entry in the JAR manifest. This is taken care of in the pom.xml above:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>pom.xml (partial)</b></div><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.maven.plugins<span class="code-tag">&lt;/groupId&gt;</span>
-           <span class="code-tag">&lt;artifactId&gt;</span>maven-jar-plugin<span class="code-tag">&lt;/artifactId&gt;</span>
-           <span class="code-tag">&lt;configuration&gt;</span>
-           <span class="code-tag">&lt;archive&gt;</span>
-             <span class="code-tag">&lt;manifestEntries&gt;</span>
-             <span class="code-tag">&lt;Tapestry-Module-Classes&gt;</span>org.example.happylib.services.HappyModule<span class="code-tag">&lt;/Tapestry-Module-Classes&gt;</span>
-             <span class="code-tag">&lt;/manifestEntries&gt;</span>
-           <span class="code-tag">&lt;/archive&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.maven.plugins&lt;/groupId&gt;
+           &lt;artifactId&gt;maven-jar-plugin&lt;/artifactId&gt;
+           &lt;configuration&gt;
+           &lt;archive&gt;
+             &lt;manifestEntries&gt;
+             &lt;Tapestry-Module-Classes&gt;org.example.happylib.services.HappyModule&lt;/Tapestry-Module-Classes&gt;
+             &lt;/manifestEntries&gt;
+           &lt;/archive&gt;
+           &lt;/configuration&gt;
+       &lt;/plugin&gt;
+]]></script>
 </div></div>
 
 <h2><a shape="rect" name="ComponentLibraries-Step6%3AExtendingClientAccess"></a>Step 6: Extending Client Access</h2>
@@ -280,12 +292,12 @@ table.ScrollbarTable td.ScrollbarNextIco
 <p>As of Tapestry 5.2, a new step is needed: extending access for the assets. This is accomplished in your library's module class, HappyModule:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-<span class="code-keyword">public</span> <span class="code-keyword">static</span> void contributeRegexAuthorizer(Configuration&lt;<span class="code-object">String</span>&gt; configuration)
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+public static void contributeRegexAuthorizer(Configuration&lt;String&gt; configuration)
 {
-    configuration.add(<span class="code-quote">"^org/example/happylib/.*\\.jpg$"</span>);
+    configuration.add("^org/example/happylib/.*\\.jpg$");
 }
-</pre>
+]]></script>
 </div></div>
 
 <p>This contribution uses a regular expression to identify that any resource on the classpath under the org/example/happylib folder with a jpg extension is allowed. If you had a mix of different image types, you could replace jpg with (jpg|gif|png).</p>
@@ -301,19 +313,19 @@ table.ScrollbarTable td.ScrollbarNextIco
 <p>To handle this problem in Tapestry 5.1 and earlier, you should map your library assets to a versioned folder. This can be accomplished using another contribution from the HappyModule, this time to the ClasspathAssetAliasManager service whose configuration maps a virtual folder underneath /assets to a package:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-<span class="code-keyword">public</span> <span class="code-keyword">static</span> void contributeClasspathAssetAliasManager(MappedConfiguration&lt;<span class="code-object">String</span>, <span class="code-object">String</span>&gt; configuration)
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+public static void contributeClasspathAssetAliasManager(MappedConfiguration&lt;String, String&gt; configuration)
 {
-    configuration.add(<span class="code-quote">"happylib/1.0"</span>, <span class="code-quote">"org/example/happylib"</span>);
+    configuration.add("happylib/1.0", "org/example/happylib");
 }
-</pre>
+]]></script>
 </div></div>
 
 <p>With this in place, and the library and applications rebuilt and redeployed, the URL for happy.jpg becomes /happyapp/assets/happylib/1.0/components/happy.jpg. This is shorter, but also incorporates a version number ("1.0") that can be changed in a later release.</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.2</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.2</b><br clear="none"></td></tr></table></div>
 <div style="border-right: 20px solid #D8E4F1;border-left: 20px solid #D8E4F1;">
 <p>In version 5.2 and later, Tapestry automatically creates a mapping for assets inside your JAR. In the above example, the icon image will be exposed as <tt>/assets/</tt><em>application version</em><tt>/happy/components/happy.jpg</tt> (the application version number is incorporated into the URL). The "happy" portion is a virtual folder that maps to the library's root package (as folder <tt>org/example/happylib</tt> on the Java classpath). The application version is a configurable value.</p>
 </div>
@@ -326,7 +338,7 @@ table.ScrollbarTable td.ScrollbarNextIco
 
 <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']);
@@ -337,7 +349,7 @@ table.ScrollbarTable td.ScrollbarNextIco
     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-libraries.html" async="true">

Modified: websites/production/tapestry/content/component-mixins.html
==============================================================================
--- websites/production/tapestry/content/component-mixins.html (original)
+++ websites/production/tapestry/content/component-mixins.html Sun Sep 22 22:21:21 2013
@@ -24,7 +24,19 @@
     Component Mixins -- 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>
@@ -60,19 +72,19 @@
 
 <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="page-and-component-classes-faq.html">Page And Component Classes 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="component-templates.html">Component Templates</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="component-parameters.html">Component Parameters</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="component-templates.html">Component Templates</a>
         
                                             </td></tr><tr><td colspan="1" rowspan="1">
                                  <span class="icon icon-page" title="Page">Page:</span>
@@ -110,9 +122,9 @@
 <p>An instance mixin is a mixin applied to a specific <em>instance</em> of a component. This can be done in the <a shape="rect" href="component-templates.html" title="Component Templates">component template</a> with the <tt>mixins</tt> attribute of the component tag. This is a comma-separated list of mixin names.</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-xml">
-<span class="code-tag">&lt;t:textfield t:id=<span class="code-quote">"accountName"</span> t:mixins=<span class="code-quote">"Autocomplete,DefaultFromCookie"</span> /&gt;</span>
-</pre>
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+&lt;t:textfield t:id="accountName" t:mixins="Autocomplete,DefaultFromCookie" /&gt;
+]]></script>
 </div></div>
 
 <p>Alternately, when the @<a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Component.html">Component</a> annotation is used to define the component type, you may specify the mixins in two ways:</p>
@@ -125,11 +137,11 @@
 <p>Example:</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[
 
-  @Component(parameters=. . .) @Mixins({<span class="code-quote">"Autocomplete"</span>, <span class="code-quote">"DefaultFromCookie"</span>})
-  <span class="code-keyword">private</span> TextField userId;
-</pre>
+  @Component(parameters=. . .) @Mixins({"Autocomplete", "DefaultFromCookie"})
+  private TextField userId;
+]]></script>
 </div></div>
 
 <p>This example defines a component of type TextField and mixes in the <em>hypothetical</em> Autocomplete and DefaultFromCookie mixins.</p>
@@ -138,17 +150,17 @@
 <p>With @Mixins and @MixinClasses annotations, we can order the list of mixins, by adding a constraint.</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-  @Component(parameters=. . .) @Mixins({<span class="code-quote">"Autocomplete"</span>, <span class="code-quote">"DefaultFromCookie::before:Autocomplete"</span>})
-  <span class="code-keyword">private</span> TextField userId;
-</pre>
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+  @Component(parameters=. . .) @Mixins({"Autocomplete", "DefaultFromCookie::before:Autocomplete"})
+  private TextField userId;
+]]></script>
 </div></div>
 <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[
   @Component(parameters=. . .) 
-  @MixinClasses(value={Autocomplete.class, DefaultFromCookie.class}, order={<span class="code-quote">"","</span>before:AutoComplete"})
-  <span class="code-keyword">private</span> TextField userId;
-</pre>
+  @MixinClasses(value={Autocomplete.class, DefaultFromCookie.class}, order={"","before:AutoComplete"})
+  private TextField userId;
+]]></script>
 </div></div>
 
 <p>You can specify many contraints for a mixin. You just need to separate them with a ";".</p>
@@ -158,15 +170,15 @@
 <p>Implementation mixins, mixins which apply to all instances of a component, are added using the @<a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Mixin.html">Mixin</a> annotation. This annotation defines a field that will contain the mixin instance.</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-<span class="code-keyword">public</span> class AutocompleteField <span class="code-keyword">extends</span> TextField
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+public class AutocompleteField extends TextField
 {
   @Mixin
-  <span class="code-keyword">private</span> Autocomplete autocompleteMixin;
+  private Autocomplete autocompleteMixin;
   
   . . .
 }
-</pre>
+]]></script>
 </div></div>
 
 <p>Often, the type of the field is the exact mixin class to be instantiated.</p>
@@ -174,15 +186,15 @@
 <p>In other cases, such as when the field's type is an interface or a base class, the value attribute of the annotation will be used to determine the mixin class name:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-<span class="code-keyword">public</span> class AutocompleteField <span class="code-keyword">extends</span> TextField
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+public class AutocompleteField extends TextField
 {
-  @Mixin(<span class="code-quote">"Autocomplete"</span>)
-  <span class="code-keyword">private</span> <span class="code-object">Object</span> autocompleteMixin;
+  @Mixin("Autocomplete")
+  private Object autocompleteMixin;
   
   . . .
 }
-</pre>
+]]></script>
 </div></div>
 
 <h2><a shape="rect" name="ComponentMixins-MixinParameters"></a>Mixin Parameters</h2>
@@ -196,10 +208,10 @@
 <p>Alternately, you may prefix the name of the parameter with the <em>unqualified</em> name of the Mixin class; this eliminates the ambiguity. Example:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-  @Component(parameters={<span class="code-quote">"Autocomplete.id=auto"</span>, . . . }) @Mixins(<span class="code-quote">"Autocomplete"</span>, <span class="code-quote">"DefaultFromCookie"</span>})
-  <span class="code-keyword">private</span> TextField userId;
-</pre>
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+  @Component(parameters={"Autocomplete.id=auto", . . . }) @Mixins("Autocomplete", "DefaultFromCookie"})
+  private TextField userId;
+]]></script>
 </div></div>
 
 <p>If the component and a mixin both supports informal parameters, the mixin will receive the all the unqualified informal parameters. If more than one Mixin supports informal parameters the results are undefined. </p>
@@ -211,31 +223,31 @@
 <p>It is sometimes desirable to access the current value of a parameter defined in the component associated with the mixin. For example: normally, when the textfield component is marked disabled, it renders a text field with a disabled attribute, but you want it to output the (plaintext) value when disabled.  A mixin for this purpose would need access to at least the disabled, and value parameters, and possibly the translate parameter (for a client-side representation). You can access the disabled parameter via @InjectContainer and checking isDisabled on the field, but textfield currently provides no access to value or translate.  In this case, you can bind the core-component parameter using the @BindParameter 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 MyMixin
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+  public class MyMixin
   {
     @BindParameter
-    <span class="code-keyword">private</span> <span class="code-object">boolean</span> disabled;
+    private boolean disabled;
 
     @BindParameter
-    <span class="code-keyword">private</span> FieldTranslator translate;
+    private FieldTranslator translate;
 
     @BindParameter
-    <span class="code-keyword">private</span> <span class="code-object">Object</span> value;
+    private Object value;
 
-    <span class="code-object">Boolean</span> beginRender(MarkupWriter writer)
+    Boolean beginRender(MarkupWriter writer)
     {
         ...
-        <span class="code-keyword">if</span> (disabled)
+        if (disabled)
         {
            ...
-           <span class="code-object">String</span> stringValue = translate.toClient(value));
+           String stringValue = translate.toClient(value));
            ...
         }
         ...
     }
     ....
-</pre>
+]]></script>
 </div></div>
 
 <p>Tapestry will "link" the disabled, translate, and value fields above to parameters of the same name on the associated component.  The fields are not parameters to the mixin, but local copies of the component parameter.  They are cached only if the associated component parameter is cached.  They are read-write, and Tapestry handles synchronizing the value between mixins and the associated component such that even with a cached parameter, components and mixins will share the same value for a given parameter/bound-parameter during render. Only declared parameters of the associated components may be bound.</p>
@@ -243,24 +255,24 @@
 <p>By default, Tapestry will bind the parameter with the same name as the field. You can explicitly declare the parameter to bind via the value attribute:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-  @BindParameter(<span class="code-quote">"translate"</span>)
-  <span class="code-keyword">private</span> FieldTranslator translator;
-</pre>
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+  @BindParameter("translate")
+  private FieldTranslator translator;
+]]></script>
 </div></div>
 
 <p>In same cases, a mixin will be used on different components using different names for a similar parameter type. For instance, BeanEditor has an "object" parameter; most form fields have a "value" parameter, and Grid has a "source" parameter.  These parameters have different names but share the feature of being the "principle" parameter on which the components are acting.  A mixin useable by all three components can specify multiple potential parameter values to bind.  The first value that matches a declared parameter of the associated component will be used:</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
-<pre class="code-java">
-<span class="code-keyword">public</span> class MyMixin
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+public class MyMixin
 {
   ...
-  @BindParameter({<span class="code-quote">"value"</span>,<span class="code-quote">"object"</span>,<span class="code-quote">"source"</span>})
-  <span class="code-keyword">private</span> <span class="code-object">Object</span> principalObject;
+  @BindParameter({"value","object","source"})
+  private Object principalObject;
   ...
 }
-</pre>
+]]></script>
 </div></div>
 
 <p>"MyMixin" can be used on a textfield (principalObject is bound to "value"), on BeanEditor or BeanDisplay (principalObject is bound to "object"), or on Grid or Loop (principalObject is bound to "source").</p>
@@ -274,33 +286,33 @@
 <p>Withing a given phase and class (@MixinAfter vs. mixin before), mixin ordering is determined by the ordering constraints specified in the mixin definitions.  The constraint definitions follow the same conventions as <a shape="rect" href="ordering-by-constraints.html" title="Ordering by Constraints">ordered service configurations</a>.  How you specify the constraints depends on how the mixin is specified.</p>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>As an Implementation Mixin</b></div><div class="codeContent panelContent">
-<pre class="code-java">
-  @Mixin(<span class="code-quote">"Autocomplete"</span>,order={<span class="code-quote">"before:DiscardBody"</span>,<span class="code-quote">"after:RenderDisabled"</span>}
-  <span class="code-keyword">private</span> TextField userId;
-</pre>
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
+  @Mixin("Autocomplete",order={"before:DiscardBody","after:RenderDisabled"}
+  private TextField userId;
+]]></script>
 </div></div>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>As a Template-specifed Instance Mixin</b></div><div class="codeContent panelContent">
-<pre class="code-xml">
-  &lt;input t:id=<span class="code-quote">"myfield"</span> t:mixins="autocomplete::before:discardbody;after:renderdisabled,
+<script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
+  &lt;input t:id="myfield" t:mixins="autocomplete::before:discardbody;after:renderdisabled,
           defaultfromcookie::before:autocomplete"/&gt;
-</pre>
+]]></script>
 </div></div>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>As a @Mixins-specified Instance Mixin</b></div><div class="codeContent panelContent">
-<pre class="code-java">
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
   @Component(...)
-  @Mixins(<span class="code-quote">"Autocomplete::before:discardbody;after:renderdisabled"</span>,<span class="code-quote">"DefaultFromCookie::before:autocomplete"</span>))
-  <span class="code-keyword">private</span> TextField userId;
-</pre>
+  @Mixins("Autocomplete::before:discardbody;after:renderdisabled","DefaultFromCookie::before:autocomplete"))
+  private TextField userId;
+]]></script>
 </div></div>
 
 <div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader" style="border-bottom-width: 1px;"><b>As a @MixinClasses-specified Instance Mixins</b></div><div class="codeContent panelContent">
-<pre class="code-java">
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
   @Component(...)
   @MixinClasses(value={Autocomplete.class,DefaultFromCookie.class},
-                order={<span class="code-quote">"before:discardbody;after:renderdisabled"</span>,<span class="code-quote">"before:autocomplete"</span>)
-</pre>
+                order={"before:discardbody;after:renderdisabled","before:autocomplete")
+]]></script>
 </div></div>
 
 <p>The ordering is always specified in terms of the order of the "forward" rendering process (setupRender, beginRender, etc.). When the "reverse" rendering phases (afterRender, etc.) occur, the mixin order is exactly reversed. Mixins which have no associated ordering constraints will be ordered in a manner which is consistent with the specified constraints for all other mixins, but is otherwise unspecified.</p>
@@ -329,7 +341,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']);
@@ -340,7 +352,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-mixins.html" async="true">