Thymeleaf에서 조각 작업

1. 개요

이 예제에서는 Thymeleaf Fragments를 사용하여 사이트의 일부 공통 부분을 재사용 하는 방법을 보여줍니다 . 매우 간단한 Spring MVC 프로젝트를 설정 한 후 뷰에 초점을 맞출 것입니다.

당신이 Thymeleaf에 새로해서, 당신은 같은이 사이트에 다른 기사를 확인하실 수 있습니다 이 도입 뿐만 아니라 3.0 버전에 대한이 하나의 엔진.

2. Maven 의존성

Thymeleaf를 활성화하려면 몇 가지 의존성이 필요합니다.

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>

최신 버전의 thymeleaf 및 thymeleaf-spring5 는 Maven Central에서 찾을 수 있습니다.

3. Spring 프로젝트

3.1. Spring MVC 구성

Thymeleaf를 활성화하고 템플릿 접미사를 설정하려면 뷰 리졸버와 템플릿 리졸버로 MVC 를 구성 해야합니다 .

또한 일부 정적 리소스에 대한 디렉토리를 설정합니다.

@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";
    }
}

리졸버를 구성한 방식으로 인해 뷰 이름에는 ".html" 접미사 가 포함되어야합니다 . 또한 조각 이름을 참조 할 때 접미사를 지정합니다.

4. 견해

4.1. 단순 조각 포함

우선 페이지에서 공통 부분을 재사용 할 것입니다.

분리 된 파일이나 공통 페이지에서 이러한 부분을 조각으로 정의 할 수 있습니다. 이 프로젝트에서 이러한 재사용 가능한 부품은 fragments 라는 폴더에 정의됩니다 .

조각의 콘텐츠를 포함하는 세 가지 기본 방법이 있습니다.

insert – 태그 안에 내용을 삽입합니다.
replace – 현재 태그를 조각을 정의하는 태그로 바꿉니다.
include – 더 이상 사용되지 않지만 레거시 코드에 계속 나타날 수 있습니다.

다음 예제 인 fragments.html 은 세 가지 방법의 사용을 보여줍니다. 이 Thymeleaf 템플릿은 문서의 머리와 본문에 조각을 추가합니다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf Fragments: home</title>
<!--/*/ <th:block th:include="fragments/general.html :: headerfiles">
        </th:block> /*/-->
</head>
<body>
    <header th:insert="fragments/general.html :: header"> </header>
    <p>Go to the next page to see fragments in action</p>
    <div th:replace="fragments/general.html :: footer"></div>
</body>
</html>

이제 일부 조각이있는 페이지를 살펴 보겠습니다. general.html 이라고 하며 일부 부분은 사용할 준비가 된 조각으로 정의 된 전체 페이지와 같습니다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerfiles">
<meta charset="UTF-8" />
<link th:href="@{/css/styles.css}" rel="stylesheet">
</head>
<body>
    <div th:fragment="header">
        <h1>Thymeleaf Fragments sample</h1>
    </div>
    <p>Go to the next page to see fragments in action</p>
    <aside>
        <div>This is a sidebar</div>
    </aside>
    <div class="another">This is another sidebar</div>
    <footer th:fragment="footer">
        <a th:href="@{/fragments}">Fragments Index</a> | 
        <a th:href="@{/markup}">Markup inclussion</a> | 
        <a th:href="@{/params}">Fragment params</a> | 
        <a th:href="@{/other}">Other</a>
    </footer>
</body>
</html>

<head> 섹션은 스타일 시트를 포함하고 있지만, 우리는 부트 스트랩, jQuery를, 또는 재단 같은 다른 도구, 직접 또는 Webjars를 사용하여 적용 할 수 있습니다.

이 템플릿의 재사용 가능한 모든 태그에는 th : fragment 속성이 있지만 다음으로 페이지의 다른 부분을 포함하는 방법을 살펴 보겠습니다.

렌더링 및 조각 포함 후 반환되는 콘텐츠는 다음과 같습니다.

