14 Spring Boot Thymeleaf

Thymeleaf with Spring Boot
What is Thymeleaf?
www.luv2code.com
What is Thymeleaf?
• Thymeleaf is a Java templating engine
www.luv2code.com
What is Thymeleaf?
• Thymeleaf is a Java templating engine www.thymeleaf.org
www.luv2code.com
What is Thymeleaf?
• Commonly used to generate the HTML views for web apps
www.luv2code.com
What is Thymeleaf?
• Commonly used to generate the HTML views for web apps
• However, it is a general purpose templating engine
www.luv2code.com
What is Thymeleaf?
• Thymeleaf is a Java templating engine  www.thymeleaf.org
• Commonly used to generate the HTML views for web apps 
• Can use Thymeleaf outside of web apps (more on this later)
www.luv2code.com
What is Thymeleaf?
• Thymeleaf is a Java templating engine  www.thymeleaf.org
• Commonly used to generate the HTML views for web Separate

apps  project
Unrelated to spring.io
• Can use Thymeleaf outside of web apps (more on this later)
www.luv2code.com
What is a Thymeleaf template?
www.luv2code.com
• Can be an HTML page with some Thymeleaf expressions
www.luv2code.com

• Include dynamic content from Thymeleaf expressions
www.luv2code.com

HTML code
Thymeleaf expressions
www.luv2code.com

HTML code
Can access
Thymeleaf expressions Java code, objects
Spring beans
www.luv2code.com
Where is the Thymeleaf template processed?
www.luv2code.com
• In a web app, Thymeleaf is processed on the server
www.luv2code.com
• Results included in HTML returned to browser
www.luv2code.com
• Results included in HTML returned to browser
www.luv2code.com
Hmmm …
This sounds similar to JSP …
www.luv2code.com
Thymeleaf vs JSP
www.luv2code.com
Thymeleaf vs JSP
• Yes, Thymeleaf is similar to JSP
www.luv2code.com
Thymeleaf vs JSP
• Can be used for web view templates
www.luv2code.com
Thymeleaf vs JSP
www.luv2code.com
Thymeleaf vs JSP
• One key difference
www.luv2code.com
Thymeleaf vs JSP
• JSP can only be used in a web environment
www.luv2code.com
Thymeleaf vs JSP
• Can be used for web view templates 
• JSP can only be used in a web environment
• Thymeleaf can be used in web OR non-web environments
www.luv2code.com
Thymeleaf Use Cases (non-web)
www.luv2code.com
• Email Template
www.luv2code.com
Hi <<firstName>>,
Thanks for joining <<course>>!

• Email Template
Email
• When student signs up for a course then send welcome email
www.luv2code.com
Hi <<firstName>>,

• Email Template
Email
• CSV Template
www.luv2code.com
Hi <<firstName>>,

• Email Template
Email
• CSV Template
Product,Quantity,Price,Total
…
• Generate a monthly report as CSV then upload to Google drive …
CSV
www.luv2code.com
Hi <<firstName>>,

• Email Template
Email
• CSV Template
…
• Generate a monthly report as CSV then upload to Google drive …
CSV
• PDF Template
www.luv2code.com
Hi <<firstName>>,

• Email Template
Email
• When student signs up for a course then send welcome email 
• CSV Template
…
• Generate a monthly report as CSV then upload to Google drive   …
CSV
• PDF Template
• Generate a travel confirmation PDF then send via email Flight: <<flightNum>>
Depart: <<departAirport>>
Arrive: <<arrivalAirport>>
PDF
www.luv2code.com
FAQ: Should I use JSP or Thymeleaf?
www.luv2code.com
• Depends on your project requirements
www.luv2code.com
• If you only need web views you can go either way
www.luv2code.com
• If you only need web views you can go either way
• If you need a general purpose template engine (non-web) use Thymeleaf
www.luv2code.com
• Depends on your project requirements 
• If you only need web views you can go either way 
• If you need a general purpose template engine (non-web) use Thymeleaf 
• If you want to impress your interviewer, mention Thymeleaf … LOL!
www.luv2code.com
Thymeleaf Demo
www.luv2code.com
Thymeleaf Demo
www.luv2code.com
Thymeleaf Demo
Output
www.luv2code.com
Development Process Step-
By-S
tep
www.luv2code.com
By-S
tep
1. Add Thymeleaf to Maven POM file
www.luv2code.com
By-S
tep
1. Add Thymeleaf to Maven POM file
2. Develop Spring MVC Controller
www.luv2code.com
By-S
tep
1. Add Thymeleaf to Maven POM file 
2. Develop Spring MVC Controller 
3. Create Thymeleaf template
www.luv2code.com
Step 1: Add Thymeleaf to Maven pom file
www.luv2code.com
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
www.luv2code.com
<dependency>
</dependency>
www.luv2code.com
<dependency>
</dependency>
Based on this,
Spring Boot will auto configure to
use Thymeleaf templates
www.luv2code.com
Step 2: Develop Spring MVC Controller
www.luv2code.com
File: DemoController.java
@Controller
public class DemoController {
@GetMapping("/")
public String sayHello(Model theModel) {
theModel.addAttribute("theDate", new java.util.Date());
return "helloworld";
}
}
www.luv2code.com
@Controller
@GetMapping("/")
theModel.addAttribute("theDate", new java.util.Date());
return "helloworld";
}
}
src/main/resources/templates/helloworld.html
www.luv2code.com
Where to place Thymeleaf template?
www.luv2code.com
• In Spring Boot, your Thymeleaf template files go in
www.luv2code.com

