alapok thEL ${...} __${...}__ *{...} @{...} #{...} ~{...} |...| [(...)] [[...]] #arrays #dates #ids #lists #maps

#numbers #sets #strings #temporals #vars application.yml attribute precedence conversion service form form checkbox form errors form radiobutton form select form textarea form textfield no operation

th:akarmi th:attrappend th:attrprepend th:block th:classappend th:each th:FVBA th:if th:inline th:insert th:remove th:styleappend th:switch th:unless th:utext th:with

• Ha thymeleaf template rendszert akarunk használni egy spring boot alkalmazásban, akkor a következők szükségesek a pom.xml-ben:
• A pom.xml-ben az is beállítható, hogy melyik thymeleaf verziót használjuk:

• thEL = thymeleaf Expression Language
• Tipikusan ilyen helyeken használható thEL:
• A ${} belseje nem thEL-ként értelmeződik, ezért lehetőleg minimális dolgot írjunk bele, például csak model változóra való hivatkozást.
• Text literals:
  Aposztróf határolójel nélkül is működik bizonyos esetekben, de nem javasolt, mert nem minden esetben jó, például nem tartalmazhat space-t.
• Number literals:
• Boolean literals:
• Null literal:
• NO OPERATION literal.
  Jelentése: nem kell a műveletet elvégezni.
• Text operations:
• Literal substitutions:
• Numeric operations:
• Boolean operations:
• Comparators:
• IF-THEN-ELSE operator:
• IF-THEN operator: ezzel egyenértékű:
• DEFAULT operator.
  Ha az érték null, akkor a default-érték lép életbe, bármely más esetben marad az eredeti érték.

• A lenti példákban feltételezzük hogy a modelben:
• thEL kifejezés értéke, illetve hatása:

• Nemlétező elem elérése:
• POJO elérése:
• Tömb, List egy elemének elérése: A tömb, List nemlétező indexére való hivatkozás exception-t okoz.
  Tömb, List esetén ha a []-en belül nem szám van, az mindig változónévként értelmeződik.
• Map egy elemének elérése kulcs alapján: Map esetén ha a [] tartalma sosem változónévként, hanem kulcs stringként értelmeződik. Kivéve ha használjuk a #vars kifejezést!
• Http request paraméterhez való hozzáférés: Amennyiben többször fordul elő az xy paraméter akkor az egyes elemeihez való hozzáférés:
• Http session attribútumhoz való hozzáférés: Ha nincs "xy" attribútum akkor null.
• Spring bean tagjához való hozzáférés (akár statikus, akár nem statikus tag): Amennyiben a bean-nek nem adtunk külön nevet, akkor a kisbetűs módszerrel képezhető a neve: MyBean.java esetén a név: "myBean".
• Spring bean metódushoz való hozzáférés:
  Hasznos ha például az alkalmazás címének minden lapon meg kell jelennie, ezt ne kelljen minden model-be betennni, hanem egyetlen bean metódus adja vissza, és ez meghívható minden view-ból. Amennyiben a bean-nek nem adtunk külön nevet, akkor a kisbetűs módszerrel képezhető a neve: MyBean.java esetén a név: "myBean".
  Példa: a spring automatikusan létrehozza az Environment spring-bean-t, melynek segítségével hozzáférhetünk külső property-hez, ez a context-path elérése:
• Osztály (nem spring-bean) statikus tagjához hozzáférés.
  Fontos hogy az osztály nevet a package névvel együtt kell megadni "T()" -be zárva:
• Osztály (nem spring-bean) statikus metódusához hozzáférés.
  Fontos hogy az osztály nevet a package névvel együtt kell megadni "T()" -be zárva:

• Ez a preprocessing kifejezés, vagyis 2 aláhúzásjel a kifejezés előtt és után.
  Nemcsak a $ elé írható, hanem a többi kifejezés elé is, például:
• A thymeleaf értelmező motor minden előtt ezeket értékeli ki.
• Olyan helyzetben is működik, amikor a #vars már csődöt mond.

• A *{...} kifejezéssel a th:object által definiált context-en belül lehet elérni az elemeket.
• 1. példa: felhasználó adatainak elérésére ${...} alkalmazásával:
• 2. példa: felhasználó adatainak elérésére *{...} alkalmazásával:
• A módszerek bármikor keverhetők:
• Ha nincs th:object -tel definiált context, akkor a ${...} és *{...} ugyanazt jelenti.
• A *{...} módszer főleg form-ok esetén használatos:

• A @{...} segítségével URL-eket lehet előállítani, amit például itt használhatunk:
• Példa "/" jellel kezdődő url-re, amikor a thymeleaf kiegészíti az url-t context-path-szal:
• Példa nem "/" jellel kezdődő url megadására. Ezesetben nem egészül ki az url context path-szal:
• Http-get paraméter hozzáadásakor az URL-encoding automatikusan végrehajtódik UTF-8 kódolással:

• A #{...} segítségével a messages.properties fájlban lévő bejegyzéseket lehet elérni.
• Példa a messages.properties-ben lévő bejegyzésre: Ennek elérése úgy, hogy nem helyettesítjük be a {0} és {1} paramétereket, majd behelyettesítjük: Ha kevesebb paramétert adunk meg, akkor csak egy részük lesz behelyettesítve, ha többet adunk meg, akkor a feleslegesek figyelmen kívül maradnak.
• Használhatunk kifejezést is paraméterként:

• Ez a fragment expression, mely a th:insert -nél használatos.

• A |...| kifejezést literal substitutions-nek nevezik.
• |...| használata esetén a pipe jelek közé zárt elemeket a thymeleaf sima szövegnek tekinti, a literálok sem érvényesek, csak sima stringként értelmeződnek. Csak a ${...}, *{...}, #{...}, @{...} kifejezések értelmeződnek változó adatnak.
• Példa:

• A [(...)] segítségével inline módon illeszthetünk be model adatot a html szövegbe, html escape nélkül.
• Példa: Itt ugyanaz történik mint a th:utext esetén, csak nincs befoglaló html tag (ami a th:utext esetén van).
• Az adat nem lesz escape-elve.
• Lásd még: th:inline

• A [[...]] segítségével inline módon illeszthetünk be model adatot a html szövegbe, html escape művelettel.
• Példa: Itt ugyanaz történik mint a th:text esetén, csak nincs befoglaló html tag (ami a th:text esetén van).
• Az adat escape-elve lesz.
• Lásd még: th:inline

• #arrays.length(...)
  Tömb elemszámának lekérdezése. A paraméter nem lehet null, mert az exception-t okoz. Működik List és Set osztályra is.
• #arrays.isEmpty(...)
  Tömb ürességének lekérdezése, az eredmény boolean típusú. A paraméter lehet null is, erre true-t ad vissza. Működik List és Set osztályra is.

• A java.util.Date adattípus megjelenítését form-mezőben a spring formatter biztosítja.
• A java.util.Date adattípus form-mezőn kívüli megjelenése a #dates függvénnyel állítható be:

• #ids.seq('név')
  Html id-k gyártása, melyet általában a th:id -vel használnak együtt. A kifejezést többször végrehajtva a következő id-ket állítja elő: A név lehet üres string is, ezesetben a következő id-ket állítja elő: Vegyesen is lehet a neveket használni, minden névnél az id 1-től kezdődik, ez adódik hozzá a névhez.
• #ids.prev('név')
  A megadott névvel utoljára kiadott id-t adja vissza, például: név13
  Ha még nem volt ezzel a névvel létrehozott id, az exception-t okoz.
• #ids.next('név')
  A megadott névvel ez az id lesz kiadva, ha majd meghívásra kerül az #ids.seq('név')
  Ha még nem volt ezzel a névvel létrehozott id, akkor ezt adja vissza: név1

• #lists.size(...)
  List elemszámának lekérdezése. A paraméter nem lehet null, mert az exception-t okoz. Működik tömbre és Set osztályra is.
• #lists.isEmpty(...)
  List ürességének lekérdezése, az eredmény boolean típusú. A paraméter lehet null is, erre true-t ad vissza. Működik tömbre és Set osztály is.

• #maps.size(...)
  Map elemszámának lekérdezése. A paraméter nem lehet null, mert az exception-t okoz.
• #maps.isEmpty(...)
  Map ürességének lekérdezése, az eredmény boolean típusú. A paraméter lehet null is, erre true-t ad vissza.

• Numerikus adattípus formázott megjelenítése.
  Két metódusa van: formatInteger() mely egész számot, formatDecimal() mely lebegőpontos számot formáz.
• A formatXXX() metódusok a null értéket is jól kezelik, mert helyette "" stringet adnak vissza.
• Ha ez egész értéknél pont annyi számjegyre van szükség amennyit a szám tartalmaz, akkor 0-ás értéket adjunk az egész számjegyek számának.
• Ezres elválasztó, és tizedes jel csak a következők lehetnek:
• A formatInteger() és formatDecimal() metódusokhoz is használhatók a Number adattípusok, ezek a típusok biztos használhatók:
• #numbers.formatInteger() paraméterezései:
• Példák egy egész szám (1234567) megjelenítése:
  Minimum 9 számjegy megjelenítése, ezres elválasztó space legyen: Annyi számjegy megjelenítése amit a szám tartalmaz, ezres elválasztó vessző legyen: Annyi számjegy megjelenítése amit a szám tartalmaz, nincs ezres elválasztó:
• #numbers.formatDecimal() paraméterezései:

• #sets.size(...)
  Set elemszámának lekérdezése. A paraméter nem lehet null, mert az exception-t okoz. Működik tömbre és List osztályra is.
• #sets.isEmpty(...)
  Set ürességének lekérdezése, az eredmény boolean típusú. A paraméter lehet null is, erre true-t ad vissza. Működik tömbre és List osztályra is.

• #strings.abbreviate(...)
  Adat levágása ha a megadott hosszt túlhaladja. Ha levágás történik, akkor kiegészíti "..." karakterekkel, például:

• A LocalDate, LocalTime adattípus megjelenítését form-mezőben a spring formatter biztosítja.
• A LocalDate, LocalTime adattípus form-mezőn kívüli megjelenése a #temporals függvénnyel állítható be:
• A #temporals nem része a thymeleaf alapcsomagnak, azonban ha a pom.xml-ben használjuk a spring-boot-starter-thymeleaf -et, akkor az behúzza a thymeleaf-extras-java8time csomagot, mely tartalmazza a #temporals függvényt!

• Hozzáférés a változókhoz.
• Például a ${something} ugyanaz mint a ${#vars.something}, ezesetben felesleges a #vars használata.
• Előnye akkor van ha egy stringet a thymeleaf nem akar változóként értelmezni, de a #vars használatával kikényszeríthető a változóként értelmezés.
  Például map használatakor a kulcs a mapkulcs változóban van, de a mapkulcs itt string-ként értelmeződik: helyette ezt kell használni:

• Fontosabb beállítások az application.yml fájlban, mely a thymeleaf-re vonatkozik:
  • Enable template caching.
  • Template encoding.
  • Template mode to be applied to templates. See also StandardTemplateModeHandlers.
  • Prefix that gets prepended to view names when building a URL. Default --> classpath:/templates/
  • Suffix that gets appended to view names when building a URL. Default --> .html
• Javasolt beállítások:
  • A html-ek a "view" könyvtárban vannak.
    (nem kell a végére "/" jel, mert a controllerben így adjuk meg: /menu.html, és emiatt hibás lenne a dupla "/" jel)
  • Nincs suffix, ugyanis ezt kiírjuk a view megadásakor a controllerben, például: /menu.html
  • Az újabb thymeleaf már nem támogatja a HTML5 módot, ezt üzeni:
    "Template Mode 'HTML5' is deprecated. Using Template Mode 'HTML' instead."
    Ezért ezt kell beállítani:

• Egy html tagon belüli th attribútumoknak előre meghatározott a precedenciájuk, vagyis az hogy melyiket hajtja előbb végre a thymeleaf template értelmező. Így tehát mindegy milyen sorrendben írjuk le őket.
• Például a th:each mindig előbb hajtódik végre mint a th:text, így a következő 2 kifejezés egyenértékű:
• Dokumentáció: thymeleaf-using.pdf 10-es pontja

• EZ A FUNKCIÓ NEM MŰKÖDIK A FORMON KÍVÜL, PEDIG A THYMELEAF DOKUMENTÁCIÓ SZERINT A FORMON KÍVÜL IS MŰKÖDŐKÉPES.
• Formon belül az input elemeknél automatikusan működik a conversion service, vagyis az objektumok úgy jelennek meg ahogy a spring context-ben a formatterek/konverterek definiálják a string <--> objektum konverziót.
• Más elemeknél ha szeretnénk a conversion service szerinti megjelenést, akkor a dupla kapcsos-zárójelet kell használni:
• Például ha a spring-ben a dátumra az éééé.hh.nn formátum van beállítva, akkor egy dátum megjelenítése: esetén a dátum objektum toString() szerint jelenik meg: de ha bekapcsoljuk a conversion service-t: akkor a springben definiált formatter/konverter szerint ez jelenik meg:

• Használat:
• A th:object megadása kötelező.
• A th:action elhagyható, de mindig adjuk meg!
• A method post típusú.
• A formon belül a mezőkre *{...} módon kell hivatkozni.

• A spring a generált html-ben a mezőhöz tartozó "id"-t a "name"-hez képest egy számmal is kiegészíti.
  Ezért ha <label>-t használunk a checkbox-hoz, az id-re dinamikusan kell hivatkozni az #ids.next() vagy #ids.prev() segítségével.

• Használat:
• A hozzátartozó model csak boolean típusú lehet!
• Nem használható hozzá a th:value, illetve használata esetén figyelmen kívül marad !

• java:
• html:
• Form submit esetén a multiple checkbox "value" értékei kerülnek elküldésre a form bean mezőhöz.

• A hibákat mindig a formon belül irassuk ki !

• (1) Mező kinézetének megváltoztatása class hozzárendelésével: de ennél jobb megoldás a th:errorclass használata: Ha a mező nem hibás akkor csak a class="eredeti" kerül a html-be, ha hibás akkor pedig a class="eredeti hibaosztály", vagyis a th:errorclass -nál megnevezett osztály hozzáadódik az eredeti class-hoz.
• (2) Mezőhöz tartozó hibaszövegek kiírása a mező közelében:
  A hibaszövegek tetszőlegesen formázhatók, például megjelenítés <ul>...</ul> formában: vagy pedig ha megelégszünk hogy a mezőhöz tartozó hibaszövegek csak egy <br/> jellel lesznek egymástól elválasztva: melynek megjelenése a html-ben 2 mezőhiba esetén:

• A globális hibák megjelenítése például <ul>...</ul> formában:

• Hasznos lehet ha egy oldalon nem minden hiba kerül kiírásra, és nyomozni kell a nem megjelenő hibák után.
• Példa az összes hiba kiiratására:

• A spring a generált html-ben a mezőhöz tartozó "id"-t a "name"-hez képest egy számmal is kiegészíti.
  Ezért ha <label>-t használunk a radiogomb-hoz, az "id"-re dinamikusan kell hivatkozni az #ids.next() vagy #ids.prev() segítségével.
• java:
• html:

• java:
• html:

• java:
• html:

• html:

• html:

• Ebben az esetben a java tömb-ként (list-ként) fogadja az űrlap ezen elemeit.
  A html szabvány szerint ezen mezőknek ugyanaz a name attribútuma, de szögletes zárójelben index-szel vannak ellátva,
  így az index meghatározza, hogy melyik tömb elemről (list elemről) van szó.
• java:
• html: Az index beillesztése csak preprocessing módon lehetséges!

• A no operation -t egy aláhúzásjellel jelöljük, melynek jelentése: a műveletet nem kell végrehajtani.
• Használható akkor, ha azt szeretnénk hogy a th:text ne töltse ki a tag belsejét, vagy egy attribútum felülírása ne történjen meg.
• Példa, ahol a statikus attribútum felülírása nem történik meg: eredménye:
• Példa, ahol a tag belseje nem íródik felül: eredménye:

• A "th:" után nem csak szabványos elnevezések lehetnek hanem akármi is, például: Ezesetben ha a modelben az adat=123 akkor a generált html: Vagyis a "th:akarmi" a renderelt html-ben "akarmi"-ként fog megjelenni, és a kifejezés is kiértékelődik.
• A html-ben megengedett a tetszőleges "data-akarmi" attribútum használata, így például: ilyen html-t renderel:
• Egy th:akarmi tag csak egyszer szerepelhet egy html tag-en belül!

• Statikus html attribútumhoz hozzáírás, vagyis az eredeti attribútum érték után írás.
• A hozzáíráskor nem rak be space-t az eredeti és a hozzáírandó string közé, tehát ha ez a cél akkor nekünk kell a space-t megadni.
• Ha a class attribútumhoz akarunk hozzáírni, akkor szebb megoldás ha a th:classappend -et használjuk!
• Ha a style attribútumhoz akarunk hozzáírni, akkor szebb megoldás ha a th:styleappend -et használjuk!
• Példa: eredménye:

• Statikus html attribútum elé írás.
• Az eléírás nem rak be space-t az eredeti és az eléírandó string közé, tehát ha ez a cél akkor nekünk kell a space-t megadni.
• Példa: eredménye:

• A thymeleaf egyetlen nem attribútuma, hanem tag-je, mely virtuális tag -nek fogható fel, így nem is generál html-tagot !
• Példa: egy <div> és <p> elemet egyszerre kell megjeleníteni, vagy elrejteni:
• Példa: egy th:each ciklusban minden elemre két táblázat sort kell megjeleníteni:

• Hozzáírás a statikus class attribútumhoz, vagyis az eredeti attribútum érték után írás.
• A hozzáíráskor automatikusan bekerül egy space az eredeti és a hozzáírandó string közé.
• Nem okoz problémát ha a html tagnak nincs class attribútuma.
• Példa: eredménye:

• Array, List, Set megjelenítése.
  Tegyük fel hogy a model-ben "array" névvel van egy Array, List, vagy Set, melynek elemei egyszerű stringek. Már a th:each attribútumot tartalmazó html tag-ben, vagy ezen belüli tag-ekben is hivatkozhatunk a tömb egy elemére, amit a példában az item ciklusváltozó reprezentál:
• Map megjelenítése.
  Tegyük fel hogy a model tartalmaz egy Map objektumot "map" névvel. A map egy elemét az item ciklusváltozó reprezentálja. Az item.key kifejezéssel érhető el a kulcs, az item.value kifejezéssel pedig az érték:
• A th:each attribútumnak nem okoz problémát ha az Array, List, Set, Map == null, exception nem keletkezik, olyan mintha üresek lennének!
• A th:each ciklusnak van státusza is, amit egy státuszváltozó reprezentál. A státuszváltozó neve a ciklusváltozó nevéből képződik, egy "Stat" hozzáadásával, tehát ha a ciklusváltozó neve "item", akkor a státuszváltozó "itemStat". Ha nem ilyen nevű státuszváltozót szeretnénk használni, akkor megadható egy másik név például:
• Státusz állapotok lekérdezése (a példában itemStat státuszváltozó-ból):

• Fixed Value Boolean Attributes (FVBA)
  Azokat a html attribútumokat nevezzük FVBA-nak melyeknek csak egyetlen értéke lehet, más nem. Ilyenek például:
• Ezen elemek th: megfelelője úgy működik, hogy csak egy boolean típusú kifejezést kell bennük megadni, a thymeleaf automatikusan a megfelelő értékre konvertálja. Ezek az elemek:
• Példa: eredménye:

• Html elem megjelenésének vezérlése. Ha a th:if feltétel nem teljesül a html elem, és a gyerek elemek sem jelennek meg.
• A feltétel nemcsak logikai, hanem bármilyen típus lehet.
• Csak a táblázatban felsorolt esetek minősülnek FALSE-nak:

  Típus	Érték
  	null
  String	trim() + toLowerCase() után az értéke: "false" vagy "off" vagy "no"
  Number	0
  Boolean	false

  Minden más ami nincs a táblázatban: TRUE
• Tegyük fel hogy a model-ben szerepel egy személy objektum, erre hivatkozik a view: eredménye: mivel a th:if igaznak minősül: nem Boolean, nem Number, nem String típusú, és az értéke sem null.

• A [[...]] és [(...)] különleges értelmezése kikapcsolható a th:inline="none" használatával:
• Css esetén a [[...]] és [(...)] használata th:inline="css" módon ajánlott:
• Javascript esetén a [[...]] és [(...)] használata th:inline="javascript" módon ajánlott. A generált javascript-nél berakja az idézőjelet és javascript escape-et is végez:

• A th:insert segítségével egy template fájlba beilleszthető egy másik template egy darabja (fragment-je).
• Dokumentáció: thymeleaf-using.pdf 8.2-es pontja

• A létrehozás egy tetszőleges template-ben lehetséges a th:fragment segítségével:
• A <th:block> helyett használható más html tag is!
• Beillesztéskor ez a th:fragment-et tartalmazó tag, és a gyerekelemei is bekerülnek a fogadó html-be, tehát ha a th:fragment-et tartalmazó tagot nem akarjuk beilleszteni, akkor használjuk a <th:block> -ot ami sosem jelenik meg.

• Beillesztés egy template-be, ahol meg kell nevezni a fragment-et tartalmazó template-et, és a benne lévő fragment nevét:
• A <th:block> helyett nem érdemes más tagot használni, ugyanis ez a tag is beillesztődik a template-be.
• Fragment beillesztésére a th:replace is használható, azonban ezt nem használom. A fogadó template-be nem rakja be th:replace-t tartalmazó tagot, de helyette berakja a fragment-ben lévő th:fragment-et tartalmazó tagot, vagyis az egyiket a másikra cseréli.
• A beillesztett template-kód a szokásos módon hozzáfér a model attribútumokhoz, úgy mint a fő template.
• A beillesztéshez fragment expression-t használjunk melynek formája: ~{x::y}
  A fragment expression-nek vannak előnyei, például nem kell egy th:if kifejezéssel eldönteni, hogy megtörténjen-e egyáltalán a beillesztés: vagy a fragment kifejezést egy változó is tartalmazhatja:
• A model is meg tudja határozni melyik fragment-et illesszük be, illetve hogy be kell-e valamit illeszteni:

• Úgy is be lehet illeszteni egy másik template-ből hogy nincs benne th:fragment, de ennek az a hátránya, hogy a fragment-nek nem lehet átadni paramétert.
  Ebben az esetben a teljes <head>-en belüli részt lehet insert-álni úgy hogy a :: után a "head" szót kell megadni: vagy pedig a teljes <body>-n belüli részt lehet insert-álni úgy hogy a :: után a "body" szót kell megadni:
• Css szelektorokat felhasználva is be lehet illeszteni a template-be más template egy részének tartalmát, például egy oldalrész: ami máshol beilleszthető, úgy hogy az elem "id"-jére hivatkozunk css szelektorral:

• Például adjuk át a fragment-nek paraméterben milyen szöveget jelenítsen meg. Fragment: Fragment beszúrása két helyre, más-más szöveggel:

• A th:remove segítségével a megjelölt html tagot, és gyerekelemeit lehet eltávolítani az oldalról, úgy mintha a th:if feltétele sosem teljesülne. Akkor hasznos ha bizonyos tartalmakat a web-designer szeretne látni a html-ben a program futtatása nélkül, de a futáskor mégsem jelenhetnek meg.
• Azt is meg kell adni milyen elemek törlődjenek:
• Például a következő template kód: így jelenik meg:

• Hozzáírás a statikus "style" attribútumhoz, vagyis az eredeti attribútum érték után írás.
• A hozzáíráskor automatikusan bekerül egy space az eredeti és a hozzáírandó string közé.
• Példa: eredménye:

• A th:switch szerkezet a java switch működéséhez hasonló, de vannak különbségek:
  • Nincs "break". Ezért az első igaz case-ág után biztosan hamisnak fog értékelődni az utána következő többi case-ág.
  • A default ágat a th:case="*" jelzi.
• Például ha a modelben az adat értéke "x" akkor a következő template: így jelenik meg:

• A th:unless a th:if ellentéte. Így tehát ugyanazzal a feltétellel lehet if ágat és else ágat csinálni a html-ben.
• Példa:

• Szöveg kiírása html-escape nélkül.
• Példa, vastagbetűs "árvíztűrő" kiiratására:
  A model-ben: A template-ben:

• A th:with segítségével template lokális változókat lehet definiálni.
• A lokális változók csak azon a html tagon belül érhetők el ahol definiálva lettek.
• Ha a model-ben is szerepel a lokális változóval megegyező nevű model attribútum, akkor a lokális változó ezt elfedi, tehát csak a lokális változó tartalmához férünk hozzá a lokális változó hatókörén belül.
• Példa:
• Példa:
• A th:with precedenciája magasabb mint a th:text kifejezésé, ezért egy tag-on belül együtt is alkalmazhatók: