introduction to thymeleaf
TRANSCRIPT
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).
The SpringStandardDialectIn 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+).
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;
}
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}
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)
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.
Creating FormsThymeleaf 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 ${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.
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
Displaying values from message sourceThe 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}" />
Displaying model attributes1. 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}" />
Displaying model attributes2. 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>
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>
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>
References
Using ThymeleafThymeleaf Tutorial 3.0Introduction to thymeleafThymeleaf tutorial 2.1
Questions ?
Thank You