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 <bui...@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><input/>
-</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"><div></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"><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">/></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"><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">></span>
+ Placeholder...
+<span class="nt"></saf:div></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"><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">></span>
+ <span class="nt"><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">></span>
+ <span class="nt"><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">/></span>
+ <span class="nt"></ww:action></span>
+<span class="nt"></saf:div></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"><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">></span>
+ Placeholder...
+<span class="nt"></saf:div></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"><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">></span>
+ delay="2000"
+ updateFreq="60000"
+ Placeholder...
+<span class="nt"></saf:div></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"><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">></span>
+ Placeholder...
+<span class="nt"></saf:div></span>
+<span class="nt"><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">></span>Refresh<span
class="nt"></saf:a></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"><saf:head</span> <span class="na">theme=</span><span
class="s">"ajax"</span> <span class="nt">/></span>
+
+<span class="nt"><script </span><span class="na">type=</span><span
class="s">"text/javascript"</span><span class="nt">></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"></script></span>
+
+<span class="nt"><form</span> <span class="err">...</span> <span
class="nt">></span>
+<span class="nt"><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">/></span>
+
+<span class="nt"><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">></span>
+ Loading reports...
+<span class="nt"></saf:div></span>
+<span class="nt"></form></span>
+</code></pre>
+</div>
+
+ </section>
+</article>
+
+
+<footer class="container">
+ <div class="col-md-12">
+ Copyright © 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><input/>
+<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"><ww:head theme="ajax"/></code> , in your
HTML <code class="highlighter-rouge"><head></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"><</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.
+ */
+-->
+<span class="nt"><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">></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"><</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">></span>
+ <span class="p">,</span><span
class="nx">baseRelativePath</span><span class="p">:</span> <span
class="s2">"<@s.url value='${parameters.baseRelativePath}'
includeParams='none' encode='false' />"</span>
+ <span class="p">,</span><span class="nx">baseScriptUri</span><span
class="p">:</span> <span class="s2">"<@s.url
value='${parameters.baseRelativePath}' includeParams='none' encode='false'
/>"</span>
+ <span class="o"><</span><span class="err">#</span><span
class="k">else</span><span class="o">></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"><</span><span class="sr">/#if> </span><span
class="err">
+</span> <span class="o"><</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">></span>
+ <span class="p">,</span><span class="nx">locale</span><span
class="p">:</span> <span class="s2">"${parameters.locale}"</span>
+ <span class="o"><</span><span class="sr">/#if</span><span
class="err">>
+</span> <span class="o"><</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">></span>
+ <span class="p">,</span><span class="nx">extraLocale</span><span
class="p">:</span> <span class="p">[</span>
+ <span class="o"><</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">></span>
+ <span class="s2">"${locale}"</span><span
class="o"><</span><span class="err">#</span><span class="k">if</span> <span
class="nx">locale_has_next</span><span class="o">></span><span
class="p">,</span><span class="o"><</span><span class="sr">/#if</span><span
class="err">>
+</span> <span class="o"><</span><span
class="sr">/#list</span><span class="err">>
+</span> <span class="p">]</span>
+ <span class="o"><</span><span class="sr">/#if</span><span
class="err">>
+</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"></script></span>
+
+<span class="err"><</span>#if parameters.compressed?default(true)>
+ <span class="err"><</span>#assign dojoFile="dojo.js">
+<span class="err"><</span>#else>
+ <span class="err"><</span>#assign dojoFile="dojo.js.uncompressed.js">
+<span class="err"><</span>/#if>
+
+<span class="err"><</span>#if parameters.cache?default(true)>
+ <span class="err"><</span>#assign profile="struts_">
+<span class="err"><</span>#else>
+ <span class="err"><</span>#assign profile="">
+<span class="err"><</span>/#if>
+
+<span class="err"><</span>#if parameters.baseRelativePath?if_exists !=
"">
+ <span class="nt"><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">"<@s.url
value='${parameters.baseRelativePath}/${profile}${dojoFile}'
includeParams='none' encode='false' />"</span><span
class="nt">></script></span>
+<span class="err"><</span>#else>
+ <span class="nt"><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">></script></span>
+<span class="err"><</span>/#if>
+
+<span class="nt"><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">></script></span>
+<span class="err"><</span>#if parameters.debug?default(false)>
+<span class="nt"><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">></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"></script></span>
+<span class="err"><</span>/#if>
+<span class="nt"><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">/></span>
+
+<span class="nt"><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">></script></span>
+<span class="nt"><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">></script></span>
+<span class="nt"><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">></script></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"><s:head debug="true"/></code>.</p>
+</blockquote>
+
+ </section>
+</article>
+
+
+<footer class="container">
+ <div class="col-md-12">
+ Copyright © 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>
-<#if parameters.label?if_exists != "">
+<pre><code class="language-injectedfreemarker"><#if
parameters.label?if_exists != "">
<#include "/${parameters.templateDir}/xhtml/controlheader.ftl" />
</#if>
<#if parameters.form?exists &&
parameters.form.validate?default(false) == true>
@@ -208,410 +180,35 @@
${tag.addParameter('onblur', "validate(this);")}
</#if>
</#if>
-
-</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><div>
-</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>
-<saf:div theme="ajax" id="weather"
href="http://www.weather.com/weather?zip=97239"/>
-
-</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>
-<saf:div theme="ajax" id="weather"
href="http://www.weather.com/weather?zip=97239">
- Placeholder...
-</saf:div>
-
-</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>
-<saf:div theme="ajax" id="weather"
href="http://www.weather.com/weather?zip=97239">
- <ww:action id="weather" name="weatherBean" executeResult="true">
- <ww:param name="zip" value="97239"/>
- </ww:action>
-</saf:div>
-
-</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>
-<saf:div theme="ajax" id="weather"
href="http://www.weather.com/weather?zip=97239";
- loadingText="Loading weather information..."
- errorText="Unable to contact weather server">
- Placeholder...
-</saf:div>
-
-</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>
-<saf:div theme="ajax" id="weather"
href="http://www.weather.com/weather?zip=97239";
- loadingText="Loading weather information..."
- errorText="Unable to contact weather server">
- delay="2000"
- updateFreq="60000"
- Placeholder...
-</saf:div>
-
-</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>
-<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">
- Placeholder...
-</saf:div>
-<saf:a id="link1"
- theme="ajax"
- href="refreshWeather.action"
- notifyTopics="weather_topic,other_topic"
- errorText="An Error ocurred">Refresh</saf:a>
-
-</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>
-<saf:head theme="ajax" />
-
-<script type="text/javascript">
- function updateReports(id) {
- var reportDiv= window['reportDivId'];
- reportDiv.href = '/../reportListRemote.action?selectedId='+id;
- reportDiv.refresh();
- }
- dojo.event.topic.getTopic("updateReportsListTopic").subscribe(null,
"updateReports");
-</script>
-
-<form ... >
-<saf:select .... onchange="javascript:
dojo.event.topic.publish("updateReportsListTopic", this.value); " />
-
-<saf:div id="reportDivId" theme="ajax" href="/.../reportListRemote.action"
>
- Loading reports...
-</saf:div>
-</form>
-
-</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><ww:head
theme="ajax"/>
-</code></pre>
-</div>
-<p>, in your HTML</p>
-
-<div class="highlighter-rouge"><pre class="highlight"><code><head>
-</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><div>
-</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><table>
-</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><table>
-</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"><div></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"><#--
+/*
+ * $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.
+ */
+-->
+<input<#rt/>
+ type="${(parameters.type!"text")?html}"<#rt/>
+ name="${(parameters.name!"")?html}"<#rt/>
+<#if parameters.get("size")?has_content>
+ size="${parameters.get("size")?html}"<#rt/>
+</#if>
+<#if parameters.maxlength?has_content>
+ maxlength="${parameters.maxlength?html}"<#rt/>
+</#if>
+<#if parameters.nameValue??>
+ value="${parameters.nameValue?html}"<#rt/>
+</#if>
+<#if parameters.disabled!false>
+ disabled="disabled"<#rt/>
+</#if>
+<#if parameters.readonly!false>
+ readonly="readonly"<#rt/>
+</#if>
+<#if parameters.tabindex?has_content>
+ tabindex="${parameters.tabindex?html}"<#rt/>
+</#if>
+<#if parameters.id?has_content>
+ id="${parameters.id?html}"<#rt/>
+</#if>
+<#include "/${parameters.templateDir}/${parameters.expandTheme}/css.ftl"
/>
+<#if parameters.title?has_content>
+ title="${parameters.title?html}"<#rt/>
+</#if>
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/scripting-events.ftl"
/>
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/common-attributes.ftl"
/>
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/dynamic-attributes.ftl"
/>
+/></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"><#--
+/*
+ * $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.
+ */
+-->
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/controlheader-core.ftl">
+<#if !parameters.labelposition?? &&
(parameters.form.labelposition)??>
+<#assign labelpos = parameters.form.labelposition/>
+<#elseif parameters.labelposition??>
+<#assign labelpos = parameters.labelposition/>
+</#if>
+<#if (labelpos!"top") == 'top'>
+<div <#rt/>
+<#else>
+<span <#rt/>
+</#if>
+<#if
parameters.id??>id="wwctrl_${parameters.id}"<#rt/></#if>
class="wwctrl">
+ </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"><#--
+/*
+ * $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.
+ */
+-->
+${parameters.after!}<#t/>
+ <#lt/>
+<#if !parameters.labelposition?? &&
(parameters.form.labelposition)??>
+<#assign labelpos = parameters.form.labelposition/>
+<#elseif parameters.labelposition??>
+<#assign labelpos = parameters.labelposition/>
+</#if>
+<#if (labelpos!"top") == 'top'>
+</div> <#rt/>
+<#else>
+</span> <#rt/>
+</#if>
+<#if (parameters.errorposition!"top") == 'bottom'>
+<#assign hasFieldErrors = parameters.name?? && fieldErrors??
&& fieldErrors[parameters.name]??/>
+<#if hasFieldErrors>
+<div <#rt/><#if
parameters.id??>id="wwerr_${parameters.id}"<#rt/></#if>
class="wwerr">
+<#list fieldErrors[parameters.name] as error>
+ <div<#rt/>
+ <#if parameters.id??>
+ errorFor="${parameters.id}"<#rt/>
+ </#if>
+ class="errorMessage">
+ ${error?html}
+ </div><#t/>
+</#list>
+</div><#t/>
+</#if>
+</#if>
+</div></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"><#--
+/*
+ * $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.
+ */
+-->
+<link rel="stylesheet" href="<@s.url
value='/struts/css_xhtml/styles.css' includeParams='none' encode='false' />"
type="text/css" />
+<#include "/${parameters.templateDir}/simple/head.ftl"
/></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"><table></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"><table></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><input/>
-</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"><input/></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"><#--
+/*
+ * $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.
+ */
+-->
+<script src="${base}/struts/utils.js"
type="text/javascript"></script></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"><#--
+/*
+ * $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.
+ */
+-->
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/controlheader.ftl" />
+<#include "/${parameters.templateDir}/simple/text.ftl" />
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/controlfooter.ftl"
/></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"><#--
+/*
+ * $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.
+ */
+-->
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/controlheader-core.ftl"
/>
+ <td
+ <#if parameters.align?? >
+ class="align-${parameters.align?html}"
+ <#else >
+ class="tdInput"
+ </#if>
+><#t/></code></pre></figure>
+
+<figure class="highlight"><pre><code class="language-freemarker"
data-lang="freemarker"><#--
+/*
+ * $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.
+ */
+-->
+<#--
+ Only show message if errors are available.
+ This will be done if ActionSupport is used.
+-->
+<#assign hasFieldErrors = parameters.name?? && fieldErrors??
&& fieldErrors[parameters.name]??/>
+<#if (parameters.errorposition!"top") == 'top'>
+<#if hasFieldErrors>
+<#list fieldErrors[parameters.name] as error>
+<tr errorFor="${parameters.id}">
+ <td class="tdErrorMessage" colspan="2"><#rt/>
+ <span class="errorMessage">${error?html}</span><#t/>
+ </td><#lt/>
+</tr>
+</#list>
+</#if>
+</#if>
+<#if !parameters.labelposition?? &&
(parameters.form.labelposition)??>
+<#assign labelpos = parameters.form.labelposition/>
+<#elseif parameters.labelposition??>
+<#assign labelpos = parameters.labelposition/>
+</#if>
+<#--
+ if the label position is top,
+ then give the label it's own row in the table
+-->
+<tr>
+<#if (labelpos!"") == 'top'>
+ <td class="tdLabelTop" colspan="2"><#rt/>
+<#else>
+ <td class="tdLabel"><#rt/>
+</#if>
+<#if parameters.label??>
+ <label <#t/>
+<#if parameters.id??>
+ for="${parameters.id?html}" <#t/>
+</#if>
+<#if hasFieldErrors>
+ class="errorLabel"<#t/>
+<#else>
+ class="label"<#t/>
+</#if>
+ ><#t/>
+<#if (parameters.required!false) &&
((parameters.requiredPosition!"right") != 'right')>
+ <span class="required">*</span><#t/>
+</#if>
+${parameters.label?html}<#t/>
+<#if (parameters.required!false) &&
((parameters.requiredPosition!"right") == 'right')>
+ <span class="required">*</span><#t/>
+</#if>
+${parameters.labelseparator!":"?html}<#t/>
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/tooltip.ftl" />
+</label><#t/>
+</#if>
+ </td><#lt/>
+<#-- add the extra row -->
+<#if (labelpos!"") == 'top'>
+</tr>
+<tr>
+</#if></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"><#--
+/*
+ * $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.
+ */
+-->
+${parameters.after!}<#t/>
+ </td><#lt/>
+</tr>
+<#if (parameters.errorposition!"top") == 'bottom'>
+<#assign hasFieldErrors = parameters.name?? && fieldErrors??
&& fieldErrors[parameters.name]??/>
+<#if hasFieldErrors>
+<#list fieldErrors[parameters.name] as error>
+<tr errorFor="${parameters.id}">
+ <td class="tdErrorMessage" colspan="2"><#rt/>
+ <span class="errorMessage">${error?html}</span><#t/>
+ </td><#lt/>
+</tr>
+</#list>
+</#if>
+</#if></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"><#--
+/*
+ * $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.
+ */
+-->
+<link rel="stylesheet" href="<@s.url value='/struts/xhtml/styles.css'
includeParams='none' encode='false' />" type="text/css"/>
+<#include "/${parameters.templateDir}/simple/head.ftl"
/></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"><#--
+/*
+ * $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.
+ */
+-->
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/form-validate.ftl" />
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/form-common.ftl" />
+<#if (parameters.validate!false)>
+
onreset="${parameters.onreset!'clearErrorMessages(this);clearErrorLabels(this);'}"
+<#else>
+ <#if parameters.onreset??>
+ onreset="${parameters.onreset?html}"
+ </#if>
+</#if>
+>
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/control.ftl"
/></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"><#--
+/*
+ * $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.
+ */
+-->
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/control-close.ftl" />
+<#include "/${parameters.templateDir}/simple/form-close.ftl" />
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/form-close-validate.ftl"
/>
+<#if parameters.focusElement??>
+<script type="text/javascript">
+ StrutsUtils.addOnLoad(function() {
+ var element =
document.getElementById("${parameters.focusElement?html}");
+ if(element) {
+ element.focus();
+ }
+ });
+</script>
+</#if></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"><#--
+/*
+ * $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.
+ */
+-->
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/form-validate.ftl" />
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/form-common.ftl" />
+<#if (parameters.validate!false)>
+
onreset="${parameters.onreset!'clearErrorMessages(this);clearErrorLabels(this);'}"
+<#else>
+ <#if parameters.onreset??>
+ onreset="${parameters.onreset?html}"
+ </#if>
+</#if>
+>
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/control.ftl"
/></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"><#--
+/*
+ * $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.
+ */
+-->
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/control-close.ftl" />
+<#include "/${parameters.templateDir}/simple/form-close.ftl" />
+<#include
"/${parameters.templateDir}/${parameters.expandTheme}/form-close-validate.ftl"
/>
+<#if parameters.focusElement??>
+<script type="text/javascript">
+ StrutsUtils.addOnLoad(function() {
+ var element =
document.getElementById("${parameters.focusElement?html}");
+ if(element) {
+ element.focus();
+ }
+ });
+</script>
+</#if></code></pre></figure>
</section>
--
To stop receiving notification emails like this one, please contact
['"commits@struts.apache.org" <commits@struts.apache.org>'].
![https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"](https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"){kind=link}