Using simple theme and custom CSS in Struts2

Simple theme in Struts2 is great when you want to use your own CSS , and control everything by yourself when it comes to GUI.
Probably many of you (us :-) ) tried using Struts2 with your own CSS without setting default theme to SIMPLE and came up with bunch of unfamiliar tags , like

<table class="wwFormTable">

In your HTML…

Well , if you want to use your own CSS and get your application to look like you wanted to, you need to either create your own new theme ( harder ), or just use Simple theme and use your own CSS ( easier ).

In order to switch to simple theme, just copy/paste this line to your struts.properties file:

struts.ui.theme=simple

Visit
http://devtalks.blogspot.com/2009/07/create-struts2-project-in-netbeans.html
if you are using NetBeans , or

http://devtalks.blogspot.com/2009/07/eclipse-galileo-and-struts2.html
if you are using eclipse

on how to create Struts2 project , and struts.properties file

And that’s it! This way your pages will not contain those annoying
<table class="wwFormTable"> tags…


ISSUES

One thing I noticed when using simple theme is that struts tag <s:fielderror> doesn’t seems to “work” as it should…
You cannot just say, for example,

<s:fielderror />
<s:textfield name=”firstName” />

and expect from struts2 to show errors if your validator doesn’t succeed in validating filed “firstName” .
As a matter of fact, struts2 will indeed dispatch to your INPUT result, but it will not show any errors!
Fortunately , There is a solution to this problem: just use

<s:fielderror> <s:param>filed_name</s:param> </s:fielderror>
instead of
<s:fielderror />

in your .jsp pages and your validation will again act as it should…


ALTERING FieldErrors , ActionMessages and ActionErrors

Speaking of fielderrors, I often see people asking how to change the way Struts is showing field errors action messages and action errors…

You do this by extending the theme you are using. When using simple theme, all you need to do is:

- Create subfolders “template” and “simple” inside folder “classes”

- Find actionerror.ftl , actionmessage.ftl and fielerror.ftl ( or just those which you would like to extend ) in struts2-core-2.x.x.jar , inside “template.simple” package. You can find this .JAR inside your “libraries” folder.

- Copy these files to your new template -> simple folder created in earlier step.

If you open one of these files, you’ll see how these messages are generated.
You can change all that just by editing that file.

Lets say you don’t want your application to show fielderrors as <ul> <li> </li> <ul> elements.
You just need to open the fielderror.ftl and change the part that does this:

So, instead of having

like it is in original file, we can just remove <ul> <li> </li> <ul> elements, and change it with, for example, simple <span> </span> element. That will do the trick. ;-)

Or let’s, for example,change the way your Action message is shown in an application.

Let’s say we need a green box with all the action messages shown in it…
Something like this:

To do this, you could just open the actionmessage.ftl file, and change the original

<#if (actionMessages?? && actionMessages?size > 0)>
<ul<#rt/>
<#if parameters.cssClass??>
class="${parameters.cssClass?html}"<#rt/>
<#else>
class="actionMessage"<#rt/>
</#if>
<#if parameters.cssStyle??>
style="${parameters.cssStyle?html}"<#rt/>
</#if>
>
<#list actionMessages as message>
<li><span>${message!}</span></li>
</#list>
</ul>
</#if>

with something like this:

<#if (actionMessages?? && actionMessages?size > 0)>
<div class="mymessage"><br><span<#rt/>
<#if parameters.cssClass??>
class="${parameters.cssClass?html}"<#rt/>
<#else>
class="actionMessage"<#rt/>
</#if>
<#if parameters.cssStyle??>
style="${parameters.cssStyle?html}"<#rt/>
</#if>
>
<#list actionMessages as message>
<span>- ${message!}</span>
</#list>
</span><br><br></div>
</#if>

And for now on, every Action message in your application will look like a green box containing messages.

Here is the css I used:

div.mymessage
{
right: 0;
bottom: 0;
left: 0;
width:300px;
margin: auto;
color: #33CC33;
border-color:#009900;
border-style:solid ;
border-width:1px;
border-collapse: collapse;
font-weight: bold;
text-align: center;
background-color:#DDFFDD;
}

This is just a simple example what you can do with extending a theme...