Welcome Thymeleaf 3.0! #jjug_ccc #ccc_f2

by Mitsuyuki Shiiba

Slide 1

Slide 1 text

#jjug_ccc #ccc_f2 @bufferings Welcome Thymeleaf 3.0! 2016-05-21 JJUG CCC 2016 Spring Mitsuyuki Shiiba

Slide 2

Slide 2 text

#jjug_ccc #ccc_f2 @bufferings http://www.thymeleaf.org/

Slide 3

Slide 3 text

#jjug_ccc #ccc_f2 @bufferings http://www.thymeleaf.org/ Have you ever used it?

Slide 4

Slide 4 text

#jjug_ccc #ccc_f2 @bufferings Finally released on 2016-05-08! Welcome Thymeleaf 3.0! http://www.thymeleaf.org/

Slide 5

Slide 5 text

#jjug_ccc #ccc_f2 @bufferings Agenda • Part1: Introducing Thymeleaf • Part2: What’s new in Thymeleaf 3.0?

Slide 6

Slide 6 text

#jjug_ccc #ccc_f2 @bufferings Your tweets are welcomed! HashTag: #ccc_f2

Slide 7

Slide 7 text

#jjug_ccc #ccc_f2 @bufferings • twitter: @bufferings • Java WebApp Engineer • #kanjava #devkan #kandddj Mitsuyuki Shiiba

Slide 8

Slide 8 text

#jjug_ccc #ccc_f2 @bufferings Using Thymeleaf (ja) Mitsuyuki Shiiba http://www.thymeleaf.org/documentation.html

Slide 9

Slide 9 text

#jjug_ccc #ccc_f2 @bufferings Special thanks to Daniel Fernández, who is a Founder and Lead Developer of Thymeleaf. He kindly gave me some advices for my presentation and allow me to use his session materials of Devoxx Belgium 2015 and Spring I/O 2016. Special Thanks! The Thymeleaf Artwork by The Thymeleaf Project is licensed under the Creative Commons CC BY-SA 3.0 License.

Slide 10

Slide 10 text

#jjug_ccc #ccc_f2 @bufferings Part1: Introducing Thymeleaf

Slide 11

Slide 11 text

#jjug_ccc #ccc_f2 @bufferings Part1: Introducing Thymeleaf • What is Thymeleaf? • Getting Started • Using Thymeleaf • My Tips

Slide 12

Slide 12 text

#jjug_ccc #ccc_f2 @bufferings What is Thymeleaf? • A template engine for Java • Open Source — Apache 2.0 License • First version 2011 — Currently 3.0.0 • Processes HTML, XML, JavaScript, CSS, Text • View layer in Spring MVC apps • Also MVC 1.0, vert.x, ratpack, Spring Reactive

Slide 13

Slide 13 text

#jjug_ccc #ccc_f2 @bufferings What does it look like? What is Thymeleaf? Name Price Oranges 0.99

Slide 14

Slide 14 text

#jjug_ccc #ccc_f2 @bufferings to solve the design-development roundtrip issue Why was it started? What is Thymeleaf?

Slide 15

Slide 15 text

#jjug_ccc #ccc_f2 @bufferings “the template can be a document as valid as the final result, the engine syntax doesn't break the document's structure” [Comparison of web template engines - Wikipedia, the free encyclopedia] Natural Templates What is Thymeleaf? https://en.wikipedia.org/wiki/Comparison_of_web_template_engines

Slide 16

Slide 16 text

#jjug_ccc #ccc_f2 @bufferings Natural Templates What is Thymeleaf? http://www.thymeleaf.org/doc/articles/petclinic.html Statically Opened WebApp Output

Slide 17

Slide 17 text

#jjug_ccc #ccc_f2 @bufferings Natural Templates What is Thymeleaf?

Slide 18

Slide 18 text

#jjug_ccc #ccc_f2 @bufferings The trick What is Thymeleaf? • Use non-standard attributes

Apricot

• Browsers ignore them

Slide 19

Slide 19 text

#jjug_ccc #ccc_f2 @bufferings HTML5 allows custom attributes What is Thymeleaf?

Apricot

Apricot

browser display equivalent

Slide 20

Slide 20 text

#jjug_ccc #ccc_f2 @bufferings Now we can prototype! What is Thymeleaf?