• src/main/resources/templates
www.luv2code.com

• src/main/resources/templates 
• For web apps, Thymeleaf templates have a .html extension
www.luv2code.com
Step 3: Create Thymeleaf template
www.luv2code.com
File: src/main/resources/templates/helloworld.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head> … </head>
<body>
<p th:text="'Time on the server is ' + ${theDate}" />
</body>
</html>
www.luv2code.com
To use Thymeleaf
<!DOCTYPE HTML> expressions
<head> … </head>
<body>
</body>
</html>
www.luv2code.com
To use Thymeleaf
<head> … </head>
<body>
</body>
</html>
Thymeleaf
expression
www.luv2code.com
To use Thymeleaf
<head> … </head>
<body>
</body>
</html>
Thymeleaf
expression
www.luv2code.com
To use Thymeleaf
<head> … </head>
<body>
</body>
</html>
Thymeleaf
expression
www.luv2code.com
@Controller
@GetMapping("/")
File: src/main/resources/templates/helloworld.html theModel.addAttribute("theDate", new java.util.Date());
<!DOCTYPE HTML> return "helloworld";

<html xmlns:th="http://www.thymeleaf.org"> }
<head> … </head> }
<body>
</body>
</html>
Thymeleaf
expression
www.luv2code.com
@Controller
@GetMapping("/")

<html xmlns:th="http://www.thymeleaf.org"> } 1
<body>
</body>
</html>
Thymeleaf
expression
www.luv2code.com
@Controller
Thymeleaf accesses "theDate" @GetMapping("/")

from the
Spring MVC Model
<body>
</body>
</html>
Thymeleaf
expression
www.luv2code.com
@Controller
Thymeleaf accesses "theDate" @GetMapping("/")

from the
Spring MVC Model
<body>
</body>
</html>
2
Thymeleaf
expression
www.luv2code.com
Additional Features
www.luv2code.com
Additional Features
• Looping and conditionals
www.luv2code.com
Additional Features
• CSS and JavaScript integration
www.luv2code.com
Additional Features
• Template layouts and fragments
www.luv2code.com
Additional Features
• Template layouts and fragments
www.thymeleaf.org
www.luv2code.com
CSS and Thymeleaf
Let's Apply CSS Styles to our Page
www.luv2code.com
Before
Time on the server is Sat Jan 05 11:42:13 EST 2019
www.luv2code.com
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
www.luv2code.com
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
Using CSS with Thymleaf Templates
www.luv2code.com
• You have the option of using
www.luv2code.com
• Local CSS files as part of your project
www.luv2code.com
• Referencing remote CSS files
www.luv2code.com
• Referencing remote CSS files 
• We'll cover both options in this video
www.luv2code.com
By-S
tep
www.luv2code.com
By-S
tep
1. Create CSS file
www.luv2code.com
By-S
tep
1. Create CSS file
2. Reference CSS in Thymeleaf template
www.luv2code.com
By-S
tep
1. Create CSS file 
2. Reference CSS in Thymeleaf template 
3. Apply CSS style
www.luv2code.com
Step 1: Create CSS file
www.luv2code.com
• Spring Boot will look for static resources in the directory
www.luv2code.com
• src/main/resources/static
www.luv2code.com
src/main/resources
static
css
demo.css
www.luv2code.com
src/main/resources
static
File: demo.css
css
.funny {
demo.css font-style: italic;
color: green;
}
www.luv2code.com
src/main/resources
static
File: demo.css
css
.funny {
color: green;
}
Can be any sub-directory name
www.luv2code.com
You can create your own
custom sub-directories
• src/main/resources/static static/css
static/images
static/js
src/main/resources etc …
static
File: demo.css
css
.funny {
color: green;
}
Can be any sub-directory name
www.luv2code.com
Step 2: Reference CSS in Thymeleaf template
www.luv2code.com
File: helloworld.html
<head>
<title>Thymeleaf Demo</title>


<link rel="stylesheet" th:href="@{/css/demo.css}" />
</head>
www.luv2code.com
<head>

</head>
src/main/resources
static
css
demo.css
www.luv2code.com
File: helloworld.html @ symbol
<head> Reference context path of your application
<title>Thymeleaf Demo</title> (app root)

</head>
src/main/resources
static
css
demo.css
www.luv2code.com
Step 3: Apply CSS
www.luv2code.com
Step 3: Apply CSS
<head>

</head>
<body>
<p th:text="'Time on the server is ' + ${theDate}" class="funny" />
</body>
www.luv2code.com
Step 3: Apply CSS
File: demo.css
.funny {
<head> font-style: italic;
<title>Thymeleaf Demo</title> color: green;
}
</head>
<body>
</body>
www.luv2code.com
Step 3: Apply CSS
File: demo.css
.funny {
}
</head>
<body>
</body>
www.luv2code.com
Step 3: Apply CSS
File: demo.css
.funny {
}
</head>
<body>
</body>
www.luv2code.com
Step 3: Apply CSS
File: demo.css
.funny {
}
</head>
<body>
</body>
www.luv2code.com
Other search directories
www.luv2code.com
Spring Boot will search following directories for static resources:
/src/main/resources
www.luv2code.com
/src/main/resources
1. /META-INF/resources
www.luv2code.com
/src/main/resources
2. /resources
www.luv2code.com
/src/main/resources
2. /resources
3. /static
www.luv2code.com
/src/main/resources
2. /resources
3. /static
4. /public
www.luv2code.com
/src/main/resources
2. /resources Search order: top-down
3. /static
4. /public
www.luv2code.com
3rd Party CSS Libraries - Bootstrap
www.luv2code.com
• Local Installation
www.luv2code.com
• Download Bootstrap file(s) and add to /static/css directory
www.luv2code.com
www.luv2code.com
<head>
… …

<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
</head>
www.luv2code.com
www.luv2code.com
• Remote Files
www.luv2code.com
• Remote Files
<head>
… …

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
… …
</head>
www.luv2code.com
Create HTML Tables with Thymeleaf
HTML Tables Start with plain table
Will add CSS in later videos
www.luv2code.com
www.luv2code.com
Big Picture
1
Employee
Controller
Web 2 Model
Browser
Thymeleaf Template
www.luv2code.com
By-S
tep
www.luv2code.com
By-S
tep
1. Create Employee.java
www.luv2code.com
By-S
tep
1. Create Employee.java
2. Create EmployeeController.java
www.luv2code.com
By-S
tep
1. Create Employee.java 
2. Create EmployeeController.java 
www.luv2code.com
Step 1: Create Employee.java
www.luv2code.com
Step 1: Create Employee.java
• Regular Java class: fields, constructors, getters / setters
www.luv2code.com
Step 2: Create EmployeeController.java
www.luv2code.com
@Controller
@RequestMapping("/employees")
public class EmployeeController {
www.luv2code.com
@Controller
@GetMapping("/list")
public String listEmployees(Model theModel) {
www.luv2code.com
@Controller
Will add database
integration later
// create employees
Employee emp1 = new Employee(1, "Leslie", "Andrews", "[email protected]");
Employee emp2 = new Employee(2, "Emma", "Baumgarten", "[email protected]");
Employee emp3 = new Employee(3, "Avani", "Gupta", "[email protected]");
www.luv2code.com
@Controller
// create employees
// create the list

List<Employee> theEmployees = new ArrayList<>();
www.luv2code.com
@Controller
// create employees
// create the list

// add to the list

theEmployees.add(emp1);
www.luv2code.com
@Controller
// create employees
// create the list

// add to the list

// add to the spring model

theModel.addAttribute("employees", theEmployees);
www.luv2code.com
@Controller
// create employees
// create the list

// add to the list

Our Thymleaf template will
access this data

www.luv2code.com
@Controller
// create employees
// create the list

// add to the list

access this data

return "list-employees";
}
}
www.luv2code.com
@Controller
// create employees
// create the list

// add to the list

access this data

} src/main/resources/templates/list-employees.html
}
www.luv2code.com
www.luv2code.com
File: list-employees.html
To use Thymeleaf
<html lang="en" xmlns:th="http://www.thymeleaf.org">
www.luv2code.com
To use Thymeleaf
…
<body>
<h3>Employee Directory</h3>
<hr>
www.luv2code.com
To use Thymeleaf
…
<body>
<hr>
<table border="1">

</table>
www.luv2code.com
To use Thymeleaf
…
<body>
<hr>
<table border="1">
</table>
To Do
Add code to loop over employees
www.luv2code.com
To use Thymeleaf
…
<body>
<hr>
<table border="1">
</table>
</body> To Do
</html>
www.luv2code.com
www.luv2code.com
<table border="1">
www.luv2code.com
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
www.luv2code.com
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
www.luv2code.com
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr th:each="tempEmployee : ${employees}">
www.luv2code.com
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
</tr> list of employees
</thead>
<tbody>
www.luv2code.com
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
Loop parameter
</thead>
<tbody>
www.luv2code.com
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
Loop parameter
</thead>
<tbody>
www.luv2code.com
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
Loop parameter
</thead>
<tbody>
<td th:text="${tempEmployee.firstName}" />

