Theme Resolver Example in Spring MVC with xml configuration (Spring 2.5)

Spring MVC provides us an easy and convenient way to choice themes on run time. The main concept behind this is that the look and feel of the data in a jsp page are depends upon twp types on scripts that run on client side browsers :

  1. JavaScript Code
  2. CSS Code

We can define different JavaScript and CSS code for same data to be shown to the user in different look and feel. So, if we can change the JavaScript and CSS to be applied to the page data on run time then we can change also the look and feel of the page also on run time.

Spring MVC with its theme resolver and theme tag makes it possible to change the look and feel at run time by loading different JavaScript and CSS file to the browser as per users theme choice.

In our example code we will include theme resolver to our existing example of Form Validation in Spring MVC 3 using xml configuration and include some code to define three different themes that will change the background and text color as per the user choice the theme from a drop down form element.

For this we have to do some basic changes that defines the basic of theme resolvers in Spring MVC:

Step1: First of all we will configure Theme Resolver in our Spring MVC configuration file (app-config.xml)

To configure theme resolver in Spring MVC we have to do three things that have be defined in our app-config.xml file:


<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

<!-- Application Message Bundle -->
<bean id="messageSource" class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
    <property name="basename" value="/WEB-INF/messages" />
    <property name="cacheSeconds" value="3000" />
</bean>

<bean id="themeSource" class="org.springframework.ui.context.support.ResourceBundleThemeSource">
    <property name="basenamePrefix" value="theme-" />
</bean>

<!-- Theme Change Interceptor and Resolver definition -->
<bean id="themeChangeInterceptor" class="org.springframework.web.servlet.theme.ThemeChangeInterceptor">
    <property name="paramName" value="theme" />
</bean>
<bean id="themeResolver" class="org.springframework.web.servlet.theme.CookieThemeResolver">
    <property name="defaultThemeName" value="default" />
</bean>

<bean id="urlHandler" class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping">
    <property name="interceptors">
        <list>
            <ref bean="themeChangeInterceptor" />
        </list>
    </property>
</bean>

<bean id="registrationValidator" class="com.raistudies.validator.RegistrationValidator"/>

<bean name="/registration.htm" class="com.raistudies.controllers.RegistrationController">
    <property name="formView" value="registration"/>
    <property name="successView" value="success"/>
    <property name="validator" ref="registrationValidator"/>
</bean>

<!-- Resolves view names to protected .jsp resources within the /WEB-INF/views directory -->
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/jsp/"/>
    <property name="suffix" value=".jsp"/>
</bean>

</beans>
  1. Define a theme source. Theme source defines the source which will define the look and feel related code files. In our example we have used ResourceBundleThemeSource which defines that we will use properties file to define our JavaScript and CSS code files for different look and feels or themes. We have to define as much as properties file as much number of themes we will make available to user. That means if we want to make available three thems to the user we have to define three properties file for each theme and these properties file will include respective theme related file locations. The property basenamePrefix defines the the prefix name of all the properties files.
  2. Define a theme resolver. A theme resolver will define the way in which the current theme related information will be stored and modified as needed by the user. In this example we have used CookieThemeResolver which will use client side cookie to store theme related information and will change the same when an user will request for change the current theme.We can define default theme to the used until user choice it’s own theme using defaultThemeName property.
  3. Define the theme change interceptor and plug in it with current handler mapping. Theme change interceptor takes care of the theme change request by the user. We define the request parameter to be used to change the them in the property named paramName. Here, we have defined it as “theme”. That means if there is a request parameter named with “theme” will be present in the current request, it’s value will be passed to theme source to find out the properties file that will define the JavaScript and CSS file to be used in response to the browser. The interceptor must be plugin with the current handler mapping so that it can be performed before the execution of controller.

Step2: Create different JavaScript and CSS file for different look and feel.

In our example we have only changes background and text color on the basis of the theme selected by the user and to do so we need only a CSS file to be included to the JSP file that will define background and text color. We have three themes in our example will following CSS code content:

default.css

body {
background-color: lime;
color: black;
}

blue.css

body {
background-color: blue;
color: white;
}

black.css

body {
background-color: black;
color: white;
}

Step3: Creating different properties for different themes.

As I have already said , we have to define three different properties file to define CSS file location of different themes.

theme-default.properties


style=style/default.css

theme-blue.properties


style=style/blue.css

theme-black.properties


style=style/black.css

As you can see all three properties file define the same property names “style” with different value that indicates it’s respective CSS file location. We can define as much properties we want.

Step4: Including the css file in jsp files using <Spring:theme/> tag and defining dropdown to choice theme.

We will made following change to our registration.jsp page:

<link rel="stylesheet" href="<spring:theme code="style"/>" type="text/css" />

Above code will be added to the head part of the every jsp. It includes the css file depends upon the current theme chosen by the user.


<table>
    <tbody>
        <tr><td>Change Theme:</td><td><form name="themeChangeForm" method="get">
            <select name="theme" onchange="submitform()">
                <option selected="selected">--</option>
                <option value="default">Default</option>
                <option value="blue">Blue</option>
                <option value="black">Black</option>
            </select>
         </form></td></tr>
    </tbody>
</table>

<script type="text/javascript">
function submitform()
{
document.themeChangeForm.submit();
}
</script>

It makes the a request to the Spring MVC to change the current theme by passing the request parameter named “theme”. Then theme change interceptor passes the value of the parameter “theme” to theme source. Theme source uses this value to find out the property file to be used to file out the value of the “style” defined in <spring:theme code=”style”/> and put the value to it and the pass this value to theme resolver for making change the value of the current theme name in the cookie.

Now, deploy the war file to tomcat 6 and hit the url. You will get following screen that will be show default theme:

Theme Resolver in Spring MVC Example - Default Theme

Theme Resolver in Spring MVC Example - Default Theme

Try different themes available in drop down and you will get following pages:

Theme Resolver in Spring MVC Example - Blue Theme

Theme Resolver in Spring MVC Example - Blue Theme

Theme Resolver in Spring MVC Example - Black Theme

Theme Resolver in Spring MVC Example - Black Theme

You can download the source of the example from following links:

Source: Download

Source + lib: Download

Related Posts:

Leave a comment ?

3 Comments.

  1. Great post. Thanks a lot…

  2. What if I want to change the complete theme of the whole web application ?

    • As you can change the css and js file on the selection of theme change that can change your look and feel as you need.

Leave a Comment Cancel reply

NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>