Browse Source

Explain some design choices used in HTML documents; add commenting

Signed-off-by: Pekka Helenius <fincer89@hotmail.com>
v0.0.2-alpha
Pekka Helenius 4 years ago
parent
commit
12eb644e74
1 changed files with 54 additions and 0 deletions
  1. +54
    -0
      bookstore/src/main/resources/templates/booklist.html

+ 54
- 0
bookstore/src/main/resources/templates/booklist.html View File

@ -1,8 +1,41 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--/*
Idea of the following syntax used in this and other HTML document:
<foo th:text="${#messages.msgOrNull('<key_from_messages.properties>')} ?: 'myThymeleafText'">
myHTMLPlainText
</foo>
-> A) In Thymeleaf, we check if a message key exists. In normal cases, a non-existent key is NOT null.
Therefore, we use method msgorNull and enforce null value if the message key is not found.
-> B) IF key is null: in section '?: myThymeleafText' we use text 'myThymeleafText' as a replacement
value for the HTML tag string value.
-> C) The last string value 'myHTMLPlainText' between tags is used if we open plain HTML file without
Thymeleaf rendering. This is useful for offline viewing and for developers who want correct file
rendering without Java overhead.
*/-->
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--/*
CSS href fields:
Plain HTML rendering gets CSS style files directly from the relative file system path.
This is useful for offline viewing and for developers who want correct file
rendering without Java overhead.
Instead, Thymeleaf template engine gets CSS style files via URI refs. Therefore, values of
href and th:href differ. However, both use cases are covered: Thymeleaf & plain HTML.
*/-->
<link type="text/css" rel="stylesheet" href="../static/css/bookstore.css" th:href="@{../css/bookstore.css}" /> <link type="text/css" rel="stylesheet" href="../static/css/bookstore.css" th:href="@{../css/bookstore.css}" />
<link type="text/css" rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{../css/bootstrap.min.css}" /> <link type="text/css" rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{../css/bootstrap.min.css}" />
@ -52,12 +85,33 @@
| else: | else:
| Author is string value 'book.null.author' | Author is string value 'book.null.author'
*/--> */-->
<td th:text="${book.author != null} ? ( (${book.author.firstName != null} ? (${book.author.firstName} + ' ') : '') + (${book.author.lastName != null} ? ${book.author.lastName} : '') ) : (${#messages.msgOrNull('book.null.author')} ?: 'book.null.author')">(obj) book.author.firstName (obj) book.author.lastName</td> <td th:text="${book.author != null} ? ( (${book.author.firstName != null} ? (${book.author.firstName} + ' ') : '') + (${book.author.lastName != null} ? ${book.author.lastName} : '') ) : (${#messages.msgOrNull('book.null.author')} ?: 'book.null.author')">(obj) book.author.firstName (obj) book.author.lastName</td>
<td th:text="${book.title}">(obj) book.title</td> <td th:text="${book.title}">(obj) book.title</td>
<td th:text="${book.isbn}">(obj) book.isbn</td> <td th:text="${book.isbn}">(obj) book.isbn</td>
<td th:text="${book.year}">(obj) book.year</td> <td th:text="${book.year}">(obj) book.year</td>
<!--/*
Check if book.category exists (book entity object). If yes, then:
Get string value of book.category.name (book entity object (method))
else:
|-> Check if book.null.category (message key) exists. If yes, then:
| Get string value of book.null.category message key
| else:
| Category is string value 'book.null.category'
*/-->
<td th:text="${book.category != null} ? ${book.category.name} : (${#messages.msgOrNull('book.null.category')} ?: 'book.null.category')">(obj) book.category.name</td> <td th:text="${book.category != null} ? ${book.category.name} : (${#messages.msgOrNull('book.null.category')} ?: 'book.null.category')">(obj) book.category.name</td>
<!--/*
Get book price with two decimal precision.
If price is not found, fall back to string value 0.00.
Combine with message key 'page.symbols.currency' value.
*/-->
<td th:text="(${#numbers.formatDecimal(book.price, 1, 2)} ?: '0.00') + ' ' + (${#messages.msgOrNull('page.symbols.currency')} ?: 'page.symbols.currency')"> <td th:text="(${#numbers.formatDecimal(book.price, 1, 2)} ?: '0.00') + ' ' + (${#messages.msgOrNull('page.symbols.currency')} ?: 'page.symbols.currency')">
0.00 page.symbols.currency 0.00 page.symbols.currency
</td> </td>


Loading…
Cancel
Save