Thymeleaf -2

4.유틸리티 객체와 날짜

타임리프는 문자, 숫자, 날짜, URI등을 편리하게 다루는 다양한 유틸리티 객체들을 제공한다.

타임리프는 문자, 숫자, 날짜, URI등을 편리하게 다루는 다양한 유틸리티 객체들을 다음과 같이 제공한다.
#message : 메시지, 국제화 처리
#uris : URI 이스케이프 지원
#dates : java.util.Date 서식 지원
#calendars : java.util.Calendar 서식 지원
#temporals : 자바8 날짜 서식 지원
#numbers : 숫자 서식 지원
#strings : 문자 관련 편의 기능
#objects : 객체 관련 기능 제공
#bools : boolean 관련 기능 제공
#arrays : 배열 관련 기능 제공
#lists , #sets , #maps : 컬렉션 관련 기능 제공
#ids : 아이디 처리 관련 기능 제공, 뒤에서 설명

컨트롤러

@GetMapping("/utility")
    public String Utility(Model model) {
        String uri = "https://example.com?query=hello world";
        Date date = new Date();
        double number = 1234567.89;
        // 날짜 서식 적용
        String formattedDate = DateFormat.getDateInstance(DateFormat.LONG, Locale.US).format(date);
        // 메시지 처리 (기본 로케일 사용)
        String welcomeMessage = messageSource.getMessage("welcome.message", null, Locale.getDefault());

        model.addAttribute("uri", UriUtils.encode(uri, StandardCharsets.UTF_8)); // URI 이스케이프 처리된 URI 추가
        model.addAttribute("date", date);
        model.addAttribute("number", number);
        model.addAttribute("formattedDate", formattedDate); // 서식화된 날짜 추가
        model.addAttribute("welcomeMessage", welcomeMessage); // 메시지 추가

        return "basic/utility"; // 템플릿 경로
    }

템플릿 코드

<!-- 환영 메시지 출력 -->
<h1 th:text="${welcomeMessage}">Welcome Message</h1>

<!-- URI 이스케이프된 값 출력 -->
<p>Escaped URI: <span th:text="${uri}">https://example.com?query=hello world</span></p>

<!-- 원본 날짜 출력 -->
<p>Original Date: <span th:text="${date}">2024-10-30</span></p>

<!-- 서식화된 날짜 출력 -->
<p>Formatted Date: <span th:text="${formattedDate}">October 30, 2024</span></p>

<!-- 숫자 서식화 출력 -->
<p>Formatted Number: <span th:text="${#numbers.formatDecimal(number, 2, 2)}">1,234,567.89</span></p>

HTML 페이지 원본

Note) 메시지는 MessageSource 객체의 인스턴스를 얻는 과정에서 messages.properties 파일을 resources 폴더에 생성해야 하고 다국어 지원,에러 메시지 및 알림 메시지,유지보수성 향상을 위해 사용된다.

5. URL 링크

동적인 웹 애플리케이션에서 클라이언트가 서버로 요청을 보낼 수 있도록 하며 링크와 경로를 효율적으로 관리하기 위해 URL 링크를 제공한다. th:href="@{...}"을 통해 생성이 가능하다.

컨트롤러

@GetMapping("/link")
    public String link(Model model) {
        model.addAttribute("param1", "data1");
        model.addAttribute("param2", "data2");
        return "basic/link";
    }

템플릿 코드

  <li><a th:href="@{/hello}">basic url</a></li>
  <li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query param</a></li>
  <li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
  <li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>

HTML 페이지 원본

기본적으로 @{} 안에 /는 실제 /로 치환되고, 넣고 싶은 파라미터를 괄호 (param1=${param1}...)안에 정의한후 경로 변수에 넣고 싶다면 /를 구분자로 삽입하고, 쿼리 파라미터로 넣고 싶다면 삽입하지 않는다.

6. 리터럴

리터럴은 표현식 내에서 직접적으로 값을 나타내는 고정된 값이다. Thymeleaf는 문자열, 숫자, 불리언, Null, 날짜를 리터럴로 지원한다.

