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
Responding to a URI request with a String message proves that we're able to see our server response in the browser. In this video, we enhance our response with Thymeleaf, which is an HTML templating engine that allows us to combine static HTML with dynamic data, sending the result as the server response.
Introduction to HTML and CSS
teamtreehouse.com/library/introduction-to-html-and-css
Web Design Track
teamtreehouse.com/tracks/web-design
Thymeleaf Templates and XML Compliance
Thymeleaf is based on XML processing, and as such can be used to do much more than create HTML files. But this also means that, by default, HTML templates must by XML-compliant. So, some of the syntax that passes as valid HTML5 won't work in Thymeleaf without custom configuration of the templating engine in Spring.
If you want to use HTML5-style syntax instead, you'll need to do the following:
- Add a properties file at src/main/resources/application.properties
- Add the following text at the top:
spring.thymeleaf.mode = LEGACYHTML5 - In the dependencies block of build.gradle, add Neko HTML as a runtime dependency:
runtime 'net.sourceforge.nekohtml:nekohtml:1.9.22'
Now you should be able to use HTML5 instead of XML-compliant markup in your Thymeleaf templates. For example, instead of
<link rel="stylesheet" th:href="@{/app.css}"/>
You could omit the self-closing slash:
<link rel="stylesheet" th:href="@{/app.css}">
This can be a huge time saver in converting static HTML5 files from front-end designers into Thymeleaf templates.
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
So, you were able to successfully use your
spring application to respond to a user
0:00
request, the home page
with a plain message.
0:05
Great, but
it's not that impressive looking.
0:08
Text messaging is nice on your phone, but
0:12
when it comes to websites,
we're leaving a lot to be desired.
0:14
After all, this is the web with all
sorts of capabilities when it comes to
0:18
presenting information.
0:21
If you have any experience with
front end web development,
0:24
you know that there's some fanciness
that we can take advantage of.
0:27
I encourage you to check
out our web design and
0:31
front end web development tricks for
a great foundation in HTML,
0:33
CSS, JavaScript, and
user interface design.
0:37
I've put some links to these in
the teachers notes to get you started.
0:41
As a web developer,
0:46
even if you're working primarily on the
back-end in a language like Java, you will
0:47
most definitely benefit from a foundation
in front-end languages like HTML and CSS.
0:51
In the past, people have used Java
server pages, Java server faces, or
0:57
struts to transform Java
application data into HTML.
1:02
However, libraries newer than those
have since come into the arena.
1:06
The way we're going to deliver
HTML to our users web browsers
1:11
is with a third party
tool called Thymeleaf.
1:15
Thymeleaf is a templating engine
that allows you to write HTML
1:18
while including place holders for
data that will come from Java objects.
1:22
These place holders in our templates will
leverage this spring expression language
1:26
to access the fields of your job
objects from its getters and setters.
1:29
Let's take a stab at doing this and
1:34
then circle back to how
it's all all put together.
1:36
Because incorporating the Thymeleaf
templating engine requires an addition
1:40
library, we'll need to alter our
cradle build file to include it.
1:43
So I'll open that.
1:47
Scroll down to dependencies.
1:49
And what you'll want to do is
replace the one that you have here
1:51
with a different one.
1:55
Now the name is largely the same,
1:56
except I'm going to delete
everything after starter dash.
1:58
So it should read
org.springframework.boot:spring-boot-star-
2:01
ter-thymeleaf.
2:10
Now you might notice that I omitted
the version of the library that usually
2:12
appears after another colon at
the end of what I just typed.
2:16
It turns out that by using
the spring boot cradle plugin,
2:20
we can omit versions on our dependencies.
2:24
Pretty cool.
2:26
I'll save this file, and before I hit
refresh I'm going to go ahead and
2:28
stop my server here.
2:32
I should see the stop button
right now if I have one running.
2:33
I'm going to click stop.
2:37
After a few moments you should see
a message in the console down here
2:38
that indicates that the task is stopped.
2:42
Now, with my build files saved,
and make sure you have that saved,
2:44
I'm going to click refresh.
2:49
After hitting refresh you should see
a couple of references to Thymeleaf have
2:55
been pulled from Maven Central.
2:58
To see these, let's expand external
libraries and see if we can find them.
3:00
I'm going to scroll down and
there it is right there.
3:04
I see a reference to Thymeleaf there,
as well
3:08
as from the spring boot starter Thymeleaf,
the exact one that we listed here.
3:13
So you'll see a handful of references
to those as you scan through.
3:18
Now that we've seen these, I'm going to
go ahead and collapse external libraries.
3:23
And next, because we'll be adding to our
applications on HTML files which will
3:27
serve as our Thymeleaf templates we'll
need to create a directory for them.
3:32
Now, unless we configure our application,
otherwise,
3:36
these templates are expected to be found
in source/main/resources/templates.
3:39
So let's go ahead and
create that directory.
3:44
We already have a main directory, so
I'll right click on that and create a new
3:48
directory and enter resources/templates.
3:52
And there we have the resources directory
under main and under resources templates.
3:58
Now that we have a place to put our HTML
files, let's go ahead and create one for
4:04
the homepage.
4:08
To do that, I'll right-click on
templates and choose new HTML file.
4:09
I'll simply name this one home.html.
4:16
IntelliJ does a nice job of giving us the
scaffolding of an entire HTML page to save
4:21
us the trouble of typing.
4:26
But, you'll want to be careful here.
4:28
Thymeleaf, expects HTML
templates to be XML compliant,
4:30
which in this specific case
means that every opening tag
4:35
must either have an associated
closing tag, or must be self-closing.
4:39
The one that's of particular
importance here is the meta tag.
4:45
This is HTML5 compliant, but
it is not XML compliant.
4:50
It needs to be XML compliant
to work in Thymeleaf.
4:55
There's one simple addition we
can make here to the meta tag.
4:58
We can add a forward slash to make this
whole element a self closing element.
5:01
At this point, let's change the title and
add some placeholder stuff to the body,
5:07
just to prove that we can
get this thing working.
5:11
So under title, I'll say, giflib, and
maybe I'll do the vertical bar and home.
5:14
And under the body,
I'll add an H1 element that says home,
5:20
followed by a paragraph,
and we tab that in here.
5:27
A paragraph, and
IntelliJ has a nice shortcut for
5:31
lorem ipsum, you just type lorem and
then hit Tab.
5:36
It gives us a bunch of placeholder text.
5:38
Finally, I'll stick an image
in there just because I can.
5:41
Image source equals say,
http://placehold.it.
5:44
This is a placeholder image service.
5:50
I want a 300 by 300 image.
5:55
And let's stick a color in there, 5fcf80,
5:59
and then text color in there.
6:04
I'll put an alt to read as well, why not.
6:07
Logo, oops inside quotes.
6:10
Make sure this is self-closing.
6:14
You could use a simple tag like this for
HTML5 compliance,
6:16
but this has to be XML compliant.
6:20
Get that slash in there, so
it's a self-closing element.
6:22
Great.
With that done,
6:26
I'm going to save my changes and
hop back to the GIF controller.
6:27
We need to alter the list
GIF methof in two ways.
6:32
First, let's delete
the response body annotation.
6:36
If you recall, we added this annotation so
that the spring framework would use
6:43
the string we return as our response,
without any further processing.
6:46
Since we do indeed need further
processing, by Thymeleaf,
6:51
in our case, we'll remove that annotation.
6:54
Next, in order to be sure that Thymeleaf
knows which view to use, we'll return
6:59
a string that matches the name of the HTML
template minus the file extension.
7:03
In other words,
we simply need to return the string home,
7:07
since I named my file home.html.
7:11
This information will be enough for
the Thymeleaf View Resolver
7:15
to figure out which HTML file
should be used for the response.
7:19
And that's it.
7:23
Let's test this by stopping our current
server, if you have it running.
7:24
I already stopped mine.
7:28
And let's rerun the boot run task.
7:29
After your server has started, switch over
to a browser and refresh your homepage.
7:35
And check it out.
7:43
There's all of our HTML with our H1,
our lorem ipsum paragraph, and our image.
7:44
Now that you've successfully served HTML,
7:51
let's take a peek at what's
really happening here.
7:54
The process begins with the user making
an HTTP request to our web server.
7:57
Based on the request, the server knows,
probably from the host name,
8:02
to hand the request over
to our application.
8:06
In our application a dispatcher
servlet receives the request and
8:09
the URI is examined.
8:13
From the URI, the dispatcher servlet
determines which controller, and
8:15
which of its methods,
8:19
is mapped to the URI requested by
using the RequestMapping annotation.
8:20
As a result,
8:26
the mapped controller method is called,
which will perform any desired actions and
8:26
gather data to be used in putting together
a response to the original HTTP request.
8:31
That data will be feed to what's
called a Spring View Resolver.
8:37
Because our app is configured to use
Thymeleaf, Spring will then pass our data
8:41
to the proper Thymeleaf template, jam the
data into the proper place holders, and
8:46
produce a final HTML product that will
handed back to the dispatchers servlet.
8:51
The dispatcher servlet then
hands it back to the web server.
8:56
With its HTML,
the web server creates an HTTP response,
8:59
with a status code of 200, meaning okay.
9:03
It includes the HTML from our
application in the response body.
9:06
The entire response is then sent to
the client in response to the original
9:10
HTTP request.
9:15
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