Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Chameleon templates
Lecture: Template demo

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 Now that we've opened this project
0:01 it's right here in our recent projects
0:03 so we'll come back to it.
0:05 Notice also PyCharm says here's an unregistered
0:09 vcs or git root, so we can just add that
0:12 and it'll turn on git integration.
0:14 Notice here we've got our branching and stuff is now detected.
0:17 We won't do anything with that really
0:18 but just typically a good thing to say yes
0:21 add this GitHub root, or this git root, okay.
0:26 So we are ready to do some work here
0:28 because when we created this project with Cookiecutter
0:31 and it asked the question
0:33 what template language do you want to use
0:34 and we said I want to use Chameleon
0:37 we have these pt or page templates here.
0:39 If we had chosen Jinja2
0:41 we would have I think it's just .html files
0:46 but inside it's Jinja2.
0:47 And Mako, I think there is mk or mak
0:51 Anyway you'll see different extensions here.
0:53 So first of all, there are actually two layouts here
0:56 but in the views, there is only one view
0:59 what's the deal?
1:01 You notice we are actually pointing at this view.
1:04 And the layout, this is not full html, but it's seeing
1:09 there is a wrapper, standardized html
1:12 that is used for the whole site called layout
1:14 which has all of our doctype, html, etc.
1:19 on there, so we will come back to that later
1:21 but here's the contents of the page
1:23 that we want to work with, there's Pyramid
1:25 our application that was generated by Cookiecutter.
1:28 So what I want to do, I want to take data passed
1:31 in here and render it.
1:34 So let's just go and we'll
1:35 place this little h1 part, we'll just say this will be
1:39 some packages and we are going to pass
1:42 in some fake package data.
1:45 And I just put a div, and I'll say todo put packages here.
1:52 Okay, great, so let's start by looking at the view
1:55 I want to pass little data here
1:56 I mean this is mostly about the templates
1:58 but the templates are not interesting without data.
2:01 So let's go over to our view, and instead of calling it this
2:05 which drives me crazy, let's call it maybe home_index
2:07 or just index or something like this.
2:10 I'll give you the same thing here
2:12 this could just be home_index.
2:17 We can rename that here, but rename is under refactor
2:20 so we'll just call it home_index.
2:24 There we go, okay so you can sort
2:27 of see the tying together of all these here.
2:30 So right now we are passing projects
2:32 which wasn't actually used in the template
2:34 and we are going to pass something more aggressive.
2:37 Let's call this packages and let's put some data here.
2:42 And I could just type it in, right, I can just put in
2:46 package 1 package 2
2:49 and so on but let's give this a little sense
2:51 of some kind of data driven access here
2:54 cuz that's where we are going and we are going to do
2:56 this out of the database, right, this data would not
2:58 come from being hardcoded, that would be silly.
3:01 So maybe just for now, I'll write a function
3:02 up here that says get_test_packages.
3:06 It can return out list. Within this list
3:09 we are going to have some dictionaries.
3:11 And each dictionary represents the data of a package
3:14 that will have a name and a version.
3:17 Okay, so we will come down here and we will say
3:19 name: something and
3:22 version: something else
3:25 and we want to have let's say 3 of those.
3:28 So to have requests, I common
3:32 I'll say 1.2.3
3:35 SQLAlchemy 2.0.0
3:39 and Pyramid
3:40 I think that's 1.9.1 or something like that.
3:43 So down here we can just say this going to be just get
3:46 test packages for our data.
3:48 So this thing we are going to be able to refer to
3:50 remember stuff within the { } is going back
3:53 to the template, that right there is our model
3:54 we can access its keys
3:58 just by saying the name inside the template.
4:01 So let's go down here, and I'll just say for now
4:04 the packages are, and I want to print them out
4:09 so I can just say $packages like that
4:11 and it will pull that array, and print it
4:13 it's not going to look like what we want
4:15 but it will do it. So let's see what we get
4:17 when we run that.
4:23 So there we go, todo put some packages
4:25 whoa, there is a big fat list right there
4:27 but it's working right, pretty cool.
4:31 So what we want to do, not, let's not do this
4:33 we actually want to loop over those and print out requests
4:37 is this version SQLAlchemy is that version and so on.
4:41 So let's go change this, so we will replicate this div.
4:44 We'll give it a class package, something like that.
4:48 We want to replicate that for each one of the packages
4:51 so we are going to say tal and then Chamelon
4:54 tal is Template Attribute Language
4:56 so tal: I noticed the sweet, sweet integration
5:00 of PyCharm here.
5:02 I type tal and it tells me all the things I can do.
5:04 I can repeat, so I want to say p packages.
5:08 This is like for p in packages.
5:11 You drop the for, you drop the in
5:13 I kind of wish they kept it for historical reasons
5:15 it didn't originate with Python, I don't think
5:18 so that is why it is like this.
5:20 So anyway what I want to do, I want put a little span
5:23 and maybe as a class title and then here
5:27 I want to print out just
5:29 p.name if we look over here name
5:35 and then let's do one that will be version
5:39 and this will be p.version.
5:41 So notice, we are defining a local variable
5:43 within this block by looping over it
5:46 and then referring to it here.
5:47 And now I can save, I don't have to rerun this code
5:50 just save it and the templates will automatically
5:52 be reloaded.
5:55 So now, look at that, boom, requests
5:57 SQLAlchemy, Pyramid, we can even do a little test
6:01 we can say tal:condition p.version and only show
6:06 the version section if it is like that.
6:09 I can do like a say not let's just say
6:16 3 zeros if it's not there.
6:17 So let's remove this version from one of them.
6:20 Yeah, okay, so notice it shows the versions
6:24 when it's there, but Pyramid had none
6:25 so we determined that, so we just said 0.0.0
6:28 as our default.
6:30 You may have noticed one thing that I was rerunning
6:33 I was rerunning our app here
6:36 I said you didn't have to do that before.
6:38 When you change the templates, there's no need to rerun it.
6:40 But the Python code, however
6:42 if I change this to 1.7.7
6:46 and I save but I do not rerun
6:50 notice that it is still like this.
6:51 So we have to restart the Python bits, if those change
6:55 now they did
6:57 but the templates are automatically
6:58 just reloaded every time.
7:00 So there we have it, a real, real simple bit of code
7:04 we were able to go and pass some data
7:08 and form a model
7:11 which itself was a list of dictionaries.
7:13 It doesn't actually have to be dictionaries at that level.
7:15 Like the list could be database objects
7:17 but it happened to be dictionaries.
7:19 So we passed those back and then we used tal:repeat.
7:24 We used the string print operator and we used tal:condition
7:29 on version to print out either the version
7:31 or if it was missing we defaulted it just triple zeros.
7:35 One final thing to look at before we move on
7:38 let's look at the raw html that was created by this.
7:42 Okay, you'll see it's really super nice and clean.
7:45 We come over here and do a quick view source.
7:49 There is a bunch of stuff that is put out by the layout.
7:50 We will talk about that later.
7:52 But this bit right here, where it says content.
7:54 That is from our template that we just worked on.
7:57 Notice we wrote h1 some packages, and we said
8:01 div here is the class package and this
8:03 this one right here, that is the one
8:07 that one is the one that has
8:08 tal:repeat on it so right that is this.
8:13 So it has tal:repeat but it is just that block of html
8:17 replicated over and over and then we have this span
8:20 with the title, raw text in there.
8:23 And then the span, this one has the tal:condition
8:26 and it just drops it out, right?
8:28 Either shows one bit or the other, it doesn't
8:31 actually show you any of that stuff.
8:33 So you can see the html that comes out is as clean
8:37 as you are willing to write it.
8:38 It's pristine html, very light weight, really nice.