Spring Boot, Apache Tiles, JSP Tutorial

View more categories:

1- What is Apache Tiles?

The Apache Titles is taken idea from putting tiles together to form a roof.
Your web page is regarded as a roof.  It is reassembled from tiles. A tile herein is a jsp file (In this situation, it is also called a fragment). The Apache Titles helps you to define a template to reassemble compenents to form a complete page.
The Apache Tiles is based on an  Composite model.  It is built to simplify development for user interface. Let's imagine that your web application contains many pages, but in fact they have same structure. The simplest is a classic structure consisting of the 4 parts: Header, Footer, Menu, Body. Instead of designing a page in a block, let's design it in many components and put them together.

2- Objective of Example

In this post, I am going to show you how to create a Spring Boot application, design interface components using  JSP, and use the  Apache Tiles to put the interface components together to form a complete site.
Note: In addition to the JSP you can also create interface components with Thymeleaf and then use the Apache Tiles to put the interface components together. This topic can be viewed in the following post: 
  • TODO Link!

3- Create a Spring Boot project

4- Configure pom.xml

Declare the library necessary for the  JSP/Servlet and the  Apache Tiles in the  pom.xml file.
JSP/Servlet + Tiles
<dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
</dependency>

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
</dependency>

<!-- Tiles API -->
<!-- http://mvnrepository.com/artifact/org.apache.tiles/tiles-api -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-api</artifactId>
    <version>3.0.8</version>
</dependency>


<!-- Tiles Core -->
<!-- http://mvnrepository.com/artifact/org.apache.tiles/tiles-core -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-core</artifactId>
    <version>3.0.8</version>
</dependency>

<!-- Tiles Servlet -->
<!-- http://mvnrepository.com/artifact/org.apache.tiles/tiles-servlet -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-servlet</artifactId>
    <version>3.0.8</version>
</dependency>

<!-- Tiles JSP -->
<!-- http://mvnrepository.com/artifact/org.apache.tiles/tiles-jsp -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>3.0.8</version>
</dependency>

<!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-request-api -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-request-api</artifactId>
    <version>1.0.6</version>
</dependency>
The full content of the  pom.xml file:
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
       http://maven.apache.org/xsd/maven-4.0.0.xsd">
       
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.o7planning</groupId>
    <artifactId>SpringBootJspTiles</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>SpringBootJspTiles</name>
    <description>Spring Boot + JSP + Apache Tiles</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.9.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>



    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>


        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>

        <!-- Tiles API -->
        <!-- http://mvnrepository.com/artifact/org.apache.tiles/tiles-api -->
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-api</artifactId>
            <version>3.0.8</version>
        </dependency>


        <!-- Tiles Core -->
        <!-- http://mvnrepository.com/artifact/org.apache.tiles/tiles-core -->
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-core</artifactId>
            <version>3.0.8</version>
        </dependency>

        <!-- Tiles Servlet -->
        <!-- http://mvnrepository.com/artifact/org.apache.tiles/tiles-servlet -->
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-servlet</artifactId>
            <version>3.0.8</version>
        </dependency>

        <!-- Tiles JSP -->
        <!-- http://mvnrepository.com/artifact/org.apache.tiles/tiles-jsp -->
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-jsp</artifactId>
            <version>3.0.8</version>
        </dependency>
        
        <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-request-api -->
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-request-api</artifactId>
            <version>1.0.6</version>
        </dependency>
        
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>


</project>
 

5- Configure Tiles View Resolver

TilesConfig.java
package org.o7planning.sbtiles.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.view.UrlBasedViewResolver;
import org.springframework.web.servlet.view.tiles3.TilesConfigurer;
import org.springframework.web.servlet.view.tiles3.TilesView;

@Configuration
public class TilesConfig {
    
    
    @Bean(name = "viewResolver")
    public ViewResolver getViewResolver() {
        UrlBasedViewResolver viewResolver = new UrlBasedViewResolver();

        // TilesView 3
        viewResolver.setViewClass(TilesView.class);

        return viewResolver;
    }

