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
Let’s explore how to capture a request from the web browser and send a response back. This is equivalent to outputting in a standard application. Let’s get the Handlebars template engine installed, so you will not need to create a huge escaped string.
Learn more:
- Treasure's Introduction to HTML and CSS is a great place to get started!
-
Handlebars JS has been ported to Handlebars Java.
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
Okay, so first thing's first,
we need to make that page prettier.
0:00
We need to let the browser do what it
does best, render a nicer looking page.
0:04
And the way that we're going to do that
is to send down things in a language that
0:08
the browser understands,
Hyper Text Markup Language, or HTML.
0:12
If you're new to this
web application world,
0:17
this HTML language might
be new to you as well.
0:19
Now, chances are you've
heard of this before, and
0:22
if you've done any JavaFX programming,
you've probably toyed around with FXML.
0:24
Now the good news here is that
although this is a new language,
0:29
it's not that challenging to pick up.
0:33
I mean, you already know Java this
should be a walk in the park.
0:35
I'm not gonna go too far
in depth with HTML, so
0:38
if you'd like to know more please
check the teacher's notes.
0:41
We'll go over what we need to
know to build this project.
0:44
But as always,
there's much more to learn out there and
0:46
we've got a ton of awesome
resources here on Treehouse.
0:49
So we're going to need to
send down data to the client.
0:52
Are we just gonna have to concatenate
a bunch of strings in our method?
0:55
That would work, but man it sure would be
hard to maintain all those plus signs and
0:59
new lines.
1:03
So there is a way around this,
and a way to make very nice,
1:03
maintainable design code.
1:07
It's a thing that frameworks usually
provide that we talked about earlier.
1:09
That's right, templating.
1:11
So Spark allows you to plug in several
different templating languages.
1:13
Let's go take a look at how to do that.
1:17
So back here on the Spark documentation,
if we scroll down over here,
1:20
we can see that there's Views and
Templates.
1:23
As you can see, there's a handful of them.
1:28
And your choice here will
usually depend on whatever your
1:30
team is most comfortable with or
whatever you might feel like learning.
1:33
They all have similar feature sets.
1:36
Now most of them have silly names.
1:39
This Mustache library here
1:40
Is named after the way it declares
the dynamic bits using curly braces.
1:44
If you look at a curly brace sideways,
1:49
just kind of turn your head,
they kind of looks like mustaches, right?
1:51
Pretty silly, I know.
1:55
Well, it gets sillier.
1:56
There's an offshoot called handlebars,
like a style of mustache.
1:57
Now personally,
this is one of my favorites, and
2:02
not just because of the silly joke.
2:04
I really like how you can use the same
templating language in both Java and
2:06
on the client side in JavaScript.
2:10
Like I said though,
it's totally up to you and your team.
2:12
Well, except for now,
cuz we're gonna use Handlebars.
2:15
So, check the teacher's notes
if you'd like to dive deeper.
2:18
Okay, so this Maven dependency is very
similar to the one that we have here.
2:21
Except it is spark-template-handlebars,
everything else is the same.
2:28
So I duplicated that with command d.
2:37
Okay, so
let's refresh our Gradle dependency.
2:40
Open up our Gradle window over here.
2:42
Here we go.
2:44
Perfect, and now it's over here.
2:47
Here's the handlebars library.
2:49
Okay, now before we take off and
start coding,
2:51
let's install a handlebars plugin
to the IntelliJ IDEA editor.
2:54
Now there are lots of nice
plugins available for editor.
2:58
So, if you choose IntelliJ Preferences or
3:01
command-comma as it says here,
you will see a Plugins section here.
3:05
And if we start typing up here,
start typing handlebars.
3:10
Let's choose, Browse search for
non-bundled plugins.
3:16
Again, Handlebars/Mustache, here it is.
3:21
Okay, and then we'll click install.
3:26
Cool.
Now when we create a file type with
3:28
the extension of HBS or Handlebars,
it'll color code for us.
3:30
Okay, so now what?
3:35
Let's flip back to that
documentation that we had.
3:38
Sorry, actually I'm gonna go ahead,
I'm gonna restart this.
3:43
When you install a new Plugin,
obviously you need to restart.
3:46
While we're doing that let's flip
back over to the documentation here.
3:50
And let's click on the Handlebars and
3:54
you'll see that there's an example
here in source and example on GitHub.
3:58
So let's click over there, we'll take a
look at some of the shared code over here.
4:02
Okay, so it looks like this comment here,
4:07
this hello.hbs file is in
the resources/templates directory.
4:10
And see how it, here it says it's passing
in the name of the hello.hbs., so
4:15
that's where it's at.
4:20
So let's go ahead and
let's flip back over.
4:22
And let's add to our
resources directory here.
4:25
Let's make a template directory,
templates.
4:32
And in the templates
directory let's make a file.
4:39
And we are going to call this index.hbs.
4:44
Now, index is the standard way to
talk about a non-named resource,
4:48
that forward slash, right?
4:53
It's the index for that page.
4:56
Now, Web servers typically look for
index.html if the file is not specified.
4:58
So if we follow that,
our team will know where to look.
5:02
Okay, see the cute little
mustache on the icon there?
5:07
So, one nice thing about our editor
is we can just pop out a really
5:10
quick wrapper for HTML, cuz all
the HTML needs to be in a single place.
5:15
So we're gonna html:5.
5:19
And now when I press Tab,
it will automatically float up,
5:23
which is pretty cool.
5:26
And if I press Tab, and
I jump to different things,
5:27
now I jump to where the title is.
5:29
So, this where you wanna say,
Hello Students.
5:30
And that's the title of the webpage,
right?
5:34
When you're mousing over a website,
that has a title.
5:35
This is HTML, you might not have
seen this before and like I said,
5:41
learning this is a little
bit out of scope.
5:44
But notice how there is opening tags and
then there's these closing tags, right?
5:47
There's that forward slash and
5:51
then this, and then this head here,
it has a child tag, right?
5:52
It has this meta tag and it has
the title tag then it closes the head.
5:55
So it's opening and closing of tags.
6:00
Okay, so let's add a new tag here.
6:04
Again with the editor,
if we press h1 and then press tab,
6:07
it will automatically do the closing for
you, so h1 is for a heading.
6:11
And there's different levels of them, so
6:15
the biggest one on the page is an h1,
the next heading is an h2, and h3.
6:17
It's kind of a semantic
way of explaining a page.
6:20
So let's say Welcome Students
in the biggest heading possible.
6:25
And this here is called inner text, right?
6:29
So I added a value inside
between these two, inner text.
6:30
Okay, so
let's make our route use our new template.
6:35
Okay, so let's go back in here.
6:38
This static-get-method here has
quite a few overloaded counterparts.
6:41
So let's pop back to that
GitHub example one more time.
6:45
And notice here how it's passing a new,
6:49
third parameter called
the HandlebarsTemplateEngine.
6:51
It's also returning,
instead of returning a string,
6:54
it's returning this ModelAndView thing,
and it's coming from Spark.
6:57
So, the first parameter is is
the model which we don't have yet, so
7:00
let's not worry about it.
7:04
But the second parameter is
the name of the template, and so
7:05
ours would be index.hbs.
7:07
And then there's this new parameter
here that's the template.
7:09
So let's go ahead and
let's grab that TemplateEngine bit.
7:12
And then let's flip back over to our code.
7:15
And let's make our Lambda be a new line.
7:21
Style Lambda and then I'm gonna drop in
what I copy and pasted from that get.
7:25
So, HandlebarsTemplateEngine, and
7:30
it knows what we're talking about cuz
we imported that, so that fixed that.
7:32
And this needs, this is now expecting
us to return a new ModelAndView.
7:37
There, that's that,
Autocorrected, this word.
7:44
And we're gonna pass in a null.
7:47
And in the string that we wanna pass in,
we wanna pass in index.hbs.
7:49
Okay, so this reads,
7:55
when something comes in matching the path
of forward slash, run this route.
7:57
Which at this moment,
builds a new ModelAndView object.
8:03
And only has the view portion, or
8:07
template name, which exists in our
resources templates index directory.
8:09
And it renders it using
the HandlebarsTemplateEngine.
8:12
Power packed little function call,
isn't it?
8:18
Okay, so let's kill this hello method,
we don't need this anymore.
8:20
And let's go and run this.
8:24
Restart the server if you have it running,
8:27
I did not, because I had to restart
after I installed the plugin.
8:29
Okay, so let's go and
look at what slash forward slash does.
8:32
Nice, it feels a bit like
the early 90s up in here.
8:38
But hey, it's retro these days,
it's like a 90s dance party.
8:41
Okay, so now we wanna make this
a little bit more personal.
8:45
We wanna ask for their name, right?
8:48
So, why don't we present them with a form?
8:50
So if we go back to our template.
8:53
And right under this h1 here,
I'm gonna type form and then do a tab.
8:58
And we're gonna do an action and
9:04
we're gonna make it go to
a place called sign-in, okay?
9:06
It's yet to be defined and we wanna
make sure that when somebody does this,
9:11
that they POST to it,
they use an HTTP POST, right?
9:16
Because remember, those are the verbs.
9:19
So we're gonna say method="post", okay?
9:21
And we need a field,
we need an input field, and
9:30
the type is definitely gonna be text.
9:34
And let's put some placeholder
text in there, and
9:36
that's what will be in
the field before they type it.
9:39
So, we'll say what's your name?
9:42
And we're gonna name the field username.
9:46
Let's ask specifically for their username.
9:52
Now I am using HTML5, right?
9:57
We defined this as HTML5, so
we don't need to close this tag.
9:59
But if you might see something like this,
this is self-closed tag.
10:02
Because there's not a child,
we can say that this is auto-closed here.
10:07
We used HTML5, we don't need to,
10:10
I just wanted to show you that
in case you come across it.
10:11
Okay, and then we're gonna add a button,
and we're gonna make it say sign-in,
10:14
that's all our form does.
10:19
Okay?
So, if we restart the server,
10:24
do not forget to restart the server.
10:27
Let's go over and
take a look now at our page.
10:30
Awesome, there it is.
10:34
And if we fill this in, my username
is craigsdennis, and I click Sign In.
10:36
Of course,
10:40
we're gonna get a 404 Not found, which is
what happens when a page can't be found.
10:41
So, let's leave ourselves
a TODO to fix that.
10:45
So a comment in HTML looks like this.
10:50
I'm gonna put the comment
up above the form.
10:54
And we'll say, TODO.
10:59
We need to add the sign in.
11:05
Awesome!
11:08
We got our route rendering
our Handlebars template.
11:09
We've yet to explore the power
of the templating language, so
11:13
let's get to that here in a bit.
11:15
One thing I wanted to reiterate is that we
just completed the Request-Response Loop.
11:17
We requested the forward slash resource,
and the response was made.
11:23
While the page appears to be
sitting in there waiting for
11:27
a response, the server couldn't care less.
11:29
Let's build a route that handles
that post from the sign in form.
11:33
Now remember, this handling of the POST,
it could be coming from anywhere.
11:36
This concept of leaving a page
that the user can interact with to
11:41
continue their journey, is just one way
to keep things moving seemingly forward.
11:44
It's a common pattern in
website user experience or UX.
11:49
Let's keep things moving by
handling that form submission.
11:53
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