<!DOCTYPE HTML>
<html>
<head>
<title>Thymeleaf Fragments: home</title>
<meta charset="UTF-8" />
<link href="/spring-thymeleaf/css/styles.css" rel="stylesheet">
</head>
<body>
    <header>
        <div>
            <h1>Thymeleaf Fragments sample</h1>
        </div>
    </header>
    <p>Go to the next page to see fragments in action</p>
    <footer>
        <a href="/spring-thymeleaf/fragments">Fragments Index</a> | 
        <a href="/spring-thymeleaf/markup">Markup inclussion</a> | 
        <a href="/spring-thymeleaf/params">Fragment params</a> | 
        <a href="/spring-thymeleaf/other">Other</a>
    </footer>
</body>
</html>

4.2. 조각에 대한 마크 업 선택기

Thymeleaf Fragments의 가장 큰 장점 중 하나는 클래스, ID 또는 태그를 통해 간단한 선택기를 사용하여 템플릿의 모든 부분을 가져올 수도 있다는 것 입니다.

예를 들어이 페이지에는 general.html 파일의 일부 구성 요소 ( aside 블록 및 div.another 블록)가 포함되어 있습니다.

<body>
    <header th:insert="fragments/general.html :: header"> </header>
    <div th:replace="fragments/general.html :: aside"></div>
    <div th:replace="fragments/general.html :: div.another"></div>
    <div th:replace="fragments/general.html :: footer"></div>
</body>

4.3. 매개 변수화 된 조각

조각의 특정 부분을 변경하기 위해 매개 변수를 조각에 전달할 수 있습니다 . 이를 위해서는 프래그먼트를 함수 호출로 정의해야하며 여기서 매개 변수 List을 선언해야합니다.

이 예에서는 일반 양식 필드에 대한 조각을 정의합니다.

<div th:fragment="formField (field, value, size)">
    <div>
        <label th:for="${#strings.toLowerCase(field)}"> <span
            th:text="${field}">Field</span>
        </label>
    </div>
    <div>
        <input type="text" th:id="${#strings.toLowerCase(field)}"
            th:name="${#strings.toLowerCase(field)}" th:value="${value}"
            th:size="${size}">
    </div>
</div>

그리고 여기에 매개 변수를 전달하는 부분의 간단한 사용이 있습니다.

<body>
    <header th:insert="fragments/general.html :: header"> </header>
    <div th:replace="fragments/forms.html
      :: formField(field='Name', value='John Doe',size='40')">
    </div>
    <div th:replace="fragments/general.html :: footer"></div>
</body>

반환 된 필드는 다음과 같습니다.

<div>
    <div>
        <label for="name"> <span>Name</span>
        </label>
    </div>
    <div>
        <input type="text" id="name"
        name="name" value="John Doe"
        size="40">
    </div>
</div>

4.4. 조각 포함 식

Thymeleaf 조각은 조각 을 포함할지 여부를 결정하는 조건식 지원과 같은 다른 흥미로운 옵션을 제공합니다 .

Thymeleaf에서 제공하는 표현식 (예 : Security, 문자열 및 컬렉션)과 함께 Elvis 연산자를 사용하여 다양한 조각을로드 할 수 있습니다.

예를 들어 주어진 조건에 따라 표시 할 콘텐츠로이 조각을 정의 할 수 있습니다. 이것은 다른 종류의 블록을 포함하는 파일 일 수 있습니다.

<div th:fragment="dataPresent">Data received</div>
<div th:fragment="noData">No data</div>

다음은 표현식으로로드하는 방법입니다.

<div
    th:replace="${#lists.size(data) > 0} ? 
        ~{fragments/menus.html :: dataPresent} : 
        ~{fragments/menus.html :: noData}">
</div>

Thymeleaf 표현식에 대해 자세히 알아 보려면 여기에서 기사를 확인 하십시오 .

4.5. 유연한 레이아웃

다음 예제는 또한 데이터가있는 테이블 을 렌더링하기 위해 조각을 사용하는 두 가지 흥미로운 용도를 보여줍니다 . 이것은 재사용 가능한 테이블 조각으로, 두 가지 중요한 부분, 즉 변경할 수있는 테이블 헤더와 데이터가 렌더링되는 본문이 있습니다.