browser display equivalent output of running webapp

Slide 21

Slide 21 text

#jjug_ccc #ccc_f2 @bufferings Yet prototyping is very optional What is Thymeleaf? • No need for double attributes: • src + th:src, href + th:href • No need for prototyping text • Expressions can be inlined Welcome to our e-shop, [[${session.user.name}]]. td>

Slide 22

Slide 22 text

#jjug_ccc #ccc_f2 @bufferings Part1: Introducing Thymeleaf • What is Thymeleaf? • Getting Started • Using Thymeleaf • My Tips

Slide 23

Slide 23 text

#jjug_ccc #ccc_f2 @bufferings Getting Started Spring Boot is one of the easiest options.

Slide 24

Slide 24 text

#jjug_ccc #ccc_f2 @bufferings Step1. SPRING INITIALIZR Open http://start.spring.io/ Getting Started

Slide 25

Slide 25 text

#jjug_ccc #ccc_f2 @bufferings Step1. SPRING INITIALIZR Select Thymeleaf in dependencies box Getting Started

Slide 26

Slide 26 text

#jjug_ccc #ccc_f2 @bufferings Step1. SPRING INITIALIZR Click “Generate Project” Getting Started

Slide 27

Slide 27 text

#jjug_ccc #ccc_f2 @bufferings Step1. SPRING INITIALIZR Then you can get a project zip file Getting Started

Slide 28

Slide 28 text

#jjug_ccc #ccc_f2 @bufferings Step2. Create Template File src/main/resources/templates/greeting.html Getting Started Greeting Demo

Hello World

Slide 29

Slide 29 text

#jjug_ccc #ccc_f2 @bufferings Step2. Create Template File src/main/resources/templates/greeting.html Getting Started

Slide 30

Slide 30 text

#jjug_ccc #ccc_f2 @bufferings Step3. Create Controller src/main/java/com/example/GreetingController.java Getting Started @Controller public class GreetingController { @RequestMapping("/") public String hello(Model model) { model.addAttribute("name", "Mitsuyuki"); return "greeting"; } }

Slide 31

Slide 31 text

#jjug_ccc #ccc_f2 @bufferings Step4. Run $ ./mvnw spring-boot:run Getting Started

Slide 32

Slide 32 text

#jjug_ccc #ccc_f2 @bufferings Now we have Thymeleaf! Getting Started

Slide 33

Slide 33 text

#jjug_ccc #ccc_f2 @bufferings +1. Disable Cache(for DEV) Getting Started src/main/resources/application.yml spring: thymeleaf: cache: false

Slide 34

Slide 34 text

#jjug_ccc #ccc_f2 @bufferings +1. Disable Cache(for DEV) Getting Started src/main/resources/application.yml spring: thymeleaf: cache: false or org.springframework.boot spring-boot-devtools true

Slide 35

Slide 35 text

#jjug_ccc #ccc_f2 @bufferings JerseyMVC? Getting Started If you are interested in using Thymeleaf with JerseyMVC, let’s join #ccc_cd4 Tada-san’s session!

Slide 36

Slide 36 text

#jjug_ccc #ccc_f2 @bufferings Part1: Introducing Thymeleaf • What is Thymeleaf? • Getting Started • Using Thymeleaf • My Tips

Slide 37

Slide 37 text

#jjug_ccc #ccc_f2 @bufferings Using Thymeleaf

James Carrot

Slide 38

Slide 38 text

#jjug_ccc #ccc_f2 @bufferings Using Thymeleaf

James Carrot

Expression

Slide 39

Slide 39 text

#jjug_ccc #ccc_f2 @bufferings Using Thymeleaf

James Carrot

Processor Expression

Slide 40

Slide 40 text

#jjug_ccc #ccc_f2 @bufferings Using Thymeleaf

James Carrot

Processor Expression + + etc… = Dialect

Slide 41

Slide 41 text

#jjug_ccc #ccc_f2 @bufferings Standard Dialect Using Thymeleaf The out-of-the-box dialect in Thymeleaf • Standard Expressions • Standard Processors • etc…

James Carrot

Slide 42

Slide 42 text

#jjug_ccc #ccc_f2 @bufferings Standard Dialect Using Thymeleaf The out-of-the-box dialect in Thymeleaf • Standard Expressions • Standard Processors • etc…