• 문자열 리터럴: 작은따옴표(')로 감싸서 사용하며, 템플릿 내에서 텍스트로 그대로 출력된다. 따옴표를 생략할수 있지만 중간에 공백이 있다면 오류가 발생한다.

<p th:text="'Hello, Thymeleaf!'"></p>

• 숫자 리터럴: 숫자는 따옴표 없이 그대로 사용된다.

<p th:text="123"></p>

• 불리언 리터럴: true, false와 같은 값으로 사용된다.

<p th:if="true">This will always display.</p>

HTML 페이지 원본

객체: 컨트롤러에서 전달된 동적인 데이터로, 템플릿에서 속성이나 메서드를 통해 출력되는 값
리터럴: 고정된 값으로, 템플릿에서 직접 사용되는 상수

7. 연산

HTML안에서 부등호 연산과 태그와 마찰되는 부분을 주의한다.

템플릿 코드

산술 연산
<li>10 + 2 = <span th:text="10 + 2"></span></li>
<li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>

비교 연산
<li>1 > 10 = <span th:text="1 &gt; 10"></span></li>
<li>1 gt 10 = <span th:text="1 gt 10"></span></li>
<li>1 >= 10 = <span th:text="1 >= 10"></span></li>
<li>1 ge 10 = <span th:text="1 ge 10"></span></li>
<li>1 == 10 = <span th:text="1 == 10"></span></li>
<li>1 != 10 = <span th:text="1 != 10"></span></li>

조건식 (""안에 자바 조건식 그대로 활용)
<li>(10 % 2 == 0)? '짝수':'홀수' = <span th:text="(10 % 2 == 0)? '짝수':'홀수'"></span></li>

Elvis 연산자(?: 데이터가 있으면 출력, 없으면 뒤의 문자열 출력)
<li>${data}?: '데이터가 없습니다.' = <span th:text="${data}?: '데이터가 없습니다.'"></span></li>
<li>${nullData}?: '데이터가 없습니다.' = <span th:text="${nullData}?: '데이터가 없습니다.'"></span></li>

No-Operation
<li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</span></li>
<li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가없습니다.</span></li>

HTML 원본 페이지

비교연산:HTML 엔티티를 사용해야 하는 부분을 주의하자,
< (lt),> (gt), >= (ge), <= (le), ! (not), == (eq), != (neq, ne)

8. 속성값 설정

타임리프는 주로 HTML 태그에 th: 속성을 지정하는 방식으로 동작한다. th:로 속성을 적용하면 기존 속성을 대체한다. 기존 속성이 없으면 새로 만든다.

• th:name

<input type="text" name="mock" th:name="userA" />)

해당 태그에서 name 속성과 th:name 속성이 중복된다. 이럴때 타임리프 속성에 따라 userA로 name 속성이 대체된다.

• th:attrappend

<input type="text" class="text" th:attrappend="class=' large'" /><br/>

th:attrappend는 ""안에 지정된 속성 key에 대한 값을 더하기 연산을 한다. th:attrpreappend 는 앞에 붙히고, 단순 class로 정의 되었다면 classappend로 추가된다.

• th:checked

<input type="checkbox" name="active"checked="false" />

HTML에서는 단순 checked라는 속성만 있다면 체크 처리되어 렌더링되지만 th:checked="false"처리를 한다면 체크가 되지 않은 상태로 렌더링된다.

컨트롤러

@GetMapping("/attribute")
    public String attribute() {
        return "basic/attribute";
    }

템플릿 코드

- th:attrappend = <input type="text" class="text" th:attrappend="class=' large'" /><br/>
- th:attrprepend = <input type="text" class="text" th:attrprepend="class='large'" /><br/>
- th:classappend = <input type="text" class="text" th:classappend="large" /><br/>
- checked o <input type="checkbox" name="active" th:checked="true" /><br/>
- checked x <input type="checkbox" name="active" th:checked="false" /><br/>
- checked=false <input type="checkbox" name="active" checked="false" /><br/>

HTML 원본 페이지

Thymeleaf -3에 계속..