struts-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From git-site-r...@apache.org
Subject [struts-site] branch asf-site updated: Updates production by Jenkins
Date Sun, 24 Sep 2017 19:14:24 GMT
This is an automated email from the ASF dual-hosted git repository.

git-site-role pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/struts-site.git


The following commit(s) were added to refs/heads/asf-site by this push:
     new b40c492  Updates production by Jenkins
b40c492 is described below

commit b40c492af553566afc3a1fa5a03197866df708c5
Author: jenkins <builds@apache.org>
AuthorDate: Sun Sep 24 19:14:22 2017 +0000

    Updates production by Jenkins
---
 .../{simple-theme.html => ajax-a-template.html}    |  51 +-
 content/tag-developers/ajax-div-template.html      | 344 +++++++++++
 .../{simple-theme.html => ajax-event-system.html}  |  55 +-
 content/tag-developers/ajax-head-template.html     | 286 +++++++++
 content/tag-developers/ajax-theme.html             | 495 ++-------------
 content/tag-developers/css-xhtml-theme.html        | 405 ++++++++-----
 content/tag-developers/simple-theme.html           |  92 +--
 content/tag-developers/xhtml-theme.html            | 673 ++++++++++++++-------
 8 files changed, 1499 insertions(+), 902 deletions(-)

diff --git a/content/tag-developers/simple-theme.html b/content/tag-developers/ajax-a-template.html
similarity index 81%
copy from content/tag-developers/simple-theme.html
copy to content/tag-developers/ajax-a-template.html
index 16c93ec..7067287 100644
--- a/content/tag-developers/simple-theme.html
+++ b/content/tag-developers/ajax-a-template.html
@@ -125,47 +125,26 @@
 
 <article class="container">
   <section class="col-md-12">
-    <a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/tag-developers/simple-theme.md" title="Edit this page on GitHub">Edit on GitHub</a>
-    <h1 id="simple-theme">simple theme</h1>
+    <a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/tag-developers/ajax-a-template.md" title="Edit this page on GitHub">Edit on GitHub</a>
+    <h1 id="ajax-a-template">ajax a template</h1>
 
-<p>The simple theme renders “bare bones” HTML elements. The simple theme is most often used as a starting point for other themes. (See <a href="#PAGE_13962">Extending Themes</a> for more.)</p>
+<p>The ajax theme is experimental. Feedback is appreciated.</p>
 
-<p>For example, the <a href="#PAGE_13912">textfield</a> tag renders the HTML</p>
+<p>The ajax a template is used to make asynchronous calls to the server when the user clicks on the a href link. It is 
+useful when you need to communicate information back to the application from the UI, without requiring the entire page 
+to be re-rendered. An example would be removing an item from a list.</p>
 
-<div class="highlighter-rouge"><pre class="highlight"><code>&lt;input/&gt;
-</code></pre>
-</div>
-<p>tag without a label, validation, error reporting, or any other formatting or functionality.</p>
+<p>The <code class="highlighter-rouge">preInvokeJS</code> attribute is used to determine whether the URL specified should be called or not, and must contain 
+Javascript that returns <code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code>. If you want to call a JavaScript function, use the format 
+<code class="highlighter-rouge">preInvokeJS='yourMethodName(data,type)'</code>. An example would be to show a confirm dialog to the user to double check 
+whether they want to remove a user from a list.</p>
 
-<table>
-  <tbody>
-    <tr>
-      <td>Both the <a href="#PAGE_13834">xhtml theme</a> and <a href="#PAGE_14215">css_xhtml theme</a> extend the simple theme. Look to them for examples of how to build on the foundation laid by the simple theme.</td>
-    </tr>
-  </tbody>
-</table>
-
-<table>
-  <tbody>
-    <tr>
-    </tr>
-  </tbody>
-</table>
-
-<p><strong>Head Tag</strong></p>
-
-<p>The simple theme <a href="#PAGE_13997">head</a> template prints out a javascript include required for the <a href="#PAGE_14274">datetimepicker</a> tag to render properly.</p>
-
-<p><strong>simple head template</strong></p>
-
-<p>The <a href="#PAGE_14291">simple theme</a><a href="#PAGE_13997">head</a> template only does one thing: it loads the minimal Ajax/Dojo support so that tags can import Dojo widgets easily.</p>
-
-<p>The source of the simple head.ftl template is:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/simple/head.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
+<p><strong>Remember</strong>: the content returned by the <code class="highlighter-rouge">href</code> attribute must be JavaScript. That JavaScript will then be evaluated 
+within the webpage. If you only wish to publish an event to the topic specified, then simply return no result (or <code class="highlighter-rouge">NONE</code>) 
+from your action and utilize the <code class="highlighter-rouge">notifyTopics</code> attribute to specific the topic names.</p>
 
+<p>For an example of the interaction between the <a href="dojo-div-tag.html">div</a> tag and the <a href="dojo-a-tag.html">a</a> tag using 
+the topic pub/sub model, see the examples in the <a href="ajax-div-template.html">ajax div template</a>.</p>
 
   </section>
 </article>