James Carrot

Slide 43

Slide 43 text

#jjug_ccc #ccc_f2 @bufferings Standard Expressions Using Thymeleaf 1. Simple Expressions 2. Expression Objects 3. Literals 4. Operators

Slide 44

Slide 44 text

#jjug_ccc #ccc_f2 @bufferings 1. Simple Expressions Standard Expressions • Variable Expression: ${...}, *{...} • Link Expression: @{...} • Message Expression: #{...} • Fragment Expression: ~{...}

James Carrot

Slide 45

Slide 45 text

#jjug_ccc #ccc_f2 @bufferings 2. Expression Objects Standard Expressions • #ctx, #vars, #root, #locale, #object • #request, #session,  #response, #servletContext • #conversions, #uris US

Slide 46

Slide 46 text

#jjug_ccc #ccc_f2 @bufferings 2. Expression Objects Standard Expressions • #calendars, #dates, #bools, #numbers, #objects, #strings, #arrays, #lists, #sets, #maps, #aggregates, #messages, #ids, #execInfo 13 May 2011

Slide 47

Slide 47 text

#jjug_ccc #ccc_f2 @bufferings 3. Literals(Tokens) Standard Expressions • Text: ‘Good Morning!’,’Hello’ + ‘World’ • Number: 2016, 2020 - 4, 3.14 • Boolean: true, false • Null: null • NO-OP: _

...

Slide 48

Slide 48 text

#jjug_ccc #ccc_f2 @bufferings 4. Operators Standard Expressions • +, -, *, /, div, %, mod • and, or, not, ! • ==, eq, !=, neq, ne • >, >=, <, <=, gt, ge, lt, le • A ? B : C, A ?: C th:with="isEven=(${prodStat.count} % 2 == 0)"

Slide 49

Slide 49 text

#jjug_ccc #ccc_f2 @bufferings Standard Dialect Using Thymeleaf The out-of-the-box dialect in Thymeleaf • Standard Expressions • Standard Processors • etc…

James Carrot

Slide 50

Slide 50 text

#jjug_ccc #ccc_f2 @bufferings Standard Processors Using Thymeleaf 1. th:text 2. th:attr 3. th:if 4. th:remove 5. th:each 6. Comments and Blocks etc…

Slide 51

Slide 51 text

#jjug_ccc #ccc_f2 @bufferings 1. th:text Standard Processors

James Carrot

Slide 52

Slide 52 text

#jjug_ccc #ccc_f2 @bufferings 1. th:text Standard Processors

James Carrot

Mitsuyuki Shiiba

output of running webapp

Slide 53

Slide 53 text

#jjug_ccc #ccc_f2 @bufferings 1. th:text Standard Processors • <, >, &, " and ‘ will be escaped (in Html mode) • Unescaped processor is “th:utext”

James Carrot

HtmlEscape.escapeHtml4Xml(unbescape) http://goo.gl/MDQr8E

Mitsuyuki Shiiba

output of running webapp

Slide 54

Slide 54 text

#jjug_ccc #ccc_f2 @bufferings 1. th:text Standard Processors

Slide 55

Slide 55 text

#jjug_ccc #ccc_f2 @bufferings 1. th:text Standard Processors

Hello Mitsuyuki Shiiba!

output of running webapp

Slide 56

Slide 56 text

#jjug_ccc #ccc_f2 @bufferings 2. th:attr Standard Processors

100

Slide 57

Slide 57 text

#jjug_ccc #ccc_f2 @bufferings 2. th:attr Standard Processors

100

output of running webapp • <, >, &, " and ‘ will be escaped

Slide 58

Slide 58 text

#jjug_ccc #ccc_f2 @bufferings 2. th:attr Standard Processors

100

th:* attributes view

Slide 59

Slide 59 text

#jjug_ccc #ccc_f2 @bufferings 3. th:if Standard Processors view

Slide 60

Slide 60 text

#jjug_ccc #ccc_f2 @bufferings 4. th:remove Standard Processors

First
Second

Slide 61

Slide 61 text

#jjug_ccc #ccc_f2 @bufferings 4. th:remove Standard Processors

First
Second

output of running webapp

Slide 62

Slide 62 text

#jjug_ccc #ccc_f2 @bufferings 4. th:remove Standard Processors • all • all-but-first • tag(tags) • body • none

