Configuring tiles with Spring Boot involves integrating Apache Tiles, a template framework, into your Spring Boot application to manage the layout and composition of your web pages.
Tiles allow you to define reusable page fragments or templates, which can be assembled to create complete web pages.
Step-by-step guide to configuring tiles with Spring Boot Project:
Step 1) Add Maven Dependencies
Add the below dependenices into your pom.xml file
<!-- 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>
Step 2: Configure Tiles
Create a tiles.xml file in your project’s resources directory WEB-INF to define your tile templates and layouts. This file typically contains definitions for header, footer, and other reusable components.
<?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="body" value="" />
<put-attribute name="side"
value="/WEB-INF/basefragments/_side.jsp" />
<put-attribute name="footer"
value="/WEB-INF/basefragments/Footer.jsp" />
</definition>
<!-- Welcome Page -->
<definition name="welcome" extends="base.definition">
<put-attribute name="title" value="Welcome" />
<put-attribute name="body"
value="/WEB-INF/bodyfragments/Welcome.jsp" />
</definition>
<!-- Welcome Page -->
<definition name="welcome2" extends="base.definition">
<put-attribute name="title" value="Welcome" />
<put-attribute name="body"
value="/WEB-INF/bodyfragments/WelcomeView.jsp" />
</definition>
<!-- About Page -->
<definition name="aboutus" extends="base.definition">
<put-attribute name="title" value="About" />
<put-attribute name="body"
value="/WEB-INF/bodyfragments/AboutView.jsp" />
</definition>
<!-- SingUp Page -->
<definition name="register" extends="base.definition">
<put-attribute name="title" value="User Registeration" />
<put-attribute name="body" value="/WEB-INF/bodyfragments/SignUpView.jsp"/>
</definition>
<!-- Login Page -->
<definition name="login" extends="base.definition">
<put-attribute name="title" value="Login Ctl"/>
<put-attribute name="body" value="/WEB-INF/bodyfragments/LoginView.jsp" />
</definition>
<!-- UserList -->
<definition name="list" extends="base.definition">
<put-attribute name="title" value="User List" />
<put-attribute name="body" value="/WEB-INF/bodyfragments/UserListView.jsp" />
</definition>
<!-- Update -->
<definition name="update" extends="base.definition">
<put-attribute name="title" value="User Update"/>
<put-attribute name="body" value="/WEB-INF/bodyfragments/UserUpdate.jsp"/>
</definition>
<!-- Service Add -->
<definition name="addservice" extends="base.definition">
<put-attribute name="title" value="Service Add"/>
<put-attribute name="body" value="/WEB-INF/bodyfragments/ServiceView.jsp"/>
</definition>
<!-- Service List -->
<definition name="servicelist" extends="base.definition">
<put-attribute name="title" value="Service List"/>
<put-attribute name="body" value="/WEB-INF/bodyfragments/ServiceListView.jsp"/>
</definition>
<!-- Booking Add -->
<definition name="addbooking" extends="base.definition">
<put-attribute name="title" value="Booking Add"/>
<put-attribute name="body" value="/WEB-INF/bodyfragments/BookingView.jsp"/>
</definition>
<!-- Booking List -->
<definition name="bookinglist" extends="base.definition">
<put-attribute name="title" value="Booking List"/>
<put-attribute name="body" value="/WEB-INF/bodyfragments/BookingListView.jsp"/>
</definition>
<!-- Payment Add -->
<definition name="payment" extends="base.definition">
<put-attribute name="title" value="Payment Add"/>
<put-attribute name="body" value="/WEB-INF/bodyfragments/PaymentView.jsp"/>
</definition>
<!-- Payment List -->
<definition name="paymentList" extends="base.definition">
<put-attribute name="title" value="Payment List"/>
<put-attribute name="body" value="/WEB-INF/bodyfragments/PaymentListView.jsp"/>
</definition>
<definition name="changePassword" extends="base.definition">
<put-attribute name="title" value="Change Password" />
<put-attribute name="body" value="/WEB-INF/bodyfragments/ChangePassword.jsp" />
</definition>
<definition name="myprofile" extends="base.definition">
<put-attribute name="title" value="My Profile" />
<put-attribute name="body" value="/WEB-INF/bodyfragments/MyProfile.jsp" />
</definition>
<definition name="contactUs" extends="base.definition">
<put-attribute name="title" value="Contact Us" />
<put-attribute name="body" value="/WEB-INF/bodyfragments/ContactUs.jsp" />
</definition>
<definition name="product" extends="base.definition">
<put-attribute name="title" value="My Profile" />
<put-attribute name="body" value="/WEB-INF/bodyfragments/ProductView.jsp" />
</definition>
<definition name="productlist" extends="base.definition">
<put-attribute name="title" value="Contact Us" />
<put-attribute name="body" value="/WEB-INF/bodyfragments/ProductListView.jsp" />
</definition>
<!-- Booking List -->
<definition name="orderList" extends="base.definition">
<put-attribute name="title" value="OrderList List"/>
<put-attribute name="body" value="/WEB-INF/bodyfragments/OrderListView.jsp"/>
</definition>
<!-- Employee Page -->
<definition name="addemployee" extends="base.definition">
<put-attribute name="title" value="Employee Registeration" />
<put-attribute name="body" value="/WEB-INF/bodyfragments/AddEmployeeView.jsp"/>
</definition>
<!-- EmployeeList -->
<definition name="employeelist" extends="base.definition">
<put-attribute name="title" value="Employee List" />
<put-attribute name="body" value="/WEB-INF/bodyfragments/EmployeeListView.jsp" />
</definition>
<!-- Appointment Page -->
<definition name="addappointment" extends="base.definition">
<put-attribute name="title" value="Employee Registeration" />
<put-attribute name="body" value="/WEB-INF/bodyfragments/AppointmentView.jsp"/>
</definition>
<!-- Appointment List -->
<definition name="appointmentlist" extends="base.definition">
<put-attribute name="title" value="Employee Registeration" />
<put-attribute name="body" value="/WEB-INF/bodyfragments/AppointmentListView.jsp"/>
</definition>
</tiles-definitions>
Step 3: Configure Tiles in Spring Boot
In your Spring Boot configuration class, configure Tiles by creating a TilesConfigurer bean:
ApplicationConfig class
package com.bugtracking.config;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.view.UrlBasedViewResolver;
import org.springframework.web.servlet.view.tiles3.TilesConfigurer;
import org.springframework.web.servlet.view.tiles3.TilesView;
@Configuration
@EnableWebMvc
@EnableAutoConfiguration
public class BugTrackingConfig implements WebMvcConfigurer{
@Bean(name = "viewResolver")
public ViewResolver getViewResolver() {
UrlBasedViewResolver viewResolver = new UrlBasedViewResolver();
viewResolver.setViewClass(TilesView.class);
return viewResolver;
}
@Bean(name = "tilesConfigure")
public TilesConfigurer getTilesConfigure() {
TilesConfigurer tilesConfigure = new TilesConfigurer();
tilesConfigure.setDefinitions("/WEB-INF/tiles.xml");
return tilesConfigure;
}
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
}
}
Layout.jsp
A layout defines the page structure, We are using layout.jsp in tiles.xml as a template.
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<title><tiles:getAsString name="title" /></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="resources/css/style.css">
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker({
changeMonth : true,
changeYear : true,
defaultDate : '01/01/1995'
});
});
$(function() {
$("#datepicker1").datepicker({
changeMonth : true,
changeYear : true
});
});
</script>
<script language="javascript">
$(function() {
$("#selectall").click(function() {
$('.case').attr('checked', this.checked);
});
$(".case").click(function() {
if ($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</script>
<style type="text/css">
.blockquote {
padding: 20px;
box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.1),
0 0 0 2px rgb(255,255,255),
0.3em 0.3em 1em rgba(0,0,0,0.3);
}
.imageHeight{
height: 320px;
}
.linkSize{
font-size: 14px;
}
</style>
</head>
<body >
<div>
<tiles:insertAttribute name="header" />
<tiles:insertAttribute name="body" />
<tiles:insertAttribute name="footer" />
</div>
</body>
</html>
In case of an issue with tiles
- Downgrade the Spring Boot version the above example uses spring boot 2.7.6
