How to use Spring MVC Themes

How great it would be If we can change the look and feel of a web application with just one click. Spring MVC framework does just that. It allows you to change the look and feel of your application, thereby enhancing user experience.

What is a Theme ?

A theme is a collection of static resources, typically style sheets and images that affect the visual style of the application.  Given below are the snapshots of an application using different themes

Wood Theme

Pentagon Theme

How to use Spring MVC themes ?

To use themes in your Spring web application, you must set up an implementation of the org.springframework.ui.context.ThemeSource interface. Here we will use org.springframework.ui.context.support.ResourceBundleThemeSource implementation that loads properties file from the root of the classpath.

When using the ResourceBundleThemeSource, a theme is defined in a simple properties file. The properties file lists the resources that make up the theme. Here is an example:

styleSheet=/themes/wood.css

The keys of the properties are the names that refer to the themed elements from view code (e.g. JSP file).

For a JSP, we use the spring:theme custom tag. The following JSP fragment uses the theme defined in the example to customize the look and feel:

< %@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
< html>
    < head>
        < link rel="stylesheet" href="< spring:theme code='styleSheet'/>" type="text/css"/>
    < /head>
    < body>
        ...
    < /body>
< /html>

Configuring the themes ?

Configure the ResourceBundleThemeSource bean in the bean definition file.

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

Note that we have set the basnamePrefix property of the bean to “theme-“ , by default the ResourceBundleThemeSource uses an empty base name prefix.

So properties file should be named as theme-filename.properties eg. theme-wood.properties, theme-pentagon.properties etc.

Theme Resolver

After defining themes, it is the ThemeResolver implementation that decides which theme to use. Spring provides various theme resolvers, for  example: FixedThemeResolver, SessionThemeResolver, CookieThemeResolver.

With this example we will use CookieThemeResolver implementation in which the selected theme is stored in a cookie on the client.

Configuring the Theme Resolver

< bean id="themeResolver" class="org.springframework.web.servlet.theme.CookieThemeResolver">
	< property name="defaultThemeName" value="wood" />
< /bean>

Note: We have set the default theme to wood. So, when a user accesses the web application for the first time, wood theme will be in effect.

Theme Interceptor

To allow users to change the theme with just a click , Spring provides ThemeChangeInterceptor. Below is the configuration of ThemeChangeInterceptor in the bean definition file

< bean id="themeChangeInterceptor" class="org.springframework.web.servlet.theme.ThemeChangeInterceptor">
	< property name="paramName" value="theme" />
< /bean>

We have specified the value of property paramName as theme which means ThemeChangeInterceptor will be invoked whenever a request is made with parameter “theme” with different values.

We also require to configure themeChangeInterceptor bean that we have defined above as an interceptor. We can do that using  mvc:interceptors

< mvc:interceptors>
   < ref bean="themeChangeInterceptor">< /ref>
< /mvc:interceptors>

Project Structure :

Here is the snapshot of project structure in Eclipse IDE

Let’s see the theme-pentagon.properties file which is under src folder

 styleSheet=themes/pentagon.css

There is only one line, which defines the URL to get the corresponding CSS file. Similarly, for other properties file eg. theme-symphony, theme-wood, theme-wall.

In each properties file there is only one line referring to the URL for the CSS file.

So, whenever ThemeChangeInterceptor intercepts a change in theme, it would lookup for corresponding properties file and try to access the CSS file as the URL specified in properties file.

Since all our themes (CSS files) are under resources/themes folder. We have to configure the themes/css-filename to resources/themes/css-filename, otherwise properties file will not be able to locate the CSS file.We can do that using mvc:resources as shown below :

< mvc:resources mapping="/themes/**" location="/resources/themes/">< /mvc:resources>

wood.css

In wood.css file, we just change the background image of the body tag. But you are not just restricted to changing the background image you can change text styles, font, color etc.

body {
	 background-image : url("/Themes/images/wood_pattern.png");
}

HomeController

We have a simple HomeController which will serve home.jsp page on running the Themes application

@Controller
public class HomeController {

	@RequestMapping("/")
	public String getHomePage(){
		return "home";
	}

}

Running the Themes Application

Now, we are all set to run the themes application. On running the application you will see home.jsp page with wood (which we declared as default) theme in effect

Let’s explore other themes by clicking on themes link available on the right side of home.jsp page.

Wall Theme

Symphony Theme

Note : See the change in the URL on clicking the different themes link. On clicking a theme link,  for example, wood, a request parameter theme with value wood, is sent to the server. ThemeChangeInterceptor intercepts the change in theme and displays the appropriate theme.

Gotchas While Working with Themes

Below are some important gotchas that you should be aware of while working with themes

• Make sure your properties file are on classpath. To do that, put properties file directly under src folder. If your properties files are not on classpath you will get ServletException saying  ” Theme ‘wood’: No message found under code ‘styleSheet’ for locale ‘en_US’ ”  Here is the error message that you will encounter if properties files are not found

• The next important point to keep in mind is the URL which we use in properties file to link to the CSS. Note that in properties files we have mentioned the URL themes/css-file-name to look for the themes file. Don’t forget to map this URL to actual location where you have kept the CSS files. To do the mapping use mvc:resources, as we have done in this case: <mvc:resources mapping=”/themes/**” location=”/resources/themes/” />. If you forgot to do the mapping you will not get any error messages, but the theme will not work as it would not be able to access the CSS file

• One last silly mistake you can make while using Spring themes is, not using spring:theme tag in your JSP file. Note that we have used spring:themes tag in home.jsp page. <link rel=”stylesheet” href=”<spring:theme code=”styleSheet”/>” type=”text/css”/> Spring theme tag is required to make themes work.

As always, if you are interested in trying the code yourself download it.

[buttonleads form_title=”Download Code” redirect_url=https://edureka.wistia.com/medias/f7v8yqavdp/download?media_file_id=79851340 course_id=62 button_text=”Download Code”]

If you want to learn Spring and wish to use it while developing Java applications, then check out the Spring Framework Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe.

Got a question for us? Please mention it in the comments section and we will get back to you.