Page History

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.

• Standard two-column table layout for the HTML Tags (form, textfield, select, etcand so forth)
• Labels for each of the HTML Tags on the left hand side (or top, depending on the labelposition attribute)
• Validation and error reporting
• Pure JavaScript Client Side Validation using 100% JavaScript on the browser

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.

{snippet:id=all|lang=xml|url=webwork/src/java/template/xhtml/text.ftl}

As you can see, the 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 is referenced using ${parameters.theme} is to assist with code re-use for the ajax theme. For now, assume that the xhtml theme is used there as wellso that the code can be reused by the ajax theme.

XHTML Theme Header

Now let's look at the controlheader.ftl and controlheader-core.ftl (again. Again, these are split up for easy re-use with the ajax theme) contents:

...

The header used by the HTML tags in the xhtml theme is somewhat complexcomplicated. However, if you look closely you will see 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 you we want, so that is the default option. However, you can To use the two-row approach by changing , change the labelposition parameter to "top".Also note that the

...

XHTML Theme Footer

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

{snippet:id=all|lang=xml|url=webwork/src/java/template/xhtml/controlfooter.ftl}

The important thing to note here is that the table cell and row is closed. Before that, however, note that a special after parameter is checked for. While this While "after" isn't an official attribute suppotred supported by any of the 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. This The after attribute makes it easier to fine-tune your HTML forms as you pleasefor 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.

{snippet:id=all|lang=xml|url=webwork/src/java/template/xhtml/head.ftl}

The head template imports a style sheet.

{snippet:id=all|lang=xml|url=webwork/src/java/template/xhtml/styles.css}

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.

{snippet:id=all|lang=xml|url=webwork/src/java/template/xhtml/form.ftl}

The closing template, form-close.ftl:

{snippet:id=all|lang=xml|url=webwork/src/java/template/xhtml/form-close.ftl}

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

...