Czym jest Thymeleaf i jak można go wykorzystać w aplikacjach Spring Boot?
Thymeleaf to silnik szablonów Java. Tworzy szablony zarówno dla aplikacji internetowych, jak i samodzielnych. Ten silnik szablonów wykorzystuje koncepcję Natural Templates do wprowadzania logiki do układu, bez uszczerbku dla projektu. Dzięki Thymeleaf będziesz mieć kontrolę nad tym, jak aplikacja będzie przetwarzać utworzone szablony.
Thymeleaf obsługuje przetwarzanie wielu formatów szablonów, w tym HTML, XML, Text, JavaScript, CSS i RAW. Wśród nich HTML jest najczęściej używanym formatem szablonów w ramach Thymeleaf.
Inicjalizacja Thymeleaf w aplikacji
Alternatywnie, można włączyć Thymeleaf do swojego projektu Spring Boot, wybierając jego włączenie podczas generowania kodu boilerplate za pomocą narzędzia Spring initializr lub później włączając go do pliku specyfikacji kompilacji pod nagłówkiem zależności.
W przypadku wybrania opcji projektu Gradle, plik konfiguracyjny określający zależności projektu jest określany jako plik “build.gradle”. Z drugiej strony, jeśli wybrałeś Mavena jako rozwiązanie do zarządzania zależnościami, odpowiedni plik konfiguracyjny byłby zatytułowany “pom.xml”.
Plik XML określający zależności dla projektu, określany jako “pom.xml”, powinien zawierać określoną sekcję przedstawiającą te zależności.
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Rzeczywiście, konieczne jest, aby plik build.gradle zawierał określony segment zależności w następujący sposób:
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
Wspomniany artykuł zawiera przykładową aplikację, do której można uzyskać dostęp za pośrednictwem określonego repozytorium GitHub, które zezwala użytkownikom na bezpłatne korzystanie z niej na warunkach liberalnej licencji MIT.
Integracja Thymeleaf z aplikacją Spring daje korzyść z wykorzystania jej podstawowej biblioteki, umożliwiając wykorzystanie standardowego dialektu Spring dla Thymeleaf. Ten dialekt prezentuje charakterystyczne atrybuty i style ekspresji, ułatwiając włączenie różnych możliwości do struktury projektu.
Korzystanie z Thymeleaf w Spring Boot
Aby wykorzystać Thymeleaf w aplikacji Spring, konieczne jest rozpoczęcie od stworzenia dokumentu szablonu. W tym konkretnym przykładzie wybranym formatem szablonu jest plik HTML. Zaleca się, aby wszystkie szablony Thymeleaf były tworzone w katalogu “templates” znajdującym się w plikach zasobów Spring Boot.
Plik home.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Generic Website</title>
</head>
<body></body>
</html>
Dostarczony szablon Thymeleaf prezentuje konwencjonalne znaczniki HTML, w tym obcy przedrostek przestrzeni nazw, xmlns:th , który służy jako podstawa do wykorzystania dowolnego z atrybutów opatrzonych adnotacją th: w niniejszym dokumencie HTML. Wszystkie inne atrybuty i elementy w szablonie Thymeleaf są zgodne ze standardową składnią i konwencjami HTML.
Tworzenie nagłówka
Nagłówek odgrywa istotną rolę w przekazywaniu celu strony internetowej lub aplikacji poprzez jej logo, jednocześnie ułatwiając użytkownikom płynną nawigację. Podstawowe elementy podstawowego nagłówka obejmują logo i wiele linków nawigacyjnych, które zapewniają łatwy dostęp do różnych sekcji witryny lub aplikacji.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div id="nav">
<h1>LOGO</h1>
<ul>
<li> <a id="current">Home </a> </li>
<li> <a>About</a> </li>
<li> <a>Services</a> </li>
</ul>
</div>
</body>
</html>
Thymeleaf oferuje wygodny sposób włączenia określonego nagłówka do dowolnej strony internetowej w aplikacji internetowej, wykorzystując atrybut th:insert . Atrybut ten jest kompatybilny zarówno z th:insert , jak i th:replace , które są akceptowane przez Thymeleaf jako “wartości wyrażeń fragmentów”. Te wyrażenia fragmentów zapewniają możliwość wstawiania części zawartości strukturalnej w różnych punktach kompozycji układu.
<div th:insert="~{header :: #nav}"></div>
Włączenie wyżej wymienionego znacznika w tagu otwierającym w pliku home.html spowoduje pojawienie się nagłówka na stronie głównej. Wyrażenie fragmentu zawiera wiele składników, z których dwa są opcjonalne, a pozostałe dwa są obowiązkowe.
⭐ tylda (~), która jest opcjonalna.
Opcjonalny zestaw nawiasów klamrowych, oznaczony przez {}
Wspomniany szablon HTML, który obejmuje żądane znaczniki, jest oznaczony etykietą “header.html”.
Aby pomyślnie wykonać dostarczony kod JavaScript, konieczne jest upewnienie się, że plik HTML zawiera element z atrybutem ID ustawionym na “nav”. Można to osiągnąć poprzez dodanie odpowiednich znaczników w tagu dokumentu HTML i odpowiednie przypisanie żądanej wartości ID.
Rzeczywiście, zastosowanie wyżej wymienionych znaczników przyniesie identyczne wyniki, jak te osiągnięte dzięki alternatywnemu podejściu opisanemu wcześniej.
<div th:insert="header :: #nav"></div>
Wypełnianie treści szablonu
Thymeleaf obsługuje różne formaty wyrażeń w swojej strukturze szablonów, obejmujące pięć różnych kategorii, jak poniżej:
⭐Wyrażenie fragmentu (~{…})
⭐Wyrażenie komunikatu (#{…})
⭐Wyrażenie URL linku (@{…})
⭐Wyrażenie zmiennej (${…})
⭐Wyrażenie zmiennej wyboru (*{…})
Wykorzystanie wyrażenia komunikatu umożliwia łatwe włączenie obcych elementów tekstowych do układu. Stosując to podejście, można płynnie zastępować lub ponownie wykorzystywać zawartość obecną w projekcie. Podczas implementacji wyrażenia komunikatu konieczne jest, aby powiązane elementy tekstowe były przechowywane w pliku znajdującym się pod katalogiem resourcesfolder .
Podany przykład wykorzystuje konkretny plik zasobów o nazwie “messages.properties”, który zawiera podany fragment:
placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.
Należy wziąć pod uwagę, że fragment zawiera identyfikator znany jako “placeholder.text”. Oznaczenie to jest przypisane ze względu na fakt, że każdy komponent wiadomości może składać się z różnych komunikatów. W związku z tym konieczne staje się włączenie punktu odniesienia w celu zintegrowania określonej wiadomości w konfiguracji.
<p th:text="#{placeholder.text}"></p>
Włączenie dostarczonego fragmentu kodu do treści dokumentu HTML zapewnia, że zawartość zastępcza pojawia się jako spójny akapit w interfejsie użytkownika. W przeciwieństwie do wyrażenia fragmentu, wszystkie składniki wyrażenia komunikatu są obowiązkowe i niezbędne. Wyrażenie komunikatu wymaga włączenia każdego określonego elementu, bez żadnych pominięć lub zastąpień.
⭐Znak liczby (#).
⭐Para nawiasów klamrowych ({}).
Treść tekstowa zawarta w elemencie oznaczonym jako “placeholder” to wiadomość, którą chcemy przekazać, do której można uzyskać dostęp za pośrednictwem powiązanego atrybutu lub właściwości, takiej jak “placeholder.text”.
Styling Your Template
Inny kluczowy komponent w katalogu “resources” odnosi się do pliku statycznego, który służy jako repozytorium dla arkuszy stylów CSS i elementów wizualnych integralnych dla funkcjonowania aplikacji internetowej. Aby ustanowić połączenie między zewnętrznie hostowanym plikiem CSS a szablonem HTML Thymeleaf, należy użyć wyrażenia link URL. To wszechstronne wyrażenie może obsługiwać zarówno relacyjne, jak i bezwzględne adresy URL, zapewniając elastyczność i łatwość integracji podstawowych elementów projektu z jego podstawą.
<link rel="stylesheet" th:href="@{/css/style.css}" />
Włączenie dostarczonego kodu do elementu dokumentu HTML umożliwia stylizację przy użyciu oddzielnego pliku style.css , który można znaleźć w katalogu static/css plików zasobów przykładowej aplikacji. Ważne jest, aby upewnić się, że atrybut th:href jest przypisany z odpowiednim wyrażeniem URL podczas łączenia się z tym plikiem CSS.
Thymeleaf oferuje szereg atrybutów, które umożliwiają programistom udoskonalanie projektów stron. Wśród tych atrybutów jest th:style atrybut, który pozwala na integrację elementów wizualnych w układzie.
<div id="showcase" th:style="'background: url(/images/background.jpg) no-repeat center center fixed;'">
Znaczniki wykorzystują atrybut th:style , aby nadać obraz tła określonemu segmentowi układu. Thymeleaf oferuje ponad sto atrybutów, które można wykorzystać do nadania cech stylistycznych i funkcjonalnych w układzie.
Wyrażenie zmiennej
Wyrażenia zmiennej są powszechnym i skomplikowanym aspektem składni Thymeleaf, umożliwiającym pobieranie informacji z kontekstu aplikacji lub obiektu w nim zawartego w celu włączenia do szablonów. Dostępne są dwie odmiany wyrażeń zmiennych w zależności od charakteru danych przeznaczonych do wyświetlenia w widoku.
Wykorzystanie znaku dolara jako części wyrażenia zmiennej umożliwia wyodrębnienie informacji odnoszących się do konkretnych zadań występujących w kontekście aplikacji. Odpowiednia ilustracja obejmuje uzyskanie szczegółów dotyczących użytkownika z określonego modalu. Podczas wykonywania dostarczonego przykładowego projektu i nawigowania do http://localhost:8080/ w przeglądarce internetowej, osoba napotyka interfejs modalny.
Po zamknięciu okna modalnego lub przesłaniu nazwy za jego pośrednictwem aplikacja przekieruje na swoją stronę główną. Po wejściu na wspomnianą stronę główną użytkownicy napotkają standardową stronę internetową zawierającą powitanie “Witamy”, a następnie wyświetlającą tekst wprowadzony z modalu w ciągu znaków.
Wspomniana aplikacja wykorzystuje zmienne wyrażenia do osiągnięcia swojego celu. W dokumencie modal.html podstawowa struktura jest prezentowana poprzez włączenie następujących znaczników:
<form id="form" th:action="@{/home}" method="post">
<input type="text" name="userName"class="form-control" placeholder="Your Name" />
<button type="submit" class="btn">Submit</button>
</form>
Po przesłaniu formularza przez użytkownika uruchamiany jest atrybut th:action, którego wartość odpowiada adresowi URL POST wykrytemu w klasie WebController.
@PostMapping("/home")
public String processName(String userName, Model model) {
model.addAttribute("userName", userName);
return "home";
}
Metoda processName() przyjmuje jako dane wejściowe ciąg znaków podany przez użytkownika za pośrednictwem modalu i przechowuje go w zmiennej o nazwie userName . Następnie, wykorzystując wyrażenie zmiennej, kontroler wprowadza zmienną userName do układu.
<h1>Welcome <span th:text="${userName}"></span>!</h1>
Wykorzystanie zmiennego wyrażenia wyboru z gwiazdką staje się coraz bardziej wartościowe wraz ze wzrostem złożoności systemów oprogramowania. Praktyczna ilustracja obejmuje mechanizmy uwierzytelniania, w których zbieranie nazw użytkowników z obiektów użytkownika i ich włączanie do projektu interfejsu skutecznie ilustruje tę funkcjonalność.
Alternatywne opcje szablonów i stylizacji
Chociaż Thymeleaf zyskał popularność jako preferowane rozwiązanie do tworzenia szablonów dla projektów Spring Boot, ważne jest, aby rozważyć alternatywne opcje, które oferują porównywalną funkcjonalność. Wśród tych alternatyw znajdują się JavaServer Pages (JSP), które zapewniają generowanie kodu Java po stronie serwera; szablony Groovy, które umożliwiają dynamiczne tworzenie treści przy użyciu języka skryptowego Groovy; szablony FreeMarker, silnik szablonów typu open source z obsługą wielu języków programowania; oraz szablony Mustache, znane z prostoty i łatwości integracji. Co więcej, deweloperzy mogą elastycznie stosować niestandardowe style CSS lub wykorzystywać istniejące frameworki CSS do projektowania układów stron.