Slide 63

Slide 63 text

#jjug_ccc #ccc_f2 @bufferings 4. th:remove Standard Processors

First
Second

th:remove=“all” output of running webapp

Slide 64

Slide 64 text

#jjug_ccc #ccc_f2 @bufferings 4. th:remove Standard Processors

First
Second

First

th:remove=“all-but-first” output of running webapp

Slide 65

Slide 65 text

#jjug_ccc #ccc_f2 @bufferings 4. th:remove Standard Processors

First
Second

First

Second

th:remove=“tag” output of running webapp

Slide 66

Slide 66 text

#jjug_ccc #ccc_f2 @bufferings 4. th:remove Standard Processors

First
Second

th:remove=“body” output of running webapp

Slide 67

Slide 67 text

#jjug_ccc #ccc_f2 @bufferings 4. th:remove Standard Processors th:remove=“none” is for conditional use. Link text not to be removed

Slide 68

Slide 68 text

#jjug_ccc #ccc_f2 @bufferings 5. th:each Standard Processors

First

Apple
Banana
Cake

output of running webapp

Slide 69

Slide 69 text

#jjug_ccc #ccc_f2 @bufferings 5. th:each Standard Processors th:each + th:remove=“all-but-first”

First
Second
Third

Apple
Banana
Cake

output of running webapp

Slide 70

Slide 70 text

#jjug_ccc #ccc_f2 @bufferings 5. th:each Standard Processors Iteration Status

First

Slide 71

Slide 71 text

#jjug_ccc #ccc_f2 @bufferings 5. th:each Standard Processors Iteration Status

First

Slide 72

Slide 72 text

#jjug_ccc #ccc_f2 @bufferings 5. th:each Standard Processors Iteration Status • index(from 0) • count(from 1) • size • current(current Object) • even/odd(boolean/start from 1) • first/last(boolean)

Slide 73

Slide 73 text

#jjug_ccc #ccc_f2 @bufferings 6. Comments and Blocks Standard Processors Parser level comment blocks

Slide 74

Slide 74 text

#jjug_ccc #ccc_f2 @bufferings 6. Comments and Blocks Standard Processors Parser level comment blocks

you can see me only before thymeleaf processes me!

Slide 75

Slide 75 text

#jjug_ccc #ccc_f2 @bufferings 6. Comments and Blocks Standard Processors Parser level comment blocks ... ... ...

Slide 76

Slide 76 text

#jjug_ccc #ccc_f2 @bufferings 6. Comments and Blocks Standard Processors Prototype-only comment blocks hello! goodbye! hello!

...

goodbye! output of running webapp

Slide 77

Slide 77 text

#jjug_ccc #ccc_f2 @bufferings 6. Comments and Blocks Standard Processors th:block ... ... ...

Slide 78

Slide 78 text

#jjug_ccc #ccc_f2 @bufferings 6. Comments and Blocks Standard Processors th:block ... ... ...

Slide 79

Slide 79 text

#jjug_ccc #ccc_f2 @bufferings Part1: Introducing Thymeleaf • What is Thymeleaf? • Getting Started • Using Thymeleaf • My Tips

Slide 80

Slide 80 text

#jjug_ccc #ccc_f2 @bufferings My Tips • Keep natural templating • otherwise it would be stale soon

Slide 81

Slide 81 text

#jjug_ccc #ccc_f2 @bufferings My Tips • Keep natural templating • otherwise it would be stale soon • Keep template simple • no tricky template • no logics in template • no mix of html and javascript

Slide 82

Slide 82 text

#jjug_ccc #ccc_f2 @bufferings Part1: Introducing Thymeleaf • What is Thymeleaf? • Getting Started • Using Thymeleaf • My Tips

Slide 83

Slide 83 text

#jjug_ccc #ccc_f2 @bufferings Part2: What’s new in Thymeleaf 3.0?

Slide 84

Slide 84 text

#jjug_ccc #ccc_f2 @bufferings Part2: What’s new in Thymeleaf 3.0? • What is Thymeleaf 3.0? • Migration Guide • Using Thymeleaf 3.0 • Summary

Slide 85

Slide 85 text