<td th:text="${tempEmployee.lastName}" />
<td th:text="${tempEmployee.email}" />
</tr>
</tbody>
</table>
www.luv2code.com
Thymeleaf and Bootstrap
Let’s Make our Page Beautiful
www.luv2code.com
Before
www.luv2code.com
Before After
www.luv2code.com
Before After
Bootstrap
www.luv2code.com
By-S
tep
www.luv2code.com
By-S
tep
1. Get links for remote Bootstrap files
www.luv2code.com
By-S
tep
2. Add links in Thymeleaf template
www.luv2code.com
By-S
tep
1. Get links for remote Bootstrap files 
2. Add links in Thymeleaf template 
3. Apply Bootstrap CSS styles
www.luv2code.com
Step 1: Get links for remote Bootstrap files
www.luv2code.com
• Visit Bootstrap website: www.getbootstrap.com
www.luv2code.com
• Visit Bootstrap website: www.getbootstrap.com 
• Website has instructions on how to Get Started
www.luv2code.com
www.luv2code.com
Step 2: Add links in Thymeleaf template
www.luv2code.com
<head>
…

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/x.y.z/css/bootstrap.min.css" …>
…
</head>
www.luv2code.com
<head>
…
…
</head>
Version number
www.luv2code.com
Step 3: Apply CSS
www.luv2code.com
Step 3: Apply CSS
<body>
<div class="container">
<hr>
<table class="table table-bordered table-striped">

<thead class="thead-dark">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Step 3: Apply CSS
Bootstrap CSS style
<body>
<hr>

<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Step 3: Apply CSS
Bootstrap CSS style
<body>
<h3>Employee Directory</h3> Bootstrap CSS styles

<hr>

<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Step 3: Apply CSS
Bootstrap CSS style
<body>

<hr>

<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Create HTML Tables with Thymeleaf
HTML Tables
www.luv2code.com
HTML Tables
www.luv2code.com
www.luv2code.com
Big Picture
Employee
Controller
Web
Browser
Thymeleaf Template
www.luv2code.com
Big Picture
1
Employee
Controller
Web
Browser
Thymeleaf Template
www.luv2code.com
Big Picture
1
Employee
Controller
Web 2 Model
Browser
Thymeleaf Template
www.luv2code.com
Big Picture
1
Employee
Controller
Web 2 Model
Browser
Thymeleaf Template
www.luv2code.com
By-S
tep
www.luv2code.com
By-S
tep
1. Create Employee class
www.luv2code.com
By-S
tep
1. Create Employee class
2. Create Employee Controller
www.luv2code.com
By-S
tep
1. Create Employee class 
2. Create Employee Controller 
www.luv2code.com
Step 1: Create Employee class
www.luv2code.com
Step 1: Create Employee class
• Regular Java class: fields, constructors, getters / setters
www.luv2code.com
Step 2: Create Employee Controller
www.luv2code.com
@Controller
www.luv2code.com
@Controller
www.luv2code.com
@Controller
Will add database
integration later
// create employees
www.luv2code.com
@Controller
// create employees
// create the list

www.luv2code.com
@Controller
// create employees
// create the list

// add to the list

www.luv2code.com
@Controller
// create employees
// create the list

// add to the list

// add to the Spring MVC model

www.luv2code.com
@Controller
// create employees
// create the list

// add to the list

access this data

www.luv2code.com
@Controller
// create employees
// create the list

// add to the list

access this data

}
}
www.luv2code.com
@Controller
// create employees
// create the list

// add to the list

access this data

} src/main/resources/templates/list-employees.html
}
www.luv2code.com
www.luv2code.com
To use Thymeleaf
www.luv2code.com
To use Thymeleaf
…
<body>
<hr>
www.luv2code.com
To use Thymeleaf
…
<body>
<hr>
<table border="1">
</table>
</body>
</html>
www.luv2code.com
To use Thymeleaf
…
<body>
<hr>
<table border="1">
</table>
</body> To Do
</html>
www.luv2code.com
www.luv2code.com
<table border="1">
www.luv2code.com
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
www.luv2code.com
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
www.luv2code.com
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
www.luv2code.com
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
</thead>
<tbody>
www.luv2code.com
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
Loop parameter
</thead>
<tbody>
www.luv2code.com
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
Loop parameter
</thead>
<tbody>
www.luv2code.com
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
Loop parameter
</thead>
<tbody>
<td th:text="${tempEmployee.firstName}" />

<td th:text="${tempEmployee.lastName}" />
<td th:text="${tempEmployee.email}" />
</tr>
</tbody>
</table>
www.luv2code.com
Thymeleaf and Bootstrap
www.luv2code.com
Before
www.luv2code.com
Before After
www.luv2code.com
Before After
Bootstrap
www.luv2code.com
By-S
tep
www.luv2code.com
By-S
tep
www.luv2code.com
By-S
tep
2. Add links in Thymeleaf template
www.luv2code.com
By-S
tep
1. Get links for remote Bootstrap files 
2. Add links in Thymeleaf template 
3. Apply Bootstrap CSS styles
www.luv2code.com
www.luv2code.com
• Visit Bootstrap website: www.getbootstrap.com
www.luv2code.com
www.luv2code.com
www.luv2code.com
www.luv2code.com
<head>
…
…
</head>
www.luv2code.com
<head>
…
…
</head>
Version number
www.luv2code.com
Step 3: Apply CSS
www.luv2code.com
Step 3: Apply CSS
<body>
<hr>

<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Step 3: Apply CSS
Bootstrap CSS style
<body>
<hr>

<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Step 3: Apply CSS
Bootstrap CSS style
<body>

<hr>

<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Step 3: Apply CSS
Bootstrap CSS style
<body>

<hr>

<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Thymeleaf CRUD - Real Time Project
m
Application Requirements
www.luv2code.com
From the Boss
Create a Web UI for the Employee Directory
www.luv2code.com
From the Boss
Users should be able to

• Get a list of employees
www.luv2code.com
From the Boss

• Add a new employee
www.luv2code.com
From the Boss

• Update an employee
www.luv2code.com
From the Boss

• Delete an employee
www.luv2code.com
From the Boss

• Get a list of employees Thymeleaf + Spring Boo
t
• Delete an employee
www.luv2code.com
Real-Time Project Thymeleaf + Spring Boo
t
www.luv2code.com
Real-Time Project Thymeleaf + Spring Boo
t
www.luv2code.com
Big Picture
www.luv2code.com
Big Picture
Employee Employee Employee

Controller Service Repository
Web
Browser
Thymeleaf Templates
www.luv2code.com
Big Picture
1
Web
Browser
Thymeleaf Templates
www.luv2code.com
Big Picture
1 2
Web
Browser
Thymeleaf Templates
www.luv2code.com
Big Picture
1 2 3
Web
Browser
Thymeleaf Templates
www.luv2code.com
Big Picture
1 2 3 4
Web
Browser
Thymeleaf Templates
www.luv2code.com
Big Picture
1 2 3 4
Web
Browser
Thymeleaf Templates
www.luv2code.com
Big Picture
1 2 3 4
Web 5
Browser
Thymeleaf Templates
www.luv2code.com
Big Picture
1 2 3 4
Web 5
Browser
Thymeleaf Templates
www.luv2code.com
Application Architecture

www.luv2code.com
Application Architecture Reuse code from
previous project

www.luv2code.com
Application Architecture Reuse code from
previous project

New code that we will create
www.luv2code.com
Project Set Up
www.luv2code.com
Project Set Up
• We will extend our existing Employee project and add DB integration
www.luv2code.com
Project Set Up
• Add EmployeeService, EmployeeRepository and Employee entity
www.luv2code.com
Project Set Up
• Available in one of our previous projects
www.luv2code.com
Project Set Up
• We created all of this code already from scratch … so we'll just copy/paste it
www.luv2code.com
Project Set Up
• We will extend our existing Employee project and add DB integration 
• We created all of this code already from scratch … so we'll just copy/paste it 
• Allows us to focus on creating EmployeeController and Thymeleaf templates
www.luv2code.com
Development Process - Big Picture Step-
By-S
tep
www.luv2code.com
By-S
tep
www.luv2code.com
By-S
tep
1. Get list of employees
www.luv2code.com
By-S
tep
2. Add a new employee
www.luv2code.com
By-S
tep
3. Update an existing employee
www.luv2code.com
By-S
tep
3. Update an existing employee
4. Delete an existing employee
www.luv2code.com
Thymeleaf - Add Employee
Date
Add Employee - DEMO
www.luv2code.com
Add Employee Step-
By-S
tep
www.luv2code.com
Add Employee Step-
By-S
tep
1. New Add Employee button for list-employees.html
www.luv2code.com
Add Employee Step-
By-S
tep
1. New Add Employee button for list-employees.html
2. Create HTML form for new employee
www.luv2code.com
Add Employee Step-
By-S
tep
1. New Add Employee button for list-employees.html  
2. Create HTML form for new employee 
3. Process form data to save employee
www.luv2code.com
Step 1: New "Add Employee" button
www.luv2code.com
• Add Employee button will href link to
• request mapping /employees/showFormForAdd
www.luv2code.com
<a th:href="@{/employees/showFormForAdd}">
Add Employee Add Employee
</a>
www.luv2code.com
@
• Add Employee button will href link tosymbol
Reference context path of your application
(app root)
</a>
www.luv2code.com
</a>
Apply Bootstrap styles
www.luv2code.com
<a th:href="@{/employees/showFormForAdd}"
class="btn btn-primary btn-sm mb-3">
Add Employee
Add Employee
</a>
</a>
www.luv2code.com
Add Employee
Add Employee
</a>
</a>
Button
Apply Bootstrap styles Button Primary
Button Small
Margin Bottom, 3 pixels
www.luv2code.com
• requestDocs on Bootstrap
mapping styles: www.getbootstrap.com
/employees/showFormForAdd
Add Employee
Add Employee
</a>
</a>
Button
Apply Bootstrap styles Button Primary
Button Small
Margin Bottom, 3 pixels
www.luv2code.com
Add Employee
Add Employee
</a>
</a>
www.luv2code.com
• Add Employee button will href link to TODO:
Add controller request mapping for
/employees/showFormForAdd
Add Employee
Add Employee
</a>
</a>
www.luv2code.com
Showing Form
www.luv2code.com
Showing Form
In your Spring Controller
www.luv2code.com
Showing Form
In your Spring Controller
• Before you show the form, you must add a model attribute
www.luv2code.com
Showing Form
In your Spring Controller 
• Before you show the form, you must add a model attribute
• This is an object that will hold form data for the data binding
www.luv2code.com
Controller code to show form
www.luv2code.com
@Controller
www.luv2code.com
@Controller
@GetMapping("/showFormForAdd")
public String showFormForAdd(Model theModel) {
www.luv2code.com
@Controller
// create model attribute to bind form data

Employee theEmployee = new Employee();
www.luv2code.com
@Controller

theModel.addAttribute("employee", theEmployee);
www.luv2code.com
@Controller
@GetMapping("/showFormForAdd") Our Thymleaf template will

public String showFormForAdd(Model theModel) { access this data for
binding form data
www.luv2code.com
@Controller

binding form data
return "employees/employee-form";
}
…
}
www.luv2code.com
@Controller

