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)
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.
{% highlight freemarker %} {% remote_file_content https://raw.githubusercontent.com/apache/struts/master/core/src/main/resources/template/simple/text.ftl %} {% endhighlight %}
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.
{% highlight freemarker %} {% remote_file_content https://raw.githubusercontent.com/apache/struts/master/core/src/main/resources/template/css_xhtml/controlheader.ftl %} {% endhighlight %}
Note that the fieldErrors, usually caused by Validation, are displayed in a div block before the element is displayed.
And the controlfooter.ftl contents:
{% highlight freemarker %} {% remote_file_content https://raw.githubusercontent.com/apache/struts/master/core/src/main/resources/template/css_xhtml/controlfooter.ftl %} {% endhighlight %}
Two css_xhtml templates of special interest are head and form.
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:
{% highlight freemarker %} {% remote_file_content https://raw.githubusercontent.com/apache/struts/master/core/src/main/resources/template/css_xhtml/head.ftl %} {% endhighlight %}
The head includes a style sheet. The contents of styles.css are:
{% highlight css %} {% remote_file_content https://raw.githubusercontent.com/apache/struts/master/core/src/main/resources/template/css_xhtml/styles.css %} {% endhighlight %}
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.
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.