Thymeleaf with Spring Boot
© luv2code LLC
What is Thymeleaf?
• Thymeleaf is a Java templating engine www.thymeleaf.org
Separate project
Unrelated to spring.io
• Commonly used to generate the HTML views for web apps
• However, it is a general purpose templating engine
• Can use Thymeleaf outside of web apps (more on this later)
www.luv2code.com © luv2code LLC
What is a Thymeleaf template?
• Can be an HTML page with some Thymeleaf expression
• Include dynamic content from Thymeleaf expressions
HTML code Can access
Java code, objects
Thymeleaf expressions Spring beans
www.luv2code.com © luv2code LLC
Where is the Thymeleaf template processed?
• In a web app, Thymeleaf is processed on the serve
• Results included in HTML returned to browser
www.luv2code.com © luv2code LLC
Thymeleaf Demo
Output
www.luv2code.com © luv2code LLC
Development Process Step-
By-S
tep
1. Add Thymeleaf to Maven POM le
fi
2. Develop Spring MVC Controller
3. Create Thymeleaf template
www.luv2code.com © luv2code LLC
Step 1: Add Thymeleaf to Maven pom file
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Based on this,
Spring Boot will auto con gure to
fi
use Thymeleaf templates
www.luv2code.com © luv2code LLC
Step 2: Develop Spring MVC Controller
File: DemoController.java
@Controller
public class DemoController {
@GetMapping("/")
public String sayHello(Model theModel) {
theModel.addAttribute("theDate", new java.util.Date());
return "helloworld";
src/main/resources/templates/helloworld.html
www.luv2code.com © luv2code LLC
Where to place Thymeleaf template?
• In Spring Boot, your Thymeleaf template les go in
fi
• src/main/resources/templates
• For web apps, Thymeleaf templates have a .html extension
www.luv2code.com © luv2code LLC
Step 3: Create Thymeleaf template
File: DemoController.java
Thymeleaf accesses "theDate" @Controller
public class DemoController {
from the
Spring MVC Model @GetMapping("/")
public String sayHello(Model theModel) {
File: src/main/resources/templates/helloworld.html theModel.addAttribute("theDate", new java.util.Date());
To use Thymeleaf
expressions
<!DOCTYPE HTML> return "helloworld";
1
<html xmlns:th="http://www.thymeleaf.org"> }
<head> … </head> }
<body>
<p th:text="'Time on the server is ' + ${theDate}" />
</body>
</html>
2
Thymeleaf
expression
www.luv2code.com © luv2code LLC
Step 3: Create Thymeleaf template
File: DemoController.java
Thymeleaf accesses "theDate" @Controller
public class DemoController {
from the
Spring MVC Model @GetMapping("/")
public String sayHello(Model theModel) {
File: src/main/resources/templates/helloworld.html theModel.addAttribute("theDate", new java.util.Date());
<!DOCTYPE HTML> return "helloworld";
1
<html xmlns:th="http://www.thymeleaf.org"> }
<head> … </head> }
<body>
<p th:text="'Time on the server is ' + ${theDate}" />
</body>
</html>
2
Thymeleaf
expression
www.luv2code.com © luv2code LLC
Additional Features
• Looping and conditional
• CSS and JavaScript integratio
• Template layouts and fragments
www.thymeleaf.org
www.luv2code.com © luv2code LLC
CSS and Thymeleaf
© luv2code LLC
Let's Apply CSS Styles to our Page
Before After
Time on the server is Sat Jan 05 11:42:13 EST 2019 Time on the server is Sat Jan 05 11:42:13 EST 2019
font-style: italic;
color: green;
www.luv2code.com © luv2code LLC
Using CSS with Thymleaf Templates
• You have the option of using
• Local CSS les as part of your projec
fi
t
• Referencing remote CSS les
fi
• We'll cover both options in this video
www.luv2code.com © luv2code LLC
Development Process Step-
By-S
tep
1. Create CSS le
fi
2. Reference CSS in Thymeleaf template
3. Apply CSS style
www.luv2code.com © luv2code LLC
Step 1: Create CSS file
• Spring Boot will look for static resources in the director
• src/main/resources/static You can create your own
custom sub-directorie
static/css
static/images
static/js
etc
src/main/resources
static
File: demo.css
css
.funny {
demo.css font-style: italic;
color: green;
}
Can be any sub-directory nam
e
www.luv2code.com © luv2code LLC
Step 2: Reference CSS in Thymeleaf template
File: helloworld.html @ symbo
<head> Reference context path of your application
<title>Thymeleaf Demo</title> (app root)
<!-- reference CSS file -->
<link rel="stylesheet" th:href="@{/css/demo.css}" />
</head>
src/main/resources
static
css
demo.css
www.luv2code.com © luv2code LLC
Step 3: Apply CSS
File: demo.css
File: helloworld.html
.funny {
<head> font-style: italic;
<title>Thymeleaf Demo</title> color: green;
<!-- reference CSS file -->
<link rel="stylesheet" th:href="@{/css/demo.css}" />
</head>
<body>
<p th:text="'Time on the server is ' + ${theDate}" class="funny" />
</body>
Time on the server is Sat Jan 05 11:42:13 EST 2019
www.luv2code.com © luv2code LLC
Other search directories
Spring Boot will search following directories for static resources
/src/main/resources
1. /META-INF/resources
2. /resources
Search order: top-down
3. /static
4. /public
www.luv2code.com © luv2code LLC
3rd Party CSS Libraries - Bootstrap
• Local Installatio
• Download Bootstrap le(s) and add to /static/css directory
fi
<head>
… …
<!-- reference CSS file -->
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
</head>
www.luv2code.com © luv2code LLC
3rd Party CSS Libraries - Bootstrap
• Remote Files
<head>
… …
<!-- reference CSS file -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
… …
</head>
www.luv2code.com © luv2code LLC
