Spring 3 MVC Setting Different Themes

Spring 3 MVC Setting Different Themes


Posted in : Spring Posted on : April 1, 2011 at 6:37 PM Comments : [ 0 ]

In this tutorial, we will discuss about how to set different themes for a single page

Spring 3 MVC Setting Different Themes

In this tutorial, we will discuss about how to set different themes for a single page. In other words, provide the privilege to the user to the change the  theme.

As you know, theme of a page is the color, font, look, feel etc. In short, the overall design of the page. In the given below example, we use the Package org.springframework.web.servlet.theme & its classes for configuring themes and intercepting theme changes. These setting are configured in the spring-servlet.xml configuration file. We implement CSS file using these setting and package to implement themes.

Example

Given below example is the upgradation of the previously discussed Locale example. In this section, we will show you only the modify or newly added code. But complete source code with jar file is provided to you for download. Please review the code before go through the below code. Here is the link to Spring3 Locale example.

Application Flow

After application execute, the first page that will appear to you will be :

This is the default theme. When you click on the Grey link, it will show you the following page :

When you select the Red&  theme :

When you select Green theme :

 

Application directory structure

Jar file used

CODES

Themes Property Files

We use following four property files for themes :

theme-default.properties (/Spring3MvcThemes/src/theme-default.properties)

css=themes/default.css

theme-Green.properties (/Spring3MvcThemes/src/theme-Green.properties)

css=themes/Green.css

theme-Grey.properties (/Spring3MvcThemes/src/theme-Grey.properties)

css=themes/Grey.css

theme-Red.properties (/Spring3MvcThemes/src/theme-Red.properties)

css=themes/Red.css

CSS Stylesheets

For implementing 4 different themes, we use the following 4 css files :

default.css (/Spring3MvcThemes/WebContent/themes/default.css)

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

Green.css (/Spring3MvcThemes/WebContent/themes/Green.css)

body {
background-color: #3EA99F;
color: white;
}

Grey.css (/Spring3MvcThemes/WebContent/themes/Grey.css)

body {
background-color: #808080;
color: white;
}

Red.css (/Spring3MvcThemes/WebContent/themes/Red.css)

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

Change in the View File

Only two files need to be alter from previously given Sprin3 MVC tile example . The two modified  files are given below :

header.jsp

<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<h3><spring:message code="label.title"/></h3>

<span style="float: right">
<a href="?lang=en">English</a>
|
<a href="?lang=de">German</a>
</span>

<span style="float: left">
<a href="?theme=default">Default</a>
|
<a href="?theme=Grey">Grey</a>
|
<a href="?theme=Red">Red</a>
|
<a href="?theme=Green">Green</a>
</span>

layout.jsp

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ 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>
<link rel="stylesheet" href="<spring:theme code="css"/>" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><tiles:insertAttribute name="title" ignore="true" /></title>

<style>
body {
font-family: sans-serif, Arial;
}
</style>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="2" align="center">
<tr>
<td height="30" colspan="2"><tiles:insertAttribute name="header" />
</td>
</tr>
<tr>
<td height="250"><tiles:insertAttribute name="menu" /></td>
<td width="350"><tiles:insertAttribute name="body" /></td>
</tr>
<tr>
<td height="30" colspan="2"><tiles:insertAttribute name="footer" />
</td>
</tr>
</table>
</body>
</html>

Change in the Application Configuration 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:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
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">


<context:component-scan base-package="net.devmanuals.controller" />

<bean id="viewResolver"
class="org.springframework.web.servlet.view.UrlBasedViewResolver">
<property name="viewClass">
<value>
org.springframework.web.servlet.view.tiles2.TilesView
</value>
</property>
</bean>
<bean id="tilesConfigurer"
class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
<property name="definitions">
<list>
<value>/WEB-INF/tiles.xml</value>
</list>
</property>
</bean>

<!-- Application Message Bundle -->
<bean id="messageSource"
class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
<property name="basename" value="classpath:messages" />
<property name="defaultEncoding" value="UTF-8" />
</bean>

<bean id="localeChangeInterceptor"
class="org.springframework.web.servlet.i18n.LocaleChangeInterceptor">
<property name="paramName" value="lang" />
</bean>

<bean id="localeResolver"
class="org.springframework.web.servlet.i18n.CookieLocaleResolver" />

<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="handlerMapping"
class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">
<property name="interceptors">
<list>
<ref bean="localeChangeInterceptor" />
<ref bean="themeChangeInterceptor" />
</list>
</property>
</bean>
</beans>

Download Source Code

Go to Topic «PreviousHomeNext»

Your Comment:


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 

 
Tutorial Topics