Create an Index Page That Presents a List of Data7:28 with Chris Ramacciotti
We want the homepage of Giflib to present a list of all the GIFs we have stored in our repository. In this video, I'll show you how to pass a list to a Thymeleaf template and how to iterate over that list in the template.
We focused most of our Time Leaf template work on the details page and 0:00 we got that one looking pretty great. 0:04 It nicely displays all of the details of the data we stored in the associated 0:06 gif object of the gif repository. 0:10 But I have a question for you. 0:13 How will your users arrive at one of these detail pages? 0:15 Currently our homepage is just a list of unchanging HTML 0:19 that is in no way associated with the underlying data repository. 0:23 What we need to do is rework the homepage so that it loops over the list of gif 0:27 objects in the data repository, displaying a preview of each image, 0:31 which will wrap an applicable link leading to its detail page. 0:35 I'm now in GifRepository.java, and the reason I'm here is that our controller 0:40 method will need a way to fetch a list of all gif objects. 0:44 Since our static final field is private, we can't directly access that. 0:48 So, I'll create a public method that will server as a getter for the private list. 0:53 This will be a pretty straight forward method returning a list of gif objects, 0:58 and I'll call it get all gifs. 1:05 The return value for this is also gonna be very simple, 1:10 it's simply going to return a reference to our list that we created named all gifs. 1:13 Now we can use this method in our gif controller. 1:19 Let's go there now. 1:21 I'm going to expand this method here, and 1:24 I will remove this, this comment from a previous video. 1:28 Now our home page is served via the list gifs method right here. 1:32 So let's get in there and grab the list of gif objects from the gif repository. 1:36 So in here I'll create a new list of gif objects called all gifs and 1:41 I'll store into it what comes back from the getallgifs method. 1:49 To make it available to the time leaf template, 1:55 we need to add a model map parameter, 1:58 then add our list using whatever name we'd like to refer to in the template. 2:01 So the first thing I'll do is add the model map parameter named ModelMap 2:06 and then after I get the list of gafs I will add it to the model map using 2:12 ModelMap.put, and I'm going to use simply the name gifs. 2:17 Pass it my all gifs object to put into the model map. 2:25 At this point, our list can be accessed from the time leaf template, so 2:30 let's head there now. 2:34 Currently, we have three static blocks of 2:38 HTML here that we want to replace with some time leaf template magic. 2:40 The structure that we have in place with the divs and their class names, 2:45 as well as the anchors and the images, we'll want to preserve. 2:48 I'll delete all but one of them and use the remaining one as our template block. 2:52 The crux of what we want to accomplish here lies in the ability to loop or 2:57 iterate over collection in time leaf. 3:00 It turns out time leaf makes this quite simple and 3:02 you'll see these similarities with Java. 3:05 We'll use the time leaf equivalent to what a 4H loop would be in Java. 3:07 To do that, I'll use the th:each attribute in my div. 3:11 And I'll say for each gif in, and here's a variable expression. 3:18 In the gifs collection that was in the model map, and 3:23 everything inside this div is now a part of the body of this four each loop. 3:28 When this template is rendered one of these divs will be produced for 3:35 every object in the collection named gifs. 3:39 And that collection must have been added to the model map, 3:41 which we did from our controller method. 3:44 Now inside the loop, much like Java, we can refer to the variable GIF 3:47 in the same way that we did in the GIF details template. 3:52 So from here, it should look familiar. 3:55 I'll start by adding the href attribute to the anchor, 3:56 which will be our link to the details page. 4:00 So th:href. 4:02 And then here I want to create a link. 4:04 Remember that's the URL link expression starting with the @ sign. 4:06 I'll concatenate /gif/ with 4:10 the gif name as a variable expression, gif.name. 4:15 Next, I'll get the URL of the gif image itself, for 4:20 the source attribute of the image tag. 4:23 So instead of a hard coded reference to compiler bot here, we will concatenate 4:26 a couple values here to either side of gif.name. 4:31 Now those values are going to be string literals, 4:37 just like we did in the details page. 4:41 I'll concatenate the value, /gif/, with the actual name of the gif, 4:48 followed by the gif extension so the the browser can load the static image 4:53 from our gifs directory, which is located in the static directory. 4:58 Notice the subtle difference between the anchor up here, and the image down here. 5:03 The anchor leads to a page in our website and doesn't include the gif extension. 5:08 The image is a static resource in the gif's directory, and 5:13 does include the extension. 5:16 Also, there's /gif here as opposed to the directory name here, /gifs, plural. 5:17 Finally, I'll change the favorite icon in the same way we did for the details page. 5:25 In fact, this will be identical so I'll open that template. 5:30 Find that down here in gif details. 5:34 And let's scroll up to where we included that class name, here it is right here. 5:37 With the TH class, what I'd like to do is copy everything inside of quotes and 5:42 simply paste it right here. 5:48 Now let's not forget to prefix the class attribute with the TH name space, 5:52 and just like that our index, or list page is done. 5:58 Let's test this, though, and make sure everything works as intended. 6:01 And then I'll rerun the boot run task to redeploy our application in a running web 6:07 server, and let's switch back to a browser and see what we have on our home page. 6:13 So, again, I want to go to the home page. 6:19 So I'll delete the gif compiler bot there and there you have it. 6:22 Now we're seeing all the images we've stored in the repository and upon clicking 6:29 on each image, we see it's associated details page, now we're rockin and rollin. 6:34 Hey congratulations, 6:40 you've now created what's called a master detail web application using Java. 6:42 That is, your homepage is a master page, listing all our animated gifs and 6:46 upon clicking on each, you see a detailed view for each one. 6:51 This is a huge step toward becoming a powerful Java web developer. 6:55 So I wanna take a moment to congratulate you on your work so far. 6:59 This stuff isn't easy, so if you're running into problems check out the forum 7:03 or stack overflow for others encountering the same issues, or 7:08 go back through any of the videos for another look. 7:12 Remember, it's not about getting it right the first time. 7:15 You'll learn far more from your mistakes than you will from your successes. 7:18 Embrace those mistakes and 7:22 see them as an opportunity to fine tune your understanding. 7:24
You need to sign up for Treehouse in order to download course files.Sign up