Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up