Thymeleaf java что это
Введение в Thymeleaf
В этой статье продолжим разбирать приложение из предыдущего примера. На этот раз сосредоточимся на синтаксисе шаблонов Thymeleaf. В пример будет добавлена проверка поля и вывод в шаблон ошибок.
Maven-зависимость
Чтобы добавить Thymeleaf в Spring Boot приложение, мы прописали в POM-файле зависимость:
Отображение атрибутов модели
На главной странице мы добавляли в модель два атрибута: animals и animal:
animals — коллекция, animal объект.
В шаблоне атрибуты становятся переменными, к которым есть доступ.
Вообще наша страница выглядит так:
Как выглядит страница на основе шаблона index.html
В шаблоне выводится коллекция animals. А перед ней находится форма, которая через заполненный animal отправляет введенное название животного в контроллер.
th:each — отображение коллекции
Начнем с коллекции animals. Мы ее выводим в виде таблицы:
$ — это обращение к переменной, содержащей коллекцию. Строка будет повторяться столько раз, сколько элементов в коллекции, для этого мы задаем для нее:
Здесь an — текущее животное, iterStat — итератор.
Из него можно получить индекс:
а также, является ли индекс нечетным числом:
th:style — задание стиля
Если является, ты мы задаем строке стиль:
Так все нечетные строки будут выделены жирным шрифтом.
th:text — отображение текста внутри тега
Как вывести имя животного? Для этого есть очень популярный атрибут th:text:
Он заполняет тег значением из переменной.
Если название животного — «козел», то вышеприведенная запись преобразуется на итоговой странице в:
Обработка формы: th:action, th:object, th:field
Форма у нас обрабатывается благодаря трем атрибутам:
где первый атрибут th:action задает адрес /, по которому идет POST-запрос с формы, второй — объект Animal, а третий — его поле name, которое заполняется и передается в контроллер. Обратите внимание, что переменная $ задана в th:object, поэтому имя поля прописывается со звездочки.
Форма преобразуется в итоге:
th:value
Но можно обойтись без th:object, в этом случае тегу прописываем атрибут th:value:
Разницы нет, в обоих случаях в теле POST-запроса уходит name=значение, а итоговый :
Проверка поля и вывод ошибок — th:errors
Добавим в код проверку корректности введенного значения имени и вывод ошибок. Для этого придется поменять код в нескольких местах.
Модель — @NotBlank и @Size(min=2, max=50)
Во-первых, добавим для поля name модели условие, при котором оно считается корректным:
То есть поле name должно быть не пустым (не состоять из пробелов) и иметь размер от 2 до 50.
Чтобы аннотации @NotBlank и@Size(min=2, max=50) компилировались и обрабатывались, необходимо добавить Maven-зависимость:
@Valid и BindingResult в контроллере
Во-вторых, исправим контроллер.
Значение name должно проверяться, когда Animal приходит в контроллер в метод add().
Чтобы это происходило, аннотируем animal с помощью @Valid, а следующим аргументом добавим BindingResult (порядок важен):
Теперь перенаправление («redirect:/») на get() делаем только в случае успеха, иначе же просто возвращаем index.html с ошибками. Модель тоже надо заполнять, чтобы не терять список уже добавленных животных.
th:errors — вывод ошибок
После всех приготовлений вывести ошибки просто. Просто добавим под тег:
В итоге при попытке добавить пустую строку получим:
Вывод ошибок
Итоги
Код примера доступен на GitHub. В нем добавлена проверка поля и вывод ошибок, касающихся этого поля.
Thymeleaf
Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
Thymeleaf’s main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.
With modules for Spring Framework, a host of integrations with your favourite tools, and the ability to plug in your own functionality, Thymeleaf is ideal for modern-day HTML5 JVM web development — although there is much more it can do.
Natural templates
HTML templates written in Thymeleaf still look and work like HTML, letting the actual templates that are run in your application keep working as useful design artifacts.
Integrations galore
Eclipse, IntelliJ IDEA, Spring, Play, even the up-and-coming Model-View-Controller API for Java EE 8. Write Thymeleaf in your favourite tools, using your favourite web-development framework.
Check out our Ecosystem to see more integrations, including community-written plugins to speed-up your development with Thymeleaf.
Let’s go!
Looking to get started? Check out our Download section for getting Thymeleaf, then go to our Docs pages for several tutorials to slowly ease you into using Thymeleaf.
Found a bug, or itching to contribute? Then find the GitHub repo for it on our issue tracking page.
Who’s using Thymeleaf?
Lots of people are 🙂 But here are a few who have been kind enough to provide us with testimonials on how they came to Thymeleaf and the ways they are using it. Click through to read what they have to say.
Учебник Thymeleaf: Глава 1. Знакомство
1 Знакомство с Thymeleaf
1.1 Что такое Thymeleaf?
Thymeleaf — современный серверный механизм Java-шаблонов для веб- и автономных сред, способный обрабатывать HTML, XML, JavaScript, CSS и даже простой текст.
Основной целью Thymeleaf является создание элегантного и удобного способа шаблонизации. Чтобы достичь этого, Thymeleaf основывается на концепции Natural Templates, чтобы внедрить свою логику в файлы шаблонов таким образом, чтобы этот шаблон не влиял на отображение прототипа дизайна. Это улучшает коммуникацию в команде и уменьшает разрыв между дизайнерско-программистскими группами.
Thymeleaf также был разработан с самого начала с учетом стандартов Web, особенно HTML5, что позволяет вам создавать полностью соответствующие стандарту шаблоны.
1.2 Какие типы шаблонов может обрабатывать Thymeleaf?
Из коробки, Thymeleaf позволяет работать с шестью типами шаблонов, каждый из которых называется «Формат шаблона/Template Mode»:
HTML формат подразумевает HTML стандарт, включая HTML5, HTML 4 и XHTML. Валидация не выполняется, и код/структура оригинального шаблона будут соблюдаться в максимально возможной степени.
Формат шаблона XML позволит создать XML шаблон. В этом случае ожидается, что код будет хорошо сформирован, иначе без закрытых тегов, без кавычек атрибутов и прочего парсер сгенерирует исключения. Обратите внимание, что не будет проведена проверка DTD или XML-схемы.
Режим шаблона TEXT позволяет использовать специальный синтаксис для шаблонов без разметки. Примерами таких шаблонов могут быть текстовые письма или шаблонные документы. Обратите внимание, что HTML или XML-шаблоны также могут обрабатываться как TEXT, и в этом случае разметка не анализируется, и каждый тег, DOCTYPE, комментарий и прочее будет рассматриваться как простой текст.
Режим шаблона JAVASCRIPT позволит обрабатывать файлы JavaScript в приложении Thymeleaf. Это означает возможность использовать данные моделей внутри файлов JavaScript так же, как это можно сделать в HTML-файлах, но с интеграциями, специфичными для JavaScript, такими как специализированное экранирование или скриптинг. Режим шаблона JAVASCRIPT считается текстовым режимом и поэтому использует тот же специальный синтаксис, что и режим шаблона TEXT.
Режим шаблона CSS позволяет обрабатывать файлы CSS, участвующие в приложении Thymeleaf. Подобно режиму JAVASCRIPT, режим шаблона CSS также является текстовым режимом и использует специальный синтаксис обработки из режима шаблона TEXT.
Режим шаблона RAW просто не будет обрабатывать шаблоны. Он предназначен для вставки нетронутых ресурсов (файлов, ответов на URL и тп.) в обрабатываемые шаблоны. Например, внешние, неконтролируемые ресурсы в формате HTML могут быть включены в шаблоны приложений, надежно зная, что любой код Thymeleaf, который эти ресурсы включает, не будет выполнен.
1.3 Диалекты: Стандартный диалект
Thymeleaf — чрезвычайно расширяемый механизм (на самом деле его можно назвать платформой шаблонов), который позволяет вам определять и настраивать способ обработки ваших шаблонов до тонкого уровня детализации.
Объект, который применяет некоторую логику к артефакту разметки (тегу, текст, комментарию) называется процессором, а набор этих процессоров — плюс, возможно, некоторые дополнительные артефакты — это то, из чего состоит диалект. Из коробки основная библиотека Thymeleaf предоставляет диалект, называемый стандартным диалектом, которого должно быть достаточно для большинства пользователей.
Этот учебник охватывает стандартный диалект. Каждый атрибут и синтаксис, о которых вы узнаете на следующих страницах, определяется этим диалектом, даже если это явно не упоминается.
Разумеется, пользователи могут создавать свои собственные диалекты (даже расширяя стандартный), если они хотят определить свою собственную логику обработки, используя преимущества расширенных функций библиотеки. Thymeleaf также может быть настроен на одновременное использование нескольких диалектов.
Официальные пакеты интеграции «thymeleaf-spring3» и «thymeleaf-spring4» определяют диалект, называемый «SpringStandard Dialect«, который в основном совпадает с стандартным диалектом, но с небольшими адаптациями, чтобы лучше использовать некоторые функции Spring Framework (например, Spring Expression Language (SPEL) или SpringEL вместо OGNL). Поэтому, если вы являетесь пользователем Spring MVC, вы не тратите свое время впустую, так как почти все, что вы узнаете здесь, будет полезно в ваших приложениях Spring.
Большинство процессоров стандартного диалекта являются процессорами атрибутов. Это позволяет браузерам правильно отображать шаблоны HTML даже без обработки, поскольку они просто игнорируют дополнительные атрибуты. Например, в то время как JSP с использованием библиотек тегов может включать фрагмент кода, который не может отображаться непосредственно браузером, например:
… Thymeleaf Standard Dialect позволит нам достичь функциональности с:
Это помогает вашему дизайнеру и разработчику работать с одним и тем же файлом шаблона и уменьшать усилия, необходимые для преобразования статического прототипа в рабочий файл шаблона. Возможность сделать это — функция Natural Templating.
Spring MVC Thymeleaf
Сегодя я покажу как создать веб приложение с помощью Spring MVC и серверного Java движка Thymeleaf.
Самое первое с чего начинают учить спринг это написание Spring MVC контроллер класса и отображение html страницы (которая на самом деле не совсем html) с приветствием. В этой статье мы структурируем этот момент и копнем немного глубже: подключим статические ресурсы и немного поработаем с отображением атрибутов на странице.
Если Вы работали с сервлетами и уже писали веб приложения на «чистой» java, без использования фреймворков — то понять этот материал Вам будет значительно проще. Для тех же, кто этого не сделал, я советую хотя бы ознакомиться с теорией. Так как Spring MVC базируется на понятии сервлета и всего что с ним связано.
Если говорить кратко то Spring MVC — это просто удобный способ принимать http запросы и управлять контентом.
Я долго думал как описать Thymeleaf для новичков, чтобы было проще некуда. Перелопатил кучу статтей. Но там почти везде копипаста с официального сайта.
В общем: Thymeleaf это библиотека, которая позволяет хранить html шаблоны на стороне сервера и выдавать их по вызову определенного кода.
Если говорить еще проще, то когда пользователь сидит в Интернете — он скорее всего сидит там через браузер (Хром, Мозила, Опера). То что ему показывается — это html страница, которую он запросил, когда ввел в поисковую строку запрос. Все, что находится на странице, оформленно в виде файла, который имеет расширение html и который состоит из html тегов. Вот такой файл и позволяет хранить на сервере Thymeleaf движок. Он не просто позволяет его хранить там, но также имеет функционал для управления контентом этого файла.
Когда Вы сейчас смотрите на статью, то видите текст, меню, возможно рекламу, кнопки и т.д. Статья — это наполнение страницы. Каждая такая страница со статьей имеет одинаковый вид. Все страницы моего сайта отличаются только наполнением. Внешний вид называют шаблоном. Тоесть все что без текста — это шаблон. Он один по всему сайту. Статьи находятся в базе данных, и когда Вы переходите по определенному урл, сервер смотрит какой контент Вы запрашиваете (по значению урл), берет шаблон и помещает в него текст статьи.
Thymeleaf вместе со Spring MVC позволяют управлять шаблонами веб страниц и наполнением этих самых страниц самым разным контентом и в самый разный способ. В зависимости от запросов польозвателей.
Сейчас я на примере покажу как осуществить то что описано выше.
Первое что я делаю когда хочу создать Spring приложение — иду на spring initializr. Это официальный сайт, который позволяет быстро сгенерировать костяк Spring Boot приложения с необходимыми зависимостями Maven или Gradle. Почему именно Spring Boot? Потому что сейчас это, если можно так сказать, более современная версия спринг фреймворка, которая включает в себя автонастройку. Она избавляет Вас от необходимости писать сложные классы настроек, которые нужно было писать раньше. Более подробно об этом можно почитать в статье Spring: обзор фреймворка для самых маленьких.
Для того чтобы создать приложение используя Spring MVC и Thymeleaf я выбираю соответствующие зависимости:
После этого я просто открываю проект как мавен проект в моем редакторе кода (Intellij idea) и начинаю кодить. Приложение, в котором Вы программируете не имеет значения. Я повторяю это практически в каждой статье. Этот пример можно однаково реализовать как в Intellij idea так и в Eclipse, NetBeans и т.д.
Вот примерная структура моего проекта:
структура Spring Boot MVC проекта
В папке resources находятся директории: static, teamplates. application.properties файл сегодня нас не интересует. Мы не будем добавлять своих настроект в проект.
Папки static, teamplates находятся в нашем проекте не просто так. В Spring Boot автоконфигурации для веб, эти папки являются частью пути к ресурсам: ститическим (css, js, картинки) и шаблонам соответственно.
Первое что можно сделать — создать страницу приветствия или как еще ее иногда называют главную страницу.
Для удобства программистов комманда Spring сделала специальную настройку для главной страницы. Достаточно назвать ее index.html и поместить ее в папку static.
Для примера я добавлю сообщение с приветствием. Вы можете добавить любой шаблон, который пожелаете.
По умолчанию, встроенный в Spring Boot сервер Tomcat стартует с портом 8080. После запуска приложения и перехода в браузере по запросу http://localhost:8080 Вы должны увидеть главную страницу вашего проекта:
Вот так, очень просто и без лишних классов настроек мы смогли добавить страницу приветствия в наше приложение.
Чтобы добавить еще шаблонов по запросу или вывести контент, нам нужно прибегнуть к помощи Thymeleaf и Spring контроллера.
Контроллер — это простой джава класс, который помечен аннотацией @Controller. Этим Вы указываете спринг библиотеке, что данный класс будет принимать входящие http запросы и выдавать соответствующий контент.
За прием запросов будут отвечать методы данного класса, которые помечены соответствующей аннотацией. Как Вы помните существует несколько типов http запросов: GET, POST, PUT, DELETE и т.д. Если Вы этого не знаете — я настоятельно рекомендую почитать немного материала на эту тему. Вот как пример https://www.w3schools.com/tags/ref_httpmethods.asp
Для того, чтобы показать что метод будет принимать определенный запрос из вышеперечисленных, нужно поменить его одной из аннотаций @GetMapping, @PostMapping, @PutMapping и т.д. Один метод будет отвечать за один запрос. Внутрь аннотации нужно добавить атрибут value — часть урл пути запроса.
Например http://localhost:8080/greeting. Чтобы создать метод, который будет принимать такой гет запрос нужно навешать на него аннотацию @GetMapping(«/greeting») или @GetMapping(value = «/greeting»).
Spring контроллер обрабатывает запрос и выдает шаблон или делает редирект на другой запрос. Чтобы выдать шаблон, его сначала нужно создать. В папку templates нужно поместить html файл. Имя этого файла и будет возвращаться в качестве строки контроллер метода. Спринг возьмет имя файла, перейдет в папку templates и попытается найти шаблон по имени.
Движок Thymeleaf возьмет этот html, распарсит его и выдаст на клиент (браузер). Если в файле есть thymeleaf атрибуты — они будут распарсены и отформатированы в соответствии с синтаксисом таймлиф. Об этом немного позже.
Сейчас попытаемся просто выдать страницу по запросу.
Первое: создаем пакет а потом класс: controller, HomeController соответственно. Навешиваем аннотацию @Controller на класс. Создаем метод home(), который пока ничего не принимает на вход и возвращает строку «home_page«. Навешиваем на него аннотацию GetMapping(«/home»).
Переходим в папку templates и создаем файл home_page.html. В содержимое файла можно пока просто поместить приветствие.
Перезапускаем приложение и набираем в браузере http://localhost:8080/home
В результате, мы должны увидеть нашу страницу home_page.
Теперь, попытаемся создать кнопку с формой на главной странице, при нажатии на которую, можно перейти на home страницу и передать в ее содержимое параметр.
Переходим в index.html и создаем простою html форму которая будет вести на /home запрос:
Урл, куда будет вести форма мы указали в атрибуте action. Метод, мы указали в method атрибуте формы. Дальше мы указали input — поле для ввода текста. Это поле имеет имя login. Это очень важно. Так как именно по имени мы будем вынимать параметр в контроллере.
Дальше, мы переходим в HomeController и в методе home() добавляем входной параметр @RequestParam. Это аннотация, которая позволяет извлекать параметр из урл строки. Они принимает name, required атрибуты, которые являются не обязательными. Можно просто назвать имя переменной как и имя ввода формы и тогда параметр name можно не писать. Если Вы ожидаете что этот параметр будет обязательным, то атрибут required тоже можно не писать. Так как он по умолчанию false.
Теперь, когда Вы получили атрибут, с ним можно проводить всевозможные действия (изменить, записать в базу, передать в другой метод и тд). В нашем примере мы просто перешлем его обратно на страницу home_page.
Сделать это нам поможет Model — класс фреймворка спринг, который создан для манипулирования атрибутами. В результате манипулирования с классом Model и его методами мы получили следующий код:
model.addAttribute принимает на вход ключ атрибута и его значение. По аналогии с Map. Таким образом мы приняли атрибут с запроса и передали его на страницу home_page. Теперь осталось только отобразить атрибут на странице с помощью thymeleaf.
Для этого нам нужно в теге html указать xmlns:th=»http://www.thymeleaf.org». Это атрибут пространства имен, который укажет что на этой странице мы используем thymeleaf.
В нужном нам месте отображения login атрибута нужно создать html элемент (любой) и добавить в него th:text=»$
Вышеописанным образом можно передавать и отображать все что угодно: текст, цифры, объекты джава (будет позже) и тд. Таймлиф позволяет нам связать фронтенд с бекендом посредством тесной связи html и java класса.
Еще один важный пункт, который я хочу показать Вам — подключение статических ресурсов: стили CSS, код JS, картинки и тд. Без статических ресурсов создать полноценные веб проект будет не просто.
Первое, что нужно чтобы подключить ресурсы — поместить их в static директорию. Я советую создавать отдельные папки для разных типов статических ресурсов.
Дальше нужно на странице указать ссылку в соответствии с канонами html. Напоминаю, что для CSS это:
для JS:
для изображения:
Для примера я создал 2 файла и поместил в них изменения свойства цвета текста и вывод в консоль браузера сообщения:
CSS файл 
JS файл
Дальше, я подключил их вышеописанным способом к home_page.html:
После перезапуска приложения и перехода на домашнюю страницу я получил результат:
результат подключения стилей и скриптов на Thymeleaf страницу
На данный момент мы научились:
Последнее, что я хочу продемонстрировать — передавать список java объектов на фронтенд и отображать его с помощью технологии Thymeleaf.
Мы будем передавать массив, который состоит из простого объекта с 2 полями. Я специально сделал только два поля чтобы не усложнять пример. Когда Вы увидите как это делать — то сможете передавать и отображать объекты любой сложности.
Я создаю простой джава класс с именем Order. Добавляю ему 2 поля, а также геттеры, сеттеры, equals, hashCode, toString. В результате я получил вот такой код:
Дальше, я создаю отдельный контроллер класс чтобы передавать список ордеров на страницу.
В идеале, список заказов нужно хранить в базе данных, и Вы по желанию можете доделать этот туториал и подлючить базу данных. Я просто создам несколько тестовых объектов заказов и положу их в HashSet.
Дальше, я создаю метод контроллера, который по GET запросу /orders будет возвращать orders_page и атрибут со списком заказов:
После этого, я уже по знакомой Вам схеме, создаю orders_page.html в папке templates и помещаю в него html код для простой таблицы, который я нашел в Интернете. Дальше, я для обхода массива из объектов использую Thymeleaf конструкцию th:block th:each.
Только здесь мы используем Thymeleaf синтаксис. Внутри тега нам доступна переменная order и мы можем с ней работать уже как с простым атрибутом. В результате получился такой код:
После перезапуска приложения и перехода на http://localhost:8080/orders я вижу что мой код работает отлично:
Для большей динамичности и полноты примера я также создам метод для создания объекта Order. Первое, что нужно сделать — добавить форму на страницу заказов. Теперь в форме будет 2 поля: название, цена. На этот раз форма будет отправлять POST запрос на урл /createOrder. Воспользуемся еще одним методом таймлиф th:object=»$<пустой_объект_который_будем_заполнять>». Его нужно поместить как атрибут тега формы. Вместе с action, method. В результате наша страница приобрела вид:
Просто так добавить th:object=»$
Дальше, нужно написать код для приема запроса /createOrder и сохранения заказа в коллекции. Вы можете переделать чтобы заказ сохранялся в базе.
Не забывайте, что создание заказов это POST запрос. Поэтому аннотация будет @PostMapping. Для приема атрибута мы используем аннотацию @ModelAttribute которая идет с библиотекой Spring Web, использование которой мы сейчас изучаем. Метод manageOrders это простой приватный метод, куда я вынес код по добавлению заказов в список:
Ну и самое интересное. После обработки запроса мы можем не только отображать страницы, но и перенаправлять запрос на другой урл. Как видите, здесь используется ключевое слово redirect:. После, указывается путь, по которому мы хотим перенаправить пользователя. В данном случае, я перенаправляю пользователя на /orders запрос. После создания заказа, сработает запрос /orders и программа зайдет в метод orders. В нем мы заново отправим все заказы из списка и заново их отобразим на странице orders_page. Только в этот раз заказов будет на один больше, так как в коллекции уже будет созданный заказ.
Это все, что я хотел показать в рамках этого туториала. Теперь Вы сможете запрограммировать веб приложение на Java без лишней возни и заморочек с настройками.
Я также записал видео по этому гайду: