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

• Standard two-column CSS-based layout, using <div> for the HTML Tags (form, textfield, select, etc)
• Labels for each of the HTML Tags, placed according to the CSS stylesheet
• Validation error reporting
• Pure JavaScript Client Side Validation using 100% JavaScript on the browser

Wrapping the Simple Theme

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

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

As you can see, the controlheader.ftl and controlfooter.ftl templates are wrapped around the simple template.

CSS XHTML Theme Header

Now let's look at the controlheader.ftl:

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

The header used by the HTML tags in the css_xhtml theme is somewhat complex.

Also note that the fieldErrors, usually caused by Validation, are displayed in a div block before the element is displayed.

CSS XHTML Theme Footer

And the controlfooter.ftl contents:

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

Special Notes

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

• css_xhtml head template
• css_xhtml form templatehead tag

============

css_xhtml

The css_xhtml theme is a theme based entirely on css and thus avoids the dependency on tables.
Lets review the code to see how this theme works.

...