    @Bean(name = "tilesConfigurer")
    public TilesConfigurer getTilesConfigurer() {
        TilesConfigurer tilesConfigurer = new TilesConfigurer();

        // TilesView 3
        tilesConfigurer.setDefinitions("/WEB-INF/tiles.xml");

        return tilesConfigurer;
    }
    
    

}

6- Tiles Definitions & Layout

Tiles.xml file is the place where you define pages in your application and declare the components of each page. 
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>  

    <!-- Base Define -->
    <definition name="base.definition"  
        template="/WEB-INF/layouts/classic.jsp">  
        <put-attribute name="title" value="" />  
        <put-attribute name="header" value="/WEB-INF/basefragments/_header.jsp" />  
        <put-attribute name="menu" value="/WEB-INF/basefragments/_menu.jsp" />  
        <put-attribute name="body" value="" />  
        <put-attribute name="footer" value="/WEB-INF/basefragments/_footer.jsp" />  
    </definition>  

    <!-- Home Page  -->
    <definition name="homePage" extends="base.definition">  
        <put-attribute name="title" value="Home Page" />  
        <put-attribute name="body" value="/WEB-INF/bodyfragments/_home.jsp" />  
    </definition>  
      
    <!-- ContactUs Page -->
    <definition name="contactusPage" extends="base.definition">  
        <put-attribute name="title" value="Contact Us" />  
        <put-attribute name="body" value="/WEB-INF/bodyfragments/_contactus.jsp" />  
    </definition>    

 
</tiles-definitions> 
Classic.jsp file is used to position the components to be displayed on the interface, for example, the following illustration below:  
classic.jsp
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
<head>
<title><tiles:getAsString name="title" /></title>
</head>

<body>
    <table width="100%">
        <tr>
            <td colspan="2">
                <tiles:insertAttribute name="header" />
            </td>
        </tr>
        <tr>
            <td width="20%" nowrap="nowrap">
                 <tiles:insertAttribute name="menu" />
             </td>
            <td width="80%">
                 <tiles:insertAttribute name="body" />
             </td>
        </tr>
        <tr>
            <td colspan="2">
                 <tiles:insertAttribute name="footer" />
            </td>
        </tr>
    </table>
</body>
</html>

7- JSP Fragments

/WEB-INF/basefragments/_menu.jsp
<div style="padding: 5px;">

    <ul>

        <li><a href="${pageContext.request.contextPath}/">Home</a></li>
        <li><a href="${pageContext.request.contextPath}/contactus">Contact Us</a></li>

    </ul>

</div>
/WEB-INF/basefragments/_header.jsp
<div style="background: #E0E0E0; height: 55px; padding: 5px;">
   <div style="float: left">
      <h1>My Site</h1>
   </div>

   <div style="float: right; padding: 10px; text-align: right;">

      Search <input name="search">

   </div>

</div>
/WEB-INF/basefragments/_footer.jsp
<div
   style="background: #E0E0E0; text-align: center; padding: 5px; margin-top: 10px;">
    
   @Copyright o7planning.org
    
</div>
/WEB-INF/bodyfragments/_home.jsp
<h2>Hi All</h2>

This is Home Page
/WEB-INF/bodyfragments/_contactus.jsp
Contact Us: o7planning.org
<br>
Address: ${address}
<br>
Phone: ${phone}
<br>
Email: ${email}

8- Controller

MainController.java
package org.o7planning.sbtiles.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class MainController {

    @RequestMapping(value = { "/", "/home" }, method = RequestMethod.GET)
    public String homePage(Model model) {
        return "homePage";
    }

    
    @RequestMapping(value = { "/contactus" }, method = RequestMethod.GET)
    public String contactusPage(Model model) {
        model.addAttribute("address", "Vietnam");
        model.addAttribute("phone", "...");
        model.addAttribute("email", "...");
        return "contactusPage";
    }
    
}

View more categories: