728x90
반응형

 

다음 예제는 데이터가있는 테이블 을 렌더링하는 두 가지 다른 흥미로운 조각 사용법을 보여줍니다 . 

 

이것은 변경할 수있는 테이블 헤더와 데이터가 렌더링되는 본문의 두 가지 중요한 부분으로 구성된 재사용 가능한 테이블 조각입니다.

<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>

 

 

 

 

이 테이블을 사용하려면 필드 함수를 사용하여 자체 테이블 헤더를 전달할 수 있습니다 . 

 

헤더는 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>

 

 

 

템플릿 관리를 쉽게 할 수있는 강력한 도구 인 Thymeleaf Fragments를 사용하여보기 구성 요소를 재사용하는 방법을 살펴 보았습니다.

 

728x90
반응형

'프로그래밍 > Spring' 카테고리의 다른 글

[STS] SpringToolSuite SVN 연결  (0) 2019.07.14
[Spring] Session Time Out Check  (2) 2019.05.31
[Spring] Thymeleaf 3 String 날짜 Format  (0) 2019.05.22
[Spring] Thymeleaf Number Format  (0) 2019.05.21
[Spring] Thymeleaf LocalDateTime Format  (0) 2019.05.15
728x90
반응형

이 글은 Thymeleaf 3.0 버전 기준으로 작성되었습니다.

 

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

 

Tutorial: Using Thymeleaf

1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a

www.thymeleaf.org

 

 

 

 

현재 회사 프로젝트에서 Thymeleaf 로 JSP 를 대신해 화면을 구현하고 있습니다.

 

Tiles 처럼 layout 을 만들어서 진행하려고 찾고 진행해보려고 찾아보니 thymeleaf-layout-dialect 를 사용하여 구현하는 글이 많았습니다.

 

gradle 기준 implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' 의존성 주입을 받아 진행하였습니다.

 

그런데 아무리 해봐도 실행되지 않았습니다.

 

찾아보니 3.0 버전에선 사용이 불가능하다고 하고. 그래도 기존에 돌아가던 코드를 깃헙에서 받아 실행해보았지만 역시 안되네요.

 

그래서 그냥 Thymeleaf 3.0 문서를 보고 구현해보았습니다.

 

 

 

 

 

layout 구현부 입니다.

 

th:fragment="layout(title, content)" 이 부분이 상속을 받을수 있게 해줍니다.

 

fragment 를 생성하면서 함수 인자로 title 과 content 를 받고 있습니다.

 

<title th:replace="${title}">Layout Title</title> 변수를 출력하는 코드로 동적 title 사용이 가능합니다.

 

<div th:replace="${content}"></div> 동적으로 content 를 출력하는 코드 입니다.

 

<!DOCTYPE html>
<html th:fragment="layout(title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:replace="${title}">Layout Title</title>
</head>

<body>

    <h1>Layout H1</h1>

    <div th:replace="${content}">

        <p>Layout content</p>

    </div>

    <footer>
        Layout footer
    </footer>

</body>
</html>

 

 

 

 

 

 

content 에 들어갈 html 입니다.

 

html 태그에 th:replace="~{layoutFile :: layout(~{::title}, ~{::section})}" 이런식으로 layoutFile 파일을 선택하고 :: 구분자를 넣어주고 layout() 함수를 호출하는 방식입니다.

 

~{title} title 태그를 주입받습니다.

 

~{section} section 태그를 주입받습니다.

 

두개다 역시 head 나 body 어떤 태그를 사용할 수 있습니다.

 

<!DOCTYPE html>
<html th:replace="~{layoutFile :: layout(~{::title}, ~{::section})}">
<head>
    <title>Page Title</title>
</head>
<body>

<section>

    <p>Page content</p>

    <div>Included on page</div>

</section>
</body>

 

 

 

 

 

 

이대로 실행하면 layout 이 정해진 html 의 content 부분에 section 태그 내용들이 보일것 입니다.

 

툴에 따라 다르지만 IntelliJ 에서 빨간 밑줄이 나오지만 문제없이 돌아갑니다.

 

eclipse 는 빨간줄이 나오지는 않습니다.

 

이 layout 구현을 하려고 Thymeleaf 2.x 대로 내려가려고 했지만 더 가볍게 사용이 가능하니 Thymeleaf 3.x 를 그대로 사용하는걸 추천드립니다.

 

728x90
반응형

'프로그래밍 > Spring' 카테고리의 다른 글

[Spring] Thymeleaf LocalDateTime Format  (0) 2019.05.15
[Spring] Spring Security에서 'X-Frame-Options'응답 헤더 설정  (0) 2019.05.07
[Spring] Spring Boot 2 Multiple DataSource  (7) 2019.04.30
[Spring] Thymeleaf Template 를 사용한 JavaMailSender  (0) 2019.04.28
[Spring] Spring Boot Hibernate dialect  (0) 2019.04.25

+ Recent posts

티스토리툴바