Introduction to Thymeleaf Template in the 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 as the template engine instead of traditional JSP technology. The main content is as follows:

Introduction to Thymeleaf
Thymeleaf attributes
Using Thymeleaf
Hot deployment

Introduction to Thymeleaf#

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

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

Since Thymeleaf is a third-party plugin, you also need to specify the corresponding classpath 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")
    }
}

Thymeleaf has now been added to 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 the 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 that 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 that 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 for writing 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

Using Thymeleaf#

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

<!DOCTYPE html>
<!--Thymeleaf namespace must be added-->
<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 get the value of name and replace the content in 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, you can access the following URL:

http://localhost:8080/index

The result will be:

jzman

Hot deployment#

Add devtools in the build.gradle file as follows:

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

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

Finally, check the following option in the Compiler settings:

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 for quick deployment.