Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Most often, an application may just need to Sometimes you may want to simply override a template (see Template Loading) or create an alternative template in so that a certain control renders differently. Or, an application may need to add a new template to an existing theme. HoweverOther times, other times you might want to create your own entire an entirely new theme, especially if perhaps because you are planning to build building a rich set of unique and reusable templates for your organization.

...

  • Create a new theme from scratch (hard!)
  • Extend Wrap an existing themeWrap
  • Extend an existing theme

...

Creating a New Theme from Scratch

Tip
titleKeep it simple, Sam!

It's probably never a good idea to create a new theme from scratch.

...

Instead,

...

use the simple theme as a starting point. The simple theme provides

...

just enough foundation to make it easy to create new controls by extending or wrapping the basic controls. Before starting a new theme, be sure to review the source templates for all of the provided themes.

...

The existing themes are your best guide to creating new themes.

Wrapping an Existing Theme

Taking a look at the xhtml theme, we can see that the templates there make extensive use of a wrapping technique. For example, a template might look like:The xhtml theme provides several good examples of the "wrapping" technique. The simple theme renders the basic control. The xhtml theme "dresses up" many of the controls by adding a header and footer.

Code Block
xml
xml
titleWrapping a control

<#include "/${parameters.templateDir}/xhtml${parameters.expandTheme}/controlheader.ftl" />
<#include "/${parameters.templateDir}/simple/xxx.ftl" />
<#include "/${parameters.templateDir}/xhtml${parameters.expandTheme}/controlfooter.ftl" />

This template is simply wrapping the simple theme's existing template with a header and a footer. This Wrapping is a great way to add additional behavior around augment the basic HTML elements provided by the simple theme.

Extending an Existing Theme

The theme infrastructure provided by WebWork also allows themes to extend an existing theme. What this means is that a theme may One benefit of object-orientated programming is that it lets us "design by difference." We can extend an object and code only the behaviour that changes. Themes provide a similar capability. The subdirectory that hosts a theme can contain a theme.properties with a file. A parent entry that contains the name of the theme that you would like can be added to the property file to designate a theme to extend. For example, the The ajax theme extends the xhtml theme in this way. using this technique.

Code Block
title/template/ajax/theme.properties
parent = xhtml

An extended theme does not need By extending a theme, you are not required to implement every single template that the Struts Tags use expect. Rather, you It only need needs to implement the templates that you wish to override. All other templates will be loaded from the parent template.change. The other templates are loaded from the parent template.

Special parameters

UIBean provides few special parameters which can be used to build a new template (they are already used in xhtml and css_xhtml theme):

  • templateDir - current value of templateDir parameter, see Selecting Template Directory
  • theme - used theme, see Selecting Themes
  • template - name of the template file to use (i.e. text)
  • themeExpansionToken - special token used to indicate to search for a template also in parent theme (when used with <#include /> directive)
  • expandTheme - tells internal template loader mechanism to try load template from current theme and then from parent theme (and parent theme, and so on)

Using expandTheme parameter allows to override only some parts of the theme's templates, e.g. css.ftl. You can define a new theme (set theme.properties) and override just single file.

${parameters.expandTheme} is a recurrence which tells ThemeManager to load template from current theme and then from parent theme (defined in theme.properties) and so on.

Please also notice that the ThemeManager builds list of possible templates based on current theme and inherited themes (/template/custom/textarea.ftl, /template/xhtml/textarea.ftl, /template/simple/textarea.ftl). This is also true for templates which are loaded via ${parameters.expandTheme}.

(tick) See also example Struts 2 Themes or Creating a Theme in Struts 2 (Mark Menard)