diff --git a/content/tag-developers/ajax-div-template.html b/content/tag-developers/ajax-div-template.html
new file mode 100644
index 0000000..c7bb9ab
--- /dev/null
+++ b/content/tag-developers/ajax-div-template.html
@@ -0,0 +1,344 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <meta name="Date-Revision-yyyymmdd" content="20140918"/>
+  <meta http-equiv="Content-Language" content="en"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+  <title>Tag Developers Guide (WIP)</title>
+
+  <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic,600italic,700italic" rel="stylesheet" type="text/css">
+  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
+  <link href="/css/main.css" rel="stylesheet">
+  <link href="/css/custom.css" rel="stylesheet">
+  <link href="/highlighter/github-theme.css" rel="stylesheet">
+
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>
+  <script type="text/javascript" src="/js/community.js"></script>
+</head>
+<body>
+
+<a href="http://github.com/apache/struts" class="github-ribbon">
+  <img style="position: absolute; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
+</a>
+
+<header>
+  <nav>
+    <div role="navigation" class="navbar navbar-default navbar-fixed-top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" data-toggle="collapse" data-target="#struts-menu" class="navbar-toggle">
+            Menu
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a href="/index.html" class="navbar-brand logo"><img src="/img/struts-logo.svg"></a>
+        </div>
+        <div id="struts-menu" class="navbar-collapse collapse">
+          <ul class="nav navbar-nav">
+            <li class="dropdown">
+              <a data-toggle="dropdown" href="#" class="dropdown-toggle">
+                Home<b class="caret"></b>
+              </a>
+              <ul class="dropdown-menu">
+                <li><a href="/index.html">Welcome</a></li>
+                <li><a href="/downloads.html">Downloads</a></li>
+                <li><a href="/announce.html">Announcements</a></li>
+                <li><a href="http://www.apache.org/licenses/">License</a></li>
+                <li><a href="http://apache.org/foundation/thanks.html">Thanks!</a></li>
+                <li><a href="http://apache.org/foundation/sponsorship.html">Sponsorship</a></li>
+              </ul>
+            </li>
+            <li class="dropdown">
+              <a data-toggle="dropdown" href="#" class="dropdown-toggle">
+                Support<b class="caret"></b>
+              </a>
+              <ul class="dropdown-menu">
+                <li><a href="/mail.html">User Mailing List</a></li>
+                <li><a href="https://issues.apache.org/jira/browse/WW">Issue Tracker</a></li>
+                <li><a href="/security.html">Reporting Security Issues</a></li>
+                <li class="divider"></li>
+                <li><a href="/maven/project-info.html">Project info</a></li>
+                <li><a href="/maven/struts2-core/dependencies.html">Struts Core dependencies</a></li>
+                <li><a href="/maven/struts2-plugins/modules.html">Plugin dependencies</a></li>
+              </ul>
+            </li>
+            <li class="dropdown">
+              <a data-toggle="dropdown" href="#" class="dropdown-toggle">
+                Documentation<b class="caret"></b>
+              </a>
+              <ul class="dropdown-menu">
+                <li><a href="/birdseye.html">Birds Eye</a></li>
+                <li><a href="/primer.html">Key Technologies</a></li>
+                <li><a href="/kickstart.html">Kickstart FAQ</a></li>
+                <li><a href="https://cwiki.apache.org/confluence/display/WW/Home">Wiki</a></li>
+                <li class="divider"></li>
+                <li><a href="/getting-started/">Getting Started</a></li>
+                <li><a href="/security/">Security Guide</a></li>
+                <li><a href="/core-developers/">Core Developers Guide</a></li>
+                <li><a href="/tag-developers/">Tag Developers Guide</a></li>
+                <li><a href="/maven-archetypes/">Maven Archetypes</a></li>
+                <li><a href="/plugins/">Plugins</a></li>
+                <li class="divider"></li>
+                <li><a href="/maven/struts2-core/apidocs/index.html">Struts Core API</a></li>
+                <li><a href="/docs/plugins.html">Plugin APIs</a></li>
+                <li><a href="/docs/tag-reference.html">Tag reference</a></li>
+                <li><a href="http://cwiki.apache.org/S2PLUGINS/home.html">Plugin registry</a></li>
+                <li class="divider"></li>
+                <li><a href="/docs/tutorials.html">Tutorials - DEPRECATED</a></li>
+                <li><a href="/docs/faqs.html">FAQs - DEPRECATED</a></li>
+                <li><a href="/docs/guides.html">Guides - DEPRECATED</a></li>
+              </ul>
+            </li>
+            <li class="dropdown">
+              <a data-toggle="dropdown" href="#" class="dropdown-toggle">
+                Contributing<b class="caret"></b>
+              </a>
+              <ul class="dropdown-menu">
+                <li><a href="/youatstruts.html">You at Struts</a></li>
+                <li><a href="/helping.html">How to Help FAQ</a></li>
+                <li><a href="/dev-mail.html">Development Lists</a></li>
+                <li class="divider"></li>
+                <li><a href="/submitting-patches.html">Submitting patches</a></li>
+                <li><a href="/builds.html">Source Code</a></li>
+                <li><a href="/coding-standards.html">Coding standards</a></li>
+                <li class="divider"></li>
+                <li><a href="/releases.html">Release Guidelines</a></li>
+                <li><a href="/bylaws.html">PMC Charter</a></li>
+                <li><a href="/volunteers.html">Volunteers</a></li>
+                <li><a href="https://git-wip-us.apache.org/repos/asf?p=struts.git">Source Repository</a></li>
+              </ul>
+            </li>
+            <li class="apache"><a href="http://www.apache.org/"><img src="/img/apache.png"></a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </nav>
+</header>
+
+
+<article class="container">
+  <section class="col-md-12">
+    <a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/tag-developers/ajax-div-template.md" title="Edit this page on GitHub">Edit on GitHub</a>
+    <h1 id="ajax-div-template">ajax div template</h1>
+
+<blockquote>
+  <p>The Ajax theme is experimental. Feedback is appreciated.</p>
+</blockquote>
+
+<p>The ajax <a href="dojo-div-tag.html">div</a> template provides a much more interesting div rendering option that the other themes 
+do. Rather than simply rendering a <code class="highlighter-rouge">&lt;div&gt;</code> tag, this template relies on advanced AJAX features provided 
+by the <a href="http://dojotoolkit.org">Dojo Toolkit</a>. While the <a href="dojo-div-tag.html">div</a> tag could be used outside 
+of the <a href="">ajax theme</a>, it is usually not very useful. See the <a href="dojo-div-tag.html">div</a> tag for more information on what 
+features are provided.</p>
+
+<h2 id="features">Features</h2>
+
+<p>The remote div has a few features, some of which can be combined with the <a href="dojo-a-tag.html">a</a> tag and 
+the <a href="ajax-a-template.html">ajax a template</a>. These uses are:</p>
+
+<ul>
+  <li>Retrieve remote data</li>
+  <li>Initialize the div with content before the remote data is retrieved</li>
+  <li>Display appropriate error and loading messages</li>
+  <li>Refresh data on a timed cycle</li>
+  <li>Listen for events and refresh data</li>
+  <li>JavaScript control support</li>
+</ul>
+
+<h2 id="retrieve-remote-data">Retrieve Remote Data</h2>
+
+<p>The simplest way to use the div tag is to provide an <code class="highlighter-rouge">href</code> attribute. For example:</p>
+
+<div class="highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;saf:div</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="na">id=</span><span class="s">"weather"</span> <span class="na">href=</span><span class="s">"http://www.weather.com/weather?zip=97239"</span><span class="nt">/&gt;</span>
+</code></pre>
+</div>
+
+<p>What this does after the HTML page is completely loaded, the specified URL will be retrieved asynchronously
+in the browser. The entire contents returned by that URL will be injected in to the div.</p>
+
+<h2 id="initializing-the-div">Initializing the Div</h2>
+
+<p>Because the remote data isn’t loaded immediately, it is sometimes useful to have some placeholder content that exists 
+before the remote data is retrieved. The content is essentially just the body of the div element. For example:</p>
+
+<div class="highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;saf:div</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="na">id=</span><span class="s">"weather"</span> <span class="na">href=</span><span class="s">"http://www.weather.com/weather?zip=97239"</span><span class="nt">&gt;</span>
+    Placeholder...
+<span class="nt">&lt;/saf:div&gt;</span>
+</code></pre>
+</div>
+
+<p>If you wish to load more complex initial data, you can use the <a href="action-tag.html">action</a> tag and the <code class="highlighter-rouge">executeResult</code> 
+attribute:</p>
+
+<div class="highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;saf:div</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="na">id=</span><span class="s">"weather"</span> <span class="na">href=</span><span class="s">"http://www.weather.com/weather?zip=97239"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;ww:action</span> <span class="na">id=</span><span class="s">"weather"</span> <span class="na">name=</span><span class="s">"weatherBean"</span> <span class="na">executeResult=</span><span class="s">"true"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;ww:param</span> <span class="na">name=</span><span class="s">"zip"</span> <span class="na">value=</span><span class="s">"97239"</span><span class="nt">/&gt;</span>
+    <span class="nt">&lt;/ww:action&gt;</span>
+<span class="nt">&lt;/saf:div&gt;</span>
+</code></pre>
+</div>
+
+<h2 id="loading-and-error-messages">Loading and Error Messages</h2>
+
+<p>If you’d like to display special messages when the data is being retrieved or when the data cannot be retrieved, you can 
+use the <code class="highlighter-rouge">errorText</code> and <code class="highlighter-rouge">loadingText</code> attributes:</p>
+
+<div class="highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;saf:div</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="na">id=</span><span class="s">"weather"</span> <span class="na">href=</span><span class="s">"http://www.weather.com/weather?zip=97239"</span>
+        <span class="na">loadingText=</span><span class="s">"Loading weather information..."</span>
+        <span class="na">errorText=</span><span class="s">"Unable to contact weather server"</span><span class="nt">&gt;</span>
+    Placeholder...
+<span class="nt">&lt;/saf:div&gt;</span>
+</code></pre>
+</div>
+
+<h2 id="refresh-timers">Refresh Timers</h2>
+
+<p>Another feature this div template provides is the ability to refresh data on a timed basis. Using the <code class="highlighter-rouge">updateFreq</code> 
+and the <code class="highlighter-rouge">delay</code> attributes, you can specify how often the timer goes off and when the timer starts (times in milliseconds). 
+For example, the following will update every minute after a two second delay:</p>
+
+<div class="highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;saf:div</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="na">id=</span><span class="s">"weather"</span> <span class="na">href=</span><span class="s">"http://www.weather.com/weather?zip=97239"</span>
+        <span class="na">loadingText=</span><span class="s">"Loading weather information..."</span>
+        <span class="na">errorText=</span><span class="s">"Unable to contact weather server"</span><span class="nt">&gt;</span>
+        delay="2000"
+        updateFreq="60000"
+    Placeholder...
+<span class="nt">&lt;/saf:div&gt;</span>
+</code></pre>
+</div>
+
+<h2 id="listening-for-events">Listening for Events</h2>
+
+<p>The <a href="dojo-a-tag.html">a</a> tag (specifically the <a href="ajax-a-template.html">ajax a template</a>) and the div tag support 
+an <a href="ajax-event-system.html">ajax event system</a>, providing the ability to broadcast events to topics. You can specify 
+the <strong>topics</strong> to listen to using a comma separated list in the <code class="highlighter-rouge">listenTopics</code> attribute. What this means is that when 
+a topic is published, usually through the <a href="ajax-a-template.html">ajax a template</a>, the URL specified in the <code class="highlighter-rouge">href</code> 
+attribute will be re-requested.</p>
+
+<div class="highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;saf:div</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="na">id=</span><span class="s">"weather"</span> <span class="na">href=</span><span class="s">"http://www.weather.com/weather?zip=97239"</span>
+        <span class="na">loadingText=</span><span class="s">"Loading weather information..."</span>
+        <span class="na">errorText=</span><span class="s">"Unable to contact weather server"</span>
+        <span class="na">listenTopics=</span><span class="s">"weather_topic,some_topic"</span><span class="nt">&gt;</span>
+    Placeholder...
+<span class="nt">&lt;/saf:div&gt;</span>
+<span class="nt">&lt;saf:a</span> <span class="na">id=</span><span class="s">"link1"</span>
+      <span class="na">theme=</span><span class="s">"ajax"</span>
+      <span class="na">href=</span><span class="s">"refreshWeather.action"</span>
+      <span class="na">notifyTopics=</span><span class="s">"weather_topic,other_topic"</span>
+      <span class="na">errorText=</span><span class="s">"An Error ocurred"</span><span class="nt">&gt;</span>Refresh<span class="nt">&lt;/saf:a&gt;</span>
+</code></pre>
+</div>
+
+<h2 id="javascript-support">JavaScript Support</h2>
+
+<p>There are also javascript functions to refresh the content and stop/start the refreshing of the component. 
+For the remote div with the component id <code class="highlighter-rouge">remotediv1</code>:</p>
+
+<p>To start refreshing use the javascript:</p>
+
+<div class="highlighter-rouge"><pre class="highlight"><code><span class="nx">remotediv1</span><span class="p">.</span><span class="nx">startTimer</span><span class="p">();</span>
+</code></pre>
+</div>
+<p>To stop refreshing use the javascript:</p>
+
+<div class="highlighter-rouge"><pre class="highlight"><code><span class="nx">remotediv1</span><span class="p">.</span><span class="nx">stopTimer</span><span class="p">();</span>
+</code></pre>
+</div>
+<p>To refresh the content use the javascript:</p>
+
+<div class="highlighter-rouge"><pre class="highlight"><code><span class="nx">remotediv1</span><span class="p">.</span><span class="nx">refresh</span><span class="p">();</span>
+</code></pre>
+</div>
+
+<h2 id="javascript-examples">JavaScript Examples</h2>
+
+<p>To further illustrate these concepts here is an example. Say you want to change the url of a div at runtime via javascript. 
+Here is what you need to do:</p>
+
+<p>What you will need to do is add a JS function that listens to a JS event that publishes the id from the select box that 
+was selected.  It will modify the URL for the div (adding the id so the correct data is obtained) and then <code class="highlighter-rouge">bind()</code> 
+the AJAX div so it refreshes.</p>
+
+<div class="highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;saf:head</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="nt">/&gt;</span>
+
+<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
+    <span class="kd">function</span> <span class="nx">updateReports</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
+       <span class="kd">var</span> <span class="nx">reportDiv</span><span class="o">=</span> <span class="nb">window</span><span class="p">[</span><span class="s1">'reportDivId'</span><span class="p">];</span>
+       <span class="nx">reportDiv</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="s1">'/../reportListRemote.action?selectedId='</span><span class="o">+</span><span class="nx">id</span><span class="p">;</span>
+       <span class="nx">reportDiv</span><span class="p">.</span><span class="nx">refresh</span><span class="p">();</span>
+    <span class="p">}</span>
+    <span class="nx">dojo</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">topic</span><span class="p">.</span><span class="nx">getTopic</span><span class="p">(</span><span class="s2">"updateReportsListTopic"</span><span class="p">).</span><span class="nx">subscribe</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="s2">"updateReports"</span><span class="p">);</span>
+<span class="nt">&lt;/script&gt;</span>
+
+<span class="nt">&lt;form</span> <span class="err">...</span> <span class="nt">&gt;</span>
+<span class="nt">&lt;saf:select</span> <span class="err">....</span> <span class="na">onchange=</span><span class="s">"javascript: dojo.event.topic.publish("</span><span class="na">updateReportsListTopic</span><span class="err">",</span> <span class="na">this</span><span class="err">.</span><span class="na">value</span><span class="err">);</span> <span class="err">"</span> <span class="nt">/&gt;</span>
+
+<span class="nt">&lt;saf:div</span> <span class="na">id=</span><span class="s">"reportDivId"</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="na">href=</span><span class="s">"/.../reportListRemote.action"</span> <span class="nt">&gt;</span>
+  Loading reports...
+<span class="nt">&lt;/saf:div&gt;</span>
+<span class="nt">&lt;/form&gt;</span>
+</code></pre>
+</div>
+
+  </section>
+</article>
+
+
+<footer class="container">
+  <div class="col-md-12">
+    Copyright &copy; 2000-2016 <a href="http://www.apache.org/">The Apache Software Foundation </a>.
+    All Rights Reserved.
+  </div>
+  <div class="col-md-12">
+    Apache Struts, Struts, Apache, the Apache feather logo, and the Apache Struts project logos are
+    trademarks of The Apache Software Foundation.
+  </div>
+  <div class="col-md-12">Logo and website design donated by <a href="https://softwaremill.com/">SoftwareMill</a>.</div>
+</footer>
+
+<script>!function (d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (!d.getElementById(id)) {
+    js = d.createElement(s);
+    js.id = id;
+    js.src = "//platform.twitter.com/widgets.js";
+    fjs.parentNode.insertBefore(js, fjs);
+  }
+}(document, "script", "twitter-wjs");</script>
+<script src="https://apis.google.com/js/platform.js" async="async" defer="defer"></script>
+
+<div id="fb-root"></div>
+
+<script>(function (d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s);
+  js.id = id;
+  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
+
+
+<script>
+$(function() {
+  return $("h2, h3, h4, h5, h6").each(function(i, el) {
+    var $el, id;
+    $el = $(el);
+    id = $el.attr('id');
+    if (id) {
+      $el.removeAttr('id');
+      return $el.before($("<a />").addClass('anchor').attr('name', id));
+    }
+  });
+});
+</script>
+
+</body>
+</html>
diff --git a/content/tag-developers/simple-theme.html b/content/tag-developers/ajax-event-system.html
similarity index 72%
copy from content/tag-developers/simple-theme.html
copy to content/tag-developers/ajax-event-system.html
index 16c93ec..1d5bff3 100644
--- a/content/tag-developers/simple-theme.html
+++ b/content/tag-developers/ajax-event-system.html
@@ -125,47 +125,42 @@
 
 <article class="container">
   <section class="col-md-12">
-    <a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/tag-developers/simple-theme.md" title="Edit this page on GitHub">Edit on GitHub</a>
-    <h1 id="simple-theme">simple theme</h1>
+    <a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/tag-developers/ajax-event-system.md" title="Edit this page on GitHub">Edit on GitHub</a>
+    <h1 id="ajax-event-system">ajax event system</h1>
 
-<p>The simple theme renders “bare bones” HTML elements. The simple theme is most often used as a starting point for other themes. (See <a href="#PAGE_13962">Extending Themes</a> for more.)</p>
+<p>As you may have seen with the <a href="ajax-div-template.html">ajax div template</a> and <a href="ajax-a-template.html">ajax a template</a>, 
+the framework and Dojo provide a nice way to subscribe and notify of topics from within the browser. A benefit of using 
+Dojo as the basis of many of these components is being able to loosely couple UI components. There are two 
+attributes of importance: <code class="highlighter-rouge">listenTopics</code> and <code class="highlighter-rouge">notifyTopics</code>.</p>
 
-<p>For example, the <a href="#PAGE_13912">textfield</a> tag renders the HTML</p>
+<ul>
+  <li>If a component has a <code class="highlighter-rouge">notifyTopics</code> attribute, then after the processing has been completed a message with be published 
+to the topic names supplied as a value (comma delimited).</li>
+  <li>If a component has a <code class="highlighter-rouge">listenTopics</code> attribute, then when a message is published to the topic names supplied as a value 
+(comma delimited), the component will perform custom tag-specific logic ( i.e a DIV tag will re-fresh its content).</li>
+</ul>
 
-<div class="highlighter-rouge"><pre class="highlight"><code>&lt;input/&gt;
+<p>As well as this, you can publish and subscribe to topic names with javascript code. To publish to the <code class="highlighter-rouge">topic_name</code> topic:</p>
+
+<div class="highlighter-rouge"><pre class="highlight"><code><span class="n">dojo</span><span class="o">.</span><span class="na">event</span><span class="o">.</span><span class="na">topic</span><span class="o">.</span><span class="na">publish</span><span class="o">(</span><span class="s">"topic_name"</span><span class="o">,</span> <span class="s">"content"</span><span class="o">);</span>
 </code></pre>
 </div>
-<p>tag without a label, validation, error reporting, or any other formatting or functionality.</p>
-
-<table>
-  <tbody>
-    <tr>
-      <td>Both the <a href="#PAGE_13834">xhtml theme</a> and <a href="#PAGE_14215">css_xhtml theme</a> extend the simple theme. Look to them for examples of how to build on the foundation laid by the simple theme.</td>
-    </tr>
-  </tbody>
-</table>
-
-<table>
-  <tbody>
-    <tr>
-    </tr>
-  </tbody>
-</table>
 
-<p><strong>Head Tag</strong></p>
+<p>The <code class="highlighter-rouge">topic_name</code> attribute is required, the content attribute is not and most elements are triggered without having this 
+attribute. See the <a href="ajax-div-template.html">ajax div template</a> for an example of this type of interaction.</p>
 
-<p>The simple theme <a href="#PAGE_13997">head</a> template prints out a javascript include required for the <a href="#PAGE_14274">datetimepicker</a> tag to render properly.</p>
+<p>To subscribe to the <code class="highlighter-rouge">topic_name</code> topic:</p>
 
-<p><strong>simple head template</strong></p>
+<div class="highlighter-rouge"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">doSomethingWithEvent</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
+<span class="p">...</span>
+<span class="p">}</span>
 
