- Building Our Model 7:46
- In Memory DAO implementation 1 question
- Template Reuse and Static Resources 11:04
- Template Reuse 1 question
- Adding to and Iterating a List 13:43
- Redirecting 1 objective
- Using Filters and Request Attributes 8:25
- Using filters 3 questions
- Accessing Specific Items 12:54
- Details 8:34
- URL Parameters 2 questions
- Messaging 6:10
- Build Your Own Flash Messages 14:13
- Review Messaging 3 questions
- Request Handled 1:39
Preview
Video Player
00:00
00:00
Template Reuse and Static Resources
11:04We 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.
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