środa, 19 listopada 2014

Quick&Easy : Very simple CRUD application based on : Spring Boot + Thymeleaf + Webjars

Kilka postów temu dowiedzieliśmy się  jak stworzyć prosty CRUD oparty na Spring Boot +jsp.
Dziś coś szybkiego i równie łatwego, czyli CRUD zbudowany na Thymeleaf (w poście pt :" Dispel your security concerns - Spring Security part2 (mongoDB,Thymeleaf,boot) ". Każdy miał okazje spotkać się oficjalnie na tym blogu z Thymeleaf właśnie chyba w powyższym poście.
Teraz dodamy sobie funkcjonalność webjars czyli resources odpowiedzialne na frontend, które są w jednym miejscu i to spakowane w paczce jar. Jest to bardzo wygodne a zarazem wprowadza porządek do kodu.



Webjars to w naszym przypadku Twitter Bootstrap - bo nie znam się na css oraz js a chce, żeby strona miała trochę bajerów i była fajnie ostylowana oraz
JQuery - bo czasem potrzeba jakiegoś mechanizmu z AJAX.

Chce aby strona była w duchu i18n a dzięki springowi to nic trudnego. Aplikacja na potrzeby tego posta po prostu dodaje, edytuje, kasuje i wyświetla prosty słownik państw i ich kodów.

W następnych postach wyjaśnię czym są poniższe pojęcia na przykładzie kodu :
1.Redirect after POST choć to jest użyte już tej aplikacji
2. Black list @InitBinder
3. White list @InitBinder
4. Bean validation : JSR 303 i pewnie jeszcze wiele innych :)

Zaczynamy :
1. Webjars : 
 
Mały update w konfiguracja dzięki dodaniu :
ThymeLeaf header :
Konfiguracja dla Thymeleafa serwowana przez Spring Boota.
2. i18n :

Konfiguracja jest prosta :
Wskazujemy położenie plików z wiadomościami, informacje na temat locale zapisujemy w cookie, localeChangeInterceptor pozwala na zmianę języka w trakcie działania aplikacji : ?lang=en / ?lang=pl messageSource.setUseCodeAsDefaultMessage(true) - jeśli nie wyedytowaliśmy odpowiedniego klucza w pliku z properties użyj klucza jaka wiadomości, da nam to tyle, że uchroni nas przed wyrzuceniem exception dotyczącego nieznalezionego message'u dla danego kodu wiadomości.
Tip : Jak chcesz możesz zrobić swoją własną implemetację MessageSource np trzymać wiadomości w bazie oraz je cache'ować co pozwoli np na edycję kodów i wiadomości w trybie rzeczywistym, czasem też lepiej utrzymywalnym niż w pliku .properties

3.ThymeLeaf :

W plikach .html dobieramy się do messages poprzez znacznik th:text='#{code}':
4.DS configuration :


Efekt :










































Podsumowanie :
Prosty CRUD jak na załączonych screenshotach. Fajne efekty podświetlania pól oraz pozycjonowanie na stronie czy użyteczna górna belka z menu to zasługa Twitter Bootstrapa oraz JQuery. Thymeleaf to świetny silnik szablonów i na ten czas tyle trzeba wiedzieć. Webjars trzyma w ryzach wszystkie css i js, które dostajemy od zewnętrznych dostawców.
Baza H2 pozwala na przeglądanie danych przez klienta z przeglądarki.
JPA + Spring Data to prosty sposób na DAO.
Kod znajdziesz tutaj .


1 komentarz: