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