Frontend - knowledge about Thymeleaf in deeply

In this blog discuss thymeleaf 

In my college time, I never use thymeleaf we really don't know about thymeleaf, But when I started my job as a developer first time using thymeleaf that a nice experience, and with the help of thymeleaf get more knowledge in my field.

Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS, and even plain text. Thymeleaf has also been designed from the beginning with Web Standards in mind – especially HTML5 – allowing you to create fully validating templates if that is a need for you.

There are quite a lot of attributes like these, each of them targeting a specific HTML5 attribute:

th:abbr	th:accept	th:accept-charset
th:accesskey	th:action	th:align
th:alt	th:archive	th:audio
th:autocomplete	th:axis	th:background
th:bgcolor	th:border	th:cellpadding
th:cellspacing	th:challenge	th:charset
th:cite	th:class	th:classid
th:codebase	th:codetype	th:cols
th:colspan	th:compact	th:content
th:contenteditable	th:contextmenu	th:data
th:datetime	th:dir	th:draggable
th:dropzone	th:enctype	th:for
th:form	th:formaction	th:formenctype
th:formmethod	th:formtarget	th:fragment
th:frame	th:frameborder	th:headers
th:height	th:high	th:href
th:hreflang	th:hspace	th:http-equiv
th:icon	th:id	th:inline
th:keytype	th:kind	th:label
th:lang	th:list	th:longdesc
th:low	th:manifest	th:marginheight
th:marginwidth	th:max	th:maxlength
th:media	th:method	th:min
th:name	th:onabort	th:onafterprint
th:onbeforeprint	th:onbeforeunload	th:onblur
th:oncanplay	th:oncanplaythrough	th:onchange
th:onclick	th:oncontextmenu	th:ondblclick
th:ondrag	th:ondragend	th:ondragenter
th:ondragleave	th:ondragover	th:ondragstart
th:ondrop	th:ondurationchange	th:onemptied
th:onended	th:onerror	th:onfocus
th:onformchange	th:onforminput	th:onhashchange
th:oninput	th:oninvalid	th:onkeydown
th:onkeypress	th:onkeyup	th:onload
th:onloadeddata	th:onloadedmetadata	th:onloadstart
th:onmessage	th:onmousedown	th:onmousemove
th:onmouseout	th:onmouseover	th:onmouseup
th:onmousewheel	th:onoffline	th:ononline
th:onpause	th:onplay	th:onplaying
th:onpopstate	th:onprogress	th:onratechange
th:onreadystatechange	th:onredo	th:onreset
th:onresize	th:onscroll	th:onseeked
th:onseeking	th:onselect	th:onshow
th:onstalled	th:onstorage	th:onsubmit
th:onsuspend	th:ontimeupdate	th:onundo
th:onunload	th:onvolumechange	th:onwaiting
th:optimum	th:pattern	th:placeholder
th:poster	th:preload	th:radiogroup
th:rel	th:rev	th:rows
th:rowspan	th:rules	th:sandbox
th:scheme	th:scope	th:scrolling
th:size	th:sizes	th:span
th:spellcheck	th:src	th:srclang
th:standby	th:start	th:step
th:style	th:summary	th:tabindex
th:target	th:title	th:type
th:usemap	th:value	th:valuetype
th:vspace	th:width	th:wrap
th:xmlbase	th:xmllang	th:xmlspace

The following fixed-value boolean attributes exist in the Standard Dialect:

th:async	th:autofocus	th:autoplay
th:checked	th:controls	th:declare
th:default	th:defer	th:disabled
th:formnovalidate	th:hidden	th:ismap
th:loop	th:multiple	th:novalidate
th:nowrap	th:open	th:pubdate
th:readonly	th:required	th:reversed
th:scoped	th:seamless	th:selected

let’s see a quick summary of the Standard Expression features:

·         Simple expressions:

o    Variable Expressions: ${...}

o    Selection Variable Expressions: *{...}

o    Message Expressions: #{...}

o    Link URL Expressions: @{...}

o    Fragment Expressions: ~{...}

·         Literals

o    Text literals: 'one text', 'Another one!',…

o    Number literals: 0, 34, 3.0, 12.3,…

o    Boolean literals: true, false

o    Null literal: null

o    Literal tokens: one, sometext, main,…

·         Text operations:

o    String concatenation: +

o    Literal substitutions: |The name is ${name}|

·         Arithmetic operations:

o    Binary operators: +, -, *, /, %

o    Minus sign (unary operator): -

·         Boolean operations:

o    Binary operators: and, or

o    Boolean negation (unary operator): !, not

·         Comparisons and equality:

o    Comparators: >, <, >=, <= (gt, lt, ge, le)

o    Equality operators: ==, != (eq, ne)

·         Conditional operators:

o    If-then: (if) ? (then)

o    If-then-else: (if) ? (then) : (else)

o    Default: (value) ?: (defaultvalue)

·         Special tokens:

o    No-Operation: _

Thymeleaf Attributes

Attribute	Examples	Description
th:text	<h1 th:text="${post.title}">Title</h1> Message expressions: <p th:text="#{home.welcome}">Welcome to FrontBackend!</p> - simple <p th:text="#{home.welcome(${session.user.name})}"> Welcome to our grocery store, Martin Wojtus! </p> - for parametrized messages String concatenation: <span th:text="'Welcome ' + ${user.name}">	displaying HTML-encoded text that is evaluated from the expression
th:utext	<div th:utext="${post.content}">Content</div>	displays text unescaped
th:attr	Single: <input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/> Multi: <img th:attr="src=@{/images/logo.png},title=#{logo},alt=#{logo}" /> Data attributes: <div th:attr="data-id=${post.id},data-title=${post.title},data-date=${#dates.format(post.date, 'yyyy-MM-dd')}"> <th:block th:text="${post.title}">Post title</th:block> </div>	sets the value of attribute
th:attrappend	<input type="button" value="Do it!" class="btn" th:attrappend="class=${' ' + cssStyle}" />	appends the value to existing attribute
th:each	<tr th:each="customer, custStat : ${customers}"> <td th:text="${custStat.index + 1}">1</td> <td th:text="${customer.firstName}">John</td> <td th:text="${customer.lastName}">Doe</td> <td th:text="${customer.age}">18</td> </tr>	iteration attribute
th:if	<div th:if="${user.isAdmin()}">...</div>	evaluates the conditions specified in the attribute and if they are true, the tag is displayed
th:unless	<div th:unless="${user.isAdmin()}">.not admin..</div>	the opposite of th:if
th:switch, th:case	<div th:switch="${user.role}"> <p th:case="'admin'">User is an administrator</p> <p th:case="#{roles.manager}">User is a manager</p> </div>	creating a switch statement
th:label, th:action, th:href, th:onclick etc.	<form th:action="@{/sampleInputs}" th:object="${sampleInputs}" method="post"> <div> <label>Date:</label> <input type="text" th:field="*{dateField}" placeholder="yyyy-MM-dd" /> </div> <input type="submit" value="Submit"/> </form>	those attributes can be used as a shorthand of the th:attr syntax
th:with	<div th:with="firstPer=${persons[0]}"> <p> The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>. </p> </div>	defining local variables

for download PDF Tutorial :Using Thymeleaf:-https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html