THYMELEAF

타임리프 기본(1)_Getting started with the Standard dialects in 5 minutes

개발자 배찌 2021. 6. 9. 01:02
728x90

https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

 

Getting started with the Standard dialects in 5 minutes - Thymeleaf

Getting started with the Standard dialects in 5 minutes This guide will take you through some of the most important concepts you need to know to understand a Thymeleaf template written in the Standard or SpringStandard dialects. It is not a substitute for

www.thymeleaf.org

 

영어판으로 되어있어서 번역하면서 공부해보았습니다...

위 페이지는 참고해주세요!

 

1. Thymeleaf 의 표준방언

Thymeleaf는 매우 확장 가능하며 원하는 이름으로 고유 한 템플릿 속성 집합 (또는 태그)을 정의 할 수 있습니다.

원하는 구문에서 원하는 식을 평가하고 원하는 논리를 적용합니다. 템플릿 엔진 프레임 워크와 비슷합니다.

 

그럼에도 불구하고 표준 방언 (Standard 및 SpringStandard라는 이름)이라는 것이 제공됩니다.

 

이러한 표준 방언은 th 접두사로 시작하는 속성을 포함하므로 템플릿에서 언제 사용되는지 식별 할 수 있습니다.

 

대부분의 Thymeleaf 속성은 해당 값을 표현식으로 설정하거나 포함 할 수 있도록 허용하며,

사용되는 표준표현식은 다음과 같은 5 가지 유형이 있습니다.

 

2. 표준 표현식 구문

  • ${...} : 변수 표현식.
  • *{...} : 선택 표현식.
  • #{...} : 메시지 (i18n) 표현식.
  • @{...} : 링크 (URL) 표현식.
  • ~{...} : 조각 표현.

2.1. Variable expressions (변수 표현식)

 

변수 표현식은 OGNL 표현식 (또는 Thymeleaf를 Spring과 통합하는 경우 Spring EL)이며 컨텍스트 변수에서 실행되며 Spring 용어로 model Attribute 라고도합니다.

${session.user.name}
<span th:text="${book.author.name}">

표현식은 다음과 동일합니다

((Book)context.getVariable("book")).getAuthor().getName()

출력뿐만 아니라 조건, 반복과 같은 변수 표현식을 찾을 수 있습니다.

<li th:each="book : ${books}">

여기서 $ {books}는 컨텍스트에서 books라는 변수를 선택하고 th : each 루프에서 반복

 

 

2.2. Selection exprossions (선택표현식)

 

선택 표현식 선택 표현식은 전체 컨텍스트 변수 맵 대신 이전에 선택한 객체에서 실행된다는 점을 제외하면 변수 표현식과 같습니다. 

*{customer.name}

 

그들이 작동하는 객체는 th : object 속성에 의해 지정됩니다 :

<div th:object="${book}">
...
<span th:text="*{title}">
...
</span>
...
</div>

표현식은 다음과 동일합니다

{
     // th:object="${book}"
     final Book selection = (Book) context.getVariable("book");
     // th:text="*{title}"
     output(selection.getTitle());
}

 

 

2.3. Message exprossions (메세지표현식)

 

메시지 표현식 을 사용하면 외부 소스 (.properties 파일)에서 로케일 특정 메시지를 검색하여 키로 참조하고 (선택적으로) 매개 변수 세트를 적용 할 수 있습니다..

#{main.title}
#{message.entrycreated(${entryId})}

다음과 같은 템플릿에서 찾을 수 있습니다.

<table>
...
<th th:text="#{header.address.city}">
...
</th>
<th th:text="#{header.address.country}">
...
</th>
...
</table>

컨텍스트 변수의 값으로 메시지 키를 결정하거나 변수를 매개 변수로 지정하려는 경우 메시지 표현식 내에서 변수 표현식을 사용할 수 있습니다.

#{${config.adminWelcomeKey}(${session.user.name})}

 

2.4. Link exprossions (링크 표현식)

 

링크 표현식은 URL을 작성하고 유용한 컨텍스트 및 세션 정보를 추가하기위한 것입니다

