Getting started with Thymeleaf

Getting stared with thymeleaf requires very little effort, here is what we actually need to start developing web applications using Spring Boot + Thymeleaf.

Step 1. First of all you need to add the Thymeleaf dependency.

For Gradle Projects

// https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

For Maven Projects

<!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf -->
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.12.RELEASE</version>
</dependency>

Other than this, assuming that you will already have spring boot web dependency, if yes you can just jump to go to step 2, if no then follow to setup from spring initializr.

After downloading and importing the project the build.gradle file looks like:

plugins {
id 'org.springframework.boot' version '2.4.1'
id 'io.spring.dependency-management' version '1.0.10.RELEASE'
id 'java'
}

group = 'com.demo'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

repositories {
mavenCentral()
}

dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

test {
useJUnitPlatform()
}

Step 2. Now the create the HTML files in the template directory as shown in the picture

Directory Structure

 

Step 3: Add the namespace in the html tag at the top of the every html file

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

Step 4: Add Controller method to handle request

@Controller
public class MyRequestController {

    @RequestMapping(value = "/home",method = RequestMethod.GET)
    public ModelAndView home(){
        ModelAndView mv = new ModelAndView("index");
           mv.addObject("cricketTeam",getTeam());  //getTeam() method returns the list of Students
        return mv;
    }
}

 Step 5: Add the HTML code to write the list to team members

<tbody> 
 <tbody>
    <tr th:each="student,itr :${cricketTeam}">
        <td th:text="${itr.count}">Sr.No.</td>
        <td th:text="${student.name}">Student Name</td>
        <td th:text="${student.standard}">Standard</td>
        <td th:text="${student.role}">Role</td>
    </tr>
    </tbody>
</table>

Verify the files MyRequestController.java

package com.demo.thymeleaf;

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

import java.util.ArrayList;
import java.util.List;

@Controller
public class MyRequestController {

    @RequestMapping(value = "/home",method = RequestMethod.GET)
    public ModelAndView home(){
        ModelAndView mv = new ModelAndView("index");
           mv.addObject("teamName","Yellow House");
           mv.addObject("cricketTeam",getTeam());
        return mv;
    }

    private List<Student> getTeam(){
        List<Student> team = new ArrayList<>();
        team.add(new Student("Suraj","12th", "Captain"));
        team.add(new Student("Vipin","12th", "Wicket Keeper"));
        team.add(new Student("Ayush","10th", "Bowler"));
        team.add(new Student("Swapnil","11th", "Batsman"));
        team.add(new Student("Shivam","12th", "Batsman"));
        team.add(new Student("Lavkush","12th", "Bowler"));
        team.add(new Student("Asif","19th", "Bowler"));
        team.add(new Student("Aman","10th", "Batsman"));
        team.add(new Student("Suresh","11th", "Batsman"));
        team.add(new Student("Kailash","11th", "Batsman"));
        team.add(new Student("Kuldeep","12th", "Bowler"));
        return team;
    }
    private class Student {
        String name;
        String standard;
        String role;

        public Student(String name, String standard, String role) {
            this.name = name;
            this.standard = standard;
            this.role = role;
        }
        public String getName() { return name;}
        public String getStandard() { return standard;}
        public String getRole() { return role;}
    }
}

Verify the HTML file  index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf Example</title>
</head>
<body>
<table border="1">
    <h1>Cricket Team [[${teamName}]]</h1>
    <thead>
    <tr><th>#</th>
        <th>Student Name</th>
        <th>Standard</th>
        <th>Role</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="student,itr :${cricketTeam}">
        <td th:text="${itr.count}"></td>
        <td th:text="${student.name}"></td>
        <td th:text="${student.standard}"></td>
        <td th:text="${student.role}"></td>
    </tr>
    </tbody>
</table>
</body>
</html>

Output Screen

After running the project The following output be found:

I hope everything is explained correctly. Enjoy the learning. Go to next to explore more.



×