Thymeleaf tutorial: Chapter 14. A few more pages of our groceries
Table of contents
Now we know a lot about using Thymeleaf and can add some new pages to our website for order management.
Please note that we will focus on the HTML code, but you can see the source code if you want to see the corresponding controllers.
Start by creating the order list page, /WEB-INF/templates/order/list.html:
')
There is nothing here that could surprise us except this little OGNL magic:
For each order line (OrderLine object), we multiply the properties of the purchasePrice, amount and sum it up (by calling the corresponding getPurchasePrice () and getAmount () methods) and return the result to the list of numbers, later the aggregate function # aggregates.sum (...) , to get the total order cost.
You must love the power of OGNL.
Now on the order details page, in which we will heavily use the asterisk syntax:
There are not so many new things besides this selection of embedded objects:
... what makes this * {name} equivalent:
14 A few more pages of our groceries.
Now we know a lot about using Thymeleaf and can add some new pages to our website for order management.
Please note that we will focus on the HTML code, but you can see the source code if you want to see the corresponding controllers.
14.1 List of orders
Start by creating the order list page, /WEB-INF/templates/order/list.html:
')
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Good Thymes Virtual Grocery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" media="all" href="../../../css/gtvg.css" th:href="@{/css/gtvg.css}" /> </head> <body> <h1>Order list</h1> <table> <tr> <th>DATE</th> <th>CUSTOMER</th> <th>TOTAL</th> <th></th> </tr> <tr th:each="o : ${orders}" th:class="${oStat.odd}? 'odd'"> <td th:text="${#calendars.format(o.date,'dd/MMM/yyyy')}">13 jan 2011</td> <td th:text="${o.customer.name}">Frederic Tomato</td> <td th:text="${#aggregates.sum(o.orderLines.{purchasePrice * amount})}">23.32</td> <td> <a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a> </td> </tr> </table> <p> <a href="../home.html" th:href="@{/}">Return to home</a> </p> </body> </html> There is nothing here that could surprise us except this little OGNL magic:
<td th:text="${#aggregates.sum(o.orderLines.{purchasePrice * amount})}">23.32</td> For each order line (OrderLine object), we multiply the properties of the purchasePrice, amount and sum it up (by calling the corresponding getPurchasePrice () and getAmount () methods) and return the result to the list of numbers, later the aggregate function # aggregates.sum (...) , to get the total order cost.
You must love the power of OGNL.
14.2 Order Details
Now on the order details page, in which we will heavily use the asterisk syntax:
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Good Thymes Virtual Grocery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" media="all" href="../../../css/gtvg.css" th:href="@{/css/gtvg.css}" /> </head> <body th:object="${order}"> <h1>Order details</h1> <div> <p><b>Code:</b> <span th:text="*{id}">99</span></p> <p> <b>Date:</b> <span th:text="*{#calendars.format(date,'dd MMM yyyy')}">13 jan 2011</span> </p> </div> <h2>Customer</h2> <div th:object="*{customer}"> <p><b>Name:</b> <span th:text="*{name}">Frederic Tomato</span></p> <p> <b>Since:</b> <span th:text="*{#calendars.format(customerSince,'dd MMM yyyy')}">1 jan 2011</span> </p> </div> <h2>Products</h2> <table> <tr> <th>PRODUCT</th> <th>AMOUNT</th> <th>PURCHASE PRICE</th> </tr> <tr th:each="ol,row : *{orderLines}" th:class="${row.odd}? 'odd'"> <td th:text="${ol.product.name}">Strawberries</td> <td th:text="${ol.amount}" class="number">3</td> <td th:text="${ol.purchasePrice}" class="number">23.32</td> </tr> </table> <div> <b>TOTAL:</b> <span th:text="*{#aggregates.sum(orderLines.{purchasePrice * amount})}">35.23</span> </div> <p> <a href="list.html" th:href="@{/order/list}">Return to order list</a> </p> </body> </html> There are not so many new things besides this selection of embedded objects:
<body th:object="${order}"> <div th:object="*{customer}"> <p><b>Name:</b> <span th:text="*{name}">Frederic Tomato</span></p> </div> </body> ... what makes this * {name} equivalent:
<p><b>Name:</b> <span th:text="${order.customer.name}">Frederic Tomato</span></p> Source: https://habr.com/ru/post/352536/
All Articles