Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Intro to Java Web Development with Spark!
You have completed Intro to Java Web Development with Spark!
Preview
We know that code duplication is something we want to avoid by all means. So let’s take a look at some best practices that will avoid duplication in your styles as well as your HTML.
Learn more:
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 we're about to add a new page.
0:00
And before we get there, I'd really like
to deal with that problem of duplicated
0:02
code, especially in the HTML boilerplate
that's surrounding all of our pages.
0:06
Now imagine that you wanted
to change the page layout.
0:10
We'd have to go to every single page and
change it.
0:13
Handlebars, as well as most
other templating languages,
0:16
offer a way to do this.
0:19
This usually comes under the name of
template reuse, or template inheritance,
0:21
and-or template inclusion.
0:25
Now, it means the ability to embed
part of a template into another one.
0:28
Also, I know when my designer
coworkers take a look at this site,
0:33
they're not gonna be a fan of the retro
90s look that we've been pushing.
0:36
So let's do this for templates to remove
the don't repeat yourself problem.
0:41
And let's also setup our sites so that
we're able to host our CSS file that my
0:46
designer friends are for sure gonna send
our way upon seeing our masterpiece.
0:50
Okay, so this is the handlebars.java repo,
the public GitHub repo.
0:55
And it has, if we scroll down here,
it has some nice information.
1:03
It has information about what to do.
1:08
One of the things that it's gonna talk
about down here, if we keep on scrolling
1:10
down a bit, it's gonna talk about
template reuse, all the way down here.
1:15
So block and partial helpers work to
provide you template inheritance.
1:21
And that's what we wanna
start looking at here.
1:25
So let's go ahead and
let's click into this.
1:27
This pops over to their blog.
1:29
And what's happening here,
1:32
it describes a bit about partials and
it talks about how they work.
1:35
And what we're wanna do right
here is template inheritance.
1:40
So we're gonna use blocks and partials.
1:43
So they way that it works
is you define a block.
1:46
And then in a base page, and then in
another page you make a partial and
1:51
you override what the block name is,
as long as it has the same name.
1:56
Notice it's in string here.
2:00
So it's a content, so
it's gonna override and
2:03
it's gonna put this
content homepage in here.
2:05
Let's play with it a bit,
I think you'll see.
2:08
So let's go, let's go over, and
2:11
we are going to make a new template and
2:15
we're gonna call it base.hbs.
2:19
So let's grab the content
from index.hbs here.
2:23
Let's grab it and
let's move it over into base.
2:29
Okay, so the first thing that we wanna
do is we wanna make a block here,
2:36
and this is gonna be called the header.
2:42
So if you wanted to,
you could overwrite this
2:43
but probably no one's going to do that.
2:48
So let's see.
2:51
This is, right here,
is where the end of our header would work.
2:52
And then this here,
this is a content block, right?
2:57
So we'll do block "content".
3:00
Because we're in the base here,
we're not gonna put anything in there.
3:05
We're gonna get rid of that.
3:08
And then this would be the footer.
3:10
We'll put this inside of that block.
3:18
Okay, so one thing that's nice
that I'd like to show you
3:21
is you can also embed different
blocks inside of blocks.
3:26
So let's make this block here that
says Hello Students for the title.
3:31
We'll make this be a new block called,
3:38
Title.
3:49
And then we can write a default in here.
3:52
We'll just say the default
Welcome to Course Ideas.
3:55
That makes sense, and
if you want to override it you will, but
3:59
otherwise every page will say that.
4:02
But note that how it's
a block inside of a block.
4:04
Totally fine.
4:07
Okay, so
let's pop back over to our index.hbs.
4:07
And in this form, now we can get rid
of all of the wrapping parts, right?
4:14
So the only thing that we want is
we wanna make sure that we have
4:20
a partial called content.
4:25
And what that's gonna do is that's
gonna pop this information,
4:27
Into the base template, but the way that
it does that is cuz we say base.hbs and
4:34
we put this at the bottom of the file.
4:39
So the partial gets defined, and
4:41
then when the block is defined as content,
it will pop what's in here over there.
4:44
So just a couple things to note.
4:51
First, the partial has a pound sign and
it's a string, and
4:53
then it's the greater than sign for when
you want to include that partial, okay?
4:58
So why don't you pause me and go take
care of our other template, signin.hbs.
5:04
See if you can override
the content in the title.
5:11
Set the title to be signed in.
5:14
Okay, go ahead and
pause me and give it a go.
5:16
Okay, how did you do?
5:20
Let me show you how I did it.
5:21
The first thing that I did is
I came in to sign-in.hbs and
5:22
I wiped away the boilerplate.
5:25
We just had that welcome username, and
5:30
I wanted to make sure that
I inherited from base.hbs.
5:35
And this is a partial called content.
5:41
And then we also wanted
to override the title.
5:49
And the title that we want.
6:03
Sorry about this.
6:06
The title that we're looking here for
is Signed in!!!!
6:08
Okay, let's reboot and see how we did.
6:17
So we'll reboot the server.
6:20
And we'll come over to our page.
6:24
I'm gonna wipe out the cookie,
reload our page.
6:29
Okay, so it says, Welcome Students!
6:34
And if we type in,
We get a 500 internal server error.
6:35
I wonder what I did.
6:44
I forgot to close that partial.
6:56
Okay, so let's restart.
7:02
And then come back.
7:09
I'm gonna refresh.
7:11
And now I see it says
Signed in at the top.
7:14
Awesome, okay, so next up on our to-do
list is to make sure that we can
7:18
serve a CSS file,
a cascading style sheet file.
7:22
Now Sparks made that really easy.
7:26
So first let's make a folder for this.
7:28
All right, so over in our resources.
7:31
Do New > Directory, and
we're gonna call it public.
7:35
And let's add a new directory called CSS.
7:43
So and then we'll add a New
7:49
> File named main.css.
7:55
Now if CSS is new to you, don't fret.
8:00
It's basically a way to make
changes to different elements
8:03
in HTML from a single location.
8:06
It's pretty powerful,
8:08
and we have tons of great resources on it,
should you be interested in learning more.
8:09
And you should.
8:12
Check the teacher's notes.
8:14
So what we'll do is I'm
gonna say anything that's
8:15
inside of the body tag,
we want font-family to be Arial,
8:20
just to make sure that
whatever we're doing works.
8:25
So one final thing that we
need to do is make sure
8:29
that Spark knows where to
find these public files.
8:34
So if we jump back to our main.java,
and right here,
8:40
right when everything starts up,
we'll say staticFileLocation and
8:45
we'll just say public, /public.
8:50
Now what that means is anything that
can't be found will look into this
8:53
public directory first.
8:58
Now static files are files
that do not change or
9:01
do not need all those fancy
dynamic things we're doing, right?
9:04
The server can do all sorts
of caching on them, so
9:07
it's best to let it know where these are.
9:10
So we can access our public
folder through /css.
9:12
So let's add the CSS to our base template
so all of our pages will get that style.
9:15
So in the head tag here,
if you type link:css and
9:26
press Tab, it will add what we need, and
9:31
that's in the /css/main.css directory.
9:36
Note how I didn't include the word public.
9:45
It's not part of the URL.
9:47
Okay, awesome.
9:48
So now every page should have that, so
let's go and let's restart our server.
9:51
And I'm gonna flip back to our web page.
9:57
And when I refresh, there,
did you see the font change?
10:03
And you'll also see, under the sources,
10:08
you'll see that we have
the new CSS is coming in.
10:10
Awesome.
10:13
And you can see on the network that
it's coming in from css/main.css.
10:15
Cool, right?
10:22
I'm sure they're gonna wanna fix the CSS.
10:24
Way to reuse those templates!
10:27
Again, most template languages
support this feature, and
10:29
it's definitely handy on cutting
down on code duplication.
10:31
I find that once you get
your page wrapper in place,
10:35
you can very quickly skin a site
to look however you want.
10:37
Also, now that you can host static files,
10:41
thanks to that call to staticFileLocation,
we can also push out JavaScript.
10:43
JavaScript's the scripting
language the browser will use.
10:48
Again, lots of great resources
are available here, and
10:51
I've given you quick links to
my faves in the teacher's notes.
10:54
So now that we can easily
create a new page,
10:57
let's add a new partial that displays our
ideas and allows us to add a new one.
10:59
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