13.10. Exercises: Thymeleaf Views

In the chapter, we started working on an application for tracking various coding events around town.

Open up your coding-events project in IntelliJ.

13.10.1. Getting Started

From your own add-bootstrap branch, create and checkout a new branch called my-views-exercises-solution.

Note

If you need to make sure your code matches ours to start, look at the add-bootstrap branch on coding-events-demo.

Now, let’s add descriptions to our events!

13.10.2. Expanding our Events Schedule

1. Comment out your previous code in the displayAllEvents method.

   Check your solution

2. In the videos, we learned how to use templates to display the elements in a static list called events. Let’s make our events list a HashMap! This enables us to add descriptions to our events.

3. Fill your events HashMap with the names and descriptions of 3 coding events around town.

   Check your solution

4. Using th:block and th:each, put together the events and their descriptions in a table as opposed to an unordered list.

5. Use fragments to store the address of the new tech hub where all of the programmers are hanging out. Use th:replace in your main template to bring in the address as a third column in your table. You may need to create a new fragments.html.

   Check your solution

6. Add some CSS to style your table to make it easier to read and center it on the page. You may need to create a new styles.css as well. Make sure to connect styles.css to the appropriate template with th:href.

13.10.3. Bonus Mission

Try to add one more column to the table with pictures for each coding event. You need to use th:href to pull in pictures in the appropriate template.