binding form data
}
…
} src/main/resources/templates/employees/employee-form.html
www.luv2code.com
Thymeleaf and Spring MVC Data Binding
www.luv2code.com
• Thymeleaf has special expressions for binding Spring MVC form data
www.luv2code.com
• Thymeleaf has special expressions for binding Spring MVC form data 
• Automatically setting / retrieving data from a Java object
www.luv2code.com
Thymeleaf Expressions
www.luv2code.com
• Thymeleaf expressions can help you build the HTML form :-)
www.luv2code.com
Expression Description
th:action Location to send form data
www.luv2code.com
th:object Reference to model attribute
www.luv2code.com
th:field Bind input field to a property on model attribute
www.luv2code.com
th:field Bind input field to a property on model attribute
more …. See - www.luv2code.com/thymeleaf-create-form
www.luv2code.com
Step 2: Create HTML form for new employee
www.luv2code.com
<form action="#" th:action="@{/employees/save}"

th:object="${employee}" method="POST">
</form>
www.luv2code.com
Empty place holder
Thymeleaf will handle real work

</form>
www.luv2code.com
Real work
Empty place holder
Send form data to
/employees/save

</form>
www.luv2code.com
Real work
Empty place holder
Send form data to
/employees/save

</form>
Our model attribute
www.luv2code.com
www.luv2code.com
www.luv2code.com
www.luv2code.com
www.luv2code.com
<input type="text" th:field="*{firstName}" placeholder="First name">
www.luv2code.com
www.luv2code.com
*{…}
Selects property on referenced
th:object
www.luv2code.com
*{…}
Selects property on referenced
th:object
www.luv2code.com
<input type="text" th:field="*{lastName}" placeholder="Last name">
<input type="text" th:field="*{email}" placeholder="Email">
www.luv2code.com
<button type="submit">Save</button>
</form>
www.luv2code.com
</form>
www.luv2code.com
1
<form action="#" th:action="@{/employees/save}" When form is loaded,
th:object="${employee}" method="POST"> will call:  
<input type="text" th:field="*{firstName}" placeholder="First name"> employee.getFirstName() 

…
employee.getLastName
</form>
www.luv2code.com
1
<form action="#" th:action="@{/employees/save}" When form is loaded,
th:object="${employee}" method="POST"> will call:  
<input type="text" th:field="*{firstName}" placeholder="First name"> employee.getFirstName() 

…
2
When form is submitted,
</form> will call:  
employee.setFirstName(…) 
…
employee.setLastName(…)
www.luv2code.com
</form>
www.luv2code.com
</form>
www.luv2code.com

</form>
www.luv2code.com
<input type="text" th:field="*{firstName}" placeholder="First name"

name">
class="form-control mb-4 col-4">

</form>
</form>
www.luv2code.com

name">

</form>
</form>
www.luv2code.com

name">
Form control
Apply Bootstrap styles Margin Bottom, 4 pixels
Column Span 4
</form>
</form>
www.luv2code.com

</form>
www.luv2code.com
Button
class="form-control mb-4 col-4"> Button Info
<input type="text" th:field="*{lastName}" Column
placeholder="Last name" Span 2
<input type="text" th:field="*{email}" placeholder="Email"

<button type="submit" class="btn btn-info col-2">Save</button>
</form>
www.luv2code.com

<input type="text" th:field="*{lastName}" placeholder="Last name"

<input type="text" th:field="*{email}" placeholder="Email"

</form>
www.luv2code.com

