Code Two More Thymeleaf Templates4:13 with Chris Ramacciotti
In this video, you are tasked with creating two Thymeleaf templates: one that lists all categories, and one that serves as a detail page for each category.
We've finally arrived at the last task of the course, and 0:00 that is to code our remaining views. 0:03 Whether you were able to code the category model, repository, and 0:06 controller on your own, or maybe you needed to tweak some things after watching 0:09 my solution, either way, congratulations on sticking with it. 0:13 Remember the goal is not to get it correct in a pristine manner the first 0:18 time through. 0:22 The goal is to stick with rigorous challenges trying your best to tackle them 0:23 as much as you can with the experience and knowledge you have at the time. 0:27 So in either case, I commend you on your persistence up to this point. 0:32 But we're not done yet. 0:37 You still need to update the category.html and categories.html templates 0:38 to use the data that we made available by the category controller. 0:44 I've tried to include descriptive comments in these template files to 0:48 guide you through finishing this project. 0:51 These helpers come in the form of HTML comments and 0:55 they look like the one you see at the bottom of the screen. 0:57 So, have at it. 1:00 Wrap this thing up by coding the two remaining time leaf templates, 1:02 category.html and categories.html. 1:05 When you're done, unpause and I'll show you my solution. 1:09 Let's start with the category.html template. 1:13 You probably noticed that this one is almost identical 1:17 to the home.html template. 1:19 This makes sense because they both are displaying a list of GIFs. 1:21 It's just that this template will present only a given categories GIFs, 1:25 while the home template presents all GIFs. 1:29 Of course, that change actually comes in the controller, and depends upon 1:31 the list we add to the model map, whereas in the template it looks identical. 1:35 The only difference in this template is that there's a div with a class name of 1:40 chip here. 1:44 And I've used the th:text attribute to drop in the category name. 1:45 Pause here if you need to take a closer look. 1:52 And now to the categories template. 1:54 Though this one has a slightly different HTML structure the ideas 1:57 are essentially the same. 2:00 I'm gonna scroll down here to the section that you work on. 2:02 In order to produce the loop that repeats this div element for 2:05 as many times as there are category objects in the categories collection, 2:10 we use this th:each attribute in the div. 2:16 So this is a lot like the Java for each loop. 2:20 For each category object in the categories object 2:23 that comes from the model map produced this div. 2:28 For the anchor down below I had two items to take care of. 2:31 There was the href attribute and then the text that comes between the opening and 2:35 closing anchor tag. 2:38 For the href attribute, I use a th:href attribute so 2:40 that the templating engine will generate that for me. 2:43 And to get the correct URL, 2:46 I concatenate /category/ with the category id that was added to the model map. 2:49 And then for the text that comes between the opening and 2:55 closing anchor tags, I use a th:text attribute and give it the value 2:58 of the name property of the category object that was added to the model map. 3:03 If you want to see how it looks on the web, head over to your browser after 3:08 redeploying, so I'm going to expand this little bit, I'm going to stop my server 3:11 and then I'm going to click boot run again to redeploy. 3:16 All right, it looks like our server is booting nicely and I'm going to switch 3:22 over to the browser and from here I'll click on the categories link. 3:26 And see what we have. 3:30 And there are all three of our categories. 3:32 If I click on any one of the categories name's 3:34 I should see the GIFS that are associated with that category. 3:37 Remember, we arbitrarily added these so 3:41 they may not make sense with the category name. 3:43 I go back to Categories and click on Destruction, 3:46 I should see something different. 3:49 And I see the favorites are marked just as before. 3:51 If either of these pages on your own app looks drastically different from mine, 3:55 you might check the HTML structure and be sure you didn't remove or 3:58 change a class name, or accidentally delete a closing tag. 4:01 Changes like those will affect how the CSS is applied, thereby changing the look and 4:05 the feel of the page in the browser. 4:10
You need to sign up for Treehouse in order to download course files.Sign up