Thymeleaf для новичков: оживляем HTML-шаблоны

При загрузке веб-приложения пользователи часто видят на экране разные данные. Например, заходя в свой личный кабинет в соцсети, пользователь будет видеть персональную информацию: никнейм, имя, возраст, электронную почту и аватарку. Эти данные загружаются из базы на сервере и динамически выводятся пользователю в момент загрузки HTML-страницы.

С базой данных веб-приложение «общается» на стороне сервера, например, с помощью Java. Далее информация передаётся клиенту, и после этого её надо правильно вывести на экран пользователя. Чтобы упростить разработчикам задачу и не заставлять выводить все данные вручную, придумали шаблонизаторы. Благодаря им можно быстро раскидать информацию по нужным полям веб-страницы и сэкономить время на вёрстке.

В этой статье рассказываем о популярном шаблонизаторе Thymeleaf («таймлиф») и на примерах показываем, как он работает.

Содержание

• Что такое Thymeleaf и для чего он нужен
• Шаблоны Thymeleaf
• Диалекты Thymeleaf
• Конфигурации Thymeleaf

Что такое Thymeleaf и для чего он нужен

Thymeleaf — это шаблонизатор, позволяющий в реальном времени заменять определённые конструкции в коде данными с сервера. Это упрощает вёрстку и работу с данными, так как можно один раз написать шаблон и переиспользовать его несколько раз.

Задолго до появления Thymeleaf разработчики использовали технологию JSP (JavaServer Pages) с более сложной структурой. Из-за этого программисты тратили много времени на создание самих шаблонов.

Thymeleaf работает с языком программирования Java и обрабатывает не только веб-страницы, в отличие от того же JSP. Он работает с шестью видами шаблонов: HTML, XML, CSS, JavaScript, RAW и обычным текстом. С ними можно работать в нескольких режимах (template mode):

• Разметочный шаблон (markup template) поддерживает HTML и XML.
• Текстовый шаблон (textual template) поддерживает CSS и JavaScript.
• Пустой шаблон (no-op template) поддерживает RAW-файлы.

Читайте также:

Java Core для новичков: роадмап

Шаблоны Thymeleaf

Шаблоны Thymeleaf отвечают за отображение данных и управление динамическим контентом. С их помощью разработчики могут встраивать выражения и директивы прямо в HTML-код, облегчая процесс создания динамических страниц.

Важно понимать, что Thymeleaf использует собственный синтаксис и работает с данными из объектов, которые передаёт сервер. Эти объекты называются моделями. Например, у нас есть Java-код на сервере, который выполняется, когда пользователь заходит в наше веб-приложение:

@Controller
public class HelloController {

   @GetMapping("/")
   public String getHello(Model model){
       
       // Добавляем в модель строковые данные
       String message = "Hello World!";
       model.addAttribute("message", message);
       
       // Отдаём HTML-страницу hello.html пользователю
       return "hello";
   }
}

Если пользователь выполнил вход, то код вернёт HTML-страницу ​​hello.html и встроит в неё модель message, в которой содержится строка Hello World!. Она и должна выводиться на экран пользователя.

Если бы мы разрабатывали сайт с помощью классической вёрстки, то в HTML-файле использовали бы парный тег <h1> для вывода текста:

<h1>Hello World!</h1>

Читайте также:

Язык HTML: что это такое и как он работает

В таком случае веб-приложение всегда будет выводить одно и то же сообщение. Если вдруг надо будет приветствовать пользователя по имени, то придётся создавать новую HTML-страницу и переписывать код на стороне сервера.

Используя шаблоны Thymeleaf, можно на одну и ту же страницу выводить разные данные с сервера. Но при этом придётся слегка модифицировать код на странице:

<h1 th:text="${message}"/>

Атрибут th:text указывает на то, что здесь будет задействован шаблонизатор, а значение внутри фигурных скобок с символом доллара ($) сообщает, что нужно обратиться к переменной message и вывести её значение в этом месте.

Изменим на сервере содержимое переменной на Hello Jack:

// Первый аргумент: Имя переменной
// Второй аргумент: Значение переменной
model.addAttribute("message", "Hello Jack");

Теперь, когда пользователь зайдёт на нашу страницу, он увидит уже другое сообщение. При этом разработчику не пришлось создавать новую HTML-страницу и переписывать логику на сервере.

Усложняем шаблоны

В реальных проектах разработчики используют более сложные шаблоны. Представьте, что код на стороне сервера идентифицирует пользователя, ищет в базе информацию о нём и выводит эти данные на веб-страницу. Для каждого пользователя это будет уникальный набор данных, но для вывода можно использовать один и тот же шаблон.

Для разных типов данных в Thymeleaf есть свои выражения для вывода:

• Переменные: ${message}
• Переменные выбора объекта: *{object.variable}
• Сообщения: #{error}
• URL: @{/link}
• Фрагменты: ~{template}

Разберём ещё один пример с передачей шаблона объекта пользователю — переменными выбора. Допустим, на сервере есть класс-модель, предоставляющая информацию о пользователе:

public class User {
   String username; // Имя пользователя
   String email; // Email пользователя
   // Конструктор, принимающий значения переменных
   public Person(String username, String email) {
        this.username = username;
        this.email = email;
   }
}

В классе-контроллере, отвечающем за передачу данных пользователю, мы создаём объект пользователя с именем и адресом электронной почты и добавляем его в модель:

@Controller
public class UserController {

   @GetMapping("/user")
   public String getUser(Model model){
       
       // Создаём нового пользователя и добавляем его в модель       
       User user = new User("Jack", "jack@test.ru")
       model.addAttribute("user", user);
       
       // Отдаём HTML-страницу user.html пользователю
       return "user";
   }
}

В HTML-коде, чтобы вывести значения переменных передаваемого объекта User, используем следующий шаблон:

<ul th:object="${user}">
    <li>Имя: <span th:text="*{username}"></span></li>
    <li>Email: <span th:text="*{email}"></span></li>
</ul>

С помощью атрибута th:object мы обращаемся к переменной-объекту, который был передан с сервера. А с помощью конструкции *{variable_name} мы напрямую запрашиваем значения переменных этого объекта.

Таким образом можно передать информацию о любом пользователе из базы данных и отобразить их на веб-странице. При этом информация будет динамически меняться в зависимости от того, кто запрашивает данные.

Читайте также:

Вёрстка сайта: инструкция для новичков

Диалекты Thymeleaf

Диалекты Thymeleaf — это своеобразные плагины, с помощью которых можно расширять возможности шаблонизатора, добавлять собственные атрибуты и выражения. По умолчанию Thymeleaf предоставляет разработчикам стандартный диалект (standard dialect), включающий в себя выражения, которые мы уже рассмотрели выше (th:text, th:object). Но существуют и другие конструкции, например:

• th:if — обработка логических выражений;
• th:each — перечисление коллекций;
• th:error — выведение ошибок.

Для большинства задач вывода данных на веб-страницы и изучения Thymeleaf хватит возможностей стандартного диалекта. Но важно понимать, что есть и другие функции, которые могут ускорить работу над проектом. Подробнее о диалектах можно узнать из официальной документации Thymeleaf.

Конфигурации Thymeleaf

Перед тем как использовать Thymeleaf, его нужно подключить к проекту и настроить. При этом важно помнить, что шаблонизатор работает с бэкендом на Java и фреймворке Spring.

Читайте также:

Фреймворк Spring: зачем он нужен, как устроен и как работает

Раньше для настройки Thymeleaf требовалось очень много времени и кода. Часто настройка шаблонизатора могла доходить до конфигурации в отдельном XML-файле со своими дескрипторами и атрибутами, а также до подключения системы сборки, например Maven.

Позже появилась технология Spring Boot, и настройка стала занимать меньше времени. Для подключения Thymeleaf достаточно выбрать шаблонизатор при инициализации проекта, а фреймворк Spring сделает всё остальное.

Все необходимые настройки при этом автоматически пропишутся в файле application.properties. Содержимое файла можно менять вручную, чтобы подготовить шаблонизатор под нестандартные условия.

Параметры, которые можно менять:

• prefix — указывает на папку, в которой хранятся HTML-шаблоны.

spring.thymeleaf.prefix=classpath:/templates/

• suffix — устанавливает расширение файлов, в которых хранятся шаблоны.

spring.thymeleaf.suffix=.html

• mode — выбор режима обработки шаблонов (HTML, XML, CSS, RAW, JAVASCRIPT, TEXT).

spring.thymeleaf.mode=HTML

• enabled — с помощью этого параметра можно включить или выключить Thymeleaf в проекте.

spring.thymeleaf.enabled=true

• encoding — устанавливает кодировку шаблонов.

spring.thymeleaf.encoding=UTF-8

Что запомнить

• Thymeleaf — популярный шаблонизатор с собственным синтаксисом, поддержкой Java и шести форматов, включая HTML, CSS и JavaScript. Шаблонизатор — это ПО для динамического вывода данных на веб-странице.
• Thymeleaf удобно применять в связке с фреймворком Spring.
• Шаблоны Thymeleaf — это HTML-файлы, в которые встраиваются необходимые данные с сервера.