Scribd
Upload
77 views

06 Spring Boot Spring MVC

Uploaded by

IG Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
77 views

06 Spring Boot Spring MVC

Uploaded by

IG Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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