Page History

The css_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 CSS-based layout, using <div> for the HTML Struts Tags (form, textfield, select, etc)
• Labels for each of the HTML Struts Tags, placed according to the CSS stylesheet
• Validation and 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 described by Extending Themes, also done by the xhtml theme. 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 in the textfield template, text.ftl:

...

, 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.

CSS XHTML Theme Header

Now let's look at the controlheader.ftl:

CSS XHTML theme header

The header used by the HTML tags in the css_xhtml theme is complicated. Unlike the xhtml theme, the CSS theme does not use a labelposition attribute. Instead, the label position is defined by CSS rules.

...

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

Also note 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:

...

Special

...

Interest

Two

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

...

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

css_xhtml

templates of special interest are head and form.

Head template

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.

<div>
<p>
<label for="frm1_caseBean.title" class="label"><span class="required">*</span>Title:</label>
<input name="caseBean.title" size="70" id="frm1__caseBean.title" onblur="validate(this);" type="text">
</p>
</div>

The first thing of note is the containing DIV tag. This is the container element that will be filled with Field Validation errors. The second element is the P, this is a block element and will thusly but both the lable and the control on its own line. notice how we use the 'for' attribute of the label tag? That helps to identify that this label is for a control. This feature is uber cool for checkboxes as it extends the clickable range of the checkbox to the label as well!!!

You might also have noticed the CSS class attributes... lets review these:

.label {
    font-style:italic;
    float:left;
    width:30%
}
.errorLabel {font-style:italic; color:red; }
.errorMessage {font-weight:bold; text-align: center; color:red; }
.checkboxLabel {}
.checkboxErrorLabel {color:red; }
.required {color:red;}

...

head template is similar to the xhtml head template. The difference is that CSS is used to provide the layout.

...

The head includes a style sheet.

...

Form template

The css_xhtml form template is almost exactly like the xhtml form template, including support for Pure JavaScript Client Side Validation. The difference is that instead of printing out an opening and closing <table> element, there are no elements. Instead, the CSS rules for the individual HTML tags are assumed to handle all display logic. However, as noted, client-side validation is still supported

If you want to customize any attribute of these CSS rules.. just put your deltas into your own css file and include it AFTER the above css include.

Some interesting things about the theme are how it supports both standard validation and DWR validation. Lets review the structure of some generated code to understand how the css_xhtml theme does validation.

<div>

<p>

<div errorfor="frm1_bo.emailAddress" classname="errorMessage" class="errorMessage">Incorrect Email</div><label classname="errorLabel" for="frm1_bo.emailAddress" class="errorLabel"><span class="required">*</span>Email:</label>
        
<input name="bo.emailAddress" size="20" value="not_yet_d@efined.com" id="frm1_bo.emailAddress" onblur="validate(this);" type="text">
</p>
</div>

The validation gets inserted into the structure for you by either the validation.js script if your using the DWR Client Side validator or server side template if your using standard validation.

...

...

.