mydomain
No ADS
No ADS

Spring Boot, Apache Tiles, JSP Tutorial with Examples

  1. What is Apache Tiles?
  2. Objective of Example
  3. Create a Spring Boot project
  4. Configure pom.xml
  5. Configure Tiles View Resolver
  6. Tiles Definitions & Layout
  7. JSP Fragments
  8. Controller

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

No ADS
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.

3. Create a Spring Boot project

Enter:
  • Name: SpringBootJspTiles
  • Group: org.o7planning
  • Artifact: SpringBootJspTiles
  • Description: Spring Boot + Apache Tiles + JSP
  • Package: org.o7planning.sbtiles
SpringBootJspTilesApplication.java
package org.o7planning.sbtiles;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringBootJspTilesApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootJspTilesApplication.class, args);
    }
    
}

4. Configure pom.xml

No ADS
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>2.0.0.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

No ADS
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

No ADS
/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";
    }
    
}
No ADS

Spring Boot Tutorials

Show More
No ADS

Spring Boot Tutorials

Show More
No ADS
No ADS

Newest Articles

Show More
No ADS