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
In order to create a dynamic detail page that changes according to a URI, we'll need to define a `@PathVariable` and include a placeholder in the URI of the `@RequestMapping` annotation. In this video, you'll learn exactly how to do that.
Correction
At the beginning of the video (0:51), I say that we are asking for the "compiler-bot" from our repository on each call to the controller method. In code, we're actually referencing the "android-explosion" GIF. Though I misspoke there, the idea is the same: we are fetching the same GIF every time, and we need to be able to fetch a GIF that depends on the request. In short, we need to make our unchanging controller method dynamic!
Working with Attributes in Thymeleaf
To learn more about all the supported attributes in Thymeleaf, as well as custom attributes, check out the Thymeleaf docs for Setting Attribute Values.
Custom Date Formatting
If you'd like to custom format the date, you'll want to alter your Thymeleaf template. By default, you're limited in what you can display with a LocalDate object. What you'll need to do is add the ability to format dates by adding a dialect to the template engine. A nice one to use is org.thymeleaf.extras.java8time.dialect.Java8TimeDialect. To use it, you'll need to take care of three items:
(1) Add the thymeleaf-extras-java8time dependency to your Gradle build file:
compile 'org.thymeleaf.extras:thymeleaf-extras-java8time:2.1.0.RELEASE'
(2) Add the Java8TimeDialect to the template engine upon startup by altering your AppConfig class to include the following
package com.teamtreehouse.giflib;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.context.annotation.ComponentScan;
import org.thymeleaf.extras.java8time.dialect.Java8TimeDialect;
import org.thymeleaf.spring4.SpringTemplateEngine;
@EnableAutoConfiguration
@ComponentScan
public class AppConfig implements CommandLineRunner {
@Autowired
private SpringTemplateEngine templateEngine;
public static void main(String[] args) {
SpringApplication.run(AppConfig.class, args);
}
@Override
public void run(String... args) throws Exception {
templateEngine.addDialect(new Java8TimeDialect());
}
}
Notice I've @Autowired the SpringTemplateEngine, which will be created by Spring at application startup. Then, since I've implemented CommandLineRunner, which requires only an implementation of the run(String...) method, our run method will be called after SpringApplication.run is finished.
In our run method is where you finally see the Java8TimeDialect added to the template engine.
(3) Format a date in your Thymeleaf template
You now have available all the options listed on the dialect's Github repo. The snippets listed there are what you'd use in your Thymeleaf template.
For example, if ${gif.dateUploaded} referenced January 1, 2015, then ${#temporals.format(gif.dateUploaded, 'MMM d yyyy')} would give you "Jan 1 2015".
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
You've come a long way in this one course,
0:00
geared towards developing
a library of animated gifs.
0:02
During the last video, you learned
about dependency injection or DI, which
0:06
allows you to rely on string to provide
component instances when they're needed.
0:11
You used the auto wired annotation to
inject a gif repository into your gif
0:16
controller.
0:20
And string in knew that your
gif repository was injectable,
0:21
because you annotated it with
the component annotation.
0:25
With all that said,
0:29
we have one more item to check off that
will make our detail pages truly dynamic.
0:30
What we like to do is have our
gif details controller method
0:36
serve the gif object that corresponds
to the name with include in the URI.
0:39
Currently our gif details template always
shows the same gif, since each call
0:44
to the controller method, we're asking for
the compiler bot from the repository.
0:49
Let's take that last additional
step toward a dynamic page by
0:54
adding what's called a path
variable to our request mapping.
0:58
Let me show you what I mean.
1:02
Back in the gif controller class, let's
look again at our gif details method.
1:04
What we'd like to do is make
this method serve dynamic data.
1:08
That is, only if the URI requested
is /gif/androidexplosion, would
1:12
we wanna fetch the gif object whose name
field has the value, android explosion.
1:17
But if somebody requested
/gif/compilerbot,
1:23
we'd want to fetch the gif object whose
name field has the value compiler bot.
1:27
At this point though, we are stuck with
whichever name we've hardcoded right here.
1:32
The root of our limitation is that we
are requesting a mapping to a single URI
1:36
without allowing for any variation.
1:41
In this case, we've used /gif.
1:43
String offers us options to expand our URI
mapping to include what are called path
1:47
variables.
1:52
These path variables act as place holders
that we can capture in our method
1:53
parameters.
1:57
Check this out.
1:58
Let's expand our mapping to
include the name of the gif
1:59
by including a place holder or
path variable in curly braces.
2:02
So, add a slash and
then in curly braces, I'll type, name.
2:06
In order to capture the actual value of
the URI after /gif/, we'll need to include
2:11
another parameter in the method annotating
it with the path variable annotation as
2:17
follows, PathVariable String name.
2:22
The order of these
parameters does not matter,
2:31
as string can figure it out either way.
2:33
At this point we've captured
the name placeholder
2:35
into the path variable parameter named,
name.
2:38
And because it's a parameter,
2:43
we can use its value just like any
other parameter value in a method.
2:44
So, in place of android explosion, I could
simply use the parameter value for name.
2:50
Let's take a spin through
everything that is happening here.
2:56
First, the user requested URI
such as /gif/androidexplosion.
2:59
In a browser, the full URL
would look something like this,
3:04
http://
localhost:8080/gif/android-explosion.
3:10
Because this controller method has
requested a mapping to any URI that has
3:17
a pattern /gif/something,
this controller method is called,
3:21
and the spring framework then passes
that something into the name place
3:27
holder which is captured by
the string parameter called, name.
3:32
So, name at this point has
the value android explosion.
3:37
Since name has the value android
explosion, the value android explosion is
3:42
then passed into the findByName method
of the gifRepository object, thereby
3:46
returning the gif object associated
with the name android explosion,
3:51
stored into our variable named gif.
3:56
Which we then add to the model
map under the string gif.
3:59
The gif details timely template is then
entered as a result of returning the name
4:04
of that template.
4:08
Now, hopping over to that template
under gif details, the images
4:10
source attribute now references the gif
object that we added to the model map,
4:15
specifically the gif.name method
is called on that gif object and
4:19
it's concatenated between /gifs/ and .gif.
4:24
Thereby making the source attribute of
the image tag in the resulting HTML read
4:29
in full /gifs/androidexplosion.gif.
4:34
When that HTML is rendered in a browser,
4:41
we should see the the android
explosion gif in the page.
4:43
Lets redeploy and
see if we get that result.
4:48
So, I'll stop my boot run task and
I'll rerun the boot run
4:51
task as soon as I see that output telling
that hey the boot run task is finished.
4:57
There it is right there.
5:03
Lets re run, we'll see that spring logo,
there it is, and
5:07
Tomcat started the [INAUDIBLE]
in just over two seconds.
5:11
Lets go back to our browser and
see what we have here.
5:15
Now, we're gonna have to add
the name of the gif after this.
5:19
So, if I pass it, android explosion,
what I should see is this page.
5:22
Excellent, it looks the same.
5:28
And hey, if you're not convinced by that,
why don't change the name
5:31
after slash gif slash, to see if
you can get another one to show up.
5:35
There's the compiler bot.
5:40
And as you're scrolling through some of
the other gifs in IntelliJ in that gifts
5:41
directory that I gave you, you can
experiment with the other ones as well.
5:45
Here is our Strange Cowboy Coder.
5:54
This is great.
5:58
It works.
5:59
As you can see though,
we have some missing details.
6:00
Down here we have a URL that
doesn't change, the date
6:03
uploaded comes up the same every time
regardless of the one that we enter here.
6:06
I can prove that in just a moment.
6:10
Android explosion,
still October 30th, 2015.
6:13
Still says URL.
6:16
Still says the infamous Craig Dennis,
Java teacher of treehouse.
6:18
So, what we'll do here is take
a couple minutes to finish our work.
6:22
The first thing we'll do is fix
the class of the favorite icon.
6:27
Switching over to the gif details at HTML
every time it says, mark as favorite.
6:31
Now, if I switch back to the browser,
6:37
you can see what'll happen
if I change the CSS.
6:39
So, we have that faint
star there indicating that
6:42
maybe I can mark it as a favorite.
6:45
Now, I should note here that in this
course we will not be implementing
6:47
the feature of actually marking this as
the currently logged in users favorite.
6:50
>> Simply because there is
no currently logged in user.
6:55
That is the topic of another course,
user authentication.
6:59
Let's inspect this element using
the Chrome developer tools,
7:03
then we can see what the HTML in
the browser actually looks like.
7:06
If I drag this panel down, what I'll see
is the actual HTML that produces that
7:11
star icon right there,
and it's this anchor here.
7:16
Now, what you'll notice here is if
you change this class to say unmark
7:20
favorite instead of just mark favorite,
and click outside of there,
7:25
there the icon changes indicating that
we have marked this as a favorite.
7:30
What we need to do is make our Thymeleaf
template produce the class name
7:36
unmark when the gif is a favorite and
mark when it is not
7:40
according to the value of the favorite
field in the associate gif object.
7:45
Let's switch back to IntelliJ and
do just that.
7:51
To do this, we'll make the class name
dynamic by using that th prefix again.
7:53
So before class, th colon.
7:58
You can use this prefix on most HTML
attributes to make them dynamic.
8:01
I've given you a link in the teacher's
notes that shows you exactly which
8:05
attributes are supported.
8:08
Since we need to make
the class name either mark or
8:10
unmark, this amounts to conditionally
prefixing mark with un.
8:12
We can accomplish this in Thymeleaf
with the operator much like in Java.
8:18
That's the question mark and the colon.
8:23
It's like an abbreviated if statement.
8:26
What we wanna do is pre pend,
mark favorite with either un or
8:28
nothing, depending on the value of
the gif object's favorite field.
8:33
So, what I'm gonna do in here is,
I'm gonna enclose this whole string
8:37
marked favorite in a literal, because mark
favorite will always be in the class name.
8:43
It's either gonna be unmarked favorite or
marked favorite.
8:47
And to it, I'm gonna concatenate a value.
8:52
Now this value will come in the form
of a ternary operator expression
8:55
using the question mark and the colon.
8:59
So, the thing you put before the question
mark is the thing that's either true or
9:03
false.
9:06
In this case,
9:06
I'll use one of those variable
expressions to check the favorite.
9:07
Gif.favorite will be either true or
false, so
9:12
it's safe to put before the question mark.
9:14
Now, what do I wanna do
if gif.favorite is true?
9:16
Well, I wanna use the un value.
9:21
So, if gif.favorite is true,
this whole class name will be
9:24
un marked favorite because un will
concatenated with mark favorite.
9:28
Now, if the value is false or
9:32
after the colon here, I'll just use
nothing or an empty string there.
9:34
So if gif.favorite is false, I'll be
concatenating nothing with mark favorite,
9:38
so that the resulting class
will be simply mark favorite.
9:43
Let's save those changes,
stop our boot run task, and
9:47
let's try to redeploy this thing, so
9:52
we can see if our favorite icon is
fixed according to the gif object.
9:54
There we go, our server has started up and
our application deployed.
10:01
I'll go back here, I'm gonna
close the Chrome developer tools.
10:04
And I will hit refresh.
10:08
Now, android explosion is not a favorite.
10:10
Let's switch back to our data repository
and find one that is a favorite.
10:13
So, if I go back to my gif depository,
10:18
I see that indeed android explosion
uses false in it's favorite field.
10:20
But, if I do Ben and Mike,
that one looks like it's true.
10:25
So, let's try that one.
10:30
Ben and Mike.
10:31
What I should see when I hit
enter is this icon down here.
10:33
Change to that favorite icon.
10:38
There it is, it's marked as a favorite.
10:41
So, it appears the Thymeleaf template
is accurately using our favorite field
10:43
to mark or unmark our gifs as favorites.
10:48
Okay, let's go back to
the gif details template.
10:52
And update the username and
the date uploaded.
10:56
I'm going back into the gif details.
11:00
Let's scroll down to the username.
11:03
For the username, what we need to do
is change the text that appears between
11:07
the opening and closing h4 tags.
11:10
That is this text right here.
11:13
We see the username Craig Dennis being
displayed every time because it's simply
11:15
hard coded text in our HTML that
is no way processed by Thymeleaf.
11:20
The way that you can have Thymeleaf
dynamically include text here,
11:24
is by using an attribute in
the opening tag called th:text.
11:29
And inside there is where you put your
expression that will be evaluated by
11:34
Thymeleaf, and will replace the text that
is between the opening and closing tag.
11:38
So, inside the quotes we'll add the
variable expression to grab the username.
11:44
Again, a variable expression
starts with the dollar sign and
11:49
is enclosed with curly braces.
11:51
So in this case, I want gif.username and
we'll do the same for the date uploaded.
11:54
Th:text=, and I a couple values here.
11:58
I'll say uploaded on and
12:05
then I'll concatenate the actual
date it was uploaded on.
12:07
That'll be gif.date uploaded.
12:12
And now there's one more thing we could
update as long as we are in here.
12:18
And if I scroll down that
would be the sharable URL.
12:20
Right now, it's a static piece
of text that just says URL.
12:24
Switch back to the browser,
you can see where that's displayed.
12:28
Scroll down a little bit and
there's the URL right there.
12:31
I'd like for this value to be
an actual URL that somebody could
12:35
use to share this gif, so I'll switch
back to IntellJ and take care of that.
12:39
For the shareable URL, we wanna
replace what's between the opening and
12:43
closing span tags with an actual URL
that comes from the gif object itself.
12:46
Now, I'm gonna use a made up
domain name called gif.fy.
12:52
So, I'll start it with th:text= and
12:58
then I'll concatenate http://gif.fy.
13:02
I just made that up.
13:06
You could put whatever you like here,
slash, and then my closing single quote,
13:08
and I'll concatenate using
a variable expression.
13:13
I'll just say gif.name.
13:16
Now I'll save that,
I'll stop my bootRun task.
13:20
Let see what we have here,
give that a moment to stop and
13:24
then I will click bootRun again,
there's the logo.
13:30
Tomcat started at config loaded.
13:36
Excellent.
13:39
Let's go back to the browser and
refresh and see our results.
13:40
I'm gonna refresh there.
13:44
Cool.
13:47
Check that out.
13:47
The actual username that came from
the gif object is included there
13:48
as well as the date uploaded.
13:52
Here's that shareable URL
that I was talking about.
13:54
Now, if you change this to another name,
let's see that data change.
13:57
This one is also marked as a favorite.
14:03
There's the compiler bot image.
14:05
Here is the actual user name that was
included in a gif object, Ada Lovelace.
14:08
The date uploaded is
different in this case.
14:14
The last one was October 30th.
14:16
And here is the different shared URL here.
14:18
Looking great.
14:22
Now, we have all the pieces of
information you need to each specific
14:23
gif displayed on the page, great work.
14:26
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