Spring MVC - Working with themes using default Settings

[Updated: Jan 10, 2018, Created: Jan 5, 2018]

Following example shows how to use themes in Spring MVC with default settings. An implementation of ThemeResolver is used by DispatcherServlet to handle themes related logic. By default FixedThemeResolver is used and with this settings a properties file named theme.properties should be on the classpath. This properties file defines the 'codes' (as properties keys) which can be referenced in a view (e.g. a JSP file). Let's understand that with an example.

Example

Theme Property file

By default 'theme' name is used for the property file (as set with AbstractThemeResolver#defaultThemeName).

src/main/resources/theme.properties

background=pink
content-width=400px
main-css=/themes/theme-1/main.css

The CSS file

As specified in above properties file, we need to provide following css file:

/src/main/webapp/app-themes/theme-1/main.css

.summary{
  width: 100px;
  margin: 50px 50px 50px 50px;
  background: yellow;
  border: solid 2px blue;
}

Java Config class

@EnableWebMvc
@Configuration
@ComponentScan
public class MyWebConfig implements WebMvcConfigurer {

  @Override
  public void addViewControllers(ViewControllerRegistry registry) {
      //mapping '/' to index view name without a controller
      ViewControllerRegistration r = registry.addViewController("/");
      r.setViewName("index");
  }

  @Override
  public void configureViewResolvers(ViewResolverRegistry registry) {
      registry.jsp();//default prefix=/WEB-INF/", suffix=".jsp"
  }

  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
      //specifying static resource location for themes related files(css etc)
      registry.addResourceHandler("/themes/**")
              .addResourceLocations("/app-themes/");
  }
}

JSP View:

/src/main/webapp/WEB-INF/index.jsp

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
    <link rel="stylesheet" href="<spring:theme code='main-css'/>" type="text/css"/>
</head>
<body style="background-color:<spring:theme code='background'/>;">
    <div style="width:<spring:theme code='content-width'/>;margin:auto;">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
        Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend leo.
    </div>
    <div class="summary">Aliquam tincidunt mauris eu risus</div>
</body>
</html>

To try examples, run embedded tomcat (configured in pom.xml of example project below):

mvn tomcat7:run-war

Output

Output HTML source:

<html>
<head>
    <link rel="stylesheet" href="/themes/theme-1/main.css" type="text/css"/>
</head>
<body style="background-color:pink;">
<div style="width:400px;margin:auto;">
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
<div class="summary">Aliquam tincidunt mauris eu risus</div>
</body>
</html>

Example Project

Dependencies and Technologies Used :

  • spring-webmvc 5.0.2.RELEASE: Spring Web MVC.
  • javax.servlet-api 3.1.0 Java Servlet API
  • JDK 1.8
  • Maven 3.3.9

Spring MVC Working with Themes with default ThemeResolver Select All Download
  • spring-mvc-theme-defaults
    • src
      • main
        • java
          • com
            • logicbig
              • example
        • resources
        • webapp
          • WEB-INF
          • app-themes
            • theme-1

See Also