1
00:00:00,300 --> 00:00:02,630
In the last video you designed a pojo,

2
00:00:02,630 --> 00:00:05,940
a plain old java object
to hold our gif data.

3
00:00:05,940 --> 00:00:08,230
It's a pretty classic class too.

4
00:00:08,230 --> 00:00:13,010
It had four fields, getters and
setters for each field, and a constructor.

5
00:00:13,010 --> 00:00:16,610
There was nothing about the functionality
of this class that couldn't be used

6
00:00:16,610 --> 00:00:20,970
outside of a spring application, or
really outside of any framework.

7
00:00:20,970 --> 00:00:24,380
This is what made it truly a plain,
old Java object.

8
00:00:25,760 --> 00:00:29,100
Now what should we do with these
objects once we create them?

9
00:00:29,100 --> 00:00:32,920
Well, the whole goal of this
application is to present the GIFs, and

10
00:00:32,920 --> 00:00:36,480
associated data,
in a nice way to our users.

11
00:00:36,480 --> 00:00:40,720
To accomplish this, we want to store
our GIF data into GIF objects,

12
00:00:40,720 --> 00:00:44,920
feed them to our timely templates,
then use the spring expression language

13
00:00:44,920 --> 00:00:50,050
in those templates to access that data,
such as names and dates uploaded.

14
00:00:50,050 --> 00:00:52,130
We'll display all of this stuff with HTML.

15
00:00:54,000 --> 00:00:58,120
Since we've coded the GIF model class,
let's create a GIF object and display it.

16
00:00:59,290 --> 00:01:02,550
The first step I'll take is to create
another method in the GifController class

17
00:01:02,550 --> 00:01:04,990
that will handle a single
Gif's detail page.

18
00:01:04,990 --> 00:01:09,150
So I'll go into my controller package,
and open GifController.

19
00:01:09,150 --> 00:01:12,110
You may already have a method like
this from your practice earlier.

20
00:01:12,110 --> 00:01:15,660
If so, you can replace that one
with what we're doing here.

21
00:01:15,660 --> 00:01:17,168
I'll start by creating the method.

22
00:01:17,168 --> 00:01:22,790
Called public string and
gifDetails is what I'll name mine.

23
00:01:24,460 --> 00:01:34,200
At the top what I'm going to do,
is request a mapping to the gif URI/gif,

24
00:01:34,200 --> 00:01:38,587
and then the name of the view we'll
be returning, is called gif-details.

25
00:01:38,587 --> 00:01:41,590
So as a string, I'll return gif-details.

26
00:01:41,590 --> 00:01:46,550
This template is what will be rendered

27
00:01:46,550 --> 00:01:49,470
when the gif-details
controller method is called.

28
00:01:49,470 --> 00:01:52,590
You may have noticed the timely template
that I gave you in the templates

29
00:01:52,590 --> 00:01:55,770
directory, called gif-details.html.

30
00:01:55,770 --> 00:01:57,320
There it is right there.

31
00:01:57,320 --> 00:01:59,320
Before we return the name of the view,

32
00:01:59,320 --> 00:02:03,580
let's create a GIF object here that
we can make available to the view.

33
00:02:03,580 --> 00:02:07,050
So to do that I'll create a new
GIF object, I'll call it GIF.

34
00:02:09,000 --> 00:02:17,530
New GIF, and
the name is going to be compiler-bot.

35
00:02:17,530 --> 00:02:22,170
The data was uploaded is
going to be local date.

36
00:02:22,170 --> 00:02:24,960
We can create a new date,
by using the of method,

37
00:02:24,960 --> 00:02:27,780
which is static in the local date class.

38
00:02:27,780 --> 00:02:33,190
I'll say it was uploaded
in 2015 February 13th.

39
00:02:35,460 --> 00:02:39,440
The next value is going to be
the username, or the user who uploaded it.

40
00:02:39,440 --> 00:02:40,880
I'm just going to drop in my name.

41
00:02:42,220 --> 00:02:44,680
And finally, is it a favorite or not?

42
00:02:44,680 --> 00:02:47,140
I will mark it as a favorite.

43
00:02:47,140 --> 00:02:51,800
Now it looks like we need to
import our Gif model class.

44
00:02:51,800 --> 00:02:56,670
I'm gonna hit Option + Enter here to
take IntelliJ's first suggestion.

45
00:02:58,060 --> 00:03:01,280
Cool, we've got out GIF object
created in our controller method.

46
00:03:01,280 --> 00:03:05,610
Now what you'll notice here, is the name
that I specified for the GIF is

47
00:03:05,610 --> 00:03:10,580
one that lines up with the name of the GIF
file I gave you under the GIFs directory.

48
00:03:10,580 --> 00:03:16,600
So if I go under static, gifs,
there it is right there, compiler-bot.

49
00:03:16,600 --> 00:03:19,100
We've got a bunch of others that
we'll be adding eventually,

50
00:03:19,100 --> 00:03:21,210
that you can check out if you'd like.

51
00:03:21,210 --> 00:03:23,060
Now that our object is constructed,

52
00:03:23,060 --> 00:03:26,310
we need to make it available
to the gif-details view.

53
00:03:26,310 --> 00:03:30,690
The way we do this in Spring,
is to add this to what we call model map.

54
00:03:30,690 --> 00:03:35,100
This is done by including a model map
parameter in the controller method.

55
00:03:35,100 --> 00:03:37,980
So I'll add that into
the controller method.

56
00:03:37,980 --> 00:03:41,030
I'll hit enter, it comes from
the Spring framework right there.

57
00:03:41,030 --> 00:03:41,880
I'll call it model map.

58
00:03:42,910 --> 00:03:46,300
When the Spring framework calls our
controller method as a result of a user

59
00:03:46,300 --> 00:03:49,090
requesting the gif path,

60
00:03:49,090 --> 00:03:54,050
Spring will pass in an instance of
a model map into this parameter.

61
00:03:54,050 --> 00:03:58,910
Then, all we have to do on our code
inside the method, is add it to the map.

62
00:03:58,910 --> 00:04:01,540
Just like we would to a hash map.

63
00:04:01,540 --> 00:04:03,300
With strings as keys.

64
00:04:03,300 --> 00:04:08,228
In fact, if you look at the inheritance
chain of a Spring model map,

65
00:04:08,228 --> 00:04:11,524
you'll find that it
actually is a model map.

66
00:04:11,524 --> 00:04:14,840
So, inside the method after
we created the gif object,

67
00:04:14,840 --> 00:04:17,510
let's go ahead and
add it to our model map.

68
00:04:17,510 --> 00:04:20,720
Using the familiar put method.

69
00:04:20,720 --> 00:04:23,910
I will give it the string key gif, and

70
00:04:23,910 --> 00:04:27,490
I will use as its value
the gif object I just created.

71
00:04:28,590 --> 00:04:32,120
There's no need to include
the model map in our return value,

72
00:04:32,120 --> 00:04:35,010
as the Spring Framework will do
the work of making our model map

73
00:04:35,010 --> 00:04:39,010
available to the templating engine,
which in our case is Thymeleaf.

74
00:04:39,010 --> 00:04:42,820
Speaking of which, let's head over
to the gif details template now.

75
00:04:42,820 --> 00:04:45,660
Let me collapse.

76
00:04:45,660 --> 00:04:48,660
Gifs here, and open gifs details.

77
00:04:50,310 --> 00:04:53,820
Let's scroll down to the div with
the class name of gif detail,

78
00:04:53,820 --> 00:04:55,950
which is where we'll focus our work.

79
00:04:55,950 --> 00:04:57,960
So if you scroll down eventually,

80
00:04:57,960 --> 00:05:02,860
you will come upon this div that
has a class name of gif detail.

81
00:05:02,860 --> 00:05:05,220
This is where we'll be doing our work.

82
00:05:05,220 --> 00:05:08,230
The first thing we're interested
in is displaying the image.

83
00:05:08,230 --> 00:05:11,800
To do this, we need to get
the url correct in the image tag

84
00:05:11,800 --> 00:05:13,350
that appears in the source attribute.

85
00:05:14,640 --> 00:05:16,510
Looking at the source attribute,

86
00:05:16,510 --> 00:05:21,080
we first need to prefix it with the th
name space that you're now familiar with.

87
00:05:22,310 --> 00:05:27,250
Now, inside of the url expression, we can
use what's called a variable expression

88
00:05:27,250 --> 00:05:30,850
to get at our gif object's field values.

89
00:05:30,850 --> 00:05:33,860
This expression is part of
the Spring expression language.

90
00:05:33,860 --> 00:05:39,630
What we're interested in right now is
the URL that goes to the gifs right here,

91
00:05:40,970 --> 00:05:46,305
slash the name of the gif and then .gif.

92
00:05:46,305 --> 00:05:51,245
Currently I have a static value,
or hard coded value entered here.

93
00:05:51,245 --> 00:05:55,375
We like to replace this with the value
that comes from our gift object

94
00:05:55,375 --> 00:05:57,705
that we added to the model map.

95
00:05:57,705 --> 00:05:59,055
So what I have highlighted here,

96
00:05:59,055 --> 00:06:03,755
is the thing that we want to replace
with a Spring variable expression,

97
00:06:03,755 --> 00:06:09,390
which will allow us to get at name
field value of our GIF object.

98
00:06:09,390 --> 00:06:13,660
In Java, we can catonate these
values with the plus operator.

99
00:06:13,660 --> 00:06:17,340
Conveniently, we can also do
that in Thymeleaf templates.

100
00:06:17,340 --> 00:06:21,260
Let me go ahead and type what is going to
take and then I'll explain it briefly.

101
00:06:21,260 --> 00:06:26,531
So I'm going to delete this, and these
two pieces right here, this slash GIFs.

102
00:06:29,910 --> 00:06:33,279
Are the unchanging pieces of this
concatenated string that we want to

103
00:06:33,279 --> 00:06:34,040
leave in here.

