Web Spring boot 타임리프2

Thymeleaf 2

조건문, 반복문, Switch

Java Controller 

@Controller
public class TestController {
    
    @RequestMapping("/{num}")
    public ModelAndView index(@PathVariable int num, ModelAndView mav) {
        mav.setViewName("index");
        
        mav.addObject("num", num);
        mav.addObject("check", num % 2 == 0);
        mav.addObject("trueVal", "Even number.");
        mav.addObject("falseVal", "Odd number.");
        
        ArrayList<String[]> list = new ArrayList<String[]> ();
        list.add(new String[] {"kim", "kim@a.com"});
        list.add(new String[] {"lee", "lee@b.com"});
        mav.addObject("list", list);
                
        return mav;
    }
    
}

html 

<!-- "변수식 ? 값1 : 값2" -->

<p th:text="${num} + ' : ' + (${check} ? ${trueVal} : ${falseVal})"></p>

<!-- if -->

<p th:if="${check}" th:text="${num} + ' : ' + ${trueVal}">true</p>
<p th:unless="${check}" th:text="${num} + ' : ' + ${falseVal}">false</p>

<!-- switch -->

<div th:switch="${num}">
<p th:case="1" th:text="one">1</p>
<p th:case="2" th:text="two">2</p>
<p th:case="3" th:text="three">3</p>
<p th:case="*">?</p>
</div>

<!-- each -->

<table border="1">
<tr>
<td>NAME</td>
<td>E-MAIL</td>
</tr>
<tr th:each="obj:${list}">
<td th:text="${obj[0]}"></td>
<td th:text="${obj[1]}"></td>
</tr>
</table>

출력

출력1

타임리프로 레이아웃

기본 문구

보통 hearder , footer같은 반복되는 html을 조립하기 위해 사용

의존성 추가 

<dependency> 
	<groupId>nz.net.ultraq.thymeleaf</groupId> 
	<artifactId>thymeleaf-layout-dialect</artifactId> 
	<version>2.4.1</version> 
</dependency>

예제 프로젝트 구조

예제1

header 공통 

<html lagn="ko" 
      xmlns:th="http://www.thymeleaf.org">
       
    <!--headerFragment 선언-->
    <div th:fragment="headerFragment">
        <h1>HEADER</h1>
    </div>
    
</html>


<html lagn="ko" 
      xmlns:th="http://www.thymeleaf.org">
      
    <!--footerFragment 선언-->
    <div th:fragment="footerFragment">
        <h1>FOOTER</h1>
    </div>
    
</html>

공통 config 부분 

<html lagn="ko" 
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

    <!--configFragment 선언-->
    <th:block th:fragment="configFragment">

          
        <!-- 이 영역에 공통으로 사용할 css, js library를 선언한다. -->
        <link rel="stylesheet" th:href="@{/css/common/common.css}" >
        
        <script th:src="@{/js/common/common.js}"></script>

        <!-- Content Page의 CSS fragment 삽입 -->
        <th:block layout:fragment="css"></th:block>

        <!-- Content Page의 script fragment 삽입 -->
        <th:block layout:fragment="script"></th:block>
        
    </th:block>
</html>

default_layout 부분 

<!DOCTYPE html>

<html lagn="ko" 
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

    <head>
        <meta charset="UTF-8" />
        <title>Bamdule</title>
        
        <!-- config fragment 사용 -->
        <th:block th:replace="fragment/config :: configFragment" ></th:block>
    </head>
    
    <body>
        <!-- header fragment 사용 -->
        <th:block th:replace="fragment/header :: headerFragment"></th:block>
        
        <!-- 
            content fragment 사용 
            현재 layout을 사용하는 content fragment의 내용을 삽입한다.
        -->
        <th:block layout:fragment="content"></th:block>
        
        <!-- footer fragment 사용 -->
        <th:block th:replace="fragment/footer :: footerFragment"> </th:block>
    </body>

</html>
  • Layout은 fragment들이 조합된 html입니다.
  • th:replace=”frament경로 :: fragment이름” 속성은 해당 영역을 fragment로 치환하겠다는 의미입니다.
  • layout:fragment=”content”는 해당 layout을 사용하는 content의 내용을 불러오겠다는 의미입니다.

home.html 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layout/default_layout">

    <!-- index.html 고유 CSS 추가 -->
    <th:block layout:fragment="css">
        <link rel="stylesheet" th:href="@{/css/page/home.css}" >
    </th:block>
    
    <!-- index.html 고유 스크립트 추가 -->
    <th:block layout:fragment="script">
        <script th:src="@{/js/page/home.js}"></script>
    </th:block>

    <div layout:fragment="content">
        <h1>content</h1>
    </div>
</html>
  • 여기서 유심히 볼 코드는 layout:decorator=”layout/default_layout” 입니다.
  • layout:decorator=”layout path” 속성을 입력해 layout을 사용할 수 있습니다.
  • layout:fragment=”content” 속성을 통해 content fragment를 선언합니다.