Apache Struts 2 Documentation > Home > Guides > Tag Developers Guide > Struts Tags > UI Tags > Themes and Templates > css_xhtml theme |

Apache Struts 2 Documentation
css_xhtml theme
Edit Page Browse Space Add Page Add News
Added by Patrick Lightbody, last edited by Ted Husted on Sep 03, 2006 (view change)

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.

    <#--include "/${parameters.templateDir}/css_xhtml/controlheader.ftl" / -->
    <#include "/${parameters.templateDir}/${parameters.theme}/controlheader.ftl" />
    <#include "/${parameters.templateDir}/simple/text.ftl" />
    <#include "/${parameters.templateDir}/css_xhtml/controlfooter.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.

    <#include "/${parameters.templateDir}/css_xhtml/controlheader-core.ftl">
    <#if parameters.labelposition?default("top") == 'top'>
    <div <#rt/>
    <#else>
    <span <#rt/>
    </#if>
    <#if parameters.id?exists>id="wwctrl_${parameters.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:

    ${parameters.after?if_exists}<#t/>
        <#lt/>
    <#if parameters.labelposition?default("top") == 'top'>
    </div> <#rt/>
    <#else>
    </span> <#rt/>
    </#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.

    <link rel="stylesheet" href="<@s.url value='/struts/css_xhtml/styles.css' includeParams='none' encode='false' />" type="text/css"/>
    <#include "/${parameters.templateDir}/simple/head.ftl" />

The head includes a style sheet.

    .wwFormTable {}
    .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;}

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

Children Show Children Hide Children
css_xhtml form template (Apache Struts 2 Documentation)
css_xhtml head template (Apache Struts 2 Documentation)