104
00:06:34,040 --> 00:06:36,640
So, I'll leave them as string literals.

105
00:06:37,690 --> 00:06:42,630
In between here,
what I want to concatenate is the name

106
00:06:42,630 --> 00:06:45,070
property of the gif object.

107
00:06:45,070 --> 00:06:47,975
I will use what's call
a Spring variable expression.

108
00:06:47,975 --> 00:06:50,320
Gif.name.

109
00:06:50,320 --> 00:06:56,211
The entire expression I just typed is
called a standard expression in Thymeleaf.

110
00:06:58,151 --> 00:07:02,055
It includes a couple string literals,
the things I put in single quotes here,

111
00:07:02,055 --> 00:07:03,237
the last and the first,

112
00:07:03,237 --> 00:07:07,610
as well as a variable expression
that I have highlighted right here.

113
00:07:07,610 --> 00:07:12,300
That's the thing that starts with a dollar
sign, and is enclosed in curly braces.

114
00:07:12,300 --> 00:07:14,930
This syntax is used to
access objects that we've

115
00:07:14,930 --> 00:07:17,470
added to the model map
from our controller.

116
00:07:17,470 --> 00:07:21,330
Remember in the gif controller how
we added an attribute named gif?

117
00:07:21,330 --> 00:07:23,580
The value being a gif object.

118
00:07:23,580 --> 00:07:25,110
Well, back in the template,

119
00:07:25,110 --> 00:07:30,020
we can access model map values
with these variable expressions,

120
00:07:30,020 --> 00:07:33,040
which start with a dollar sign and,
again, are enclosed by curly braces.

121
00:07:34,370 --> 00:07:38,850
In this expression, I'm saying
I'd like to access the name field

122
00:07:40,380 --> 00:07:45,180
of the attribute named gif that
has been added to our model map.

123
00:07:45,180 --> 00:07:49,030
This might lead you to believe that the
Thymeleaf templating engine is directing

124
00:07:49,030 --> 00:07:51,600
accessing our private
field we called name.

125
00:07:52,740 --> 00:07:54,520
This isn't actually true though.

126
00:07:54,520 --> 00:07:58,300
It turns out that Thymeleaf is just
calling what it assumes to be the name of

127
00:07:58,300 --> 00:08:02,350
the gitter git name, and
returning that value.

128
00:08:02,350 --> 00:08:05,930
If you haven't used the standard naming
convention of get, followed by the field

129
00:08:05,930 --> 00:08:09,410
name, for the getter, or
is followed by the field name for

130
00:08:09,410 --> 00:08:14,070
a Boolean getter, or
if you've omitted the getter altogether,

131
00:08:14,070 --> 00:08:17,080
you'll get an error when
this template is rendered.

132
00:08:17,080 --> 00:08:21,085
With these changes made,
I'm going to save my file And

133
00:08:21,085 --> 00:08:23,696
I'm going to stop my boot run task,

134
00:08:23,696 --> 00:08:28,940
if you have it running at the moment,
and I will rerun the boot run task.

135
00:08:32,800 --> 00:08:36,190
And after it is finished
deploying the application and

136
00:08:36,190 --> 00:08:39,810
starting the web server,
I'll switch back to a browser.

137
00:08:42,080 --> 00:08:45,620
And I'll navigate to
the slash gif resource.

138
00:08:47,380 --> 00:08:48,120
Sweet.

139
00:08:48,120 --> 00:08:52,160
There's our gif detail page with the image
source coming from the gif object we

140
00:08:52,160 --> 00:08:54,920
added to the model, and
made available to the template.

141
00:08:55,920 --> 00:08:59,190
If that's not convincing, since this
is the same gif that we were displaying

142
00:08:59,190 --> 00:09:03,320
before, then you can switch it
up to include a different gif.

143
00:09:03,320 --> 00:09:06,260
Using any one of the gifs
that I have given you here.

144
00:09:06,260 --> 00:09:08,550
So if you wanna see the Android explosion.

145
00:09:08,550 --> 00:09:12,316
If you go over to gif controller and
change compiler box to

146
00:09:12,316 --> 00:09:17,570
android-explosion, and as long as the name

147
00:09:17,570 --> 00:09:22,550
that you specify here matches exactly
what comes before the gif extension here.

148
00:09:23,730 --> 00:09:27,500
When you stop and reboot your server

149
00:09:29,790 --> 00:09:35,700
and then go back to your browser and
refresh, you should see, oops.

150
00:09:35,700 --> 00:09:39,730
It looks like I got an error here.

151
00:09:39,730 --> 00:09:43,620
And I think what happened is I
tried to rerun my server too soon.

152
00:09:43,620 --> 00:09:47,910
So I'll go ahead and click boot run again,
and let's see what happens.

153
00:09:47,910 --> 00:09:49,990
Let's see if I get rid of those errors.

154
00:09:49,990 --> 00:09:54,530
It looks like it worked there, so I'll
switch back to my browser, hit refresh and

155
00:09:54,530 --> 00:09:55,300
there it is.

156
00:09:55,300 --> 00:09:56,850
An android explosion gif