Работа с фрагментами в Thymeleaf

1. обзор

В этом руководстве мы покажем, какmake use of Thymeleaf Fragments to reuse some common parts of a site. После настройки очень простого проекта Spring MVC мы сосредоточимся на представлениях.

Если вы новичок в Thymeleaf, вы можете проверить другие статьи на этом сайте, напримерthis introduction, а такжеthis one about the 3.0 version движка.

2. Maven Зависимости

Чтобы включить Thymeleaf, нам понадобится пара зависимостей:


    org.thymeleaf
    thymeleaf
    3.0.9.RELEASE


    org.thymeleaf
    thymeleaf-spring5
    3.0.9.RELEASE

Последнюю версиюthymeleaf иthymeleaf-spring5 можно найти на Maven Central.

3. Весенний проект

3.1. Конфигурация Spring MVC

Чтобы включить Thymeleaf и установить суффикс шаблона, нам нужноconfigure MVC with a view resolver and template resolver.

Мы также установим каталог для некоторых статических ресурсов:

@Bean
public ViewResolver htmlViewResolver() {
    ThymeleafViewResolver resolver = new ThymeleafViewResolver();
    resolver.setTemplateEngine(templateEngine(htmlTemplateResolver()));
    resolver.setContentType("text/html");
    resolver.setCharacterEncoding("UTF-8");
    resolver.setViewNames(ArrayUtil.array("*.html"));
    return resolver;
}

private ITemplateResolver htmlTemplateResolver() {
    SpringResourceTemplateResolver resolver
      = new SpringResourceTemplateResolver();
    resolver.setApplicationContext(applicationContext);
    resolver.setPrefix("/WEB-INF/views/");
    resolver.setCacheable(false);
    resolver.setTemplateMode(TemplateMode.HTML);
    return resolver;
}

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/resources/**", "/css/**")
      .addResourceLocations("/WEB-INF/resources/", "/WEB-INF/css/");
}

Обратите внимание: если мы используем Spring Boot, эта конфигурация может не понадобиться, если нам не нужно применять наши собственные настройки.

3.2. Контроллер

В этом случае контроллер является просто средством для просмотра. Каждое представление показывает другой сценарий использования фрагмента.

Последний загружает некоторые данные, которые передаются через модель для отображения в представлении:

@Controller
public class FragmentsController {

    @GetMapping("/fragments")
    public String getHome() {
        return "fragments.html";
    }

    @GetMapping("/markup")
    public String markupPage() {
        return "markup.html";
    }

    @GetMapping("/params")
    public String paramsPage() {
        return "params.html";
    }

    @GetMapping("/other")
    public String otherPage(Model model) {
        model.addAttribute("data", StudentUtils.buildStudents());
        return "other.html";
    }
}

Note that the view names must contain the “.html” suffix because of the way we configured our resolver. Мы также укажем суффикс, когда будем обращаться к именам фрагментов.

4. Виды

4.1. Простое включение фрагмента

Прежде всего, мы будем использовать повторное использование общих частей на наших страницах.

Мы можем определить эти части как фрагменты, либо в отдельных файлах, либо на общей странице. В этом проекте эти повторно используемые части определены в папке с именемfragments.

Есть три основных способа включить контент из фрагмента:

insert – вставляет содержимое внутри тега
replace – заменяет текущий тег на тег, определяющий фрагмент
include – это устарело, но может все еще появляться в устаревшем коде

В следующем примереfragments.html, показано использование всех трех способов. Этот шаблон Thymeleaf добавляет фрагменты в заголовок и тело документа:




Thymeleaf Fragments: home



     
    Go to the next page to see fragments in action

Now, let’s take a look at a page that holds some fragments. Это называетсяgeneral.html, и это похоже на целую страницу с некоторыми частями, определенными как фрагменты, готовые к использованию:








    
        Thymeleaf Fragments sample
    
    Go to the next page to see fragments in action
    
        This is a sidebar
    
    This is another sidebar
    
        Fragments Index |
        Markup inclussion |
        Fragment params |
        Other

Раздел<head> содержит только таблицу стилей, но мы могли бы применить другие инструменты, такие как Bootstrap, jQuery или Foundation, напрямую или с помощью Webjars.

Обратите внимание, что все повторно используемые теги этого шаблона имеют атрибутth:fragment, но дальше мы увидим, как включить любую другую часть страницы.

После рендеринга и включения фрагментов возвращается содержимое:




Thymeleaf Fragments: home




    
        
            Thymeleaf Fragments sample
        
    
    Go to the next page to see fragments in action
    
        Fragments Index |
        Markup inclussion |
        Fragment params |
        Other

4.2. Селекторы разметки для фрагментов

Одна из замечательных особенностей Thymeleaf Fragments заключается в том, чтоwe can also grab any part of a template just using the simple selectors через классы, идентификаторы или просто теги.

Эта страница, например, включает некоторые компоненты из файлаgeneral.html: блокaside и блокdiv.another:

4.3. Параметризованные фрагменты

Мы можем передать параметры sfragment , чтобы изменить какую-то его часть. Для этого фрагмент должен быть определен как вызов функции, где мы должны объявить список параметров.

В этом примере мы определяем фрагмент для общего поля формы:


    
         Field

А вот простое использование этого фрагмента, в котором мы передаем ему параметры:

И вот как будет выглядеть возвращаемое поле:


    
         Name

4.4. Выражения включения фрагментов

Фрагменты Thymeleaf предлагают другие интересные возможности, такие как поддержкаconditional expressions to determine whether to include a fragment.

Используя операторElvis с любым из выражений, предоставляемых Thymeleaf (например, безопасность, строки и коллекции), мы можем загружать различные фрагменты.

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

Data received
No data

И вот как мы могли бы загрузить их с выражением:

Чтобы узнать больше о Thymeleaf Expressions, прочтите нашу статьюhere.

4.5. Гибкие макеты

В следующем примере также показаны два других интересных использования фрагментовrender a table with data. Это повторно используемый фрагмент таблицы, состоящий из двух важных частей: заголовок таблицы, который можно изменить, и тело, в котором отображаются данные:


0	Name

Когда мы хотим использовать эту таблицу, мы можем передать заголовок нашей собственной таблицы с помощью функцииfields. Заголовок ссылается на классmyFields. Тело таблицы загружается путем передачи данных в качестве параметра функцииtableBody:

И вот как будет выглядеть последняя страница:


    
        Thymeleaf Fragments sample
    
    Data received
    
        
            

                Id
                Name
            
        
        
            
                1001
                John Smith
            
            
                1002
                Jane Williams
            
        
    
    
        Fragments Index |
        Markup inclussion |
        Fragment params |
        Other

Id	Name
1001	John Smith
1002	Jane Williams

5. Заключение

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

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

Если вы хотите узнать о других функциях Thymeleaf, вам обязательно стоит взглянуть на нашу статью оLayout Dialects.

Как всегда, доступен полный код реализации примераover on GitHub.

TOC

Работа с фрагментами в Thymeleaf