Рассказываем, как работать с популярным веб-шаблонизатором.
При загрузке веб-приложения пользователи часто видят на экране разные данные. Например, заходя в свой личный кабинет в соцсети, пользователь будет видеть персональную информацию: никнейм, имя, возраст, электронную почту и аватарку. Эти данные загружаются из базы на сервере и динамически выводятся пользователю в момент загрузки HTML-страницы.
С базой данных веб-приложение «общается» на стороне сервера, например, с помощью Java. Далее информация передаётся клиенту, и после этого её надо правильно вывести на экран пользователя. Чтобы упростить разработчикам задачу и не заставлять выводить все данные вручную, придумали шаблонизаторы. Благодаря им можно быстро раскидать информацию по нужным полям веб-страницы и сэкономить время на вёрстке.
В этой статье рассказываем о популярном шаблонизаторе 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-файлы.
Шаблоны 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-страницу и переписывать код на стороне сервера.
Используя шаблоны 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
- th:if — обработка логических выражений;
- th:each — перечисление коллекций;
- th:error — выведение ошибок.
Для большинства задач вывода данных на веб-страницы и изучения Thymeleaf хватит возможностей стандартного диалекта. Но важно понимать, что есть и другие функции, которые могут ускорить работу над проектом. Подробнее о диалектах можно узнать из официальной документации Thymeleaf.
Конфигурации Thymeleaf
Перед тем как использовать Thymeleaf, его нужно подключить к проекту и настроить. При этом важно помнить, что шаблонизатор работает с бэкендом на Java и фреймворке 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-файлы, в которые встраиваются необходимые данные с сервера.