In this article I shall discuss about using themes in Spring application. A theme is a collection of static resources, typically style sheets and images, that affect the visual style of the application. We can apply Spring Web MVC framework themes to set the overall look-and-feel of application, thereby enhancing user experience. This would be very useful for customizing the entire look and feel of the website. We can create multiple themes and it is easy to switch to different themes, it reflects the change in the whole website. I hope this post would provide good insight on how to configure themes in spring framework. If you have any questions, please write it in the comments section.
also read: follow us on @twitter and @facebook
- Spring Tutorials ( Collection for Spring reference tutorials)
- Spring Framework Interview Questions
- Introduction to Spring LDAP
- How to write Custom Spring Callback Methods?
Defining themes in Spring Application
To use themes in Spring , you need to do the following:
- First, you need to set up an implementation of the interfaceorg.springframework.ui.context.ThemeSource. By default the control is delegated to org.springframework.ui.context.support.ResourceBundleThemeSource implementation that loads properties files from the root of the classpath. Register a bean in the application context with the reserved name themeSource and class as ResourceBundleThemeSource.
- Next define the theme in the properties file. The properties file lists the resources that make up the theme. For example:
styleSheet=/themes/dark.css background=/themes/img/coolBg.jpg
The keys of the properties are the names that refer to the themed elements from view code.
- Once the themes are defined, to decide which theme to use, the DispatcherServlet will look for a bean named themeresolver to find out which ThemeResolver implementation to use.
Spring Themes Example
Let see ths usage of themes in the following example:
Let us have working Eclipse IDE in place and follow steps below to create a Spring application:
Step 1: Create Project in Eclipse
Create a Dynamic Web Project with a name SpringThemeExample.
Follow the option File -> New -> Project ->Dynamic Web Projectand finally select Dynamic Web Project wizard from the wizard list. Now name your project as SpringExceptionHandling using the wizard window.
Step 2: Add external libraries
Drag and drop below mentioned Spring and other libraries into the folder WebContent/WEB-INF/lib:
- commons-logging-1.1.1.jar
- org.springframework.web.servlet-3.2.2.RELEASE.jar
- spring-aop-3.2.2.RELEASE.jar
- spring-aspects-3.2.2.RELEASE.jar
- spring-beans-3.2.2.RELEASE.jar
- spring-context-support-3.2.2.RELEASE.jar
- spring-context-3.2.2.RELEASE.jar
- spring-core-3.2.2.RELEASE.jar
- spring-expression-3.2.2.RELEASE.jar
- spring-webmvc-3.2.2.RELEASE.jar
- spring-web-3.2.2.RELEASE.jar
Step 3: Create Controller and theme resolver classes
Create the package com.javabeat.controller under src folder. (Right click onsrc -> New -> Package ->)
Create the Controller HomeController and the theme resolver DarkAndBrightThemeResolver under the package com.javabeat.controller.
Contents of HomeController are as follows:
package com.javabeat.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; @Controller @RequestMapping("/home") public class HomeController { @RequestMapping(method = RequestMethod.GET) public String showHome() { return "home"; } }
Contents of DarkAndBrightThemeResolver are as follows:
package com.javabeat.controller; import java.util.Random; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.theme.AbstractThemeResolver; public class DarkAndBrightThemeResolver extends AbstractThemeResolver { @Override public String resolveThemeName(HttpServletRequest arg0) { return isNight() ? "dark" : "bright"; } // implementation private boolean isNight() { return new Random().nextBoolean(); } @Override public void setThemeName(HttpServletRequest arg0, HttpServletResponse arg1, String arg2) { } }
Step 4: Create the CSS
Lets create the css files (one of the many static resources that a theme can have) associated with each theme. Here are the css files (I placed them under the themes folder under the webcontent directory):
bright.css
body { color: blue; background-color: white; }
dark.css
body { color: white; background-color: black; }
Step 5: Define themes for Spring MVC
Next define the themes. The default way to do this in Spring MVC is to use one property file (I’ve placed the property files under the src/resources directory) for each theme. Here are the two theme definitions:
bright.properties
#bright theme properties file bright.properties css=themes/bright.css page.title=Welcome to Bright Theme welcome.message=Hello Visitor!! Have a Good day!!
dark.properties
#dark theme properties file dark.properties css=themes/dark.css page.title=Welcome to Dark Theme welcome.message=Hello Visitor!! Have a Good night!!
Step 6: Create view files.
Create a sub-folder with a name jsp under the WebContent/WEB-INF folder. Create view file home.jsp under jsp sub-folder.
Contents of >home.jsp are
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <link rel="stylesheet" href="<spring:theme code='css'/>" type="text/css" /> <title><spring:theme code="page.title"/></title> </head> <body> <spring:theme code="welcome.message" /> </body> </html>
Step 7: Create spring configuration files
Create the configuration files web.xml and HelloWeb-servlet.xml. under the the directory WEB-INF.
The contents of web.xml are:
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>Spring Themes Example</display-name> <servlet> <servlet-name>HelloWeb</servlet-name> <servlet-class> org.springframework.web.servlet.DispatcherServlet </servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>HelloWeb</servlet-name> <url-pattern>*.html</url-pattern> </servlet-mapping> </web-app>
The contents of HelloWeb-servlet.xml are:
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:context="http://www.springframework.org/schema/context" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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"> <!-- Scan for controllers --> <context:component-scan base-package="com.javabeat.controller"/> <context:annotation-config /> <!-- Views are jsp pages defined directly in the root --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/" /> <property name="suffix" value=".jsp" /> </bean> <bean id="themeSource" class="org.springframework.ui.context.support.ResourceBundleThemeSource"/> <bean id="themeResolver" class="com.javabeat.controller.DarkAndBrightThemeResolver"/> </beans>
Here you will notice that bean with id themeSource is defined which tell Spring where to find themes. The bean named themeResolver, tells Spring what theme to use when a request is made. Spring provides three theme resolvers out of the box: FixedThemeResolver, SessionThemeResolver, CookieThemeResolver that are sufficient for most use cases. However, our site needs to inherit a theme based on the time, we will call our new theme resolver called DarkAndBrightThemeResolver, which we have created in the one of the above steps.
Step8: Deploy and execute the spring themes example
The final directory structure is as follows:
Once all the files are ready export the application. Right click on your application and use Export > WAR File option and save your HelloWeb.war file in Tomcat’s webapps folder. Now start the Tomcat server and try to access the URL http://localhost:8080/HelloWeb/home. You should see the following scree
Upon refreshing the page you should see the below page:
We can switch between styles by refreshing the page.
Summary
In this article we saw how we can use themes in Spring. In the next article shall discuss about uploading multipart file using Spring. If you are interested in receiving the future articles, please subscribe here. follow us on @twitter and @facebook