Python for Entrepreneurs Transcripts
Chapter: Build web apps with Pyramid: Applied web development
Lecture: Concept: Shared layout

Login or purchase this course to watch this video and the rest of the course contents.
0:02 Let's review the three major steps you take to create a shared layout,
0:08 It starts by taking a template and converting it to a macro
0:12 that will be the shared layout that defines the overall look and feel of the website.
0:16 Next, we are going to capture this macro in the controller
0:19 and we are going to make it available to all of the views,
0:21 the other dependent page templates
0:24 Finally, on most page templates we are going to use fill slot
0:27 and stuff that individual unique data that makes up that particular page
0:31 into those slots and let the rest of it be filled by the overall macro.
0:35 So step one, we begin by taking just the standard Chameleon template
0:39 created by the starter project, and we converted it to a macro,
0:42 here you can see we are saying metal:define-macro and we give it a name,
0:46 in this case I wanted to call it layout.
0:48 Notice we are applying that to the HTML tag so the entire page,
0:51 and then we define several slots that the dependent pages can use
0:55 to stick in and populate the page,
0:58 here I've highlighted the main content where all the data goes
1:02 but because of these slots are optional,
1:05 it's fine to put additional places of which basically adds additional flexibility
1:09 for your dependent views, in this case we made a place at the end of the layout
1:14 so that we could add additional JavaScript files in the right location
1:17 if the dependent page needed to.
1:21 Step two, in the dependent pages, like here home/, we are going to consume it,
1:26 so all you put in this page basically is use macro and within the use macro,
1:32 we are going to fill the individual slots, so we are going to say
1:35 we are going to fill the content and whatever the page contents are,
1:39 we put that right there, and we are also going to in this case be using
1:42 an additional JavaScript file that is not included into other pages,
1:47 so we are going to include it, here we are going to use AngularJS on this one page
1:50 so we are going to include that script file along with maybe some others
1:53 that aren't shown on the screen.
1:55 Now remember, to wire those together, we have to capture that somewhere
1:58 and then make it available, because we are using this idea of a controller based,
2:02 it's super easy to put it in this one place and it becomes available to our entire website.
2:06 So that takes basically three steps:
2:08 One, we are going to get the renderer from the,
2:11 now remember, we have to use the "web application name:the path",
2:17 that's basically the package name in Python,
2:20 then we are going to get the implementation,
2:22 and we are going to go to the implementation say I'd like to get the macro called layout,
2:26 that's what we called it, and we are just going to store that on a local variable
2:28 called self.layout, that makes it available to the dependent views
2:32 by using macro view.layout.
2:36 Now reasonable question is that seems like a lot of work,
2:38 you have to juggle those things, and whatnot,
2:41 is there just a packages you can include that does this magic?
2:44 Well, yes, there actually is a package you can include called Pyramid Layout.
2:47 But if you go back and look what we did,
2:50 there is literally nine lines of code that weren't just already boilerplate HTML
2:54 and if you go read through here, it's not particularly simple,
2:58 I mean, what they are doing is great, but I feel like it's just overkill
3:02 and there is too much going on here, so you can pick whichever makes you happy,
3:05 we are going to use this simple macro-driven mechanism that we've adopted here
3:10 but if you want to use this package, you can as well.