Introduction to thymeleaf

Introduction to thymeleaf

• 1.
  Introduction to Thymeleaf February14, 2017 Presented by - Nakul
• 2.
  Introduction Thymeleaf offers aset 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.
  The SpringStandardDialect In orderto 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.
  Continued.. Note that youshouldn’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.
  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.
  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.
  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.
  Creating Forms Thymeleaf requiresyou 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 ${seedStarter.data} 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.
  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.
  Displaying values frommessage 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.
  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.
  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="${student.id}" /> <td th:text="${student.name}" /> </tr> </tbody>
• 13.
  Conditional Evaluation ‘ifand 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.
  Conditional Evaluation ‘switchand 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.
  References Using Thymeleaf Thymeleaf Tutorial3.0 Introduction to thymeleaf Thymeleaf tutorial 2.1
• 16.
  Questions ?
• 17.
  Thank You