#jjug_ccc #ccc_f2 @bufferings What is Thymeleaf 3.0? • Dev of the 3.0 branch started July 2014 • AttoParser is started in late 2012 • Almost complete rewrite of the engine • 63K+ lines of code 85% new • 77K+ lines of test 40% new • 220 listres of coffee 100% arabica

Slide 86

Slide 86 text

#jjug_ccc #ccc_f2 @bufferings A new architecture

Slide 87

Slide 87 text

#jjug_ccc #ccc_f2 @bufferings Improved performance

Slide 88

Slide 88 text

#jjug_ccc #ccc_f2 @bufferings Full HTML5 Support • New parsing system • No longer XML-based • Created from scratch with Thymeleaf in mind

Whatever valid template! http://www.attoparser.org/

Slide 89

Slide 89 text

#jjug_ccc #ccc_f2 @bufferings TEXT Mode Dear [(${customer.name})], This is the list of our products: [# th:each="prod : ${products}"] - [(${prod.name})]. Price: [(${prod.price})] EUR/kg [/] Thanks, The Thymeleaf Shop

Slide 90

Slide 90 text

#jjug_ccc #ccc_f2 @bufferings Part2: What’s new in Thymeleaf 3.0? • What is Thymeleaf 3.0? • Migration Guide • Using Thymeleaf 3.0 • Summary

Slide 91

Slide 91 text

#jjug_ccc #ccc_f2 @bufferings Migration Guide • Templates • almost 100% compatible • (It is recommended to delete th:inline=“text”) • Configuration • a few modifications are needed

Slide 92

Slide 92 text

#jjug_ccc #ccc_f2 @bufferings Migration Guide Configuration change for Spring Boot Application. I created thymeleaf3-spring-boot. You can use it until the official one is released. There are only 2 steps. 1. Modify pom.xml 2. Add an exclude paramter https://github.com/bufferings/thymeleaf3-spring-boot

Slide 93

Slide 93 text

#jjug_ccc #ccc_f2 @bufferings Step1. Modify pom.xml Add repository https://github.com/bufferings/thymeleaf3-spring-boot Migration Guide bufferings https://raw.github.com/bufferings/thymeleaf3- spring-boot/mvn-repo/

Slide 94

Slide 94 text

#jjug_ccc #ccc_f2 @bufferings Step1. Modify pom.xml Replace dependency https://github.com/bufferings/thymeleaf3-spring-boot Migration Guide jp.gr.java_conf.bufferings thymeleaf3-spring-boot 0.0.1

Slide 95

Slide 95 text

#jjug_ccc #ccc_f2 @bufferings Step1. Modify pom.xml Override “thymeleaf.version” of parent https://github.com/bufferings/thymeleaf3-spring-boot Migration Guide 3.0.0.RELEASE

Slide 96

Slide 96 text

#jjug_ccc #ccc_f2 @bufferings Step2. Add an exclude parameter To exclude default ThymeleafAutoConfiguration https://github.com/bufferings/thymeleaf3-spring-boot Migration Guide @SpringBootApplication( exclude = ThymeleafAutoConfiguration.class) public class DemoApplication {

Slide 97

Slide 97 text

#jjug_ccc #ccc_f2 @bufferings Migration Guide Configuration change for those who create TemplateEngine class by yourself. private TemplateEngine templateEngine() { ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(); resolver.setPrefix("/WEB-INF/templates/"); resolver.setTemplateMode("HTML5"); TemplateEngine templateEngine = new TemplateEngine(); templateEngine.setTemplateResolver(resolver); return templateEngine; } Thymeleaf 2.1

Slide 98

Slide 98 text

#jjug_ccc #ccc_f2 @bufferings Migration Guide Configuration change for those who create TemplateEngine class by yourself. private TemplateEngine templateEngine() { ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(servletContext); resolver.setPrefix("/WEB-INF/templates/"); resolver.setTemplateMode(TemplateMode.HTML); TemplateEngine templateEngine = new TemplateEngine(); templateEngine.setTemplateResolver(resolver); return templateEngine; } Thymeleaf 3.0

Slide 99

Slide 99 text

#jjug_ccc #ccc_f2 @bufferings Notes for Migration Migration Guide • Please make sure you don’t have any “[[xxx]]” syntax in your html and especially in your JavaScript code. • If you use extra libraries, please check it supports Thymeleaf 3.0

Slide 100