TODO:
<input type="text" th:field="*{lastName}" placeholder="Last name"
Add controller request mapping for
<input type="text" /employees/save
th:field="*{email}" placeholder="Email"
</form>
www.luv2code.com
Step 3: Process form data to save employee
www.luv2code.com
@Controller
www.luv2code.com
@Controller
private EmployeeService employeeService;
public EmployeeController(EmployeeService theEmployeeService) {

employeeService = theEmployeeService;
}
Constructor injection
www.luv2code.com
@Controller Since only one constructor
@Autowired is optional

}
Constructor injection
www.luv2code.com
@Controller

}
@PostMapping("/save")
public String saveEmployee(@ModelAttribute("employee") Employee theEmployee) {
www.luv2code.com
@Controller

}
www.luv2code.com
@Controller

}
// save the employee

employeeService.save(theEmployee);
www.luv2code.com
@Controller

}

// use a redirect to prevent duplicate submissions

return "redirect:/employees/list";
}
…
}
Redirect to request mapping
/employees/list
www.luv2code.com
@Controller

}

// use a redirect to prevent duplicate submissions "Post/Redirect/Get" pattern

}
}
…
For more info see
Redirect to request mapping www.luv2code.com/post-redirect-get
/employees/list
www.luv2code.com
Thymeleaf - Update Employee
Date
Update Employee - Demo
www.luv2code.com
Update Employee Step-
By-S
tep
www.luv2code.com
By-S
tep
www.luv2code.com
By-S
tep
1. "Update" button
www.luv2code.com
By-S
tep
1. "Update" button
2. Pre-populate the form
www.luv2code.com
By-S
tep
1. "Update" button  
2. Pre-populate the form  
3. Process form data
www.luv2code.com
By-S
tep
1. "Update" button  
2. Pre-populate the form  
3. Process form data
www.luv2code.com
Step 1: "Update" Button
www.luv2code.com
www.luv2code.com
Each row has an Update link
- current employee id embedded in link
When clicked
- will load the employee from database

- prepopulate the form
www.luv2code.com
Step 1: "Update" button
www.luv2code.com
• Update button includes employee id
www.luv2code.com

…
www.luv2code.com

…
<td>
<a th:href="@{/employees/showFormForUpdate(employeeId=${tempEmployee.id})}"
class="btn btn-info btn-sm">
Update
</a>
</td>
</tr>
www.luv2code.com

…
<td>
<a th:href="@{/employees/showFormForUpdate(employeeId=${tempEmployee.id})}"
class="btn btn-info btn-sm">
Update
</a>
Appends to URL
</td>
?employeeId=xxx
</tr>
www.luv2code.com
Step 2: Pre-populate Form
www.luv2code.com
@Controller
…
www.luv2code.com
@Controller
…
@GetMapping("/showFormForUpdate")
public String showFormForUpdate(@RequestParam("employeeId") int theId,
Model theModel) {
www.luv2code.com
@Controller
…
Model theModel) {
www.luv2code.com
@Controller
…
Model theModel) {
// get the employee from the service

Employee theEmployee = employeeService.findById(theId);
www.luv2code.com
@Controller
…
Model theModel) {

// set employee as a model attribute to pre-populate the form

www.luv2code.com
@Controller
…
Model theModel) {

// set employee as a model attribute to pre-populate the form

// send over to our form

}
www.luv2code.com
www.luv2code.com



<input type="hidden" th:field="*{id}" />
<input type="text" th:field="*{firstName}"

class="form-control mb-4 col-4" placeholder="First name">
<input type="text" th:field="*{lastName}"

class="form-control mb-4 col-4" placeholder="Last name">
<input type="text" th:field="*{email}"

class="form-control mb-4 col-4" placeholder="Email">
</form>
www.luv2code.com
Step 2: Pre-populate Form 1
When form is loaded,
will call:  
employee.getFirstName() 
<form action="#" th:action="@{/employees/save}" …



</form>
www.luv2code.com
Step 2: Pre-populate Form 1
When form is loaded,
will call:  
employee.getFirstName() 
<form action="#" th:action="@{/employees/save}" …

This is how form is
pre-populated
<input type="text" th:field="*{lastName}" Thanks to calls to getters

</form>
www.luv2code.com





</form>
www.luv2code.com


Hidden form field
<input type="hidden" th:field="*{id}" /> required for updates


</form>
www.luv2code.com


Hidden form field
<input type="hidden" th:field="*{id}" /> required for updates

<input type="text" th:field="*{email}" This binds to the model attribute

Tells your app

</form> which employee to update
www.luv2code.com
www.luv2code.com
• No need for new code … we can reuse our existing code
www.luv2code.com
• No need for new code … we can reuse our existing code
• Works the same for add or update :-)
@Controller
…

