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