Struts2 themes and templates

Before we begin this chapter, let's look at http://struts.apache.org the definitions given in this chapter:

We recommend reviewing the Struts2 Localization/Internationalization (i18n) section, as we will use the same example again for practice.

When you use the Struts2 tag on a Web page (e.g., s:s:submit...) & gt;，<s:textfield... T he Struts2 framework generates HTML code with pre-configured styles and layouts. S truts2 has three built-in themes:

As mentioned above, if you do not specify a topic, Struts2 will use xhtml theme by default. F or example, this Struts2 selects a label:

<s:textfield name="name" label="Name" />

Generate the following HTML tags:

<tr>
<td class="tdLabel">
   <label for="empinfo_name" class="label">Name:</label>
</td><td>
   <input type="text" name="name" value="" id="empinfo_name"/>
</td>
</tr>

Here empinfo is the action name .xml in the struts file.

Select the theme

You can specify a theme on top of each Struts2 label, or you can specify the topic that Struts2 should use using one of the following methods:

• The me property on a specific label

• The me property of the peripheral form label for the label

• The page scope property named "theme"

• The request scope property named "theme"

• The session scope property named "theme"

• The application scope property named "theme"

• struts.ui.theme property in struts.properties (xhtml by default)

Here's how to specify their syntax at the label level, if you're willing to use different themes for different labels:

<s:textfield name="name" label="Name" theme="xhtml"/>

Because it is not practical to use themes on a per-label basis, you can specify rules in the struts.properties file simply by using the following labels:

# Standard UI theme
struts.ui.theme=xhtml
# Directory where theme template resides
struts.ui.templateDir=template
# Sets the default template type. Either ftl, vm, or jsp
struts.ui.templateSuffix=ftl

Here's what we chose from the localization section, and we used the default theme in the struts-default.properties file, set to struts.ui.theme=xhtml, which by default is located in the struts2-core.xy.z.jar file.

How does the theme work?

For a given topic, each struts tag has an associated template, such as s:textfield -gt; text.ftl and s:password -password.ftl. T hese template files are compressed in the struts2-core.xy.z.jar file, and they retain a predefined HTML layout for each label. S o the Struts2 framework uses the Sturts tag and related templates to generate the final HTML tag code.

Struts 2 tags + Associated template file = Final HTML markup code.

The default templates are already written in FreeMarker, and they have the extension .ftl. Y ou can design your templates using velocity or JSP, and use struts.ui.templateSuffix and struts.ui.templateDir to set up configurations in struts.properties.

Create a new theme

The easiest way to create a new theme is to copy any existing theme/template files and make the necessary changes. S o, let's create a folder named template in WebContent/WEB-INF/classes, and a sub-folder named after a new theme, such as WebContent/WEB-INF/classes/template/mytheme. From here, you can build templates from scratch, or you can copy templates from existing versions of Struts2 and modify them as needed.
For learning purposes, we will modify the existing default template xhtml. N ow copy the content from struts2-core-x.y.z.jar/template/xhtml to our theme directory and modify only the WebContent/WEB-INF/classes/template/mytheme/control.ftl file. When we turn on control.ftl, it displays the following lines:

<table class="${parameters.cssClass?default('wwFormTable')?html}"<#rt/>
<#if parameters.cssStyle??> style="${parameters.cssStyle?html}"<#rt/>
</#if>
>

Let's modify the following to the control.ftl file above:

<table style="border:1px solid black;">

If you look at form.ftl, you'll find that it's using this control.ftl file, but form.ftl refers to it from the xhtml topic. S o let's make the following changes:

<#include "/${parameters.templateDir}/xhtml/form-validate.ftl" />
<#include "/${parameters.templateDir}/simple/form-common.ftl" />
<#if (parameters.validate?default(false))>
  onreset="${parameters.onreset?default('clearErrorMessages(this);
  clearErrorLabels(this);')}"
<#else>
  <#if parameters.onreset??>
  onreset="${parameters.onreset?html}"
  </#if>
</#if>
>
<#include "/${parameters.templateDir}/mytheme/control.ftl" />

Let's say you don't know much about the FreeMarker template language, but you can still get a good idea by looking at the .ftl file. I n any case, let's save the above changes and return to our localization example to create a WebContent/WEB-INF/classes/struts.properties file with the following:

# Customized them
struts.ui.theme=mytheme
# Directory where theme template resides
struts.ui.templateDir=template
# Sets the template type to ftl.
struts.ui.templateSuffix=ftl

Now, after this change, right-click the project name, and then click "Export" and "WAR File" to create a WAR file. T he WAR file is then deployed in Tomcat's webapps directory. F inally, start the Tomcat server and try to access the URL http://localhost:8080/HelloWorldStruts2. T he following interface will be displayed:

You can see the borders around the form components, which is the result of the changes we made in the out theme after copying from the xhtml theme. I f you learn about FreeMarker a little, it's easy to create or modify your theme. For now, at least, you must have a basic understanding of Sturts2 themes and templates, don't you?