The 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 table layout for the HTML Tags (form, textfield, select, etc)
- Labels for each of the HTML Tags on the left hand side (or top, depending on the
labelposition
attribute) - Validation error reporting
- Pure JavaScript Client Side Validation using 100% JavaScript on the browser
The xhtml theme uses the wrapping technique mentioned in Extending Themes. 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:
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 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 well.
Now let's look at the controlheader.ftl contents:
And the controlfooter.ftl contents:
While most of the templates in this theme are self explanatory, there are some templates that should be called out and explained in detail: