CODEBUN

How to use Fragment in Thymeleaf with Spring Boot

Fragment in thymeleaf with spring boot. Let’s create a spring boot application to implement Fragment in Thymeleaf with Spring boot.  what is a fragment and how to use a fragment in a spring boot application?

What is a fragment in Thymeleaf?

A fragment is a piece of template that can be included in another template. i.e While creating web applications, it’s common to use code that is often repeated and is fixed such as header, menu, footer.

So, instead of having these codes repeated in every file, we can have a single file that will include this small component, and then we can include this file or template in every other template.

Let us understand how to define and reference fragments.

Steps to use Fragment in Thymeleaf

Step 1: Define a fragment

  • Use the th-fragment attribute to define a fragment.
  • There can be one or more fragments in the file.

Consider, you have to use reusable code such as header, footer then, you just need to create a new file called fragment.html as shown in the following code.

<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head th:fragment="html_headtag">
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
 <div th:fragment="html_header">
 
 <!-- code for header  -->
 <nav class="navbar navbar-expand-lg navbar-dark bg-danger">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Thymeleaf</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Spring Boot</a>
        </li>      
      </ul>
    </div>
  </div>
</nav>
</div>
</div>
<div th:fragment="html_footer">
<!-- Footer -->
<footer class="page-footer font-small blue bg-danger mt-5">

  <!-- Copyright -->
  <div class="footer-copyright text-center py-3"> &copy; 2021 Copyright:
    <a href="https://codebun.com"> Codebun.com</a>
  </div>
  <!-- Copyright -->

</footer>
<!-- Footer -->
</div>
</body>
</html>

Step 2: Reference a fragment

  • Reference a fragment in any other file using the th: insert or th: replace attributes.
  • Now, we will include the above template fragment.html in the index.html file.
<!DOCTYPE html>
<html xmlns:th="http:www.thymeleaf.org">
<head th:replace="fragment ::html_headtag">
<meta charset="ISO-8859-1">
<title></title>
</head>
<body>
<div th:replace="fragment ::html_header"></div>
<div class="container">
   <h1 align="center" style="margin-top: 50px;">Body Section</h1>
   <p align="center">Add dynamic contents...</p>
</div>
<div th:replace="fragment ::html_footer"></div>
</body>
</html>
  • Here, we have reference all the components using th: replace attribute.

The following image shows the defining and referencing of fragments in thymeleaf.

Fragment Example in Thymeleaf in a Spring Boot

Let’s create a simple spring boot application to illustrate the use of fragments.

Step 1: Open IDE STS- Spring Tool Suite

Step 2: Go to File > Spring Starter Project.

Step 3: Now, fill all the fields as shown below and click Next.

Step 4: Now, Add the dependencies of Thymeleaf and spring web and click Next > Finish.

Now, wait for some time and your project structure will be ready. Go to the pom.xml file and you will see the following dependency being added automatically.

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
   <groupId>org.projectlombok</groupId>
   <artifactId>lombok</artifactId>
   <optional>true</optional>
</dependency>

Project Structure

Configure application. properties file

#change the port number
server.port=8888

Create a Controller

Create a TestController to handle requests. The request for the web page will be handle by the handler methods in the controller.

package com.example.thymeleaf.controller;

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

@Controller
public class TestController {

 @RequestMapping(value = "/",method = RequestMethod.GET)
 public String home() {
  return "index";
 }
}
  • @Controller annotation marks the TestController class a Request Handler.
  • Every request coming for the ‘/’ URL will be handled by the home() method. It would redirect you to the index page.

Create a Template

fragment.html

In the spring boot application, adding a thymeleaf template is quite simple. Go to src/main/resources/template folder and create a fragment.html file.

<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head th:fragment="html_headtag">
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
 <div th:fragment="html_header">
 
 <!-- code for header  -->
 <nav class="navbar navbar-expand-lg navbar-dark bg-danger">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Thymeleaf</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Spring Boot</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Spring MVC</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">REST API</a>
        </li>
       
      </ul>
    </div>
  </div>
</nav>
 
 </div>
</div>
<div th:fragment="html_footer">
<!-- Footer -->
<footer class="page-footer font-small blue bg-danger mt-5">

  <!-- Copyright -->
  <div class="footer-copyright text-center py-3"> &copy; 2021 Copyright:
    <a href="https://codebun.com"> Codebun.com</a>
  </div>
  <!-- Copyright -->

</footer>
<!-- Footer -->
</div>
</body>
</html>

Now, create another file index.html where we will use this fragment using th:replace attribute

index.html

<!DOCTYPE html>
<html xmlns:th="http:www.thymeleaf.org">
<head th:replace="fragment ::html_headtag">
<meta charset="ISO-8859-1">
<title></title>
</head>
<body>
<div th:replace="fragment ::html_header"></div>
<div class="container">
   <h1 align="center" style="margin-top: 50px;">Body Section</h1>
   <p align="center">Add dynamic contents...</p>
</div>
<div th:replace="fragment ::html_footer"></div>
</body>
</html>

Now, Run the ThymeleafLesson5Application class and Go to localhost:8888 and see the following output.

In this way, we can integrate the fragment into any other file using the fragmented concept in thymeleaf.

Recent Post

CODEBUN

  • jcodebun@gmail.com
  • +91 8827363777
Facebook Twitter Youtube

Automation

Programs

Automation