<table>
    <thead th:fragment="fields(theadFields)">
        <tr th:replace="${theadFields}">
        </tr>
    </thead>
    <tbody th:fragment="tableBody(tableData)">
        <tr th:each="row: ${tableData}">
            <td th:text="${row.id}">0</td>
            <td th:text="${row.name}">Name</td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

이 테이블을 사용하려면 fields 함수를 사용하여 자체 테이블 헤더를 전달할 수 있습니다 . 헤더는 myFields 클래스 로 참조됩니다 . 테이블 본문은 tableBody 함수에 데이터를 매개 변수로 전달하여로드됩니다 .

<body>
    <header th:replace="fragments/general.html :: header"> </header>
    <table>
        <thead th:replace="fragments/tables.html
              :: fields(~{ :: .myFields})">
            <tr class="myFields">

                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <div th:replace="fragments/tables.html
          :: tableBody(tableData=${data})">
        </div>
    </table>
    <div th:replace="fragments/general.html :: footer"></div>
</body>

그리고 이것이 최종 페이지의 모습입니다.

<body>
    <div>
        <h1>Thymeleaf Fragments sample</h1>
    </div>
    <div>Data received</div>
    <table>
        <thead>
            <tr class="myFields">

                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>John Smith</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>Jane Williams</td>
            </tr>
        </tbody>
    </table>
    <footer>
        <a href="/spring-thymeleaf/fragments">Fragments Index</a> |
        <a href="/spring-thymeleaf/markup">Markup inclussion</a> |
        <a href="/spring-thymeleaf/params">Fragment params</a> |
        <a href="/spring-thymeleaf/other">Other</a>
    </footer>
</body>

5. 결론

이 기사에서는 템플릿 관리를 더 쉽게 할 수있는 강력한 도구 인 Thymeleaf Fragments를 사용하여 뷰 구성 요소를 재사용하는 방법을 보여주었습니다.

또한 기본을 뛰어 넘는 다른 흥미로운 기능도 소개했습니다. 뷰 렌더링 엔진으로 Thymeleaf를 선택할 때 이러한 점을 고려해야합니다.

다른 Thymeleaf 기능에 대해 배우고 싶다면 Layout Dialects 에 대한 기사를 반드시 읽어 보시기 바랍니다 .

항상 그렇듯이 예제의 전체 구현 코드는 GitHub에서 사용할 수 있습니다 .

참고

https://docs.spring.io/spring-framework/docs/current/reference/html
https://www.baeldung.com/spring-thymeleaf-fragments

'Java' 카테고리의 다른 글

Spring MVC + Thymeleaf 3.0 : 새로운 기능 (0)	2021.04.07
Thymeleaf에서 날짜로 작업하는 방법 (0)	2021.04.07
Thymeleaf의 조건문 (0)	2021.04.06
Thymeleaf의 반복 (0)	2021.04.06
List에 대한 Thymeleaf 페이지 매김이있는 Spring (0)	2021.04.06

그날그날메모

Thymeleaf에서 조각 작업

1. 개요

2. Maven 의존성

3. Spring 프로젝트

3.1. Spring MVC 구성

3.2. 컨트롤러

4. 견해

4.1. 단순 조각 포함

4.2. 조각에 대한 마크 업 선택기

4.3. 매개 변수화 된 조각

4.4. 조각 포함 식

4.5. 유연한 레이아웃

5. 결론

'Java' 카테고리의 다른 글

티스토리툴바

Thymeleaf에서 조각 작업

1. 개요

2. Maven 의존성

3. Spring 프로젝트

3.1. Spring MVC 구성

3.2. 컨트롤러

4. 견해

4.1. 단순 조각 포함

4.2. 조각에 대한 마크 업 선택기

4.3. 매개 변수화 된 조각

4.4. 조각 포함 식

4.5. 유연한 레이아웃

5. 결론

'Java' 카테고리의 다른 글

관련글

티스토리툴바