Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Chameleon templates
Lecture: Layout: In action
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Alright, let's play with this layout concept here
0:02
over to our project.
0:04
And we saw we had a templates folder
0:06
and it has a home_index that I created
0:08
and this layout
0:09
and this layout, this is the shared layout.
0:11
If you look, let's start with the home_index
0:14
that's what we're playing with.
0:15
Notice there's this use-macro layout.pt
0:20
and then, inside
0:21
it's super critical that it's inside
0:23
this fill slot content.
0:25
So what's that about?
0:26
Well, the macro is just the other page template
0:29
that's obvious, but down here
0:32
this defined slot content right there.
0:36
So, if we looked at our view source on this
0:39
let's run that really quick.
0:43
Pull that up again.
0:46
We'll see that there's this class content
0:49
and then here is this stuff
0:50
and it's, here's this outer div
0:53
and it's contained within this column, mid 10
0:56
that's grid stuff from Bootstrap
0:57
I'll talk about that later.
0:59
We have our starter template
1:00
container, row, so a bit here
1:02
and then, column, medium 10
1:05
starter template, container
1:07
column two, and then, here's our 10
1:09
and then, there is that.
1:13
Right?
1:14
If we don't fill it
1:15
it's going to be filled with no content
1:16
but as soon as we do fill it
1:18
then obviously, the contents go there.
1:20
We can have more of these if we wanted.
1:23
Suppose we want to have a section up at the top
1:25
that will be extra CSS, let's say.
1:29
Let's say, additional CSS
1:32
and we just put nothing, like that
1:35
and it's going to put a div, which is kind of funky
1:37
so we can say, omit tag.
1:40
Just put it like this, okay.
1:42
So, it will either have nothing
1:44
or we could go down and fill that slot as well.
1:48
So, let's go down here, and it turns out
1:49
I can reload this and show you
1:52
nothing is changing.
1:54
Notice, we're omitting the tag right there.
1:56
This still works.
1:57
Everything looks the same.
1:58
So, you don't have to fill these actually
2:00
these are optional
2:01
but if we wanted to, inside this page
2:04
we could say, metal fill-slot, and put this
2:08
and we could just
2:12
additional CSS from the page.
2:15
So, some pages you'll find
2:16
like if you're doing a store page
2:18
or some section of your site
2:21
maybe those pages want to have one more CSS file.
2:25
Alright, so if we come here
2:26
and we rerender it, it still looks the same
2:28
but now you can see we've got that right there.
2:32
Now, I think I need one more omit tag.
2:37
There we go
2:38
additional CSS from the page.
2:40
So, this gives us a really structured way
2:42
for these pages to reach back in
2:45
and basically fill in little holes in the template
2:50
but otherwise having the template
2:53
be almost exactly the same except
2:57
for the places where we're allowing
2:58
the individual pages to change the content.
3:01
Probably, would have an additional javascript one
3:03
at the bottom as well.
3:04
Let's go ahead and put that down here
3:07
and it's very likely we want that
3:09
after jquery and stuff.
3:11
Put it down at the bottom.
3:14
Okay, great, this is looking really good.
3:17
Now, let's go and do one more thing.
3:18
Let's create another view here.
3:21
So, I'm going to come, really quickly I'll say.
3:23
Let's create one called home that's called about.
3:26
Alright, something like that.
3:29
The route name is going to be about.
3:31
The template is going to be home_about
3:34
and we'll talk more about routing
3:36
but I have to add a route for this to work.
3:38
So, when I come down here, I'm going to have one.
3:41
It's going to be about is the name
3:42
that's what we used in the decorator we just typed in
3:45
and then /about is the url.
3:48
That right there is the name
3:50
and then, /about is the url.
3:52
Do a little clean up.
3:54
We could just return nothing because
3:57
we don't care about these little packages.
3:59
It's return empty.
4:00
Now, when you're not using request here
4:02
notice PyCharm is complaining it is not used
4:04
and python, you can put an underscore
4:06
to say I know primer here is required
4:08
I don't want to name it
4:09
and that sort of tells the system like
4:11
no I'm not using this
4:13
but just remember to put it back
4:15
to request when you need.
4:17
Okay, great. So, the last thing to do is to create this.
4:20
Well, let's see what happens if I run it
4:21
without the template first.
4:24
So, we come over here.
4:26
I try to go to /about.
4:28
It runs, but it says missing template home_about.
4:32
So, we need to create our page template here
4:34
and the easiest way, honestly
4:37
to do this is to just take one
4:39
of these and just copy and paste.
4:41
So, control c, your command c
4:42
and then, v say home_about
4:50
and we'll just say about.
4:55
So, now if you go refresh it
4:56
look, home_about, and then if we go
4:58
back to home, refresh it, we have our home.
5:02
Let's do one final thing.
5:03
See these things at the bottom here.
5:04
These come from the layout up here
5:08
these right here.
5:11
So, let's change this.
5:13
These are FontAwesome, these little slash i's here
5:16
take care of those in a minute.
5:18
So, let's change these to just be slash
5:21
let's put home right here
5:24
and you'll have another one
5:25
/about, and we'll just put about.
5:29
If we come back here and refresh
5:30
now, I have home.
5:31
I go home, hit about.
5:32
As we navigate back and forth
5:34
the layout is perfect, it's like absolutely perfect.
5:36
So, we're just punching stuff in
5:38
to the holes defined by exactly the same stuff.
5:44
Pretty cool there, okay.
5:46
So, that's how you use these layouts.
5:48
It's really, really easy.
5:49
One convention that I like to use
5:51
that we'll adopt later and we'll talk
5:53
about the organization, but when a page
5:57
is not meant to be shown directly
5:59
it's just there to support other pages.
6:01
Like this layout, nobody ever requests this directly.
6:04
They request this one or that one
6:06
but never that one.
6:07
I like to name this slightly differently
6:09
take a riff off of Python to say this is kind
6:12
of an internal thing and I'll put an
6:14
_layout to indicate no
6:15
this is not a top level page
6:17
it's just there to support things.
6:19
Of course, if you do that, you've got
6:20
to go fix it here and there.
6:24
So, one more time, rerun everything
6:26
technically not necessary, but just
6:27
to be sure, make sure everything is working.
6:30
There we go.
6:31
So, we've got our layout in place.
6:33
This comes as part of the template
6:35
but it's really an important part
6:36
of building any large web application.
6:39
The Talk Python Training site has 62 different templates.
6:43
Imagine if I had to manage the CSS
6:45
and HTML, and the structure across all those files
6:50
and if I wanted to change them
6:51
I probably just wouldn't.
6:53
So, really great, definitely take advantage of this feature.
6:55
It's easy to use, but you have to know it exist.
6:58
So, take advantage of it.