Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Chameleon templates
Lecture: Layout: In action
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
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.