Представляем Thymeleaf

View more Tutorials:

1- Что такое Thymeleaf?

Thymeleaf это современный  Java Template Engine, работает на стороне сервера (server side) для сред: Web и стандартная среда. Имеет способность обрабатывать  HTML, XML, Javascript, CSS и даже простой текст (plain text).
A Thymeleaf Template
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
   <head> 
      <meta charset="UTF-8" />
      <title>Person List</title>
      <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
   </head>
   <body>
      <h1>Person List</h1>
      <a href="addPerson">Add Person</a>
      <br/><br/>
      <div>
         <table border="1">
            <tr>
               <th>First Name</th>
               <th>Last Name</th>
            </tr>
            <tr th:each ="person : ${persons}">
               <td th:utext="${person.firstName}">...</td>
               <td th:utext="${person.lastName}">...</td>
            </tr>
         </table>
      </div>
   </body>
</html>
Thymeleaf Engine проанализирует  Thymeleaf Template, он использует данные  Java, чтобы заменить позиции отмеченные на Thymeleaf Template для создания нового текста.

2- Виды Template в Thymeleaf

Thymeleaf имеют 6 видов  Template, каждый вид  Template называется режим  Template (Template Mode).
  • HTML
  • XML
  • TEXT
  • JAVASCRIPT
  • CSS
  • RAW

HTML Template Mode

Режим  HTML Template позволяет любой ввод  HTML, включая  HTML5, HTML4, XHTML. При обработке этих данных  Thymeleaf Engine не будет проверять  well-formed данных, одновременно он не будет валидировать (validate) эти данные.
В режиме  HTML Template, Thymeleaf не создает новые теги (tag) (За исключением  <th:block>), он добавляет свои отметки (markup) в готовые теги  HTML. Вы можете представить интерфейс страницы кода вы напрямую открываете  HTML Thymeleaf Template на браузере. Поэтому  Thymeleaf помогает значительно сократить расстояние между командой дизайна и командой разработки приложения.
Ниже является пример  HTML Thymeleaf Template:
Открыть  HTML Template напрямую на браузере, вы можете увидеть интерфейс страницы.
first-html-template.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>My First HTML Thymeleaf Template</title>
    
    
</head>

<body>
    
     <h2>Hello HTML Thymeleaf Template</h2>
    
     <!-- 'src' works when opening this template directly in the browser -->
     <!-- 'th:src' will replate 'src' when this template is processed by Thymeleaf Engine -->
     <img src="../static/picture.png" th:src="@{someJavaObject.imgSrc}" />

</body>

</html>

XML Template Mode

Режим  XML Template позволяет ввод  XML. Themeleaf Engine проверяет, чтобы удостовериться, что данный документ  XML является  well-formed (Имеет хороший формат, то есть должен гарантировать каждый открытый тег (open tag) должен имет закрывающий тег (close tag), значение атрибута (attribute) должно быть  заключено в одинарные кавычки (single quotation marks ' ') или двойные кавычки (double quotation marks " "),...  в случае нарушения исключение будет выброшено. Примечание: Themeleaft Engine не валидирует (validate) подходит ли этот материалr  XML ​​​​​​​для   DTD или для  XML Schema.
XML Template example
<?xml version="1.0" encoding="UTF-8"?>
<persons>
    <person>
        <fname th:text="${personInfo.lastName}"></fname>
        <lname th:text="${personInfo.firstName}"></lname>
        <country th:text="${personInfocountry}"></country>
    </person>
</persons>

TEXT Template Mode

Режим  TEXT Template использует особенный синтаксис для Template, входными данными являются обычные тексты как Text Email,... Заметьте, что  HTML Template или  XML Template так же могут считаться простыми текстами, Thymeleaf Engine не будут обращать внимания на теги (tag), они считаются только текстами. 
TEXT Template example
Dear [(${customer.name})],

This is the list of our products:
[# th:each="p : ${products}"]
   - [(${p.name})]. Price: [(${#numbers.formatdecimal(p.price,1,2)})] EUR/kg
[/]
Thanks,
  The Thymeleaf Shop

JAVASCRIPT template Mode

Режим  Javascript Template позволяет обрабатывать файлы  Javascript в приложении  Thymeleaf. Это значит возможно использование модели данных в файлах  Javascript подобно способу, который он может использовать в файлах  HTML. Но файл  Javascript считается только простым текстом, поэтому он использует синтаксис похожий на синтаксис в режиме  TEXT Template.
Пример с файлом  Javascript Template:
Javascript Template example
// Javascript Template:
function showCode() {
    var code = /*[[${code}]]*/ '12345';
    document.getElementById('code').innerHTML = code;
}

// ==> Output:

function showCode() {
    var code = 11223';
    document.getElementById('code').innerHTML = code;
}
Пример с  Javascript Template встроенный в  HTML:
Javascript Template (Inline example)
<!-- Javascript Template -->

<script th:inline="javascript">

      /*<![CDATA[*/
        
         var user = /*[[${someObject.userName}]]*/ 'User Name';

       /*]]>*/

</script>


<!-- OUTPUT: -->



<script th:inline="javascript">

      /*<![CDATA[*/
        
         var user = 'Tom';

       /*]]>*/

</script>

CSS template Mode

Режим  CSS Template позволяет обрабатывать файлы CSS в приложении  Thymeleaf. Он использует синтаксис похожий на синтаксис режима  Javascript Template.
Пример с  CSS Template встроенный в  HTML:
Css Template (Inline example)
<style th:inline="text">

    .some-div {
         background-image: url([[@{(${someObject.imagePath})}]]);        
        
    }

</style>

RAW Template Mode

Режим  RAW Template не обрабатывает  Template. Он используется для вставки необработанных ресурсов (File,URL Response,..) в Template. Например внешние ресурсы, или те что не контролируются форматом  HTML.

3- Dialect (Диалект)

Thymeleaf это инструмент позволяющий кастомизацию, точнее позволяет вам определить ваш способ как ваш  Template будет обработан. Базовая библиотека (core) у Thymeleaf предоставляет диалект, называется  Standard Dialect (Стандартный диалект), достаточны чтобы использовать каждому.
Spring Framework создает собственный диалект называется  SpringStandard Dialect, похожий на стандартный диалект  Thymeleaf, но с небольшими поправками для лучшего использования некоторых свойств в Spring Framework, Напрмер: Он использует язык выражения  Spring ( Spring Expression Language - SpringEL) вместо  OGNL. Поэтому, если вы используете  Spring Framework, вы не тратите свое время, так как почти все чему вы научитесь здесь будет использоваться в вашем приложении  Spring.
SpringStandard Dialect example
<table border="1">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    <tr th:each ="person : ${persons}">
        <td th:utext="${person.firstName}">...</td>
        <td th:utext="${person.lastName}">...</td>
    </tr>
</table>
Standard Dialect example
<table border="1">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    <tr th:each ="person : ${persons}">
        <td th:utext="${person['firstName']}">...</td>
        <td th:utext="${person['lastName']}">...</td>
    </tr>
</table>
Thymeleaf был создан для языка  Java, и поэтому вы можете использовать его на всех платформах использующих  Java, как например  Servlet, Struts, Spring,... Но  Spring Framework на самом деле очень поддерживает, поэтому использование​​​​​​​ Thymeleaf в Spring становится проще.
В январе 2017 года, на форуме  Thymeleaf было проведено множество оценок требований использования   Thymeleaf​​​​​​​ для программистов, и выясняется, какой  Framework больше всего используется с   Thymeleaf, и ниже является результат.

View more Tutorials: