Edit on GitHub << back to Themes and Templates

# 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="${(parameters.type!"text")}"<#rt/>
     name="${(parameters.name!"")}"<#rt/>
    <#if parameters.get("size")?has_content>
     size="${parameters.get("size")}"<#rt/>
    </#if>
    <#if parameters.maxlength?has_content>
     maxlength="${parameters.maxlength}"<#rt/>
    </#if>
    <#if parameters.nameValue??>
     value="${parameters.nameValue}"<#rt/>
    </#if>
    <#if parameters.disabled!false>
     disabled="disabled"<#rt/>
    </#if>
    <#if parameters.readonly!false>
     readonly="readonly"<#rt/>
    </#if>
    <#if parameters.tabindex?has_content>
     tabindex="${parameters.tabindex}"<#rt/>
    </#if>
    <#if parameters.id?has_content>
     id="${parameters.id}"<#rt/>
    </#if>
    <#include "/${parameters.templateDir}/${parameters.expandTheme}/css.ftl" />
    <#if parameters.title?has_content>
     title="${parameters.title}"<#rt/>
    </#if>
    <#include "/${parameters.templateDir}/${parameters.expandTheme}/scripting-events.ftl" />
    <#include "/${parameters.templateDir}/${parameters.expandTheme}/common-attributes.ftl" />
    <#include "/${parameters.templateDir}/${parameters.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 "/${parameters.templateDir}/${parameters.expandTheme}/controlheader-core.ftl">
    <#if !parameters.labelPosition?? && (parameters.form.labelPosition)??>
    <#assign labelPos = parameters.form.labelPosition/>
    <#elseif parameters.labelPosition??>
    <#assign labelPos = parameters.labelPosition/>
    </#if>
    <#if (labelPos!"top") == 'top'>
    <div <#rt/>
    <#else>
    <span <#rt/>
    </#if>
    <#if parameters.id??>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:

    <#--
    /*
     * 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.
     */
    -->
    ${parameters.after!}<#t/>
        <#lt/>
    <#if !parameters.labelPosition?? && (parameters.form.labelPosition)??>
    <#assign labelPos = parameters.form.labelPosition/>
    <#elseif parameters.labelPosition??>
    <#assign labelPos = parameters.labelPosition/>
    </#if>
    <#if (labelPos!"top") == 'top'>
    </div> <#rt/>
    <#else>
    </span> <#rt/>
    </#if>
    <#if (parameters.errorposition!"top") == 'bottom'>
    <#assign hasFieldErrors = parameters.name?? && fieldErrors?? && fieldErrors.get(parameters.name)??/>
    <#if hasFieldErrors>
    <div <#rt/><#if parameters.id??>id="wwerr_${parameters.id}"<#rt/></#if> class="wwerr">
    <#list fieldErrors.get(parameters.name) as error>
        <div<#rt/>
        <#if parameters.id??>
         errorFor="${parameters.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.
     */
    -->
    <link <#include "/${parameters.templateDir}/simple/nonce.ftl" /> rel="stylesheet" href="<@s.url value='${parameters.staticContentPath}/css_xhtml/styles.css' includeParams='none' encode='false' />" type="text/css" />
    <#include "/${parameters.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.