Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin

The xhtml theme is the default theme in WebWork. It provides all the basics that the simple theme provides , plus these additional features:and adds several features.

Wrapping the Simple Theme

The xhtml theme uses the "wrapping" technique mentioned in described by Extending Themes. As such, it is important to understand Let's look at how the HTML tags are wrapped by a standard header and footer. For example, take a look at the textfield template, text.ftl:

...

in the text.ftl template, the controlheader.ftl and controlfooter.ftl templates are wrapped around the simple template.

...

As you can see, the controlheader.ftl and controlfooter.ftl templates are wrapped around the simple template. In case you are wondering, the reason the controlheader.ftl is refered (question) The controlheader.ftl is referenced using ${parameters.theme} is to assist with code re-use for so that the code can be reused by the ajax theme. For now, assume that the xhtml theme is used there as well.

XHTML Theme Header

Now let's look at the controlheader.ftl contents:

...

and controlheader-core.ftl. Again, these are split up for easy re-use with the ajax theme) contents:

...

And the controlfooter.ftl contents:

...

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 labelposition parameter to top.

...

The fieldErrors, usually caused by Validation, 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 Template Loading for more information on how to do this.

...

XHTML Theme Footer

The primary objective of controlfooter.ftl is to close the table. But, before the table closes, the template checks for an after parameter.

...

While most of the templates in this theme are self explanatory, there are some templates that should be called out and explained in detail:

"after" isn't an attribute supported by any of the Struts Tags, if you are using FreeMarker Tags, Velocity Tags, or the param tag in any template language, you can add an after parameter to place any content you like after the simple theme template renders. The after attribute makes it easier to fine-tune HTML forms for your specific environment.

Special Interest

Two xhtml templates of special interest are head and form.

head template

The xhtml head template extends the simple head template and provides an additional CSS that helps render the xhtml theme form elements.

...

The head template imports a style sheet.

...

form template

The xhtml form template sets up the wrapping table around all the other xhtml theme form elements. In addition to creating this wrapping table, the opening and closing templates also, if the validate parameter is set to true, enable Pure JavaScript Client Side Validation.

...

The closing template, form-close.ftl*:

...