css_xhtml theme

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

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.

<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;}

This style sheet is included in the WW2.2 packaging. All you need to do to take advantage of it is include this line in your header:
<link href="<%=request.getContextPath()%>/webwork/template/css_xhtml/styles.css" rel="stylesheet" type="text/css">

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.