css_xhtml theme
The css_xhtml theme provides all the basics that the simple theme provides 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 xhtml theme uses the “wrapping” technique described by Extending Themes. Let’s look at how 
the HTML tags are wrapped by a standard header and footer. For example, in the textfield template, 
text.ftl, the controlheader.ftl and controlfooter.ftl templates are wrapped around the simple template.
<#--
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
-->
<input<#rt/>
 type="${(attributes.type!"text")}"<#rt/>
 name="${(attributes.name!"")}"<#rt/>
<#if attributes.get("size")?has_content>
 size="${attributes.get("size")}"<#rt/>
</#if>
<#if attributes.maxlength?has_content>
 maxlength="${attributes.maxlength}"<#rt/>
</#if>
<#if attributes.nameValue??>
 value="${attributes.nameValue}"<#rt/>
</#if>
<#if attributes.disabled!false>
 disabled="disabled"<#rt/>
</#if>
<#if attributes.readonly!false>
 readonly="readonly"<#rt/>
</#if>
<#if attributes.tabindex?has_content>
 tabindex="${attributes.tabindex}"<#rt/>
</#if>
<#if attributes.id?has_content>
 id="${attributes.id}"<#rt/>
</#if>
<#include "/${attributes.templateDir}/${attributes.expandTheme}/css.ftl" />
<#if attributes.title?has_content>
 title="${attributes.title}"<#rt/>
</#if>
<#include "/${attributes.templateDir}/${attributes.expandTheme}/scripting-events.ftl" />
<#include "/${attributes.templateDir}/${attributes.expandTheme}/common-attributes.ftl" />
<#include "/${attributes.templateDir}/${attributes.expandTheme}/dynamic-attributes.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.
<#--
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
-->
<#include "/${attributes.templateDir}/${attributes.expandTheme}/controlheader-core.ftl">
<#if !attributes.labelPosition?? && (attributes.form.labelPosition)??>
<#assign labelPos = attributes.form.labelPosition/>
<#elseif attributes.labelPosition??>
<#assign labelPos = attributes.labelPosition/>
</#if>
<#if (labelPos!"top") == 'top'>
<div <#rt/>
<#else>
<span <#rt/>
</#if>
<#if attributes.id??>id="wwctrl_${attributes.id}"<#rt/></#if> class="wwctrl">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:
<#--
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
-->
${attributes.after!}<#t/>
    <#lt/>
<#if !attributes.labelPosition?? && (attributes.form.labelPosition)??>
<#assign labelPos = attributes.form.labelPosition/>
<#elseif attributes.labelPosition??>
<#assign labelPos = attributes.labelPosition/>
</#if>
<#if (labelPos!"top") == 'top'>
</div> <#rt/>
<#else>
</span> <#rt/>
</#if>
<#if (attributes.errorposition!"top") == 'bottom'>
<#assign hasFieldErrors = attributes.name?? && fieldErrors?? && fieldErrors.get(attributes.name)??/>
<#if hasFieldErrors>
<div <#rt/><#if attributes.id??>id="wwerr_${attributes.id}"<#rt/></#if> class="wwerr">
<#list fieldErrors.get(attributes.name) as error>
    <div<#rt/>
    <#if attributes.id??>
     errorFor="${attributes.id}"<#rt/>
    </#if>
    class="errorMessage">
             ${error}
    </div><#t/>
</#list>
</div><#t/>
</#if>
</#if>
</div>Special Interest
Two css_xhtml templates of special interest are head and form.
Head template
The css_xhtml head template is similar to the xhtml head template. The difference is that CSS is used to provide the layout. The contents of head.ftl are:
<#--
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
-->
<@s.link rel="stylesheet" href="${base}${attributes.staticContentPath}/css_xhtml/styles.css" type="text/css" />
<#include "/${attributes.templateDir}/simple/head.ftl" />The head includes a style sheet. The contents of styles.css are:
/*
 * $Id$
 *
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
.wwFormTable {}
.label {
    font-style:italic;
    float:left;
    width:30%
}
.errorLabel {font-style:italic; color:red; }
.errorMessage {font-weight:bold; color:red; }
.checkboxLabel {}
.checkboxErrorLabel {color:red; }
.required {color:red;}
.tdTransferSelect {text-align:center; vertical-align:middle;}
.tdLabelTop {text-align:left; vertical-align:top;}
.tdCheckboxLabel {text-align:right; vertical-align:top;}
.tdCheckboxInput {text-align:left; vertical-align:top;}
.tdCheckboxErrorMessage {text-align:left; vertical-align:top;}
.tdErrorMessage {text-align:center; vertical-align:top;}
.formButton {text-align:right;}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.
css_xhtml form template
The css_xhtml form template is almost exactly like the xhtml form template , including support for 
Pure JavaScript Client Side Validation. The only 
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.
