Tuesday, 22 September 2009

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


11 comments:

Kunal said...

hi
I am using simple theme with custom css as you mentioned in your blog

i am using html frame sets.

on a particular action response
i am displaying the data on a JSP, but that is not displaying data with attached CSS.

can you please help me on this

Jim said...

Excellent. just what I needed

These tips are great regarding Struts 2 productivity and customization. And your other S2 posts are equally useful.

Thanks & keep up the good work!

Cheers :)

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

w3c said...

Nice information, I really appreciate the way you presented.Thanks for sharing..

http://www.w3cvalidation.net/

Dinesh-malle said...

I am newbie to struts2 framework.
Can u give me the complete details on the concepts like OGNL and value stack

Thnks in advance

:)

Darko Kalinic said...

@Dinesh-malle:

It would take me a while to write it down, don't you think so? :-)

I suggest you to read this book:

http://devtalks.blogspot.com/2009/06/struts-2-design-and-programming.html

it won't give you much details, but it will help you understand what value stack is, and how it works...

For the details about OGNL and value stack, you will need to find another book...

Anonymous said...

Hi,

Thank you for your struts2 posts. I am newbie and I try to develop a complex form using simple theme.

I have the following question:
I put two textfields in a particular row. My form looks like:
label1 textfield1 label2 textfield2
label3 textfield3 label4 textfield4

Should I put textfield1 in a particular row?

Regards,
www.javanus.com/AssistWeb

Darko Kalinic said...

I'm sorry, I don't understand you...

Anonymous said...

i understand what u said but how can i use this to my project.can u explain with an example pls............

ANKIT KATIYAR said...

thanks a lot.. i spent long time to find this but your blog.. just one hit... roxxx

ANKIT KATIYAR said...

i have spent long time.. but ur blog just one hit rocks...