Building data-driven web apps with Pyramid and SQLAlchemy Transcripts
Chapter: Chameleon templates
Lecture: Layout: In action

Learn more about this course
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.