Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to thymeleaf


Published on

Thymeleaf offers a set of Spring integrations that allow you to use it as a full-featured substitute for JSP in Spring MVC applications.

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Introduction to thymeleaf

  1. 1. Introduction to Thymeleaf February 14, 2017 Presented by - Nakul
  2. 2. Introduction Thymeleaf offers a set of Spring integrations that allow you to use it as a full-featured substitute for JSP in Spring MVC applications. ● Make the mapped methods in your Spring MVC @Controller objects forward to templates managed by Thymeleaf, exactly like you do with JSPs. ● Use Spring Expression Language (Spring EL) in your templates. ● Create forms in your templates that are completely integrated with your form-backing beans and result bindings, including the use of property editors, conversion services and validation error handling. ● Display internationalization messages from messages files managed by Spring (through the usual MessageSource objects).
  3. 3. The SpringStandardDialect In order to achieve an easier and better integration, Thymeleaf provides a dialect which specifically implements all the needed features for it to work correctly with Spring. ● Use Spring Expression Language (Spring EL) as a variable expression language, instead of OGNL. Consequently, all ${...} and *{...} expressions will be evaluated by Spring’s Expression Language engine. ● Access any beans in your application context using SpringEL’s syntax: ${@myBean.doSomething()} ● New attributes for form processing: th:field, th:errors and th:errorclass, besides a new implementation of th:object that allows it to be used for form command selection. ● An expression object and method, #themes.code(...), which is equivalent to the spring:theme JSP custom tag. ● An expression object and method, #mvc.uri(...), which is equivalent to the spring:mvcUrl(...) JSP custom function (only in Spring 4.1+).
  4. 4. Continued.. Note that you shouldn’t use this dialect directly in a normal TemplateEngine object as a part of its configuration. Instead, you should instance a new template engine class that performs all the required configuration steps: org.thymeleaf.spring4.SpringTemplateEngine. @Bean public SpringTemplateEngine springTemplateEngine(TemplateResolver templateResolver) { SpringTemplateEngine springTemplateEngine = new SpringTemplateEngine(); springTemplateEngine.addTemplateResolver(templateResolver); return springTemplateEngine; }
  5. 5. Standard Expression Syntax ● Simple expressions: ○ Variable Expressions: ${...} ○ Selection Variable Expressions: *{...} ○ Message Expressions: #{...} ○ Link URL Expressions: @{...} ● Literals ○ Text literals: 'one text', 'Another one!',… ○ Number literals: 0, 34, 3.0, 12.3,… ○ Boolean literals: true, false ○ Null literal: null ○ Literal tokens: one, sometext, main,… ● Text operations: ○ String concatenation: + ○ Literal substitutions: The name is ${name}
  6. 6. Standard Expression Syntax ● Arithmetic operations: ○ Binary operators: +, -, *, /, % ○ Minus sign (unary operator): - ● Boolean operations: ○ Binary operators: and, or ○ Boolean negation (unary operator): !, not ● Comparisons and equality: ○ Comparators: >, <, >=, <= (gt, lt, ge, le) ○ Equality operators: ==, != (eq, ne) ● Conditional operators: ○ If-then: (if) ? (then) ○ If-then-else: (if) ? (then) : (else) ○ Default: (value) ?: (defaultvalue)
  7. 7. Objects available ● #ctx: the context object. ● #vars: the context variables. ● #locale: the context locale. ● #request: (only in Web Contexts) the HttpServletRequest object. ● #response: (only in Web Contexts) the HttpServletResponse object. ● #session: (only in Web Contexts) the HttpSession object. ● #servletContext: (only in Web Contexts) the ServletContext object.
  8. 8. Creating Forms Thymeleaf requires you to specify the command object by using a th:object attribute in your <form> tag: <form action="#" th:action="@{/student/create}" th:object="${student}" method="post"> ... </form> ● Values for th:object attributes in form tags must be variable expressions (${...}) specifying only the name of a model attribute, without property navigation. This means that an expression like ${seedStarter} is valid, but ${} would not be. ● Once inside the <form> tag, no other th:object attribute can be specified. This is consistent with the fact that HTML forms cannot be nested.
  9. 9. Inputs <input type="text" th:field="*{dateCreated}" /> Is rendered as <input type="text" id="dateCreated" name="dateCreated" th:value="*{dateCreated}" /> th:field. This is a very important feature for Spring MVC integration because it does all the heavy work of binding your input with a property in the form-backing bean. The th:field can be applied to various input types present in html
  10. 10. Displaying values from message source The th:text=”#{key}” tag attribute can be used to display values from property files. For this to work the property file must be configured as messageSource bean: Here is the Thymeleaf HTML code to display the value associated with the key welcome.message: <span th:text="#{welcome.message}" />
  11. 11. Displaying model attributes 1. Simple Attributes - The th:text=”${attributename}” tag attribute can be used to display the value of model attributes. Let’s add a model attribute with the name serverTime in the controller class: model.addAttribute("serverTime", dateFormat.format(new Date())); can be accessed as Current time is <span th:text="${serverTime}" />
  12. 12. Displaying model attributes 2. Collection Attributes - model.addAttribute("studentsList", studentsList); we can use Thymeleaf template code to iterate over the list of students and display all field values <tbody> <tr th:each="student: ${studentsList}"> <td th:text="${}" /> <td th:text="${}" /> </tr> </tbody>
  13. 13. Conditional Evaluation ‘if and unless’ The th:if=”${condition}” attribute is used to display a section of the view if the condition is met. The th:unless=”${condition}” attribute is used to display a section of the view if the condition is not met. public class Student implements Serializable { public Character gender; } Suppose this field has two possible values (M or F) to indicate the student’s gender. <td> <span th:if="${student.gender} == 'M'" th:text="Male" /> <span th:unless="${student.gender} == 'M'" th:text="Female" /> </td>
  14. 14. Conditional Evaluation ‘switch and case’ The th:switch and th:case attributes are used to display content conditionally using the switch statement structure. The previous code could be rewritten using the th:switch and th:case attributes: <td th:switch="${student.gender}"> <span th:case="'M'" th:text="Male" /> <span th:case="'F'" th:text="Female" /> </td>
  15. 15. References Using Thymeleaf Thymeleaf Tutorial 3.0 Introduction to thymeleaf Thymeleaf tutorial 2.1
  16. 16. Questions ?
  17. 17. Thank You