// use a redirect to prevent duplicate submissions

}
…
}
www.luv2code.com
Thymeleaf - Delete Employee
Date
Delete Employee - DEMO
www.luv2code.com
Delete Employee - DEMO
www.luv2code.com
Delete Employee Step-
By-S
tep
www.luv2code.com
By-S
tep
1. Add “Delete” button/link on page
www.luv2code.com
By-S
tep
1. Add “Delete” button/link on page 
2. Add controller code for “Delete”
www.luv2code.com
By-S
tep
1. Add “Delete” button/link on page 
2. Add controller code for “Delete”
www.luv2code.com
Step 1: "Delete" button
Each row has a Delete button/link
- current employee id embedded in link
When clicked 
- prompt user
- will delete the employee from database
www.luv2code.com
www.luv2code.com
• Delete button includes employee id
www.luv2code.com

…
www.luv2code.com

…
<td>
<a th:href="@{/employees/delete(employeeId=${tempEmployee.id})}"
class="btn btn-danger btn-sm"
onclick="if (!(confirm('Are you sure you want to delete this employee?'))) return false">
Delete
</a>
</td>
</tr>
www.luv2code.com
Appends to URL
…
?employeeId=xxx
<td>
Delete
</a>
</td>
</tr>
www.luv2code.com
Appends to URL
…
?employeeId=xxx
<td>
Delete
</a>
</td>
</tr>
JavaScript to prompt user before deleting
www.luv2code.com
Step 2: Add controller code for delete
www.luv2code.com
@Controller
…
www.luv2code.com
@Controller
…
@GetMapping("/delete")
public String delete(@RequestParam("employeeId") int theId) {
www.luv2code.com
@Controller
…
www.luv2code.com
@Controller
…
// delete the employee

employeeService.deleteById(theId);
www.luv2code.com
@Controller
…
// delete the employee

employeeService.deleteById(theId);
// redirect to /employees/list
}
…
}
www.luv2code.com

14 Spring Boot Thymeleaf

Uploaded by

Copyright:

Available Formats

14 Spring Boot Thymeleaf

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

14 Spring Boot Thymeleaf

Uploaded by

Copyright:

Available Formats

Thymeleaf with Spring Boot

• Commonly used to generate the HTML views for web apps

• Commonly used to generate the HTML views for web apps

• However, it is a general purpose templating engine

• 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)

• Commonly used to generate the HTML views for web Separate

• However, it is a general purpose templating engine

• Can use Thymeleaf outside of web apps (more on this later)

• Can be an HTML page with some Thymeleaf expressions

• Can be an HTML page with some Thymeleaf expressions

• Can be an HTML page with some Thymeleaf expressions

• Can be an HTML page with some Thymeleaf expressions

This sounds similar to JSP …

• Can be used for web view templates

• Can be used for web view templates

• Can be used for web view templates

• One key difference

• Can be used for web view templates

• One key difference

• JSP can only be used in a web environment

• Can be used for web view templates

• One key difference

• JSP can only be used in a web environment

• Thymeleaf can be used in web OR non-web environments

Thanks for joining <<course>>!

Thanks for joining <<course>>!

Thanks for joining <<course>>!

Thanks for joining <<course>>!

Thanks for joining <<course>>!

• If you only need web views you can go either way

• If you only need web views you can go either way

• If you need a general purpose template engine (non-web) use Thymeleaf

• If you only need web views you can go either way

• If you need a general purpose template engine (non-web) use Thymeleaf

• If you want to impress your interviewer, mention Thymeleaf … LOL!

1. Add Thymeleaf to Maven POM file

1. Add Thymeleaf to Maven POM file

2. Develop Spring MVC Controller

1. Add Thymeleaf to Maven POM file

2. Develop Spring MVC Controller

3. Create Thymeleaf template

theModel.addAttribute("theDate", new java.util.Date());

theModel.addAttribute("theDate", new java.util.Date());

• In Spring Boot, your Thymeleaf template files go in

• In Spring Boot, your Thymeleaf template files go in

• In Spring Boot, your Thymeleaf template files go in

• For web apps, Thymeleaf templates have a .html extension

File: src/main/resources/templates/helloworld.html theModel.addAttribute("theDate", new java.util.Date());

<!DOCTYPE HTML> return "helloworld";

File: src/main/resources/templates/helloworld.html theModel.addAttribute("theDate", new java.util.Date());

<!DOCTYPE HTML> return "helloworld";

Thymeleaf accesses "theDate" @GetMapping("/")

Thymeleaf accesses "theDate" @GetMapping("/")

• CSS and JavaScript integration

• CSS and JavaScript integration

• Template layouts and fragments

• CSS and JavaScript integration

• Commonly used to generate the HTML views for web apps 

• Can be used for web view templates 

• If you only need web views you can go either way 

• If you need a general purpose template engine (non-web) use Thymeleaf 

1. Add Thymeleaf to Maven POM file 

2. Develop Spring MVC Controller 

• Referencing remote CSS files 

1. Create CSS file 

2. Reference CSS in Thymeleaf template 

1. Get links for remote Bootstrap files 

2. Add links in Thymeleaf template 

1. Create Employee class 

2. Create Employee Controller 