1
00:00:00,360 --> 00:00:06,040
Demonstrating that we can serve HTML from
a Java web application is a huge step.

2
00:00:06,040 --> 00:00:09,460
And with Spring and Timeleaf it
really doesn't take that much work.

3
00:00:10,570 --> 00:00:14,580
From here we'll move on to adding assets
to our application to make it look a bit

4
00:00:14,580 --> 00:00:15,150
more appealing.

5
00:00:16,330 --> 00:00:20,360
Right now we have some plain placeholder
text that is completely unstyled.

6
00:00:20,360 --> 00:00:24,610
Let's look at how to add images in CSS
to our project, where we can stick some

7
00:00:24,610 --> 00:00:28,070
custom styling to give our application
a much more polished look.

8
00:00:29,340 --> 00:00:33,610
The first thing we'll need to do is
create a home for our static assets.

9
00:00:33,610 --> 00:00:34,200
Assets for

10
00:00:34,200 --> 00:00:39,230
a web project generally referred to
the images, CSS, JavaScript, videos,

11
00:00:39,230 --> 00:00:43,210
and fonts that will be needed in order for
pages to fully display in a browser.

12
00:00:43,210 --> 00:00:48,130
I'm calling them static because they won't
change after we release our application,

13
00:00:48,130 --> 00:00:50,210
until we come out with a new release.

14
00:00:50,210 --> 00:00:51,500
A standard location for

15
00:00:51,500 --> 00:00:55,960
these assets is under a directory named
static that is placed under resources.

16
00:00:55,960 --> 00:00:59,690
In fact, this is where Thymeleaf will
expect to find them while processing our

17
00:00:59,690 --> 00:01:00,590
template.

18
00:01:00,590 --> 00:01:07,150
So I'll right click the sources directory,
choose new directory,

19
00:01:07,150 --> 00:01:12,290
and name it static, and
there it is right there under resources.

20
00:01:12,290 --> 00:01:18,440
The next thing I'll do is add a CSS file
under the static directory called app.css.

21
00:01:18,440 --> 00:01:23,570
New file called app.css.

22
00:01:23,570 --> 00:01:26,880
You could call this whatever you'd like,
though I'd keep it lowercase and

23
00:01:26,880 --> 00:01:28,060
stay away from spaces.

24
00:01:29,260 --> 00:01:31,470
In the file,
I'll add a few styles for fun and

25
00:01:31,470 --> 00:01:35,490
also make it obvious when our
changes do successfully take hold.

26
00:01:36,970 --> 00:01:38,440
So I'll import an external font,

27
00:01:51,003 --> 00:01:54,850
No worries if you're not
entirely familiar with CSS here.

28
00:01:54,850 --> 00:01:56,745
This stuff I'm doing right now is just for
fun.

29
00:01:56,745 --> 00:01:59,360
Font-family.

30
00:01:59,360 --> 00:02:04,730
I'll choose that Google font
that I had just imported and

31
00:02:04,730 --> 00:02:10,400
fall back on sans serif if the browser
does not have access to the Google font.

32
00:02:10,400 --> 00:02:14,540
Then I'll add some styles to that h1
that I added into our home template.

33
00:02:15,840 --> 00:02:19,610
Padding of ten pixels,
100 pixels, that'd be a lot!

34
00:02:19,610 --> 00:02:23,633
And background color, we'll

35
00:02:23,633 --> 00:02:28,818
say 896bb3.

36
00:02:28,818 --> 00:02:33,700
And the color of the text
will be all white.

37
00:02:36,140 --> 00:02:37,930
Okay, that's good enough.

38
00:02:37,930 --> 00:02:41,680
Again, if you're unfamiliar with CSS I
encourage you to take a look at some of

39
00:02:41,680 --> 00:02:44,940
our front end developments or
web design tracks.

40
00:02:44,940 --> 00:02:46,380
Now with these dials in place and

41
00:02:46,380 --> 00:02:51,730
saved let's flip to the home data HTML and
a reference to the CSS file.

42
00:02:51,730 --> 00:02:56,580
If you're familiar with HTML and CSS, you
know that it's the job of the HTML file to

43
00:02:56,580 --> 00:03:02,340
alert the browser of a linked CSS file
by including just that, a link element.

44
00:03:02,340 --> 00:03:04,870
So I will add that right here.

45
00:03:04,870 --> 00:03:07,840
I'll give myself some space just
to highlight what I'm typing.

46
00:03:07,840 --> 00:03:09,770
And I'll choose link and then a tab.

47
00:03:09,770 --> 00:03:11,410
IntelIJ completes it for me.

48
00:03:12,570 --> 00:03:13,930
At this point, what's missing,

49
00:03:13,930 --> 00:03:17,480
of course is the actual path to
the css file that we created.

50
00:03:17,480 --> 00:03:20,860
As the value to this href attribute.

51
00:03:20,860 --> 00:03:23,070
Instead of entering an absolute path here,

52
00:03:23,070 --> 00:03:28,270
we'll let Thymeleaf figure out our path by
using what's called a link url expression.

53
00:03:28,270 --> 00:03:32,040
As we'll see, Thymeleaf has its own
expression syntax that allows us to

54
00:03:32,040 --> 00:03:35,580
leverage its templating engine to do
things like substitute data from Java

55
00:03:35,580 --> 00:03:40,790
objects, iterate over a Java list
to create an HTML table, and

56
00:03:40,790 --> 00:03:44,460
what we want to do here,
which is generate a URL for us.

57
00:03:44,460 --> 00:03:47,480
To do this,
we'll prefix the href attribute with TH.

58
00:03:48,960 --> 00:03:54,600
Followed by a colon, to notify Thmyeleaf
that it has some processing to do.

59
00:03:54,600 --> 00:03:58,390
In XML, this th is called a name space.

60
00:03:58,390 --> 00:04:01,340
And though Thymeleaf won't care
about this, your IDE might.

61
00:04:01,340 --> 00:04:04,240
Notice that the th appears in red.

62
00:04:04,240 --> 00:04:09,220
If I hover over the error it tells me
that the name space th is not bound.

63
00:04:09,220 --> 00:04:13,400
In order to fix this in your IDE, you'll
need to define the name space as follows,

64
00:04:13,400 --> 00:04:19,930
this goes in your HTML element, xmlns,
that stands for xml name space.

65
00:04:19,930 --> 00:04:24,245
We're gonna define the th name
space as pointing to the following,

66
00:04:24,245 --> 00:04:30,190
www.org.

67
00:04:30,190 --> 00:04:34,340
Then you can save that, and
this red th error is now gone.

68
00:04:36,370 --> 00:04:42,890
Now inside the th href attribute, we'll
put our link url expression as follows.

69
00:04:42,890 --> 00:04:45,950
It starts with an @
followed by curly braces.

70
00:04:45,950 --> 00:04:50,542
And inside the curly
braces I'll say /app.css.

71
00:04:50,542 --> 00:04:55,026
The @ sign indicates to the Thymeleaf
engine that a URL should be

72
00:04:55,026 --> 00:04:57,092
generated here.

73
00:04:57,092 --> 00:05:03,010
When Thymeleaf has finished processing
the template, the th: right here will

74
00:05:03,010 --> 00:05:07,610
have been stripped from the attribute so
that the resulting HTML link element will

75
00:05:07,610 --> 00:05:13,120
only have the appropriate href attribute
which the browser will understand.

76
00:05:13,120 --> 00:05:14,160
Let's save this.

77
00:05:15,410 --> 00:05:18,520
Let's kill our server here
with the stop button.

78
00:05:18,520 --> 00:05:21,310
And let's rerun our
boot task to test this.

79
00:05:23,200 --> 00:05:25,770
And after a few moments there
goes the spring logo and

80
00:05:25,770 --> 00:05:30,500
it looks like our application was
started on Tomcat, our web server.

81
00:05:33,750 --> 00:05:36,840
Let's hit refresh, and boom!

82
00:05:36,840 --> 00:05:41,440
There we can see all our CSS has
successfully loaded, since I see my styles

83
00:05:41,440 --> 00:05:45,280
have been applied with this purple
background and the different font.

84
00:05:45,280 --> 00:05:46,600
Great!

85
00:05:46,600 --> 00:05:51,010
Let's wrap up our overview of static
assets by adding a gift to our application

86
00:05:51,010 --> 00:05:52,580
and displaying it on our home page.

87
00:05:53,600 --> 00:05:57,490
So back in IntelliJ, we're going to create
another folder for these gifs called,

88
00:05:57,490 --> 00:05:59,210
well, gifs.

89
00:05:59,210 --> 00:06:01,720
Let's put this into the static directory.

90
00:06:01,720 --> 00:06:07,620
So I'll right-click the static directory,
choose new folder, gifs.

91
00:06:09,220 --> 00:06:10,240
In the teacher's notes,

92
00:06:10,240 --> 00:06:13,340
I've linked to an animated GIF that
you can download to your computer.

93
00:06:13,340 --> 00:06:17,220
After following the link,
you should see an animated robot GIF.

94
00:06:17,220 --> 00:06:20,570
Save that to your downloads
directory by doing a file save.

95
00:06:20,570 --> 00:06:25,556
Then I'll open my file explorer,
choose downloads, and

96
00:06:25,556 --> 00:06:28,928
I named mine compiler dash bot dot GIF.

97
00:06:28,928 --> 00:06:33,080
What you want to do is drag
this into the GIFs directory.

98
00:06:36,100 --> 00:06:37,200
Drag it in here.

99
00:06:38,760 --> 00:06:40,160
Let's close that finder window.

100
00:06:40,160 --> 00:06:43,390
And then it's asking me if I really
want to move that file there.

101
00:06:43,390 --> 00:06:45,940
Yes I want to move it there.

102
00:06:45,940 --> 00:06:49,030
And it says that file doesn't
currently belong to the project.

103
00:06:49,030 --> 00:06:51,875
I want to make it belong to the project.

104
00:06:51,875 --> 00:06:53,145
So I'll click okay.

105
00:06:53,145 --> 00:06:54,975
And there is might show
a quick preview of it,

106
00:06:54,975 --> 00:06:56,805
which we don't really
need to see in InteliJ.

107
00:06:56,805 --> 00:06:58,765
So I'll close that tab.

108
00:06:58,765 --> 00:07:04,445
Finally, let's go back to our home.html
template, and change the image element so

109
00:07:04,445 --> 00:07:07,565
that it's source attribute points
to the one we just downloaded and

110
00:07:07,565 --> 00:07:09,625
save to the gifts directory.

111
00:07:09,625 --> 00:07:13,555
To do this, we'll prefix the source
attribute with the TH Namespace.

112
00:07:13,555 --> 00:07:19,367
Th: then we'll replace
the current placehold.it

113
00:07:19,367 --> 00:07:25,177
URL with a Thymeleaf URL
starting with the at sign and

114
00:07:25,177 --> 00:07:30,062
enclosed in curly braces, and we'll start

115
00:07:30,062 --> 00:07:34,970
it with/gifs slash compiler-bot.gif.

116
00:07:34,970 --> 00:07:38,820
If you named your image something else,
then use your image name here.

117
00:07:38,820 --> 00:07:42,100
And I'll save that file.

118
00:07:42,100 --> 00:07:47,220
Notice how I'm starting this URL
with the slash gifts directory.

119
00:07:47,220 --> 00:07:51,470
That's because that's where we
saved our file, in slash gifts.

120
00:07:51,470 --> 00:07:56,160
All of these URLs will be
relative to the static directory.

121
00:07:56,160 --> 00:07:58,020
So if you have them saved
in a sub directory,

122
00:07:58,020 --> 00:08:01,820
be sure to start your URL
with the sub directory name.

123
00:08:03,190 --> 00:08:05,950
Again, let's make sure we
save all of our changes.

124
00:08:05,950 --> 00:08:08,378
Let's stop our boot run task.

125
00:08:08,378 --> 00:08:12,351
And let's re-run the boot run task.

126
00:08:14,671 --> 00:08:17,751
And after you see that
the server has started again,

127
00:08:17,751 --> 00:08:20,350
let's switch back to Chrome.

128
00:08:20,350 --> 00:08:24,520
Hit refresh and
we'll see our compiler bot GIF there.

129
00:08:24,520 --> 00:08:26,110
There it is, in all its glory.