Scribd
Upload
69 views

06 Spring Boot Spring MVC

Uploaded by

IG Khan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
69 views

06 Spring Boot Spring MVC

Uploaded by

IG Khan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

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/[email protected]/dist/css/bootstrap.min.css" />

… …

</head>

www.luv2code.com © luv2code LLC

You might also like