| <!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</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="//code.jquery.com/jquery-1.11.0.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="/download.cgi">Download</a></li> |
| <li><a href="/releases.html">Releases</a></li> |
| <li><a href="/announce-2021.html">Announcements</a></li> |
| <li><a href="http://www.apache.org/licenses/">License</a></li> |
| <li><a href="https://www.apache.org/foundation/thanks.html">Thanks!</a></li> |
| <li><a href="https://www.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="https://cwiki.apache.org/confluence/display/WW/Migration+Guide">Version Notes</a></li> |
| <li><a href="https://cwiki.apache.org/confluence/display/WW/Security+Bulletins">Security Bulletins</a></li> |
| <li class="divider"></li> |
| <li><a href="/maven/project-info.html">Maven 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><a href="/maven/struts2-core/apidocs/index.html">Struts Core API</a></li> |
| <li><a href="/tag-developers/tag-reference.html">Tag reference</a></li> |
| <li><a href="https://cwiki.apache.org/confluence/display/WW/FAQs">FAQs</a></li> |
| <li><a href="http://cwiki.apache.org/S2PLUGINS/home.html">Plugin registry</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><a href="/contributors/">Contributors Guide</a></li> |
| <li class="divider"></li> |
| <li><a href="/submitting-patches.html">Submitting patches</a></li> |
| <li><a href="/builds.html">Source Code and Builds</a></li> |
| <li><a href="/coding-standards.html">Coding standards</a></li> |
| <li><a href="https://cwiki.apache.org/confluence/display/WW/Contributors+Guide">Contributors Guide</a></li> |
| <li class="divider"></li> |
| <li><a href="/release-guidelines.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://gitbox.apache.org/repos/asf?p=struts.git">Source Repository</a></li> |
| <li><a href="/updating-website.html">Updating the website</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/xhtml-theme.md" title="Edit this page on GitHub">Edit on GitHub</a> |
| |
| <a href="themes-and-templates.html" title="back to Themes and Templates"><< back to Themes and Templates</a> |
| |
| <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> |
| |
| <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>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> |
| |
| <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"><#-- |
| /* |
| * 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"><#-- |
| /* |
| * 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}" |
| <#else > |
| class="tdInput" |
| </#if> |
| ><#t/></code></pre></figure> |
| |
| <figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker"><#-- |
| /* |
| * 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}</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}" <#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}<#t/> |
| <#if (parameters.required!false) && ((parameters.requiredPosition!"right") == 'right')> |
| <span class="required">*</span><#t/> |
| </#if> |
| ${parameters.labelseparator!":"}<#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"><#-- |
| /* |
| * 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}</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"><#-- |
| /* |
| * 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='${parameters.staticContentPath}/xhtml/styles.css' includeParams='none' encode='false'/>" type="text/css" <#include "/${parameters.templateDir}/simple/nonce.ftl" /> /> |
| <#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"><#-- |
| /* |
| * 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="<#outputformat 'JavaScript'>${parameters.onreset!'clearErrorMessages(this);clearErrorLabels(this);'}</#outputformat>" |
| <#else> |
| <#if parameters.onreset??> |
| onreset="<#outputformat 'JavaScript'>${parameters.onreset}</#outputformat>" |
| </#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"><#-- |
| /* |
| * 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" <#include "/${parameters.templateDir}/simple/nonce.ftl" /> > |
| StrutsUtils.addOnLoad(function() { |
| var element = document.getElementById("${parameters.focusElement}"); |
| 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"><#-- |
| /* |
| * 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="<#outputformat 'JavaScript'>${parameters.onreset!'clearErrorMessages(this);clearErrorLabels(this);'}</#outputformat>" |
| <#else> |
| <#if parameters.onreset??> |
| onreset="<#outputformat 'JavaScript'>${parameters.onreset}</#outputformat>" |
| </#if> |
| </#if> |
| > |
| <#include "/${parameters.templateDir}/${parameters.expandTheme}/control.ftl" /></code></pre></figure> |
| |
| <p>The closing template, <strong>form-close.ftl</strong>:</p> |
| |
| <figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker"><#-- |
| /* |
| * 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" <#include "/${parameters.templateDir}/simple/nonce.ftl" /> > |
| StrutsUtils.addOnLoad(function() { |
| var element = document.getElementById("${parameters.focusElement}"); |
| if(element) { |
| element.focus(); |
| } |
| }); |
| </script> |
| </#if></code></pre></figure> |
| |
| |
| </section> |
| </article> |
| |
| |
| <footer class="container"> |
| <div class="col-md-12"> |
| Copyright © 2000-2018 <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> |
| |
| |
| </body> |
| </html> |