Introduction to Thymeleaf Template in Spring Boot Series

PS: Never find excuses for not doing things you want to do.

Thymeleaf is a Java template engine for web development that can handle HTML, XML, JavaScript, CSS, and even plain text. Spring Boot recommends using Thymeleaf template engine instead of traditional JSP technology. The main contents are as follows:

Introduction to Thymeleaf
Thymeleaf attributes
Usage of Thymeleaf
Hot deployment

Introduction to Thymeleaf#

Personally, I find Gradle more concise compared to Maven. Here, we use Gradle to build the entire web project. In the build.gradle file, the Thymeleaf dependency is imported as follows:

dependencies {
    // Import Thymeleaf dependency
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

Since Thymeleaf is a third-party plugin, the corresponding classpath needs to be specified in the build.gradle file. Configure it as follows:

// Third-party plugins need to specify the corresponding classpath
buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:2.2.5.RELEASE")
    }
}

At this point, Thymeleaf has been imported into the web project. You can check if Thymeleaf has been imported correctly in the imported library list.

Thymeleaf attributes#

# Enable template caching, default is true
spring.thymeleaf.cache=false
# Check if the template exists before rendering
#spring.thymeleaf.check-template=true
# Check if the template location exists
#spring.thymeleaf.check-template-location=true
# Enable SpringEL compiler in SpringEL expressions
#spring.thymeleaf.enable-spring-el-compiler=false
# Enable Thymeleaf view resolution for web frameworks
#spring.thymeleaf.enabled=true
# Template encoding
#spring.thymeleaf.encoding=UTF-8
# Comma-separated list of view names to be excluded from the solution
#spring.thymeleaf.excluded-view-names
# Template mode
#spring.thymeleaf.mode=HTML
# Prefix when building URLs
#spring.thymeleaf.prefix=classpath:/templates/
# Suffix when building URLs
#spring.thymeleaf.suffix=.html
# Comma-separated list of view names, which should be the only ones executed in CHUNKED mode when a maximum chunk size is set
#spring.thymeleaf.reactive.chunked-mode-view-names
# Comma-separated list of view names, which should be the only ones executed in FULL mode when a maximum chunk size is set
#spring.thymeleaf.reactive.full-mode-view-names
# Maximum size of the data buffer used to write the response, if a template is set, it will be executed in CHUNKED mode by default
#spring.thymeleaf.reactive.max-chunk-size=0B
# Media types supported by the view technology
#spring.thymeleaf.reactive.media-types
# Whether hidden form inputs acting as markers for checkboxes should be rendered before the checkbox element itself.
#spring.thymeleaf.render-hidden-markers-before-checkboxes=false
# Content-Type of the HTTP response
#spring.thymeleaf.servlet.content-type=text/html
# Thymeleaf should write output or buffer as much as possible until template processing is complete
#spring.thymeleaf.servlet.produce-partial-output-while-processing=true
# Order of the template resolver in the chain, by default, the template resolver is the first one in the chain, starting from 1, and can only be set if other TemplateResolvers are defined
#spring.thymeleaf.template-resolver-order
# Comma-separated list of view names that can be resolved
#spring.thymeleaf.view-names

Usage of Thymeleaf#

After successfully importing the Thymeleaf dependency, create a template file hello.html under resources/templates as follows:

<!DOCTYPE html>
<!-- Must include the Thymeleaf namespace -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>thymeleaf</title>
</head>

<body>
    <p th:text="${name}">Hello World!</p>
</body>

</html>

In the above code, Thymeleaf tags are used within the HTML tags, which is different from other template engines. ${name} will retrieve the value of name and replace the content within the p tag with the value of name. Then, create the corresponding controller as follows:

@Controller
public class ThymeleafController {
    @RequestMapping("/index")
    public String hello(Model model){
        model.addAttribute("name","jzman");
        return "hello";
    }
}

After running the project, you can access the following URL:

http://localhost:8080/index

The result will be:

jzman

Hot deployment#

In the build.gradle file, import devtools as follows:

dependencies {
    // Hot deployment
    implementation("org.springframework.boot:spring-boot-devtools:2.0.2.RELEASE")
}

Then, press Ctrl+Shift+A and find Registry, check the following option:

Finally, in the Compiler settings, check the following option:

After configuring, to ensure timely updates, Thymeleaf template caching should be disabled:

spring.thymeleaf.cache=false

After running the project, if there are any changes in the project, you can use the shortcut Ctrl+F9 to quickly deploy.