Thymeleaf - szablony, które bez przetworzenia zrozumie twoja przeglądarka

Thymeleaf - szablony, które bez przetworzenia zrozumie twoja przeglądarka
Maciej Ziarko
14.10.2014

Dowiecie się, czym jest i co potrafi Thymeleaf
Wykonacie kilka ćwiczeń w webowym tutorialu
Będziecie mogli jutro z marszu wykorzystać Thymeleaf we własnym projekcie
Dowiecie się, gdzie poszerzyć swoją wiedzę, gdy zajdzie taka potrzeba
Cel dzisiejszego spotkania?

Potężny silnik szablonów, potrafiący generować dokumenty XML/XHTML/HTML5
Szablony są poprawnymi dokumentami XML/XHTML/HTML5
Wiele dialektów (możliwość tworzenia własnych)
Twórcy biblioteki zapewniają integrację ze Spring MVC i Spring Security
Wysoka wydajność dzięki mechanizmowy pamięci podręcznej
Czym jest Thymeleaf?

Jak to wygląda w Spring MVC?
@RequestMapping("/somePage") String showSomePage(Model model) { model.addAttribute("key1", new Value1()) model.addAttribute("key2", new Value2()) return "templateName" }
Dzięki integracji ze Spring MVC i auto-konfiguracji w Spring Boot proces z poprzedniego slajdu może być zupełnie transparentny dla programisty

Przykład prostego szablonu
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <body> <p th:text="#{wjug.welcome}"> Welcome to WJUG! </p> </body> </html>

Informacje potrzebne bibliotece przekazywane są przy pomocy atrybutów, a nie tagów
Czołowe przeglądarki ignorują nieznane przez siebie atrybuty
Natural Templating – szablony, które mogą być jednocześnie prototypem, który można uruchomić w przeglądarce bez przetwarzania
Zupełnie inaczej jest w przypadku większości popularnych dawniej technologii szablonowych: JSP, Freemarker, Velocity itd.
Analiza prostego szablonu

Thymeleaf jest bardzo elastyczny – rozszerzalny przy pomocy nowych dialektów
Silnik szablonów może korzystać jednocześnie z wielu dialektów
Głównym składnikiem dialektu są procesory, które wiedzą, jak interpretować poszczególne atrybuty
Można tworzyć nowe dialekty w oparciu o istniejące
Najpopularniejsze dialekty: Standard, Spring Standard, Spring Security, Layout
Dialekty

th:text
<p th:text="#{wjug.welcome}">
Welcome to WJUG!
</p>
Wylicza wartość wyrażenia i zastępuje nią wnętrze tagu
Wyliczona wartość może być bezpiecznie umieszczona w dokumencie HTML (escaping)
wjug.welcome=Witamy na WJUG!
W pliku messages_pl.properties:

th:utext
<p th:utext="#{wjug.welcome}"> Welcome to <strong>WJUG</strong>! </p>
Czasem może zdarzyć się, że z jakiegoś powodu escaping nie jest pożądany
wjug.welcome=Witamy na <strong>WJUG</strong>!

Składnia wyrażeń - ${…}
<span th:text="${user.name}"> j_kowalski </span>
${…} oblicza wartość na podstawie zmiennych znajdujących się w kontekście

Dostęp do elementów mapy, pól obiektów…
map['key'] map.key
Wyciąganie elementów mapy:
Wyciąganie pól z obiektów:
object['field'] object.field
Wołanie metod:
person.countDebt()
Elementy listy/tablicy:
people[2]

Składnia wyrażeń - #{…}
<p th:text="#{wjug.welcome(${user.name})}">
Welcome to WJUG, Johnny Kowalski!
</p>
#{…} jest wykorzystywane do internacjonalizacji – wartość jest ustalana na postawie Locale oraz plików properties
wjug.welcome=Witamy na WJUG, {0}!

Składnia wyrażeń - @{…}
@{…} jest wykorzystywane do tworzenia odnośników
Szczególnie przydatne dla th:href
W przypadku web aplikacji dodaje do odnośnika ścieżkę kontekstową
Umożliwia ustawianie parametrów

Dla aplikacji ze ścieżką kontekstową /app zostanie zmienione na:
@{…} – ścieżka kontekstowa
<a href="profile.html" th:href="@{/profile}"> profile </a>
<a href="/app/profile"> profile </a>

@{…} - parametry
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">
view
</a>
Dla o.id równego 100 zostanie zamienione na:
<a href="/app/order/details?orderId=100">
view
</a>

@{…} - parametry
@{/order/process(execId=${execId},execType='FAST')}
Można ustawić kilka parametrów na raz:
A także parametryzować zmienne wewnątrz ścieżki:
@{/order/{orderId}/details(orderId=${o.id})}

Konkatenacja łańcuchów znaków
th:text="'The name of the user is ' + ${user.name}"
Łańcuchy znaków można konkatenować korzystając z operatora +:
Można też skorzystać ze specjalnej składni literal substitutions:
th:text="|Welcome to our application, ${user.name}!|"

Czas na pierwsze ćwiczenie
http://itutorial.thymeleaf.org/exercise/1
Ćwiczenie znajduje się pod adresem:

th:object i *{…}
th:text="${product.description}"
th:text="${product.price}"
Atrybut th:object oraz *{…} pozwalają ulepszyć nasz kod:
Jako dobrzy inżynierowie nie lubimy duplikacji:
<dl th:object="${product}"> <dt>Product name</dt> <dd th:text="*{description}">...</dd> </dl>

Rozwiążmy lepiej ćwiczenie pierwsze

Utility Objects
#dates
#calendars
#numbers
Obiekty, posiadające pomocnicze metody:
Głównie przydają się do różnego rodzaju formatowania:
${#numbers.formatInteger(num,3)} ${#numbers.formatDecimal(num,3,2)} ${#dates.format(date, 'dd/MMM/yyyy HH:mm')}

Czas na drugie ćwiczenie

Ustawianie wartości atrybutów
Thymeleaf umożliwia wstawianie wartości dla wszystkich standardowych atrybutów:
th:abbr
th:accept
th:accept-charset
th:accesskey
th:action
th:align
th:alt
itd.

Ustawianie wartości dowolnych atrybutów
Thymeleaf umożliwia wstawianie wartości dowolnych np. customowych atrybutów:
th:attr="attr-name=${object.property}"
th:attr="src=@{/images/gtvglogo.png},
title=#{logo},alt=#{logo}"
th:attr="data-some-attr=${object.property}"

Dodatkowe wsparcie dla niektórych atrybutów
Ustawienie kilku atrybutów jednocześnie:
th:alt-title ustawia alt i title
Wsparcie dla atrybutów o stałej wartości:
th:checked
th:hidden
th:selected
th:disabled
...
th:checked="${user.active}"

Dodatkowe wsparcie dla niektórych atrybutów
Wsparcie dla atrybutu class:
class="row"
th:classappend="${prodStat.odd} ? 'odd'"
class="row odd"

Iteracja
Każda technologia szablonów musi posiadać wsparcie dla wyświetlania kolekcji, map i tablic:
<tr th:each="prod : ${prods}">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
</tr>

Iteracja – status
Możemy zadeklarować zmienną, która będzie przechowywała status iteracji:
<tr th:each="prod, stat : ${prods}">
<td th:text="${stat.count}">1</td>
</tr>
Dostępne dane:
index, count, size, odd, even, last, first

Wsparcie dla prototypowania
</tr>
Jeden wiersz mało atrakcyjny z punktu widzenia prototypu:

</tr>
<tr>
<td>Apples</td>
<td>3.98</td>
</tr>
<tr>
<td>Oranges</td>
<td>4.52</td>
</tr>
Chcemy, żeby kolejne wiersze były widoczne tylko w prototypie:

<tbody th:remove="all-but-first">
</tr>
<tr>
<td>Apples</td>
<td>3.98</td>
</tr>
...
</tbody>
Solucja to wykorzystanie th:remove:

all - usuwa tag i wszystkie dzieci
body - zostawia tag, ale usuwa dzieci
tag - usuwa tag, ale zostawia dzieci
all-but-first - usuwa wszystkie dzieci poza pierwszym
none - przydatne gdy dynamicznie decydujemy o usunięciu elementów i pod pewnym warunkiem chcemy zaniechać usuwania
Możliwe wartości th:remove:

Czas na kolejne ćwiczenia
Ćwiczenia znajdują się pod adresami:

th:if oraz th:unless
<a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" th:if="${not #lists.isEmpty(prod.comments)}">
view
</a>
Warunkowe wyświetlanie tagów:
<a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" th:unless="${#lists.isEmpty(prod.comments)}">
view
</a>

th:switch oraz th:case
<div th:switch="${user.role.name()}">
<p th:case="'ADMIN'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
<p th:case="*">User is some other thing</p>
</div>
Znana z większości języków instrukcja switch:

Czas na kolejne ćwiczenie

Zmienne lokalne
<div th:with="company=${user.company + ' Co.'}>
...
</div>
Czasem może zdarzyć się, że pewne wyrażenie wykorzystujemy wielokrotnie wewnątrz bloku:
Zalety:
jednokrotna ewaluacja (być może skomplikowanego) wyrażenia
nadanie nazwy
mniej kodu

Fragmenty - definiowanie
<body>
…
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
…
</body>
Thymeleaf posiada wsparcie dla wielokrotnego wykorzystania pewnych poddrzew (DRY):

Fragmenty - wykorzystanie
<div th:include="layout :: copy"></div>
lub
<div th:replace="layout :: copy"></div>
Zdefiniowany w jednym pliku fragment można wykorzystywać w innych plikach:

Fragmenty - czym różnią się th:include i th:replace?
<footer th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </footer> <div th:include="layout :: copy"></div> <div th:replace="layout :: copy"></div> <div> © 2011 The Good Thymes Virtual Grocery </div> <footer> © 2011 The Good Thymes Virtual Grocery </footer>

Fragmenty - parametryzowanie
<div th:fragment="frag (onevar,twovar)">
<p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>
<div th:include="layout::frag(${value1},${value2})">
...
</div>
Definicja:
Wykorzystanie:

Wsparcie dla formularzy
<form action="#" th:action="@{/seedstartermng}" th:object="${seedStarter}" method="post">
…
<input type="text" th:field="*{datePlanted}"/>
…
</form>
Atrybut th:object służy do precyzowania form-backing beana:
th:field zachowuje się odpowiednio w zależności od inputu (inaczej dla text, jeszcze inaczej dla textarea itd.)

Wsparcie dla formularzy
<li th:each="feat : ${allFeatures}">
<input type="checkbox" th:field="*{features}"
th:value="${feat}"/>
<label th:for="${#ids.prev('features')}"
th:text="#{${'feature.' + feat}}">Heating</label>
</li>
Checkbox:
Dropdown:
<select th:field="*{type}">
<option th:each="type : ${allTypes}"
th:value="${type}"
th:text="#{${'type.' + type}}">Wireframe</option>
</select>

Inlining
<body th:inline="text">
...
<p>Hello, [[${session.user.name}]]!</p>
...
</body>
Mimo, iż możemy osiągnąć wszystko przy pomocy atrybutów, czasem może zdarzyć się, że chcemy wstawić wartość bezpośrednio wewnątrz tagu:

Inlining - JavaScript
<script th:inline="javascript">
var username = /*[[${session.user.name}]]*/ 'Sebastian';
</script>
Thymeleaf posiada wsparcie dla JavaScriptu:
Thymeleaf jest inteligentny:
var user = /*[[${session.user}]]*/ null;
var user = {'firstName':'John', 'lastName':'Apricot', 'name':'John Apricot', 'nationality':'Antarctica'};
Wygenerowano literał odpowiedniego typu:

Kolejność przetwarzania atrybutów
<li th:if="item.status == 'APPROVED'"
th:each="item : ${items}">
</li>
Atrybuty w dokumentach XML i HTML nie mają określonej kolejności.
Czasem może zdarzyć się, że kolejność jest dla nas istotna:
By sobie z tym poradzić, Thymeleaf definiuje kolejność, w jakiej przetwarza atrybuty.

Kolejność przetwarzania atrybutów
th:include, th:replace
th:each
th:if, th:unless, th:switch, th:case
th:object, th:with
th:attr, th:attrprepend, th:attrappend
th:value, th:href, th:src itd.
th:text, th:utext
th:fragment
th:remove

Dostęp do specjalnych obiektów
#locale
#vars
param
session
application
#httpServletRequest
#httpSession
Czasem może zdarzyć się, że potrzebny jest nam bezpośredni dostęp do pewnych specjalnych obiektów.
Najważniejsze z obiektów dostępnych z poziomu szablonu:

Dostęp do Springowych beanów
Kiedy korzystamy z dialektu Spring Standard, dostajemy pełne możliwości Spring EL.
Na przykład możemy dostawać się do beanów:
<div th:text="${@authService.getUserName()}">...</div>

Dialekt Spring Security
<div sec:authorize="hasRole('ROLE_ADMIN')">
This will only be displayed if authenticated
user has role ROLE_ADMIN.
</div>
<a href="#" th:href="@{/admin}" sec:authorize-url="/admin">
This will only be displayed if authenticated
user can call the "/admin" URL.
</a>
<div sec:authentication="name">
The value of the "name" property of
the authentication object should appear here.
</div>
Możliwości:

http://www.thymeleaf.org/documentation.html
http://www.thymeleaf.org/doc/springmail.html
https://github.com/thymeleaf/thymeleaf-testing
https://github.com/spring-projects/spring- boot/tree/master/spring-boot-samples/spring-boot- sample-web-ui
Gdzie dalej?

Thymeleaf - szablony, które bez przetworzenia zrozumie twoja przeglądarka

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Thymeleaf - szablony, które bez przetworzenia zrozumie twoja przeglądarka

Similar to Thymeleaf - szablony, które bez przetworzenia zrozumie twoja przeglądarka (20)

Thymeleaf - szablony, które bez przetworzenia zrozumie twoja przeglądarka