(일반적으로 URL 재 작성이라고하는 프로세스).

<a th:href="@{/order/list}">...</a>
<a href="/myapp/order/list">...</a>

세션을 유지해야하고 쿠키가 활성화되지 않은 경우 (또는 서버가 아직 알지 못하는 경우) :

<a href="/myapp/order/list;jsessionid=23fa31abd41ea093">...</a>

URL은 매개 변수를 사용할 수도 있습니다.

<a th:href="@{/order/details(id=${orderId},type=${orderType})}">...</a>

결과는 다음과 같습니다

<!-- Note ampersands (&) should be HTML-escaped in tag attributes... -->
<a href="/myapp/order/details?id=23&amp;type=online">...</a>

링크 표현식은 상대적 일 수 있으며,이 경우 애플리케이션 컨텍스트가 URL 앞에 붙지 않습니다

<a th:href="@{../documents/report}">...</a>

또한 서버에 상대적입니다 (다시 말하면 접두사가 붙을 애플리케이션 컨텍스트 없음).

<a th:href="@{~/contents/main}">...</a>

프로토콜 기준 (절대 URL과 동일하지만 브라우저는 표시되는 페이지에서 사용되는 것과 동일한 HTTP 또는 HTTPS 프로토콜을 사용함) :

<a th:href="@{//static.mycompany.com/res/initial}">...</a>

물론 링크 표현은 절대적 일 수 있습니다.

 

2.5. Flagment exprossions (조각 표현식)

 

조각 식은 태그 조각을 표현하고 템플릿에서 쉽게 이동할 수있는 방법입니다.

이러한 식 덕분에 조각을 복제하고 다른 템플릿에 인수로 전달할 수 있습니다.

 

가장 일반적인 용도는 th:insert or th:replace:

<div th:insert="~{commons :: main}">...</div>

그러나 다른 변수와 마찬가지로 어디서나 사용할 수 있습니다.

<div th:with="frag=~{footer :: #main/text()}">
     <p th:insert="${frag}">
</div>

2.6. Literals and operations ( 리터럴 연산자 )

 

다양한 유형의 리터럴 및 연산을 사용할 수 있습니다.

  • 리터럴 :
    • 텍스트 리터럴 : 'one text', 'Another one!', ...
    • 숫자 리터럴 : 0, 34, 3.0, 12.3, ...
    • 부울 리터럴 : true,false
    • 널 리터럴 : null
    • 리터럴 토큰 : one, sometext, main, ...
  • 텍스트 작업 :
    • 문자열 연결 : +
    • 리터럴 대체 : |The name is ${name}|
  • 산술 연산 :
    • 이진 연산자 : +, -, *, /,%
    • 빼기 기호 (단항 연산자) : -
  • 부울 연산 :
    • 이항 연산자 : and,or
    • 부울 부정 (단항 연산자) : !,not
  • 비교와 평등 :
    • 비교기 : >, <, >=, <=( gt, lt, ge, le)
    • 같음 연산자 : ==, !=( eq, ne)
  • 조건부 연산자 :
    • 그렇다면 : (if) ? (then)
    • 그렇지 않은 경우 : (if) ? (then) : (else)
    • 기본: (value) ?: (defaultvalue)

2.7. Expression preprocessing ( 전처리 )

식에 대해 알아야 할 마지막 사항은 다음과 같이 사이  지정된 식 전처리 라는 것이 있다는 것입니다 __.

#{selection.__${sel.code}__}

우리가보고있는 것은 ${sel.code}먼저 실행될 변수 표현식 ( )과 그 결과 ( " ALL")가 나중에 실행될 실제 표현식의 일부로 사용

 

2. 몇 가지 기본 속성 

<p th:text="#{msg.welcome}">Welcome everyone!</p>
<li th:each="book : ${books}" th:text="${book.title}">En las Orillas del Sar</li>
<form th:action="@{/createOrder}">
<input type="button" th:value="#{form.submit}" />
<a th:href="@{/admin/users}">