Exercise 19: Template Expressions - jkneal/spring-angular-train GitHub Wiki

Learn how to build Spring EL statements. Learn how to create variable expressions in Thymeleaf templates. Finally, learn how to iterate and create conditional statements in Thymeleaf templates.

1. In src/main/resources/templates/shop/index.html, after the blockquote create a section (using the HTML section tag) with the following content:

• An h4 header that displays the name property of store (in the model)
• A paragraph (p) that displays the address.fullAddress property of store
• A paragraph that displays the text 'Owned by ', following by the owner property of store. Also make the owner display in uppercase
• A paragraph that contains a span with CSS classes 'highlight' and 'badge'. The span should display the text 'Open' if the store's open property is 'OPEN', otherwise display the text 'Closed'. Do this using the elvis operator

2. Now after the section you created in step 1, add another section. Within this section add the following content:

• An h4 header with text 'Products'
• A table with 4 columns. The column headers should be 'Name', 'Description', 'Category', and 'Price'. For the rows iterate through the model list property products, and the display the properties name, description, category, and price

3. Again in index.html, wrap the hyperlink with text 'Back' in a div. Move the CSS class 'right' from the a tag to the div, and add the CSS class 'right-align'. When you are done you should have this:

     <div class="right right-align">
      <a th:href="@{/shop/back}">Back</a>
    </div>

4. Within this div and before the hyperlink, add a div with the text 'Please Login to Shop'. Only display this div if the request attribute named 'userSession' is null and the model property 'browsing' is not true

5. After the div you created in step 4, add a second div. This div should contain a span tag that displays the text 'Welcome ' followed by the value for the 'userName' property of the object stored in the request attribute 'userSesson'. Only display the div if the request attribute named 'userSession' is not null

1. Start the training application and go to the app home page
2. Click on the link 'Ex 19'. Verify the returned page looks like the following:

3. Now go back to the menu and click on the link 'Ex 19 Browsing'. Verify you get the same result as in verification #2, except the text 'Please Login to Shop' does not display

4. Now go back to the menu and click on the link 'Ex 19 User'. Verify you get the same result as in verification #2, except the text 'Please Login to Shop' does not display and the text 'Welcome thmeks' does display