Slide 100 text

#jjug_ccc #ccc_f2 @bufferings Part2: What’s new in Thymeleaf 3.0? • What is Thymeleaf 3.0? • Migration Guide • Using Thymeleaf 3.0 • Summary

Slide 101

Slide 101 text

#jjug_ccc #ccc_f2 @bufferings Using Thymeleaf 3.0 1. New Template Mode 2. Fragment Expressions 3. No-Operation Token 4. Decoupled Templates 5. Independence From Servlet API 6. Reactive Friendliness 7. StringTemplateResolver

Slide 102

Slide 102 text

#jjug_ccc #ccc_f2 @bufferings 1. New Template Mode TemplateMode enum class is introduced • HTML, XML • TEXT, JAVASCRIPT, CSS • RAW

Slide 103

Slide 103 text

#jjug_ccc #ccc_f2 @bufferings 1. New Template Mode Old modes are deprecated • HTML5, LEGACYHTML5, XHTML, VALIDXHTML  -> HTML • VALIDXML  -> XML

Slide 104

Slide 104 text

#jjug_ccc #ccc_f2 @bufferings HTML Mode • From Java SAX parser(+nekoHTML) to AttoParser • AttoParser is an event-based parser with Thymeleaf in mind 1. New Template Mode http://www.attoparser.org/

Slide 105

Slide 105 text

#jjug_ccc #ccc_f2 @bufferings HTML Mode • Full support of both XML and HTML5 (non XML-ized) markup 1. New Template Mode

Whatever valid template!

Slide 106

Slide 106 text

#jjug_ccc #ccc_f2 @bufferings HTML Mode • Validataion enabled parsing no longer exist in Thymeleaf 3.0 1. New Template Mode

Slide 107

Slide 107 text

#jjug_ccc #ccc_f2 @bufferings HTML Mode • No need for in or <style> 1. New Template Mode <script> /*<![CDATA[*/ var user = ... if (user.signupYear < 1990) { alert('You\'ve been here for a long time!'); } /*]]>*/ Thymeleaf 2.1

Slide 108

Slide 108 text

#jjug_ccc #ccc_f2 @bufferings HTML Mode • No need for in or <style> 1. New Template Mode <script> var user = ... if (user.signupYear < 1990) { alert('You\'ve been here for a long time!'); } Thymeleaf 3.0

Slide 109

Slide 109 text

#jjug_ccc #ccc_f2 @bufferings Improved Inlining 1. New Template Mode • Output values without a supporting tag • Already existed th:inline=“text" in Thymeleaf 2.1 • Now a 1st-class citizen, no th:inline needed • In fact, better remove them

This is called [[${product.name}]] and it's great!

Slide 110

Slide 110 text

#jjug_ccc #ccc_f2 @bufferings Improved Inlining 1. New Template Mode

This is called [[${product.name}]] and it's great!

Thymeleaf 2.1 Thymeleaf 3.0

Slide 111

Slide 111 text

#jjug_ccc #ccc_f2 @bufferings Improved Inlining Underneath, the template mode is used for default inline mode: 1. New Template Mode

This is called [[${product.name}]] and it's great!

Slide 112

Slide 112 text

#jjug_ccc #ccc_f2 @bufferings Improved Inlining Replaced at parsing time with: 1. New Template Mode

This is called and it's great!

This is called [[${product.name}]] and it's great!

Slide 113

Slide 113 text

#jjug_ccc #ccc_f2 @bufferings Improved Inlining When you don’t want to parse “[[…]]”, you can set th:inline=“none”: 1. New Template Mode

The expression for showing the product name is "[[$ {product.name}]]" and it's very simple.

Slide 114

Slide 114 text

#jjug_ccc #ccc_f2 @bufferings Improved Inlining For unescaped output, you can use “[(…)]” 1. New Template Mode

Description: [(${description})]

Slide 115

Slide 115 text

#jjug_ccc #ccc_f2 @bufferings Improved Inlining For unescaped output, you can use “[(…)]” 1. New Template Mode

Description: [(${description})]

Description: p>

Slide 116

Slide 116 text

#jjug_ccc #ccc_f2 @bufferings TEXT Mode(and JAVASCRIPT, CSS) 1. New Template Mode Dear [(${customer.name})], This is the list of our products: [# th:each="prod : ${products}"] - [(${prod.name})]. Price: [(${prod.price})] EUR/kg [/] Thanks, The Thymeleaf Shop

Slide 117

Slide 117 text

#jjug_ccc #ccc_f2 @bufferings TEXT Mode(and JAVASCRIPT, CSS) 1. New Template Mode Dear [(${customer.name})], This is the list of our products: [#th:block th:each="prod : ${products}"] - [(${prod.name})]. Price: [(${prod.price})] EUR/kg [/th:block] Thanks, The Thymeleaf Shop

Slide 118

Slide 118 text

#jjug_ccc #ccc_f2 @bufferings TEXT Mode(and JAVASCRIPT, CSS) 1. New Template Mode Dear [# th:utext="${customer.name}" /], This is the list of our products: [#th:block th:each="prod : ${products}"] - [(${prod.name})]. Price: [(${prod.price})] EUR/kg [/th:block] Thanks, The Thymeleaf Shop

Slide 119

Slide 119 text

#jjug_ccc #ccc_f2 @bufferings TEXT Mode(and JAVASCRIPT, CSS) 1. New Template Mode Dear [#th:block th:utext="${customer.name}" /], This is the list of our products: [#th:block th:each="prod : ${products}"] - [(${prod.name})]. Price: [(${prod.price})] EUR/kg [/th:block] Thanks, The Thymeleaf Shop

Slide 120

Slide 120 text

Slide 121

Slide 121 text

#jjug_ccc #ccc_f2 @bufferings JavaScript natural templates 1. New Template Mode var greeter = function() { var username = /*[[${user.name}]]*/ 'John Apricot'; alert('Hello ' + username); }; var greeter = function() { var username ='Martin Grapefruit'; alert('Hello ' + username); }; both and .js files processing result

Slide 122

Slide 122 text

#jjug_ccc #ccc_f2 @bufferings RAW Mode 1. New Template Mode Mainly for inserting untouched resources (files, URL responses, etc.) into the templates being processed.

Slide 123

Slide 123 text

Slide 124

Slide 124 text

#jjug_ccc #ccc_f2 @bufferings 2. Fragment Expressions In Standard Dialect • Template Layout(existing in Themeleaf 2.1) • Fragment Expressions(from Thymeleaf 3.0)

Slide 125

Slide 125 text

#jjug_ccc #ccc_f2 @bufferings Template Layout 2. Fragment Expressions th:fragment + th:replace

Slide 126

Slide 126 text

#jjug_ccc #ccc_f2 @bufferings Template Layout 2. Fragment Expressions th:fragment + th:replace • Define a template fragment with “th:fragment”

Slide 127

Slide 127 text

#jjug_ccc #ccc_f2 @bufferings Template Layout 2. Fragment Expressions th:fragment + th:replace • Define a template fragment with “th:fragment”

include.html

Slide 128

Slide 128 text

#jjug_ccc #ccc_f2 @bufferings Template Layout 2. Fragment Expressions th:fragment + th:replace • Include it with “th:replace” ...

Slide 129

Slide 129 text

#jjug_ccc #ccc_f2 @bufferings Template Layout 2. Fragment Expressions th:fragment + th:replace • Include it with “th:replace” ...

processing result

Slide 130

Slide 130 text

#jjug_ccc #ccc_f2 @bufferings Template Layout 2. Fragment Expressions th:fragment + th:replace • Include it with “th:replace”

Slide 131

Slide 131 text

#jjug_ccc #ccc_f2 @bufferings Template Layout 2. Fragment Expressions th:fragment + th:replace • Include it with “th:replace”

Template Name Fragment Name

Slide 132

Slide 132 text

#jjug_ccc #ccc_f2 @bufferings Template Layout 2. Fragment Expressions You can write like this:

Slide 133

Slide 133 text

#jjug_ccc #ccc_f2 @bufferings Template Layout 2. Fragment Expressions You can specify fragment without “th:fragment” using DOM selector:

...

Slide 134

Slide 134 text

#jjug_ccc #ccc_f2 @bufferings Template Layout 2. Fragment Expressions th:fragment can define parameters:

...

Slide 135

Slide 135 text

#jjug_ccc #ccc_f2 @bufferings Template Layout 2. Fragment Expressions th:fragment can define parameters:

...

And Thymeleaf 3.0 has Fragment Expressions.

Slide 136

Slide 136 text

#jjug_ccc #ccc_f2 @bufferings Fragment Expressions: ~{...} Generalised syntax of th:insert, th:replace

Thymeleaf 2.1 Thymeleaf 3.0 Please don’t worry. The older syntax still works. 2. Fragment Expressions

Slide 137

Slide 137 text

#jjug_ccc #ccc_f2 @bufferings Fragment Expressions: ~{...} Can be used elsewhere... even as parameters! Awesome - Main 2. Fragment Expressions

Slide 138

Slide 138 text

#jjug_ccc #ccc_f2 @bufferings Fragment Expressions: ~{...} Can be used elsewhere... even as parameters! The awesome app 2. Fragment Expressions base.html

Slide 139

Slide 139 text

Slide 140

Slide 140 text

#jjug_ccc #ccc_f2 @bufferings • Ability for processors to do nothing • Expression result: underscore(‘_') • Use prototyping text as default values 3. No-Operation Token no user authenticated

Slide 141

Slide 141 text

Slide 142

Slide 142 text

#jjug_ccc #ccc_f2 @bufferings 4. Decoupled Templates Green Plum Round-oval shape fruits.html fruits.th.xml

Slide 143

Slide 143 text

Slide 144

Slide 144 text

#jjug_ccc #ccc_f2 @bufferings Independence From Servlet API • Already in 2.1 for non-web applications • Non-ServletAPI webs had unsolved needs • Non-absolute URL handling, context integration /* Customize the way URLs are handled: context, rewriting, etc. */ tempEngine.setLinkBuilder(new ILinkBuilder() {...}); /* Customize the way context variables are maintained */ tempEngine.setEngineContextFactory(new IEngineContextFactory() {...});

Slide 145

Slide 145 text

Slide 146

Slide 146 text

#jjug_ccc #ccc_f2 @bufferings 6. Reactive Friendliness • Sorry, I will study spring reactive! • If you are interested in, please check this repo:  https://github.com/thymeleaf/thymeleafsandbox- springreactive

Slide 147

Slide 147 text

Slide 148

Slide 148 text

#jjug_ccc #ccc_f2 @bufferings 7. StringTemplateResolver • If you want to check Thymeleaf Standard Dialect, you can write codes like this: @Test public void test() { TemplateEngine engine = new TemplateEngine(); Context context = new Context(); context.setVariable("name", "Mitsuyuki"); String result = engine.process( "I'm [[${name}]].", context); assertThat(result, is("I'm Mitsuyuki.")); }

Slide 149

Slide 149 text

#jjug_ccc #ccc_f2 @bufferings 7. StringTemplateResolver • Please note that if you use Spring, you should use SpringStandardDialect.: @Test public void test() { TemplateEngine engine = new TemplateEngine(); engine.setDialect(new SpringStandardDialect()); Context context = new Context(); context.setVariable("name", "Mitsuyuki"); String result = engine.process( "I'm [[${name}]].", context); assertThat(result, is("I'm Mitsuyuki.")); }

Slide 150

Slide 150 text

Slide 151

Slide 151 text

#jjug_ccc #ccc_f2 @bufferings 7. StringTemplateResolver • StringTemplateResolver will consider the template being resolved as the template itself. • This is the default template resolver of TemplateEngine.

Slide 152

Slide 152 text

#jjug_ccc #ccc_f2 @bufferings Part2: What’s new in Thymeleaf 3.0? • What is Thymeleaf 3.0? • Migration Guide • Using Thymeleaf 3.0 • Summary

Slide 153

Slide 153 text

#jjug_ccc #ccc_f2 @bufferings Summary • You don’t need any big change for migrating from Thymeleaf 2.1 to 3.0. • On the other hand, inside was changed so much that you can get the performance improvement. • So why don’t you use Thymeleaf 3.0? Thank you!

Slide 154

Slide 154 text

#jjug_ccc #ccc_f2 @bufferings Reference • Thymeleaf Web Site  http://www.thymeleaf.org/ • Thymeleaf by Daniel Fernández  https://youtu.be/GVq0uzpHYoQ • The Thymeleaf Artwork by The Thymeleaf Project is licensed under the Creative Commons CC BY-SA 3.0 License.