Spring MVC Tutorial

Core Spring MVC

Spring MVC - Annotation

Spring MVC - Form Handling

Spring MVC with JSTL

Spring MVC with REST API

Spring MVC with Database

Spring MVC - Tiles

Apache Tiles is a templating framework built to simplify the development of web application user interfaces. It allows for defining page fragments (like header, footer, and body) which can be assembled into a complete page at runtime. When integrated with Spring MVC, Tiles can help maintain a consistent look and feel throughout your application without duplicating code.

1. Setting Up Dependencies

To integrate Tiles with Spring MVC, you'll first need to add necessary dependencies. For Maven, these would be:

<!-- Spring Web MVC -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.x.x.RELEASE</version>
</dependency>

<!-- Apache Tiles -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>3.x.x</version>
</dependency>

2. Tiles Configuration

tiles.xml

Define your tiles layouts and definitions in a file (e.g., tiles.xml):

<tiles-definitions>
    <definition name="base.definition" template="/WEB-INF/layouts/defaultLayout.jsp">
        <put-attribute name="header" value="/WEB-INF/fragments/header.jsp" />
        <put-attribute name="body" value="" />
        <put-attribute name="footer" value="/WEB-INF/fragments/footer.jsp" />
    </definition>

    <definition name="home" extends="base.definition">
        <put-attribute name="body" value="/WEB-INF/views/home.jsp" />
    </definition>
</tiles-definitions>

The above configuration defines a base layout base.definition and then a specific page home that uses the base layout.

Spring Configuration

@Configuration
public class TilesConfig {

    @Bean
    public TilesConfigurer tilesConfigurer() {
        TilesConfigurer tilesConfigurer = new TilesConfigurer();
        tilesConfigurer.setDefinitions("/WEB-INF/tiles.xml");
        return tilesConfigurer;
    }

    @Bean
    public TilesViewResolver tilesViewResolver() {
        TilesViewResolver tilesViewResolver = new TilesViewResolver();
        return tilesViewResolver;
    }
}

3. JSP Layout and Fragments

defaultLayout.jsp

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<html>
<head>
    <title>Spring MVC with Tiles</title>
</head>
<body>
    <tiles:insertAttribute name="header" />
    <tiles:insertAttribute name="body" />
    <tiles:insertAttribute name="footer" />
</body>
</html>

header.jsp and footer.jsp

Create JSP fragments for the header and footer, which will be included in the base layout.

4. Controller

@Controller
public class HomeController {

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

When the /home endpoint is accessed, the view named "home" will be resolved using Tiles. The home.jsp content will be injected into the body section of the defaultLayout.jsp.

5. View

Your home.jsp will contain the unique content for the home page, and it will automatically get the header and footer from the base layout.

Conclusion

Apache Tiles, when integrated with Spring MVC, offers a powerful way to define templates and reduce redundancy in your JSP pages. It ensures consistency across pages and simplifies the maintenance of common page fragments like headers and footers.

  1. Spring MVC Tiles Integration Example:

    • Description: This is a basic example showcasing the integration of Apache Tiles with Spring MVC.

    • Code Snippet: (Spring Configuration)

      @Configuration
      @EnableWebMvc
      public class AppConfig extends WebMvcConfigurerAdapter {
      
          @Bean
          public TilesConfigurer tilesConfigurer() {
              TilesConfigurer tilesConfigurer = new TilesConfigurer();
              tilesConfigurer.setDefinitions("/WEB-INF/tiles.xml");
              return tilesConfigurer;
          }
      
          @Bean
          public ViewResolver tilesViewResolver() {
              TilesViewResolver tilesViewResolver = new TilesViewResolver();
              return tilesViewResolver;
          }
      
          @Override
          public void configureViewResolvers(ViewResolverRegistry registry) {
              registry.viewResolver(tilesViewResolver());
          }
      }
      

      (Tiles Configuration - tiles.xml)

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
      <tiles-definitions>
          <definition name="home" template="/WEB-INF/views/layout.jsp">
              <put-attribute name="header" value="/WEB-INF/views/header.jsp" />
              <put-attribute name="content" value="/WEB-INF/views/home.jsp" />
              <put-attribute name="footer" value="/WEB-INF/views/footer.jsp" />
          </definition>
      </tiles-definitions>
      

      (Layout - layout.jsp)

      <html>
      <head>
          <title>Tiles Example</title>
      </head>
      <body>
          <div id="header" tiles:insertAttribute="header"></div>
          <div id="content" tiles:insertAttribute="content"></div>
          <div id="footer" tiles:insertAttribute="footer"></div>
      </body>
      </html>
      
  2. Dynamic Tiles in Spring MVC:

    • Description: This example illustrates the dynamic usage of Tiles in Spring MVC, where the layout can change dynamically.

    • Code Snippet: (Controller)

      @Controller
      public class DynamicTilesController {
      
          @GetMapping("/dynamic")
          public String showDynamicTiles(Model model) {
              // Add dynamic attributes to the model
              return "dynamicTiles";
          }
      }
      

      (Tiles Configuration - tiles.xml)

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
      <tiles-definitions>
          <definition name="dynamic" template="/WEB-INF/views/dynamicLayout.jsp">
              <!-- Dynamic attributes go here -->
          </definition>
      </tiles-definitions>