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
If you need to make sure your code matches ours to start, look at the
add-bootstrap branch on
Now, let’s add descriptions to our events!
13.10.2. Expanding our Events Schedule¶
Comment out your previous code in the
In the videos, we learned how to use templates to display the elements in a static list called
events. Let’s make our
eventslist a HashMap! This enables us to add descriptions to our events.
eventsHashMap with the names and descriptions of 3 coding events around town.
th:each, put together the events and their descriptions in a table as opposed to an unordered list.
Use fragments to store the address of the new tech hub where all of the programmers are hanging out. Use
th:replacein your main template to bring in the address as a third column in your table. You may need to create a new
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.cssas well. Make sure to connect
styles.cssto the appropriate template with
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.