Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Spring Basics!
You have completed Spring Basics!
Preview
The power of Thymeleaf lies in its ability to combine static HTML with dynamic data. During this video, we'll talk about how to feed the data stored in POJOs, into our Thymeleaf templates.
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
In the last video you designed a pojo,
0:00
a plain old java object
to hold our gif data.
0:02
It's a pretty classic class too.
0:05
It had four fields, getters and
setters for each field, and a constructor.
0:08
There was nothing about the functionality
of this class that couldn't be used
0:13
outside of a spring application, or
really outside of any framework.
0:16
This is what made it truly a plain,
old Java object.
0:20
Now what should we do with these
objects once we create them?
0:25
Well, the whole goal of this
application is to present the GIFs, and
0:29
associated data,
in a nice way to our users.
0:32
To accomplish this, we want to store
our GIF data into GIF objects,
0:36
feed them to our timely templates,
then use the spring expression language
0:40
in those templates to access that data,
such as names and dates uploaded.
0:44
We'll display all of this stuff with HTML.
0:50
Since we've coded the GIF model class,
let's create a GIF object and display it.
0:54
The first step I'll take is to create
another method in the GifController class
0:59
that will handle a single
Gif's detail page.
1:02
So I'll go into my controller package,
and open GifController.
1:04
You may already have a method like
this from your practice earlier.
1:09
If so, you can replace that one
with what we're doing here.
1:12
I'll start by creating the method.
1:15
Called public string and
gifDetails is what I'll name mine.
1:17
At the top what I'm going to do,
is request a mapping to the gif URI/gif,
1:24
and then the name of the view we'll
be returning, is called gif-details.
1:34
So as a string, I'll return gif-details.
1:38
This template is what will be rendered
1:41
when the gif-details
controller method is called.
1:46
You may have noticed the timely template
that I gave you in the templates
1:49
directory, called gif-details.html.
1:52
There it is right there.
1:55
Before we return the name of the view,
1:57
let's create a GIF object here that
we can make available to the view.
1:59
So to do that I'll create a new
GIF object, I'll call it GIF.
2:03
New GIF, and
the name is going to be compiler-bot.
2:09
The data was uploaded is
going to be local date.
2:17
We can create a new date,
by using the of method,
2:22
which is static in the local date class.
2:24
I'll say it was uploaded
in 2015 February 13th.
2:27
The next value is going to be
the username, or the user who uploaded it.
2:35
I'm just going to drop in my name.
2:39
And finally, is it a favorite or not?
2:42
I will mark it as a favorite.
2:44
Now it looks like we need to
import our Gif model class.
2:47
I'm gonna hit Option + Enter here to
take IntelliJ's first suggestion.
2:51
Cool, we've got out GIF object
created in our controller method.
2:58
Now what you'll notice here, is the name
that I specified for the GIF is
3:01
one that lines up with the name of the GIF
file I gave you under the GIFs directory.
3:05
So if I go under static, gifs,
there it is right there, compiler-bot.
3:10
We've got a bunch of others that
we'll be adding eventually,
3:16
that you can check out if you'd like.
3:19
Now that our object is constructed,
3:21
we need to make it available
to the gif-details view.
3:23
The way we do this in Spring,
is to add this to what we call model map.
3:26
This is done by including a model map
parameter in the controller method.
3:30
So I'll add that into
the controller method.
3:35
I'll hit enter, it comes from
the Spring framework right there.
3:37
I'll call it model map.
3:41
When the Spring framework calls our
controller method as a result of a user
3:42
requesting the gif path,
3:46
Spring will pass in an instance of
a model map into this parameter.
3:49
Then, all we have to do on our code
inside the method, is add it to the map.
3:54
Just like we would to a hash map.
3:58
With strings as keys.
4:01
In fact, if you look at the inheritance
chain of a Spring model map,
4:03
you'll find that it
actually is a model map.
4:08
So, inside the method after
we created the gif object,
4:11
let's go ahead and
add it to our model map.
4:14
Using the familiar put method.
4:17
I will give it the string key gif, and
4:20
I will use as its value
the gif object I just created.
4:23
There's no need to include
the model map in our return value,
4:28
as the Spring Framework will do
the work of making our model map
4:32
available to the templating engine,
which in our case is Thymeleaf.
4:35
Speaking of which, let's head over
to the gif details template now.
4:39
Let me collapse.
4:42
Gifs here, and open gifs details.
4:45
Let's scroll down to the div with
the class name of gif detail,
4:50
which is where we'll focus our work.
4:53
So if you scroll down eventually,
4:55
you will come upon this div that
has a class name of gif detail.
4:57
This is where we'll be doing our work.
5:02
The first thing we're interested
in is displaying the image.
5:05
To do this, we need to get
the url correct in the image tag
5:08
that appears in the source attribute.
5:11
Looking at the source attribute,
5:14
we first need to prefix it with the th
name space that you're now familiar with.
5:16
Now, inside of the url expression, we can
use what's called a variable expression
5:22
to get at our gif object's field values.
5:27
This expression is part of
the Spring expression language.
5:30
What we're interested in right now is
the URL that goes to the gifs right here,
5:33
slash the name of the gif and then .gif.
5:40
Currently I have a static value,
or hard coded value entered here.
5:46
We like to replace this with the value
that comes from our gift object
5:51
that we added to the model map.
5:55
So what I have highlighted here,
5:57
is the thing that we want to replace
with a Spring variable expression,
5:59
which will allow us to get at name
field value of our GIF object.
6:03
In Java, we can catonate these
values with the plus operator.
6:09
Conveniently, we can also do
that in Thymeleaf templates.
6:13
Let me go ahead and type what is going to
take and then I'll explain it briefly.
6:17
So I'm going to delete this, and these
two pieces right here, this slash GIFs.
6:21
Are the unchanging pieces of this
concatenated string that we want to
6:29
leave in here.
6:33
So, I'll leave them as string literals.
6:34
In between here,
what I want to concatenate is the name
6:37
property of the gif object.
6:42
I will use what's call
a Spring variable expression.
6:45
Gif.name.
6:47
The entire expression I just typed is
called a standard expression in Thymeleaf.
6:50
It includes a couple string literals,
the things I put in single quotes here,
6:58
the last and the first,
7:02
as well as a variable expression
that I have highlighted right here.
7:03
That's the thing that starts with a dollar
sign, and is enclosed in curly braces.
7:07
This syntax is used to
access objects that we've
7:12
added to the model map
from our controller.
7:14
Remember in the gif controller how
we added an attribute named gif?
7:17
The value being a gif object.
7:21
Well, back in the template,
7:23
we can access model map values
with these variable expressions,
7:25
which start with a dollar sign and,
again, are enclosed by curly braces.
7:30
In this expression, I'm saying
I'd like to access the name field
7:34
of the attribute named gif that
has been added to our model map.
7:40
This might lead you to believe that the
Thymeleaf templating engine is directing
7:45
accessing our private
field we called name.
7:49
This isn't actually true though.
7:52
It turns out that Thymeleaf is just
calling what it assumes to be the name of
7:54
the gitter git name, and
returning that value.
7:58
If you haven't used the standard naming
convention of get, followed by the field
8:02
name, for the getter, or
is followed by the field name for
8:05
a Boolean getter, or
if you've omitted the getter altogether,
8:09
you'll get an error when
this template is rendered.
8:14
With these changes made,
I'm going to save my file And
8:17
I'm going to stop my boot run task,
8:21
if you have it running at the moment,
and I will rerun the boot run task.
8:23
And after it is finished
deploying the application and
8:32
starting the web server,
I'll switch back to a browser.
8:36
And I'll navigate to
the slash gif resource.
8:42
Sweet.
8:47
There's our gif detail page with the image
source coming from the gif object we
8:48
added to the model, and
made available to the template.
8:52
If that's not convincing, since this
is the same gif that we were displaying
8:55
before, then you can switch it
up to include a different gif.
8:59
Using any one of the gifs
that I have given you here.
9:03
So if you wanna see the Android explosion.
9:06
If you go over to gif controller and
change compiler box to
9:08
android-explosion, and as long as the name
9:12
that you specify here matches exactly
what comes before the gif extension here.
9:17
When you stop and reboot your server
9:23
and then go back to your browser and
refresh, you should see, oops.
9:29
It looks like I got an error here.
9:35
And I think what happened is I
tried to rerun my server too soon.
9:39
So I'll go ahead and click boot run again,
and let's see what happens.
9:43
Let's see if I get rid of those errors.
9:47
It looks like it worked there, so I'll
switch back to my browser, hit refresh and
9:49
there it is.
9:54
An android explosion gif
9:55
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