-<p>The <a href="#PAGE_14291">simple theme</a><a href="#PAGE_13997">head</a> template only does one thing: it loads the minimal Ajax/Dojo support so that tags can import Dojo widgets easily.</p>
-
-<p>The source of the simple head.ftl template is:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/simple/head.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
+<span class="nx">dojo</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">topic</span><span class="p">.</span><span class="nx">getTopic</span><span class="p">(</span><span class="s2">"topic_name"</span><span class="p">).</span><span class="nx">subscribe</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="s2">"doSomethingWithEvent"</span><span class="p">);</span>
+</code></pre>
 </div>
 
+<p>The <code class="highlighter-rouge">subscribe</code> method takes 2 parameters, the first is the JavaScript object variable (or null if the function is not 
+from an object) and the second is the name of the function to call when an event is received on the topic.</p>
 
   </section>
 </article>
diff --git a/content/tag-developers/ajax-head-template.html b/content/tag-developers/ajax-head-template.html
new file mode 100644
index 0000000..b335ac5
--- /dev/null
+++ b/content/tag-developers/ajax-head-template.html
@@ -0,0 +1,286 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <meta name="Date-Revision-yyyymmdd" content="20140918"/>
+  <meta http-equiv="Content-Language" content="en"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+  <title>Tag Developers Guide (WIP)</title>
+
+  <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic,600italic,700italic" rel="stylesheet" type="text/css">
+  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
+  <link href="/css/main.css" rel="stylesheet">
+  <link href="/css/custom.css" rel="stylesheet">
+  <link href="/highlighter/github-theme.css" rel="stylesheet">
+
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>
+  <script type="text/javascript" src="/js/community.js"></script>
+</head>
+<body>
+
+<a href="http://github.com/apache/struts" class="github-ribbon">
+  <img style="position: absolute; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
+</a>
+
+<header>
+  <nav>
+    <div role="navigation" class="navbar navbar-default navbar-fixed-top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" data-toggle="collapse" data-target="#struts-menu" class="navbar-toggle">
+            Menu
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a href="/index.html" class="navbar-brand logo"><img src="/img/struts-logo.svg"></a>
+        </div>
+        <div id="struts-menu" class="navbar-collapse collapse">
+          <ul class="nav navbar-nav">
+            <li class="dropdown">
+              <a data-toggle="dropdown" href="#" class="dropdown-toggle">
+                Home<b class="caret"></b>
+              </a>
+              <ul class="dropdown-menu">
+                <li><a href="/index.html">Welcome</a></li>
+                <li><a href="/downloads.html">Downloads</a></li>
+                <li><a href="/announce.html">Announcements</a></li>
+                <li><a href="http://www.apache.org/licenses/">License</a></li>
+                <li><a href="http://apache.org/foundation/thanks.html">Thanks!</a></li>
+                <li><a href="http://apache.org/foundation/sponsorship.html">Sponsorship</a></li>
+              </ul>
+            </li>
+            <li class="dropdown">
+              <a data-toggle="dropdown" href="#" class="dropdown-toggle">
+                Support<b class="caret"></b>
+              </a>
+              <ul class="dropdown-menu">
+                <li><a href="/mail.html">User Mailing List</a></li>
+                <li><a href="https://issues.apache.org/jira/browse/WW">Issue Tracker</a></li>
+                <li><a href="/security.html">Reporting Security Issues</a></li>
+                <li class="divider"></li>
+                <li><a href="/maven/project-info.html">Project info</a></li>
+                <li><a href="/maven/struts2-core/dependencies.html">Struts Core dependencies</a></li>
+                <li><a href="/maven/struts2-plugins/modules.html">Plugin dependencies</a></li>
+              </ul>
+            </li>
+            <li class="dropdown">
+              <a data-toggle="dropdown" href="#" class="dropdown-toggle">
+                Documentation<b class="caret"></b>
+              </a>
+              <ul class="dropdown-menu">
+                <li><a href="/birdseye.html">Birds Eye</a></li>
+                <li><a href="/primer.html">Key Technologies</a></li>
+                <li><a href="/kickstart.html">Kickstart FAQ</a></li>
+                <li><a href="https://cwiki.apache.org/confluence/display/WW/Home">Wiki</a></li>
+                <li class="divider"></li>
+                <li><a href="/getting-started/">Getting Started</a></li>
+                <li><a href="/security/">Security Guide</a></li>
+                <li><a href="/core-developers/">Core Developers Guide</a></li>
+                <li><a href="/tag-developers/">Tag Developers Guide</a></li>
+                <li><a href="/maven-archetypes/">Maven Archetypes</a></li>
+                <li><a href="/plugins/">Plugins</a></li>
+                <li class="divider"></li>
+                <li><a href="/maven/struts2-core/apidocs/index.html">Struts Core API</a></li>
+                <li><a href="/docs/plugins.html">Plugin APIs</a></li>
+                <li><a href="/docs/tag-reference.html">Tag reference</a></li>
+                <li><a href="http://cwiki.apache.org/S2PLUGINS/home.html">Plugin registry</a></li>
+                <li class="divider"></li>
+                <li><a href="/docs/tutorials.html">Tutorials - DEPRECATED</a></li>
+                <li><a href="/docs/faqs.html">FAQs - DEPRECATED</a></li>
+                <li><a href="/docs/guides.html">Guides - DEPRECATED</a></li>
+              </ul>
+            </li>
+            <li class="dropdown">
+              <a data-toggle="dropdown" href="#" class="dropdown-toggle">
+                Contributing<b class="caret"></b>
+              </a>
+              <ul class="dropdown-menu">
+                <li><a href="/youatstruts.html">You at Struts</a></li>
+                <li><a href="/helping.html">How to Help FAQ</a></li>
+                <li><a href="/dev-mail.html">Development Lists</a></li>
+                <li class="divider"></li>
+                <li><a href="/submitting-patches.html">Submitting patches</a></li>
+                <li><a href="/builds.html">Source Code</a></li>
+                <li><a href="/coding-standards.html">Coding standards</a></li>
+                <li class="divider"></li>
+                <li><a href="/releases.html">Release Guidelines</a></li>
+                <li><a href="/bylaws.html">PMC Charter</a></li>
+                <li><a href="/volunteers.html">Volunteers</a></li>
+                <li><a href="https://git-wip-us.apache.org/repos/asf?p=struts.git">Source Repository</a></li>
+              </ul>
+            </li>
+            <li class="apache"><a href="http://www.apache.org/"><img src="/img/apache.png"></a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </nav>
+</header>
+
+
+<article class="container">
+  <section class="col-md-12">
+    <a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/tag-developers/ajax-head-template.md" title="Edit this page on GitHub">Edit on GitHub</a>
+    <h1 id="ajax-head-template">ajax head template</h1>
+
+<p>The ajax <a href="dojo-head-tag.html">head</a> template builds upon the <a href="head-tag.html">xhtml head template</a> by providing additional 
+JavaScript includes for the <a href="http://dojotoolkit.org">Dojo Toolkit</a>, which is used by the <a href="ajax-a-template.html">ajax a template</a>,
+<a href="ajax-div-template.html">ajax div template</a>, and the <a href="">ajax tabbedPanel template</a>. It is required to use this tag, 
+<code class="highlighter-rouge">&lt;ww:head theme="ajax"/&gt;</code> , in your HTML <code class="highlighter-rouge">&lt;head&gt;</code> block if you wish to use AJAX feature. The contents of <strong>head.ftl</strong> are:</p>
+
+<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="err">&lt;</span>#--
+/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+--&gt;
+<span class="nt">&lt;script </span><span class="na">language=</span><span class="s">"JavaScript"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
+    <span class="c1">// Dojo configuration</span>
+    <span class="nx">djConfig</span> <span class="o">=</span> <span class="p">{</span>
+        <span class="na">isDebug</span><span class="p">:</span> <span class="nx">$</span><span class="p">{</span><span class="nx">parameters</span><span class="p">.</span><span class="nx">debug</span><span class="p">?</span><span class="k">default</span><span class="p">(</span><span class="kc">false</span><span class="p">)?</span><span class="nx">string</span><span class="p">},</span>
+        <span class="nx">bindEncoding</span><span class="p">:</span> <span class="s2">"${parameters.encoding}"</span>
+        <span class="o">&lt;</span><span class="err">#</span><span class="k">if</span> <span class="nx">parameters</span><span class="p">.</span><span class="nx">baseRelativePath</span><span class="p">?</span><span class="nx">if_exists</span> <span class="o">!=</span> <span class="s2">""</span><span class="o">&gt;</span>
+          <span class="p">,</span><span class="nx">baseRelativePath</span><span class="p">:</span> <span class="s2">"&lt;@s.url value='${parameters.baseRelativePath}' includeParams='none' encode='false' /&gt;"</span>
+          <span class="p">,</span><span class="nx">baseScriptUri</span><span class="p">:</span> <span class="s2">"&lt;@s.url value='${parameters.baseRelativePath}' includeParams='none' encode='false' /&gt;"</span>
+        <span class="o">&lt;</span><span class="err">#</span><span class="k">else</span><span class="o">&gt;</span>
+          <span class="p">,</span><span class="na">baseRelativePath</span><span class="p">:</span> <span class="s2">"${base}/struts/dojo/"</span>
+          <span class="p">,</span><span class="na">baseScriptUri</span><span class="p">:</span> <span class="s2">"${base}/struts/dojo/"</span>
+        <span class="o">&lt;</span><span class="sr">/#if&gt; </span><span class="err"> 
+</span>        <span class="o">&lt;</span><span class="err">#</span><span class="k">if</span> <span class="nx">parameters</span><span class="p">.</span><span class="nx">locale</span><span class="p">?</span><span class="nx">if_exists</span> <span class="o">!=</span> <span class="s2">""</span><span class="o">&gt;</span>
+          <span class="p">,</span><span class="nx">locale</span><span class="p">:</span> <span class="s2">"${parameters.locale}"</span>
+        <span class="o">&lt;</span><span class="sr">/#if</span><span class="err">&gt;
+</span>        <span class="o">&lt;</span><span class="err">#</span><span class="k">if</span> <span class="nx">parameters</span><span class="p">.</span><span class="nx">extraLocales</span><span class="p">?</span><span class="nx">exists</span><span class="o">&gt;</span>
+          <span class="p">,</span><span class="nx">extraLocale</span><span class="p">:</span> <span class="p">[</span>
+        	<span class="o">&lt;</span><span class="err">#</span><span class="nx">list</span> <span class="nx">parameters</span><span class="p">.</span><span class="nx">extraLocales</span> <span class="nx">as</span> <span class="nx">locale</span><span class="o">&gt;</span>
+        		<span class="s2">"${locale}"</span><span class="o">&lt;</span><span class="err">#</span><span class="k">if</span> <span class="nx">locale_has_next</span><span class="o">&gt;</span><span class="p">,</span><span class="o">&lt;</span><span class="sr">/#if</span><span class="err">&gt;
+</span>        	<span class="o">&lt;</span><span class="sr">/#list</span><span class="err">&gt;
+</span>          <span class="p">]</span>
+        <span class="o">&lt;</span><span class="sr">/#if</span><span class="err">&gt;
+</span>         <span class="p">,</span><span class="na">parseWidgets</span> <span class="p">:</span> <span class="nx">$</span><span class="p">{</span><span class="nx">parameters</span><span class="p">.</span><span class="nx">parseContent</span><span class="p">?</span><span class="nx">string</span><span class="p">}</span>
+        
+    <span class="p">};</span>
+<span class="nt">&lt;/script&gt;</span>
+
+<span class="err">&lt;</span>#if parameters.compressed?default(true)&gt;
+  <span class="err">&lt;</span>#assign dojoFile="dojo.js"&gt;
+<span class="err">&lt;</span>#else&gt;
+  <span class="err">&lt;</span>#assign dojoFile="dojo.js.uncompressed.js"&gt;
+<span class="err">&lt;</span>/#if&gt;
+
+<span class="err">&lt;</span>#if parameters.cache?default(true)&gt;
+  <span class="err">&lt;</span>#assign profile="struts_"&gt;
+<span class="err">&lt;</span>#else&gt;
+  <span class="err">&lt;</span>#assign profile=""&gt;
+<span class="err">&lt;</span>/#if&gt;           
+
+<span class="err">&lt;</span>#if parameters.baseRelativePath?if_exists != ""&gt;
+  <span class="nt">&lt;script </span><span class="na">language=</span><span class="s">"JavaScript"</span> <span class="na">type=</span><span class="s">"text/javascript"</span>
+        <span class="na">src=</span><span class="s">"&lt;@s.url value='${parameters.baseRelativePath}/${profile}${dojoFile}' includeParams='none' encode='false'  /&gt;"</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="err">&lt;</span>#else&gt;
+  <span class="nt">&lt;script </span><span class="na">language=</span><span class="s">"JavaScript"</span> <span class="na">type=</span><span class="s">"text/javascript"</span>
+        <span class="na">src=</span><span class="s">"${base}/struts/dojo/${profile}${dojoFile}"</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="err">&lt;</span>/#if&gt;  
+
+<span class="nt">&lt;script </span><span class="na">language=</span><span class="s">"JavaScript"</span> <span class="na">type=</span><span class="s">"text/javascript"</span>
+        <span class="na">src=</span><span class="s">"${base}/struts/ajax/dojoRequire.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="err">&lt;</span>#if parameters.debug?default(false)&gt;
+<span class="nt">&lt;script </span><span class="na">language=</span><span class="s">"JavaScript"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
+    <span class="nx">dojo</span><span class="p">.</span><span class="nx">hostenv</span><span class="p">.</span><span class="nx">writeIncludes</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
+<span class="nt">&lt;/script&gt;</span>     
+<span class="err">&lt;</span>/#if&gt;        
+<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"${base}/struts/xhtml/styles.css"</span> <span class="na">type=</span><span class="s">"text/css"</span><span class="nt">/&gt;</span>
+
+<span class="nt">&lt;script </span><span class="na">language=</span><span class="s">"JavaScript"</span> <span class="na">src=</span><span class="s">"${base}/struts/utils.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;script </span><span class="na">language=</span><span class="s">"JavaScript"</span> <span class="na">src=</span><span class="s">"${base}/struts/xhtml/validation.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;script </span><span class="na">language=</span><span class="s">"JavaScript"</span> <span class="na">src=</span><span class="s">"${base}/struts/css_xhtml/validation.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>
+
+<blockquote>
+  <p>If you are having trouble getting the AJAX theme to work, you should include the above JavaScript in your page manually, 
+changing “isDebug: false” to “isDebug: true”.  This will log out debugging information directly to the screen.</p>
+</blockquote>
+
+<p>Note that Dojo is configured to use the same character encoding specified in <code class="highlighter-rouge">struts.xml</code> , typically UTF-8. For a simple 
+example of how to use the <a href="dojo-head-tag.html">head</a> tag with the AJAX theme, simply do the following in your HTML:</p>
+
+<figure class="highlight"><pre><code class="language-html" data-lang="html">404: Not Found</code></pre></figure>
+
+<blockquote>
+  <p>The above sample is from Struts trunk; for 2.0.6 you should use <code class="highlighter-rouge">&lt;s:head debug="true"/&gt;</code>.</p>
+</blockquote>
+
+  </section>
+</article>
+
+
+<footer class="container">
+  <div class="col-md-12">
+    Copyright &copy; 2000-2016 <a href="http://www.apache.org/">The Apache Software Foundation </a>.
+    All Rights Reserved.
+  </div>
+  <div class="col-md-12">
+    Apache Struts, Struts, Apache, the Apache feather logo, and the Apache Struts project logos are
+    trademarks of The Apache Software Foundation.
+  </div>
+  <div class="col-md-12">Logo and website design donated by <a href="https://softwaremill.com/">SoftwareMill</a>.</div>
+</footer>
+
+<script>!function (d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (!d.getElementById(id)) {
+    js = d.createElement(s);
+    js.id = id;
+    js.src = "//platform.twitter.com/widgets.js";
+    fjs.parentNode.insertBefore(js, fjs);
+  }
+}(document, "script", "twitter-wjs");</script>
+<script src="https://apis.google.com/js/platform.js" async="async" defer="defer"></script>
+
+<div id="fb-root"></div>
+
+<script>(function (d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s);
+  js.id = id;
+  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
+
+
+<script>
+$(function() {
+  return $("h2, h3, h4, h5, h6").each(function(i, el) {
+    var $el, id;
+    $el = $(el);
+    id = $el.attr('id');
+    if (id) {
+      $el.removeAttr('id');
+      return $el.before($("<a />").addClass('anchor').attr('name', id));
+    }
+  });
+});
+</script>
+
+</body>
+</html>
diff --git a/content/tag-developers/ajax-theme.html b/content/tag-developers/ajax-theme.html
index 714dfbc..c1fa8d8 100644
--- a/content/tag-developers/ajax-theme.html
+++ b/content/tag-developers/ajax-theme.html
@@ -128,76 +128,48 @@
     <a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/tag-developers/ajax-theme.md" title="Edit this page on GitHub">Edit on GitHub</a>
     <h1 id="ajax-theme">ajax theme</h1>
 
-<p>The ajax theme is deprecated!</p>
-
-<table>
-  <tbody>
-    <tr>
-    </tr>
-  </tbody>
-</table>
+<blockquote>
+  <p>The ajax theme is deprecated!</p>
+</blockquote>
 
-<p>The ajax theme extends the <a href="#PAGE_13834">xhtml theme</a> with AJAX features. The theme uses the popular DOJO AJAX/JavaScript toolkit. AJAX features include:</p>
+<p>The ajax theme extends the <a href="xhtml-theme.html">xhtml theme</a> with AJAX features. The theme uses the popular DOJO 
+AJAX/JavaScript toolkit. AJAX features include:</p>
 
 <ul>
-  <li>
-    <p><em>AJAX Client Side Validation</em></p>
-  </li>
-  <li>
-    <p>Remote <a href="#PAGE_14201">form</a> submission support (works with the <a href="#PAGE_14054">submit</a> tag as well)</p>
-  </li>
-  <li>
-    <p>An advanced <a href="#PAGE_13908">div</a> template that provides dynamic reloading of partial HTML</p>
-  </li>
-  <li>
-    <p>An advanced <a href="#PAGE_14027">a</a> template that provides the ability to load and evaluate JavaScript remotely</p>
-  </li>
-  <li>
-    <p>An AJAX-only <a href="#PAGE_14222">tabbedPanel</a> implementation</p>
-  </li>
-  <li>
-    <p>A rich pub-sub event model</p>
-  </li>
-  <li>
-    <p>Interactive autocomplete tag</p>
-  </li>
+  <li><a href="../core-developers/ajax-client-side-validation.html">AJAX Client Side Validation</a></li>
+  <li>Remote <a href="form-tag.html">form</a> submission support (works with the <a href="dojo-submit-tag.html">submit</a> tag as well)</li>
+  <li>An advanced <a href="dojo-div-tag.html">div</a> template that provides dynamic reloading of partial HTML</li>
+  <li>An advanced <a href="dojo-a-tag.html">a</a> template that provides the ability to load and evaluate JavaScript remotely</li>
+  <li>An AJAX-only <a href="dojo-tabbedpanel-tag.html">tabbedpanel</a> implementation</li>
+  <li>A rich pub-sub event model</li>
+  <li>Interactive autocomplete tag</li>
 </ul>
 
-<p>(ok)  See also: <em>Ajax tags</em></p>
+<blockquote>
+  <p>See also: <a href="ajax-tags.html">Ajax tags</a></p>
+</blockquote>
 
-<p><strong>Browser Compatibility</strong></p>
+<h2 id="browser-compatibility">Browser Compatibility</h2>
 
-<p>AJAX (as a technology) uses a browser-side scripting component that varies between browers (and sometimes versions). To hide those differences from the developer, we utilize the dojo toolkit (<a href="http://www.dojotoolkit.org">http://www.dojotoolkit.org</a>). Several browsers are supported by dojo, and any UI’s created with the ajax theme should act the same way for supported browsers. The supported browsers are:</p>
+<p>AJAX (as a technology) uses a browser-side scripting component that varies between browsers (and sometimes versions). 
+To hide those differences from the developer, we utilize the dojo toolkit (<a href="http://www.dojotoolkit.org">http://www.dojotoolkit.org</a>). 
+Several browsers are supported by dojo, and any UI’s created with the ajax theme should act the same way for supported 
+browsers. The supported browsers are:</p>
 
 <ul>
-  <li>
-    <p>IE 5.5+</p>
-  </li>
-  <li>
-    <p>FF 1.0+</p>
-  </li>
-  <li>
-    <p>Latest Safari (on up-to-date OS versions)</p>
-  </li>
-  <li>
-    <p>Latest Opera</p>
-  </li>
-  <li>
-    <p>Latest Konqueror</p>
-  </li>
+  <li>IE 5.5+</li>
+  <li>FF 1.0+</li>
+  <li>Latest Safari (on up-to-date OS versions)</li>
+  <li>Latest Opera</li>
+  <li>Latest Konqueror</li>
 </ul>
 
-<p><strong>Extending the AJAX Theme</strong></p>
+<h2 id="extending-the-ajax-theme">Extending the AJAX Theme</h2>
 
-<p>The wrapping technique utilized by the ajax theme is much like <a href="#PAGE_13834">xhtml theme</a>, but the</p>
+<p>The wrapping technique utilized by the ajax theme is much like <a href="xhtml-theme.html">xhtml theme</a>, but the <code class="highlighter-rouge">controlheader.ftl</code>
+is a wee bit different.</p>
 
-<div class="highlighter-rouge"><pre class="highlight"><code>controlheader.ftl
-</code></pre>
-</div>
-<p>is a wee bit different.</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>
-&lt;#if parameters.label?if_exists != ""&gt;
+<pre><code class="language-injectedfreemarker">&lt;#if parameters.label?if_exists != ""&gt;
 	&lt;#include "/${parameters.templateDir}/xhtml/controlheader.ftl" /&gt;
 &lt;/#if&gt;
 &lt;#if parameters.form?exists &amp;&amp; parameters.form.validate?default(false) == true&gt;
@@ -208,410 +180,35 @@
         ${tag.addParameter('onblur', "validate(this);")}
     &lt;/#if&gt;
 &lt;/#if&gt;
-
-</code></pre>
-</div>
-
-<p>The header provides for <em>AJAX Client Side Validation</em>  by checking if the</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>validate
-</code></pre>
-</div>
-<p>attribute is set to true. If it is, a validation request is made on each</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>onblur
-</code></pre>
-</div>
-<p>event for a HTML <a href="#PAGE_14248">Struts Tags</a>. Some people don’t like the</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>onblur
-</code></pre>
-</div>
-<p>behavior; they would rather a more advanced timer (say, 200ms) be kicked off after every keystroke. You can override this template and provide that type of behavior if you would like.</p>
-
-<p><strong>Special Interest</strong></p>
-
-<p>Three ajax_xhtml templates of special interest are</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>head
-</code></pre>
-</div>
-<p>,</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>div
-</code></pre>
-</div>
-<p>, and</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>a
-</code></pre>
-</div>
-<p>.</p>
-
-<table>
-  <tbody>
-    <tr>
-      <td>Especially with the ajax theme, it is important to use the <a href="#PAGE_13997">head</a> tag. (See the <em>ajax head template</em>  for more information.) Without it, AJAX support may not be set up properly.</td>
-    </tr>
-  </tbody>
-</table>
-
-<table>
-  <tbody>
-    <tr>
-    </tr>
-  </tbody>
-</table>
-
-<ul>
-  <li>
-    <p><em>ajax head template</em></p>
-  </li>
-  <li>
-    <p><em>ajax div template</em></p>
-  </li>
-  <li>
-    <p><em>ajax a template</em></p>
-  </li>
-</ul>
-
-<p>(ok)  In addition to these templates, be familiar with the <em>ajax event system</em>  provided by the framework and Dojo.</p>
-
-<p><strong>ajax a template</strong></p>
-
-<p>The ajax theme is experimental. Feedback is appreciated.</p>
-
-<table>
-  <tbody>
-    <tr>
-    </tr>
-  </tbody>
-</table>
-
-<p>The ajax a template is used to make asynchronous calls to the server when the user clicks on the a href link.  It is useful when you need to communicate information back to the application from the UI, without requiring the entire page to be re-rendered.  An example would be removing an item from a list.</p>
-
-<p>The <em>preInvokeJS</em>  attribute is used to determine whether the URL specified should be called or not, and must contain Javascript that returns <em>true</em>  or <em>false</em> .  If you want to call a JavaScript function, use the format preInvokeJS=’yourMethodName(data,type)’. An example would be to show a confirm dialog to the user to double check whether they want to remove a user from a list.</p>
-
-<p><strong>Remember</strong>: the content returned by the <em>href</em>  attribute must be JavaScript. That JavaScript will then be evaluated within the webpage. If you only wish to publish an event to the topic specified, then simply return no result (or NONE) from your action and utilize the <em>notifyTopics</em>  attribute to specific the topic names.</p>
-
-<p>For an example of the interaction between the <a href="#PAGE_13908">div</a> tag and the <a href="#PAGE_14027">a</a> tag using the topic pub/sub model, see the examples in the <em>ajax div template</em> .</p>
-
-<p><strong>ajax div template</strong></p>
-
-<p>The Ajax theme is experimental. Feedback is appreciated.</p>
-
-<table>
-  <tbody>
-    <tr>
-    </tr>
-  </tbody>
-</table>
-
-<p>The ajax <a href="#PAGE_13908">div</a> template provides a much more interesting div rendering option that the other themes do. Rather than simply rendering a</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>&lt;div&gt;
-</code></pre>
-</div>
-<p>tag, this template relies on advanced AJAX features provided by the <a href="http://dojotoolkit.org">Dojo Toolkit</a>^[http://dojotoolkit.org]. While the <a href="#PAGE_13908">div</a> tag could be used outside of the <a href="#PAGE_14205">ajax theme</a>, it is usually not very useful. See the <a href="#PAGE_13908">div</a> tag for more information on what features are provided.</p>
-
-<p><strong>Features</strong></p>
-
-<p>The remote div has a few features, some of which can be combined with the <a href="#PAGE_14027">a</a> tag and the <em>ajax a template</em> . These uses are:</p>
-
-<ul>
-  <li>
-    <p>Retrieve remote data</p>
-  </li>
-  <li>
-    <p>Initialize the div with content before the remote data is retrieved</p>
-  </li>
-  <li>
-    <p>Display appropriate error and loading messages</p>
-  </li>
-  <li>
-    <p>Refresh data on a timed cycle</p>
-  </li>
-  <li>
-    <p>Listen for events and refresh data</p>
-  </li>
-  <li>
-    <p>JavaScript control support</p>
-  </li>
-</ul>
-
-<p><strong>Retrieve Remote Data</strong></p>
-
-<p>The simplest way to use the div tag is to provide an <em>href</em>  attribute. For example:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>
-&lt;saf:div theme="ajax" id="weather" href="http://www.weather.com/weather?zip=97239"/&gt;
-
-</code></pre>
-</div>
-
-<p>What this does after the HTML page is completely loaded, the specified URL will be retrieved asynchronously in the browser. The entire contents returned by that URL will be injected in to the div.</p>
-
-<p><strong>Initializing the Div</strong></p>
-
-<p>Because the remote data isn’t loaded immediately, it is sometimes useful to have some placeholder content that exists before the remote data is retrieved. The content is essentially just the body of the div element. For example:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>
-&lt;saf:div theme="ajax" id="weather" href="http://www.weather.com/weather?zip=97239"&gt;
-    Placeholder...
-&lt;/saf:div&gt;
-
-</code></pre>
-</div>
-
-<p>If you wish to load more complex initial data, you can use the <a href="#PAGE_14034">action</a> tag and the <em>executeResult</em>  attribute:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>
-&lt;saf:div theme="ajax" id="weather" href="http://www.weather.com/weather?zip=97239"&gt;
-    &lt;ww:action id="weather" name="weatherBean" executeResult="true"&gt;
-        &lt;ww:param name="zip" value="97239"/&gt;
-    &lt;/ww:action&gt;
-&lt;/saf:div&gt;
-
-</code></pre>
-</div>
-
-<p><strong>Loading and Error Messages</strong></p>
-
-<p>If you’d like to display special messages when the data is being retrieved or when the data cannot be retrieved, you can use the <em>errorText</em>  and <em>loadingText</em>  attributes:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>
-&lt;saf:div theme="ajax" id="weather" href="http://www.weather.com/weather?zip=97239"
-        loadingText="Loading weather information..."
-        errorText="Unable to contact weather server"&gt;
-    Placeholder...
-&lt;/saf:div&gt;
-
-</code></pre>
-</div>
-
-<p><strong>Refresh Timers</strong></p>
-
-<p>Another feature this div template provides is the ability to refresh data on a timed basis. Using the <em>updateFreq</em>  and the <em>delay</em> attributes, you can specify how often the timer goes off and when the timer starts (times in milliseconds). For example, the following will update every minute after a two second delay:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>
-&lt;saf:div theme="ajax" id="weather" href="http://www.weather.com/weather?zip=97239"
-        loadingText="Loading weather information..."
-        errorText="Unable to contact weather server"&gt;
-        delay="2000"
-        updateFreq="60000"
-    Placeholder...
-&lt;/saf:div&gt;
-
-</code></pre>
-</div>
-
-<p><strong>Listening for Events</strong></p>
-
-<p>The <a href="#PAGE_14027">a</a> tag (specifically the <em>ajax a template</em> ) and the div tag support an <em>ajax event system</em> , providing the ability to broadcast events to topics. You can specify the <strong>topics</strong> to listen to using a comma separated list in the <em>listenTopics</em>  attribute. What this means is that when a topic is published, usually through the <em>ajax a template</em> , the URL specified in the <em>href</em>  attribute will be re-requested.</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>
-&lt;saf:div theme="ajax" id="weather" href="http://www.weather.com/weather?zip=97239"
-        loadingText="Loading weather information..."
-        errorText="Unable to contact weather server"
-        listenTopics="weather_topic,some_topic"&gt;
-    Placeholder...
-&lt;/saf:div&gt;
-&lt;saf:a id="link1"
-      theme="ajax"
-      href="refreshWeather.action"
-      notifyTopics="weather_topic,other_topic"
-      errorText="An Error ocurred"&gt;Refresh&lt;/saf:a&gt;
-
-</code></pre>
-</div>
-
-<p><strong>JavaScript Support</strong></p>
-
-<p>There are also javascript functions to refresh the content and stop/start the refreshing of the component. For the remote div with the component id “remotediv1”:</p>
-
-<p>To start refreshing use the javascript:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>
-remotediv1.startTimer();
-
-</code></pre>
-</div>
-
-<p>To stop refreshing use the javascript:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>
-remotediv1.stopTimer();
-
-</code></pre>
-</div>
-
-<p>To refresh the content use the javascript:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>
-remotediv1.refresh();
-
-</code></pre>
-</div>
-
-<p><strong>JavaScript Examples:</strong></p>
-
-<p>To further illustrate these concepts here is an example. Say you want to change the url of a div at runtime via javascript. Here is what you need to do:</p>
-
-<p>What you will need to do is add a JS function that listens to a JS event that publishes the id from the select box that was selected.  It will modify the URL for the div (adding the id so the correct data is obtained) and then bind() the AJAX div so it refreshes.</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>
-&lt;saf:head theme="ajax" /&gt;
-
-&lt;script type="text/javascript"&gt;
-    function updateReports(id) {
-       var reportDiv= window['reportDivId'];
-       reportDiv.href = '/../reportListRemote.action?selectedId='+id;
-       reportDiv.refresh();
-    }
-    dojo.event.topic.getTopic("updateReportsListTopic").subscribe(null, "updateReports");
-&lt;/script&gt;
-
-&lt;form ... &gt;
-&lt;saf:select .... onchange="javascript: dojo.event.topic.publish("updateReportsListTopic", this.value); " /&gt;
-
-&lt;saf:div id="reportDivId" theme="ajax" href="/.../reportListRemote.action" &gt;
-  Loading reports...
-&lt;/saf:div&gt;
-&lt;/form&gt;
-
-</code></pre>
-</div>
-
-<p><strong>ajax event system</strong></p>
-
-<p>As you may have seen with the <em>ajax div template</em>  and <em>ajax a template</em> , the framework and Dojo provide a nice way to subscribe and notify of topics from within the browser. A benifit of using Dojo as the basis of many of these components is being able to loosely couple UI components.  There are two attributes of importance:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>listenTopics
-</code></pre>
-</div>
-<p>and</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>notifyTopics
-</code></pre>
-</div>
-<p>.</p>
-
-<ul>
-  <li>If a component has a</li>
-</ul>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>notifyTopics
-</code></pre>
-</div>
-<p>attribute, then after the processing has been completed a message with be published to the topic names supplied as a value (comma delimited).</p>
-
-<ul>
-  <li>If a component has a</li>
-</ul>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>listenTopics
-</code></pre>
-</div>
-<p>attribute, then when a message is published to the topic names supplied as a value (comma delimited), the component will perform custom tag-specific logic ( i.e a DIV tag will re-fresh its content).</p>
-
-<p>As well as this, you can publish and subscribe to topic names with javascript code.  To publish to the</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>topic_name
-</code></pre>
-</div>
-<p>topic:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>
-dojo.event.topic.publish("topic_name", "content");
-
 </code></pre>
-</div>
 
-<p>The topic_name attribute is required, the content attribute is not and most elements are triggered without having this attribute. See the <em>ajax div template</em>  for an example of this type of interaction.</p>
+<p>The header provides for <a href="../core-developers/ajax-client-side-validation.html">AJAX Client Side Validation</a> by checking 
+if the <code class="highlighter-rouge">validate</code> attribute is set to true. If it is, a validation request is made on each <code class="highlighter-rouge">onblur</code> event 
+for a HTML <a href="struts-tags.html">Struts Tags</a>. Some people don’t like the <code class="highlighter-rouge">onblur</code> behavior; they would rather a more 
+advanced timer (say, 200ms) be kicked off after every keystroke. You can override this template and provide that 
+type of behavior if you would like.</p>
 
-<p>To subscribe to the <em>topic_name</em>  topic:</p>
+<h2 id="special-interest">Special Interest</h2>
 
-<div class="highlighter-rouge"><pre class="highlight"><code>
-function doSomethingWithEvent(data) {
-...
-}
-
-dojo.event.topic.getTopic("topic_name").subscribe(null, "doSomethingWithEvent");
-
-</code></pre>
-</div>
-
-<p>The</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>subscribe
-</code></pre>
-</div>
-<p>method takes 2 parameters, the first is the JavaScript object variable (or null if the function is not from an object) and the second is the name of the function to call when an event is recieved on the topic.</p>
-
-<p><strong>ajax head template</strong></p>
-
-<p>The ajax <a href="#PAGE_13997">head</a> template builds upon the <em>xhtml head template</em>  by providing additional JavaScript includes for the <a href="http://dojotoolkit.org">Dojo Toolkit</a>^[http://dojotoolkit.org], which is used by the <em>ajax a template</em> , <em>ajax div template</em>  , and the <em>ajax tabbedPanel template</em> . It is required to use this tag,</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>&lt;ww:head theme="ajax"/&gt;
-</code></pre>
-</div>
-<p>, in your HTML</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>&lt;head&gt;
-</code></pre>
-</div>
-<p>block if you wish to use AJAX feature. The contents of <strong>head.ftl</strong> are:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/plugins/dojo/src/main/resources/template/ajax/head.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<table>
-  <tbody>
-    <tr>
-      <td>If you are having trouble getting the AJAX theme to work, you should include the above JavaScript in your page manually, changing “isDebug: false” to “isDebug: true”.  This will log out debugging information directly to the screen.</td>
-    </tr>
-  </tbody>
-</table>
-
-<table>
-  <tbody>
-    <tr>
-    </tr>
-  </tbody>
-</table>
-
-<p>Note that Dojo is configured to use the same character encoding specified in <em>struts.properties</em> , typically UTF-8. For a simple example of how to use the <a href="#PAGE_13997">head</a> tag with the AJAX theme, simply do the following in your HTML:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=common-include|lang=xml|url=struts2/apps/showcase/src/main/webapp/ajax/commonInclude.jsp</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
+<p>Three ajax_xhtml templates of special interest are <code class="highlighter-rouge">head</code>, <code class="highlighter-rouge">div</code> , and <code class="highlighter-rouge">a</code>.</p>
 
 <blockquote>
-
+  <p>Especially with the ajax theme, it is important to use the <a href="dojo-head-tag.html">head</a> tag. 
+(See the <a href="ajax-head-template.html">ajax head template</a> for more information.) Without it, AJAX support may not be set 
+up properly.</p>
 </blockquote>
 
-<blockquote>
-
-</blockquote>
-
-<blockquote>
-  <p>The above sample is from Struts trunk; for 2.0.6 you should use <s:head debug="true"></s:head>.</p>
-</blockquote>
+<ul>
+  <li><a href="ajax-head-template.html">ajax head template</a></li>
+  <li><a href="ajax-div-template.html">ajax div template</a></li>
+  <li><a href="ajax-a-template.html">ajax a template</a></li>
+</ul>
 
 <blockquote>
-
+  <p>In addition to these templates, be familiar with the <a href="ajax-event-system.html">ajax event system</a> provided by 
+the framework and Dojo.</p>
 </blockquote>
 
-<p><strong>ajax tabbedPanel template</strong></p>
-
-<p>TODO: Describe the Ajax TabbedPanel template</p>
-
-<p><strong>ajax submit template</strong></p>
-
-<p>TODO: Describe the Ajax Submit template</p>
-
-
   </section>
 </article>
 
diff --git a/content/tag-developers/css-xhtml-theme.html b/content/tag-developers/css-xhtml-theme.html
index f2dd8e8..32b1695 100644
--- a/content/tag-developers/css-xhtml-theme.html
+++ b/content/tag-developers/css-xhtml-theme.html
@@ -128,149 +128,268 @@
     <a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/tag-developers/css-xhtml-theme.md" title="Edit this page on GitHub">Edit on GitHub</a>
     <h1 id="cssxhtml-theme">css_xhtml theme</h1>
 
-<p>The css_xhtml theme provides all the basics that the <a href="#PAGE_14291">simple theme</a> provides and adds several features.</p>
-
-<ul>
-  <li>Standard two-column CSS-based layout, using</li>
-</ul>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>&lt;div&gt;
-</code></pre>
-</div>
-<p>for the HTML <a href="#PAGE_14248">Struts Tags</a> (<a href="#PAGE_14201">form</a>, <a href="#PAGE_13912">textfield</a>, <a href="#PAGE_14127">select</a>, etc)</p>
-
-<ul>
-  <li>
-    <p>Labels for each of the HTML <a href="#PAGE_14248">Struts Tags</a>, placed according to the CSS stylesheet</p>
-  </li>
-  <li>
-    <p><em>Validation</em>  and error reporting</p>
-  </li>
-  <li>
-    <p><em>Pure JavaScript Client Side Validation</em>  using 100% JavaScript on the browser</p>
-  </li>
-</ul>
-
-<p><strong>Wrapping the Simple Theme</strong></p>
-
-<p>The xhtml theme uses the “wrapping” technique described by <a href="#PAGE_13962">Extending Themes</a>. Let’s look at how the HTML tags are wrapped by a standard header and footer. For example, in the <a href="#PAGE_13912">textfield</a> template,</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>text.ftl
-</code></pre>
-</div>
-<p>, the</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>controlheader.ftl
-</code></pre>
-</div>
-<p>and</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>controlfooter.ftl
-</code></pre>
-</div>
-<p>templates are wrapped around the simple template.</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/simple/text.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<p><strong>CSS XHTML theme header</strong></p>
-
-<p>The header used by the HTML tags in the css_xhtml theme is complicated. Unlike the <a href="#PAGE_13834">xhtml theme</a>, the CSS theme does not use a</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>labelposition
-</code></pre>
-</div>
-<p>attribute. Instead, the label position is defined by CSS rules.</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/css_xhtml/controlheader.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<p>Note that the</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>fieldErrors
-</code></pre>
-</div>
-<p>, usually caused by <em>Validation</em> , are displayed in a</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>div
-</code></pre>
-</div>
-<p>block before the element is displayed.</p>
-
-<p><strong>CSS XHTML theme footer</strong></p>
-
-<p>And the</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>controlfooter.ftl
-</code></pre>
-</div>
-<p>contents:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/css_xhtml/controlfooter.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<p><strong>Special Interest</strong></p>
-
-<p>Two css_xhtml templates of special interest are</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>head
-</code></pre>
-</div>
-<p>and</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>form
-</code></pre>
-</div>
-<p>.</p>
-
-<p><strong>Head template</strong></p>
-
-<p>The css_xhtml <a href="#PAGE_13997">head</a> template is similar to the xhtml head template. The difference is that CSS is used to provide the layout.</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/css_xhtml/head.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<p>The head includes a style sheet.</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/css_xhtml/styles.css</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<p><strong>Form template</strong></p>
-
-<p>The css_xhtml <a href="#PAGE_14201">form</a> template is almost exactly like the <em>xhtml form template</em> , including support for <em>Pure JavaScript Client Side Validation</em> . The difference is that instead of printing out an opening and closing</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>&lt;table&gt;
-</code></pre>
-</div>
-<p>element, there are no elements. Instead, the CSS rules for the individual HTML tags are assumed to handle all display logic. However, as noted, client-side validation is still supported.</p>
-
-<p><strong>css_xhtml form template</strong></p>
-
-<p>The css_xhtml <a href="#PAGE_14201">form</a> template is almost exactly like the <em>xhtml form template</em> , including support for <em>Pure JavaScript Client Side Validation</em> . The only difference is that instead of printing out an opening and closing</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>&lt;table&gt;
-</code></pre>
-</div>
-<p>element, there are no elements. Instead, the CSS rules for the individual HTML tags are assumed to handle all dislay logic. However, as noted, client side validation is still supported.</p>
-
-<p><strong>css_xhtml head template</strong></p>
-
-<p>The css_xhtml <a href="#PAGE_13997">head</a> template is very similar to the <em>xhtml head template</em> . The only difference is that CSS that is included is specifically designed to provide the layout for the <a href="#PAGE_14215">css_xhtml theme</a>. The contents of <strong>head.ftl</strong> are:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/css_xhtml/head.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<p>The contents of <strong>styles.css</strong> are:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/css_xhtml/styles.css</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
+<p>The <em>css_xhtml theme</em> provides all the basics that the <a href="simple-theme.html">simple theme</a> provides and adds several features.</p>
+
+<p>_ Standard two-column CSS-based layout, using <code class="highlighter-rouge">&lt;div&gt;</code> for the HTML <a href="struts-tags.html">Struts Tags</a> (<a href="form-tag.htmk">form</a>, 
+  <a href="textfield-tag.html">textfield</a>, <a href="select-tag.html">select</a>, etc)
+- Labels for each of the HTML <a href="struts-tags.html">Struts Tags</a>, placed according to the CSS stylesheet
+- <a href="../core-developers/validation.html">Validation</a> and error reporting
+- <a href="../core-developers/pure-java-script-client-side-validation.html">Pure JavaScript Client Side Validation</a> using 100% 
+  JavaScript on the browser</p>
+
+<h2 id="wrapping-the-simple-theme">Wrapping the Simple Theme</h2>
+
+<p>The xhtml theme uses the “wrapping” technique described by <a href="extending-themes.html">Extending Themes</a>. Let’s look at how 
+the HTML tags are wrapped by a standard header and footer. For example, in the <a href="textfield-tag.html">textfield</a> template, 
+<code class="highlighter-rouge">text.ftl</code>, the <code class="highlighter-rouge">controlheader.ftl</code> and <code class="highlighter-rouge">controlfooter.ftl</code> templates are wrapped around the simple template.</p>
+
+<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
+/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+--&gt;
+&lt;input&lt;#rt/&gt;
+ type="${(parameters.type!"text")?html}"&lt;#rt/&gt;
+ name="${(parameters.name!"")?html}"&lt;#rt/&gt;
+&lt;#if parameters.get("size")?has_content&gt;
+ size="${parameters.get("size")?html}"&lt;#rt/&gt;
+&lt;/#if&gt;
+&lt;#if parameters.maxlength?has_content&gt;
+ maxlength="${parameters.maxlength?html}"&lt;#rt/&gt;
+&lt;/#if&gt;
+&lt;#if parameters.nameValue??&gt;
+ value="${parameters.nameValue?html}"&lt;#rt/&gt;
+&lt;/#if&gt;
+&lt;#if parameters.disabled!false&gt;
+ disabled="disabled"&lt;#rt/&gt;
+&lt;/#if&gt;
+&lt;#if parameters.readonly!false&gt;
+ readonly="readonly"&lt;#rt/&gt;
+&lt;/#if&gt;
+&lt;#if parameters.tabindex?has_content&gt;
+ tabindex="${parameters.tabindex?html}"&lt;#rt/&gt;
+&lt;/#if&gt;
+&lt;#if parameters.id?has_content&gt;
+ id="${parameters.id?html}"&lt;#rt/&gt;
+&lt;/#if&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/css.ftl" /&gt;
+&lt;#if parameters.title?has_content&gt;
+ title="${parameters.title?html}"&lt;#rt/&gt;
+&lt;/#if&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/scripting-events.ftl" /&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/common-attributes.ftl" /&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/dynamic-attributes.ftl" /&gt;
+/&gt;</code></pre></figure>
+
+<h2 id="css-xhtml-theme-header">CSS XHTML theme header</h2>
+
+<p>The header used by the HTML tags in the css_xhtml theme is complicated. Unlike the <a href="xhtml-theme.html">xhtml theme</a>, 
+the CSS theme does not use a <code class="highlighter-rouge">labelposition</code> attribute. Instead, the label position is defined by CSS rules.</p>
+
+<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
+/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+--&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/controlheader-core.ftl"&gt;
+&lt;#if !parameters.labelposition?? &amp;&amp; (parameters.form.labelposition)??&gt;
+&lt;#assign labelpos = parameters.form.labelposition/&gt;
+&lt;#elseif parameters.labelposition??&gt;
+&lt;#assign labelpos = parameters.labelposition/&gt;
+&lt;/#if&gt;
+&lt;#if (labelpos!"top") == 'top'&gt;
+&lt;div &lt;#rt/&gt;
+&lt;#else&gt;
+&lt;span &lt;#rt/&gt;
+&lt;/#if&gt;
+&lt;#if parameters.id??&gt;id="wwctrl_${parameters.id}"&lt;#rt/&gt;&lt;/#if&gt; class="wwctrl"&gt;
+    </code></pre></figure>
+
+<p>Note that the <code class="highlighter-rouge">fieldErrors</code>, usually caused by <a href="../core-developers/validation.html">Validation</a>, are displayed in a <code class="highlighter-rouge">div</code>
+block before the element is displayed.</p>
+
+<h2 id="css-xhtml-theme-footer">CSS XHTML theme footer</h2>
+
+<p>And the <code class="highlighter-rouge">controlfooter.ftl</code> contents:</p>
+
+<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
+/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+--&gt;
+${parameters.after!}&lt;#t/&gt;
+    &lt;#lt/&gt;
+&lt;#if !parameters.labelposition?? &amp;&amp; (parameters.form.labelposition)??&gt;
+&lt;#assign labelpos = parameters.form.labelposition/&gt;
+&lt;#elseif parameters.labelposition??&gt;
+&lt;#assign labelpos = parameters.labelposition/&gt;
+&lt;/#if&gt;
+&lt;#if (labelpos!"top") == 'top'&gt;
+&lt;/div&gt; &lt;#rt/&gt;
+&lt;#else&gt;
+&lt;/span&gt; &lt;#rt/&gt;
+&lt;/#if&gt;
+&lt;#if (parameters.errorposition!"top") == 'bottom'&gt;
+&lt;#assign hasFieldErrors = parameters.name?? &amp;&amp; fieldErrors?? &amp;&amp; fieldErrors[parameters.name]??/&gt;
+&lt;#if hasFieldErrors&gt;
+&lt;div &lt;#rt/&gt;&lt;#if parameters.id??&gt;id="wwerr_${parameters.id}"&lt;#rt/&gt;&lt;/#if&gt; class="wwerr"&gt;
+&lt;#list fieldErrors[parameters.name] as error&gt;
+    &lt;div&lt;#rt/&gt;
+    &lt;#if parameters.id??&gt;
+     errorFor="${parameters.id}"&lt;#rt/&gt;
+    &lt;/#if&gt;
+    class="errorMessage"&gt;
+             ${error?html}
+    &lt;/div&gt;&lt;#t/&gt;
+&lt;/#list&gt;
+&lt;/div&gt;&lt;#t/&gt;
+&lt;/#if&gt;
+&lt;/#if&gt;
+&lt;/div&gt;</code></pre></figure>
+
+<h2 id="special-interest">Special Interest</h2>
+
+<p>Two css_xhtml templates of special interest are <code class="highlighter-rouge">head</code> and <code class="highlighter-rouge">form</code>.</p>
+
+<h3 id="head-template">Head template</h3>
+
+<p>The css_xhtml <a href="head-tag.html">head</a> template is similar to the xhtml head template. The difference is that CSS is used 
+to provide the layout. The contents of <strong>head.ftl</strong> are:</p>
+
+<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
+/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+--&gt;
+&lt;link rel="stylesheet" href="&lt;@s.url value='/struts/css_xhtml/styles.css' includeParams='none' encode='false' /&gt;" type="text/css" /&gt;
+&lt;#include "/${parameters.templateDir}/simple/head.ftl" /&gt;</code></pre></figure>
+
+<p>The head includes a style sheet. The contents of <strong>styles.css</strong> are:</p>
+
+<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="c">/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */</span>
+
+<span class="nc">.wwFormTable</span> <span class="p">{}</span>
+<span class="nc">.label</span> <span class="p">{</span>
+    <span class="nl">font-style</span><span class="p">:</span><span class="nb">italic</span><span class="p">;</span>
+    <span class="nl">float</span><span class="p">:</span><span class="nb">left</span><span class="p">;</span>
+    <span class="nl">width</span><span class="p">:</span><span class="m">30%</span>
+<span class="p">}</span>
+<span class="nc">.errorLabel</span> <span class="p">{</span><span class="nl">font-style</span><span class="p">:</span><span class="nb">italic</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;</span> <span class="p">}</span>
+<span class="nc">.errorMessage</span> <span class="p">{</span><span class="nl">font-weight</span><span class="p">:</span><span class="nb">bold</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;</span> <span class="p">}</span>
+<span class="nc">.checkboxLabel</span> <span class="p">{}</span>
+<span class="nc">.checkboxErrorLabel</span> <span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;</span> <span class="p">}</span>
+<span class="nc">.required</span> <span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;}</span>
+
+<span class="nc">.tdTransferSelect</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">center</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">middle</span><span class="p">;}</span>
+<span class="nc">.tdLabelTop</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">left</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;}</span>
+<span class="nc">.tdCheckboxLabel</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">right</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;}</span>
+<span class="nc">.tdCheckboxInput</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">left</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;}</span>
+<span class="nc">.tdCheckboxErrorMessage</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">left</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;}</span>
+<span class="nc">.tdErrorMessage</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">center</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;}</span>
+<span class="nc">.formButton</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">right</span><span class="p">;}</span></code></pre></figure>
+
+<h3 id="form-template">Form template</h3>
+
+<p>The css_xhtml <a href="form-tag.html">form</a> template is almost exactly like the <em>xhtml form template</em> , including support for 
+<a href="../core-developers/pure-java-script-client-side-validation.html">Pure JavaScript Client Side Validation</a>. The difference 
+is that instead of printing out an opening and closing <code class="highlighter-rouge">&lt;table&gt;</code> element, there are no elements. Instead, the CSS rules 
+for the individual HTML tags are assumed to handle all display logic. However, as noted, client-side validation is still 
+supported.</p>
+
+<h3 id="cssxhtml-form-template">css_xhtml form template</h3>
+
+<p>The css_xhtml <a href="form-tag.html">form</a> template is almost exactly like the <em>xhtml form template</em> , including support for 
+<a href="../core-developers/pure-java-script-client-side-validation.html">Pure JavaScript Client Side Validation</a>. The only 
+difference is that instead of printing out an opening and closing <code class="highlighter-rouge">&lt;table&gt;</code> element, there are no elements. Instead, 
+the CSS rules for the individual HTML tags are assumed to handle all display logic. However, as noted, client side 
+validation is still supported.</p>
 
   </section>
 </article>
diff --git a/content/tag-developers/simple-theme.html b/content/tag-developers/simple-theme.html
index 16c93ec..59d1b34 100644
--- a/content/tag-developers/simple-theme.html
+++ b/content/tag-developers/simple-theme.html
@@ -126,45 +126,59 @@
 <article class="container">
   <section class="col-md-12">
     <a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/tag-developers/simple-theme.md" title="Edit this page on GitHub">Edit on GitHub</a>
-    <h1 id="simple-theme">simple theme</h1>
-
-<p>The simple theme renders “bare bones” HTML elements. The simple theme is most often used as a starting point for other themes. (See <a href="#PAGE_13962">Extending Themes</a> for more.)</p>
-
-<p>For example, the <a href="#PAGE_13912">textfield</a> tag renders the HTML</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>&lt;input/&gt;
-</code></pre>
-</div>
-<p>tag without a label, validation, error reporting, or any other formatting or functionality.</p>
-
-<table>
-  <tbody>
-    <tr>
-      <td>Both the <a href="#PAGE_13834">xhtml theme</a> and <a href="#PAGE_14215">css_xhtml theme</a> extend the simple theme. Look to them for examples of how to build on the foundation laid by the simple theme.</td>
-    </tr>
-  </tbody>
-</table>
-
-<table>
-  <tbody>
-    <tr>
-    </tr>
-  </tbody>
-</table>
-
-<p><strong>Head Tag</strong></p>
-
-<p>The simple theme <a href="#PAGE_13997">head</a> template prints out a javascript include required for the <a href="#PAGE_14274">datetimepicker</a> tag to render properly.</p>
-
-<p><strong>simple head template</strong></p>
-
-<p>The <a href="#PAGE_14291">simple theme</a><a href="#PAGE_13997">head</a> template only does one thing: it loads the minimal Ajax/Dojo support so that tags can import Dojo widgets easily.</p>
-
-<p>The source of the simple head.ftl template is:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/simple/head.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
+    <h1 class="no_toc" id="simple-theme">simple theme</h1>
+
+<ul id="markdown-toc">
+  <li><a href="#head-tag" id="markdown-toc-head-tag">Head Tag</a></li>
+  <li><a href="#simple-head-template" id="markdown-toc-simple-head-template">simple head template</a></li>
+</ul>
+
+<p>The simple theme renders “bare bones” HTML elements. The simple theme is most often used as a starting point for other 
+themes. (See <a href="extending-themes.html">Extending Themes</a> for more.)</p>
+
+<p>For example, the <a href="textfield-tag.html">textfield</a> tag renders the HTML <code class="highlighter-rouge">&lt;input/&gt;</code> tag without a label, validation, error 
+reporting, or any other formatting or functionality.</p>
+
+<blockquote>
+  <p>Both the <a href="xhtml-theme.html">xhtml theme</a> and <a href="css-xhtml-theme.xhtml">css_xhtml theme</a> extend the simple theme. Look 
+to them for examples of how to build on the foundation laid by the simple theme.</p>
+</blockquote>
+
+<h2 id="head-tag">Head Tag</h2>
+
+<p>The simple theme <a href="head-tag.html">head</a> template prints out a javascript include required 
+for the <a href="dojo-datetimepicker-tag.html">datetimepicker</a> tag to render properly.</p>
+
+<h2 id="simple-head-template">simple head template</h2>
+
+<p>The <a href="simple-theme.html">simple theme</a><a href="head-tag.html">head</a> template only does one thing: it loads the minimal 
+Ajax/Dojo support so that tags can import Dojo widgets easily.</p>
+
+<p>The source of the simple <code class="highlighter-rouge">head.ftl</code> template is:</p>
+
+<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
+/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+--&gt;
+&lt;script src="${base}/struts/utils.js" type="text/javascript"&gt;&lt;/script&gt;</code></pre></figure>
 
 
   </section>
diff --git a/content/tag-developers/xhtml-theme.html b/content/tag-developers/xhtml-theme.html
index 27ca8d4..4ca0cce 100644
--- a/content/tag-developers/xhtml-theme.html
+++ b/content/tag-developers/xhtml-theme.html
@@ -126,221 +126,484 @@
 <article class="container">
   <section class="col-md-12">
     <a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/tag-developers/xhtml-theme.md" title="Edit this page on GitHub">Edit on GitHub</a>
-    <h1 id="xhtml-theme">xhtml theme</h1>
-
-<p>The xhtml provides all the basics that the <a href="#PAGE_14291">simple theme</a> provides and adds several features.</p>
-
-<ul>
-  <li>
-    <p>Standard two-column table layout for the HTML <a href="#PAGE_14248">Struts Tags</a> (<a href="#PAGE_14201">form</a>, <a href="#PAGE_13912">textfield</a>, <a href="#PAGE_14127">select</a>, and so forth)</p>
-  </li>
-  <li>
-    <p>Labels for each of the HTML <a href="#PAGE_14248">Struts Tags</a> on the left hand side (or top, depending on the</p>
+    <h1 class="no_toc" id="xhtml-theme">xhtml theme</h1>
+
+<ul id="markdown-toc">
+  <li><a href="#wrapping-the-simple-theme" id="markdown-toc-wrapping-the-simple-theme">Wrapping the Simple Theme</a></li>
+  <li><a href="#xhtml-theme-header" id="markdown-toc-xhtml-theme-header">XHTML Theme Header</a></li>
+  <li><a href="#xhtml-theme-footer" id="markdown-toc-xhtml-theme-footer">XHTML Theme Footer</a></li>
+  <li><a href="#special-interest" id="markdown-toc-special-interest">Special Interest</a>    <ul>
+      <li><a href="#xhtml-head-template" id="markdown-toc-xhtml-head-template">xhtml head template</a></li>
+      <li><a href="#form-template" id="markdown-toc-form-template">form template</a></li>
+      <li><a href="#xhtml-form-template" id="markdown-toc-xhtml-form-template">xhtml form template</a></li>
+    </ul>
   </li>
 </ul>
 
-<div class="highlighter-rouge"><pre class="highlight"><code>labelposition
-</code></pre>
-</div>
-<p>attribute)</p>
+<p>The xhtml provides all the basics that the <a href="simple-theme.html">simple theme</a> provides and adds several features.</p>
 
 <ul>
-  <li>
-    <p><em>Validation</em>  and error reporting</p>
-  </li>
-  <li>
-    <p><em>Pure JavaScript Client Side Validation</em>  using 100% JavaScript on the browser</p>
-  </li>
+  <li>Standard two-column table layout for the HTML <a href="struts-tags.html">Struts Tags</a> (<a href="form-tag.html">form</a>, 
+<a href="textfield-tag.html">textfield</a>, <a href="select-tag.html">select</a>, and so forth)</li>
+  <li>Labels for each of the HTML <a href="struts-tags.html">Struts Tags</a> on the left hand side (or top, depending on 
+the <code class="highlighter-rouge">labelposition</code> attribute)</li>
+  <li><a href="../core-developers/validation.html">Validation</a> and error reporting</li>
+  <li><a href="../core-developers/pure-java-script-client-side-validation.html">Pure JavaScript Client Side Validation</a> using 
+100% JavaScript on the browser</li>
 </ul>
 
-<p><strong>Wrapping the Simple Theme</strong></p>
-
-<p>The xhtml theme uses the “wrapping” technique described by <a href="#PAGE_13962">Extending Themes</a>. Let’s look at how the HTML tags are wrapped by a standard header and footer. For example, in the</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>text.ftl
-</code></pre>
-</div>
-<p>template, the</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>controlheader.ftl
-</code></pre>
-</div>
-<p>and</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>controlfooter.ftl
-</code></pre>
-</div>
-<p>templates are wrapped around the simple template.</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/xhtml/text.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<p>(?)  The</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>controlheader.ftl
-</code></pre>
-</div>
-<p>is referenced using ${parameters.theme} so that the code can be reused by the <a href="#PAGE_14205">ajax theme</a>.</p>
-
-<p><strong>XHTML Theme Header</strong></p>
-
-<p>Now let’s look at the</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>controlheader.ftl
-</code></pre>
-</div>
-<p>and</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>controlheader-core.ftl
-</code></pre>
-</div>
-<p>. Again, these are split up for easy re-use with the <a href="#PAGE_14205">ajax theme</a>) contents:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/xhtml/controlheader.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/xhtml/controlheader-core.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<p>The header used by the HTML tags in the xhtml theme is complicated. However, a close look reveals that the logic produces two behaviors: either a two-column format or a two-row format. Generally the two-column approach is what we want, so that is the default option. To use the two-row approach, change the</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>labelposition
-</code></pre>
-</div>
-<p>parameter to</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>top
-</code></pre>
-</div>
-<p>.</p>
-
-<table>
-  <tbody>
-    <tr>
-      <td>The fieldErrors, usually caused by <em>Validation</em> , are printed out as a row above the HTML form element. Some people prefer that the errors display elsewhere, such as in a third column. If you wish to place these elsehwere, overriding the headers is easy, allowing you to continue to use the other features provided by this theme. See <a href="#PAGE_13817">Template Loading</a> for more information on how to do this.</td>
-    </tr>
-  </tbody>
-</table>
-
-<table>
-  <tbody>
-    <tr>
-    </tr>
-  </tbody>
-</table>
-
-<p><strong>XHTML Theme Footer</strong></p>
-
-<p>The primary objective of</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>controlfooter.ftl
-</code></pre>
-</div>
-<p>is to close the table. But, before the table closes, the template checks for an</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>after
-</code></pre>
-</div>
-<p>parameter.</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/xhtml/controlfooter.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<p>While “after” isn’t an attribute supported by any of the <a href="#PAGE_14248">Struts Tags</a>, if you are using <a href="#PAGE_14294">FreeMarker Tags</a>, <a href="#PAGE_13950">Velocity Tags</a>, or the <a href="#PAGE_13825">param</a> tag in any template language, you can add an</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>after
-</code></pre>
-</div>
-<p>parameter to place any content you like after the <a href="#PAGE_14291">simple theme</a> template renders. The</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>after
-</code></pre>
-</div>
-<p>attribute makes it easier to fine-tune HTML forms for your specific environment.</p>
-
-<p><strong>Special Interest</strong></p>
-
-<p>Two xhtml templates of special interest are</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>head
-</code></pre>
-</div>
-<p>and</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>form
-</code></pre>
-</div>
-<p>.</p>
-
-<p><strong>head template</strong></p>
-
-<p>The xhtml <a href="#PAGE_13997">head</a> template extends the <em>simple head template</em>  and provides an additional CSS that helps render the  form elements.</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/xhtml/head.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<p>The head template imports a style sheet.</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/xhtml/styles.css</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<p><strong>form template</strong></p>
-
-<p>The xhtml form template sets up the wrapping table around all the other  form elements. In addition to creating this wrapping table, the opening and closing templates also, if the</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>validate
-</code></pre>
-</div>
-<p>parameter is set to true, enable <em>Pure JavaScript Client Side Validation</em> .</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/xhtml/form.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<p>The closing template,</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code>form-close.ftl*
-</code></pre>
-</div>
-<p>:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/xhtml/form-close.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<p><strong>xhtml form template</strong></p>
-
-<p>The xhtml form template sets up the wrapping table around all the other <a href="#PAGE_13834">xhtml theme</a> form elements. In addition to creating this wrapping table, the opening and closing templates also, if the <em>validate</em>  parameter is set to true, enable <em>Pure JavaScript Client Side Validation</em> . See the <strong>form.ftl</strong> contents:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/xhtml/form.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
+<h2 id="wrapping-the-simple-theme">Wrapping the Simple Theme</h2>
+
+<p>The xhtml theme uses the “wrapping” technique described by <a href="extending-themes.html">Extending Themes</a>. Let’s look at how 
+the HTML tags are wrapped by a standard header and footer. For example, in the <code class="highlighter-rouge">text.ftl</code> template, the <code class="highlighter-rouge">controlheader.ftl</code>
+and <code class="highlighter-rouge">controlfooter.ftl</code> templates are wrapped around the simple template.</p>
+
+<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
+/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+--&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/controlheader.ftl" /&gt;
+&lt;#include "/${parameters.templateDir}/simple/text.ftl" /&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/controlfooter.ftl" /&gt;</code></pre></figure>
+
+<blockquote>
+  <p>The <code class="highlighter-rouge">controlheader.ftl</code> is referenced using <code class="highlighter-rouge">${parameters.theme}</code> so that the code can be reused 
+by the <a href="ajax-theme.html">ajax theme</a>.</p>
+</blockquote>
+
+<h2 id="xhtml-theme-header">XHTML Theme Header</h2>
+
+<p>Now let’s look at the <code class="highlighter-rouge">controlheader.ftl</code> and <code class="highlighter-rouge">controlheader-core.ftl</code>. Again, these are split up for easy re-use with 
+the <a href="ajax-theme.html">ajax theme</a>) contents:</p>
+
+<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
+/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+--&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/controlheader-core.ftl" /&gt;
+    &lt;td 
+        &lt;#if parameters.align?? &gt;
+            class="align-${parameters.align?html}" 
+         &lt;#else &gt;
+            class="tdInput"            
+        &lt;/#if&gt;
+&gt;&lt;#t/&gt;</code></pre></figure>
+
+<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
+/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+--&gt;
+&lt;#--
+	Only show message if errors are available.
+	This will be done if ActionSupport is used.
+--&gt;
+&lt;#assign hasFieldErrors = parameters.name?? &amp;&amp; fieldErrors?? &amp;&amp; fieldErrors[parameters.name]??/&gt;
+&lt;#if (parameters.errorposition!"top") == 'top'&gt;
+&lt;#if hasFieldErrors&gt;
+&lt;#list fieldErrors[parameters.name] as error&gt;
+&lt;tr errorFor="${parameters.id}"&gt;
+    &lt;td class="tdErrorMessage" colspan="2"&gt;&lt;#rt/&gt;
+        &lt;span class="errorMessage"&gt;${error?html}&lt;/span&gt;&lt;#t/&gt;
+    &lt;/td&gt;&lt;#lt/&gt;
+&lt;/tr&gt;
+&lt;/#list&gt;
+&lt;/#if&gt;
+&lt;/#if&gt;
+&lt;#if !parameters.labelposition?? &amp;&amp; (parameters.form.labelposition)??&gt;
+&lt;#assign labelpos = parameters.form.labelposition/&gt;
+&lt;#elseif parameters.labelposition??&gt;
+&lt;#assign labelpos = parameters.labelposition/&gt;
+&lt;/#if&gt;
+&lt;#--
+	if the label position is top,
+	then give the label it's own row in the table
+--&gt;
+&lt;tr&gt;
+&lt;#if (labelpos!"") == 'top'&gt;
+    &lt;td class="tdLabelTop" colspan="2"&gt;&lt;#rt/&gt;
+&lt;#else&gt;
+    &lt;td class="tdLabel"&gt;&lt;#rt/&gt;
+&lt;/#if&gt;
+&lt;#if parameters.label??&gt;
+    &lt;label &lt;#t/&gt;
+&lt;#if parameters.id??&gt;
+        for="${parameters.id?html}" &lt;#t/&gt;
+&lt;/#if&gt;
+&lt;#if hasFieldErrors&gt;
+        class="errorLabel"&lt;#t/&gt;
+&lt;#else&gt;
+        class="label"&lt;#t/&gt;
+&lt;/#if&gt;
+    &gt;&lt;#t/&gt;
+&lt;#if (parameters.required!false) &amp;&amp; ((parameters.requiredPosition!"right") != 'right')&gt;
+        &lt;span class="required"&gt;*&lt;/span&gt;&lt;#t/&gt;
+&lt;/#if&gt;
+${parameters.label?html}&lt;#t/&gt;
+&lt;#if (parameters.required!false) &amp;&amp; ((parameters.requiredPosition!"right") == 'right')&gt;
+ &lt;span class="required"&gt;*&lt;/span&gt;&lt;#t/&gt;
+&lt;/#if&gt;
+${parameters.labelseparator!":"?html}&lt;#t/&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/tooltip.ftl" /&gt;
+&lt;/label&gt;&lt;#t/&gt;
+&lt;/#if&gt;
+    &lt;/td&gt;&lt;#lt/&gt;
+&lt;#-- add the extra row --&gt;
+&lt;#if (labelpos!"") == 'top'&gt;
+&lt;/tr&gt;
+&lt;tr&gt;
+&lt;/#if&gt;</code></pre></figure>
+
+<p>The header used by the HTML tags in the xhtml theme is complicated. However, a close look reveals that the logic produces 
+two behaviors: either a two-column format or a two-row format. Generally the two-column approach is what we want, so that 
+is the default option. To use the two-row approach, change the <code class="highlighter-rouge">labelposition</code> parameter to <code class="highlighter-rouge">top</code>.</p>
+
+<blockquote>
+  <p>The <code class="highlighter-rouge">fieldErrors</code>, usually caused by <a href="../core-developers/validation.html">Validation</a>, are printed out as a row above 
+the HTML form element. Some people prefer that the errors display elsewhere, such as in a third column. If you wish 
+to place these elsehwere, overriding the headers is easy, allowing you to continue to use the other features provided 
+by this theme. See <a href="template-loading.html">Template Loading</a> for more information on how to do this.</p>
+</blockquote>
+
+<h2 id="xhtml-theme-footer">XHTML Theme Footer</h2>
+
+<p>The primary objective of <code class="highlighter-rouge">controlfooter.ftl</code> is to close the table. But, before the table closes, the template checks 
+for an <code class="highlighter-rouge">after</code> parameter.</p>
+
+<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
+/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+--&gt;
+${parameters.after!}&lt;#t/&gt;
+    &lt;/td&gt;&lt;#lt/&gt;
+&lt;/tr&gt;
+&lt;#if (parameters.errorposition!"top") == 'bottom'&gt;
+&lt;#assign hasFieldErrors = parameters.name?? &amp;&amp; fieldErrors?? &amp;&amp; fieldErrors[parameters.name]??/&gt;
+&lt;#if hasFieldErrors&gt;
+&lt;#list fieldErrors[parameters.name] as error&gt;
+&lt;tr errorFor="${parameters.id}"&gt;
+    &lt;td class="tdErrorMessage" colspan="2"&gt;&lt;#rt/&gt;
+        &lt;span class="errorMessage"&gt;${error?html}&lt;/span&gt;&lt;#t/&gt;
+    &lt;/td&gt;&lt;#lt/&gt;
+&lt;/tr&gt;
+&lt;/#list&gt;
+&lt;/#if&gt;
+&lt;/#if&gt;</code></pre></figure>
+
+<p>While <code class="highlighter-rouge">after</code> isn’t an attribute supported by any of the <a href="struts-tags.html">Struts Tags</a>, if you are using 
+<a href="freemarker-tags.html">FreeMarker Tags</a>, <a href="velocity-tags.html">Velocity Tags</a>, or the <a href="param-tag.html">param</a> tag in any 
+template language, you can add an <code class="highlighter-rouge">after</code> parameter to place any content you like after the <a href="simple-theme.html">simple theme</a> 
+template renders. The <code class="highlighter-rouge">after</code> attribute makes it easier to fine-tune HTML forms for your specific environment.</p>
+
+<h2 id="special-interest">Special Interest</h2>
+
+<p>Two xhtml templates of special interest are <code class="highlighter-rouge">head</code> and <code class="highlighter-rouge">form</code>.</p>
+
+<h3 id="xhtml-head-template">xhtml head template</h3>
+
+<p>The xhtml <a href="head-tag.html">head</a> template extends the <em>simple head template</em> and provides an additional CSS that helps 
+render the form elements.</p>
+
+<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
+/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+--&gt;
+&lt;link rel="stylesheet" href="&lt;@s.url value='/struts/xhtml/styles.css' includeParams='none' encode='false' /&gt;" type="text/css"/&gt;
+&lt;#include "/${parameters.templateDir}/simple/head.ftl" /&gt;</code></pre></figure>
+
+<p>The head template imports a style sheet. The contents of <strong>styles.css</strong> are:</p>
+
+<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="c">/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */</span>
+
+<span class="nc">.wwFormTable</span> <span class="p">{}</span>
+<span class="nc">.label</span> <span class="p">{</span><span class="nl">font-style</span><span class="p">:</span><span class="nb">italic</span><span class="p">;</span> <span class="p">}</span>
+<span class="nc">.errorLabel</span> <span class="p">{</span><span class="nl">font-style</span><span class="p">:</span><span class="nb">italic</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;</span> <span class="p">}</span>
+<span class="nc">.errorMessage</span> <span class="p">{</span><span class="nl">font-weight</span><span class="p">:</span><span class="nb">bold</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;</span> <span class="p">}</span>
+<span class="nc">.checkboxLabel</span> <span class="p">{}</span>
+<span class="nc">.checkboxErrorLabel</span> <span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;</span> <span class="p">}</span>
+<span class="nc">.required</span> <span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;}</span>
+<span class="nc">.tdLabel</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">right</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;</span> <span class="p">}</span>
+
+<span class="nc">.tdTransferSelect</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">center</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">middle</span><span class="p">;}</span>
+<span class="nc">.tdLabelTop</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">left</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;}</span>
+<span class="nc">.tdCheckboxLabel</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">right</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;}</span>
+<span class="nc">.tdCheckboxInput</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">left</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;}</span>
+<span class="nc">.tdCheckboxErrorMessage</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">left</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;}</span>
+<span class="nc">.tdErrorMessage</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">center</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;}</span>
+<span class="nc">.formButton</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">right</span><span class="p">;}</span>
+<span class="nc">.tdInput</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">left</span><span class="p">;}</span>
+
+
+<span class="nc">.align-center</span><span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">center</span><span class="p">;}</span>
+<span class="nc">.align-right</span><span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">right</span><span class="p">;}</span>
+<span class="nc">.align-left</span><span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">left</span><span class="p">;}</span>
+<span class="nc">.align-justify</span><span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">justify</span><span class="p">;}</span></code></pre></figure>
+
+<h3 id="form-template">form template</h3>
+
+<p>The xhtml form template sets up the wrapping table around all the other  form elements. In addition to creating this 
+wrapping table, the opening and closing templates also, if the <code class="highlighter-rouge">validate</code> parameter is set to true, enable 
+<a href="../core-developers/pure-java-script-client-side-validation.html">Pure JavaScript Client Side Validation</a>.</p>
+
+<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
+/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+--&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/form-validate.ftl" /&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/form-common.ftl" /&gt;
+&lt;#if (parameters.validate!false)&gt;
+  onreset="${parameters.onreset!'clearErrorMessages(this);clearErrorLabels(this);'}"
+&lt;#else&gt;
+  &lt;#if parameters.onreset??&gt;
+  onreset="${parameters.onreset?html}"
+  &lt;/#if&gt;
+&lt;/#if&gt;
+&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/control.ftl" /&gt;</code></pre></figure>
+
+<p>The closing template, <code class="highlighter-rouge">form-close.ftl</code>:</p>
+
+<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
+/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+--&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/control-close.ftl" /&gt;
+&lt;#include "/${parameters.templateDir}/simple/form-close.ftl" /&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/form-close-validate.ftl" /&gt;
+&lt;#if parameters.focusElement??&gt;
+&lt;script type="text/javascript"&gt;
+    StrutsUtils.addOnLoad(function() {
+        var element = document.getElementById("${parameters.focusElement?html}");
+        if(element) {
+            element.focus();
+        }
+    });
+&lt;/script&gt;
+&lt;/#if&gt;</code></pre></figure>
+
+<h3 id="xhtml-form-template">xhtml form template</h3>
+
+<p>The xhtml form template sets up the wrapping table around all the other <a href="xhtml-theme.html">xhtml theme</a> form elements. 
+In addition to creating this wrapping table, the opening and closing templates also, if the <code class="highlighter-rouge">validate</code> parameter is set 
+to <code class="highlighter-rouge">true</code>, enable <a href="../core-developers/pure-java-script-client-side-validation.htmk">Pure JavaScript Client Side Validation</a>.</p>
+
+<p>See the <strong>form.ftl</strong> contents:</p>
+
+<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
+/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+--&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/form-validate.ftl" /&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/form-common.ftl" /&gt;
+&lt;#if (parameters.validate!false)&gt;
+  onreset="${parameters.onreset!'clearErrorMessages(this);clearErrorLabels(this);'}"
+&lt;#else&gt;
+  &lt;#if parameters.onreset??&gt;
+  onreset="${parameters.onreset?html}"
+  &lt;/#if&gt;
+&lt;/#if&gt;
+&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/control.ftl" /&gt;</code></pre></figure>
 
 <p>The closing template, <strong>form-close.ftl</strong>:</p>
 
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=struts2/core/src/main/resources/template/xhtml/form-close.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<p><strong>xhtml head template</strong></p>
-
-<p>The xhtml <a href="#PAGE_13997">head</a> template extends the <em>simple head template</em>  and provides an additional CSS that helps render the <a href="#PAGE_13834">xhtml theme</a> form elements. The contents of <strong>head.ftl</strong> are:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=webwork/src/java/template/xhtml/head.ftl</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
-
-<p>The contents of <strong>styles.css</strong> are:</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">snippet:id=all|lang=xml|url=webwork/src/java/template/xhtml/styles.css</span><span class="p">}</span><span class="w">
-</span></code></pre>
-</div>
+<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
+/*
+ * $Id$
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+--&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/control-close.ftl" /&gt;
+&lt;#include "/${parameters.templateDir}/simple/form-close.ftl" /&gt;
+&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/form-close-validate.ftl" /&gt;
+&lt;#if parameters.focusElement??&gt;
+&lt;script type="text/javascript"&gt;
+    StrutsUtils.addOnLoad(function() {
+        var element = document.getElementById("${parameters.focusElement?html}");
+        if(element) {
+            element.focus();
+        }
+    });
+&lt;/script&gt;
+&lt;/#if&gt;</code></pre></figure>
 
 
   </section>

-- 
To stop receiving notification emails like this one, please contact
['"commits@struts.apache.org" <commits@struts.apache.org>'].

Mime
View raw message