Mastering PyCharm Transcripts
Chapter: Server-side Python web apps
Lecture: Template tooling (Chameleon, Jinja2, etc)

Login or purchase this course to watch this video and the rest of the course contents.
0:02 When we created our web project,
0:04 you saw that we could choose all the main Python based page templates.
0:08 In this case, I chose Chameleon
0:11 because I think it's the cleanest, web friendliest version,
0:14 we could have chosen Jinja 2 or the Django templates and so on
0:18 and PyCharm has support for all of these,
0:20 and whether this support lives in PyCharm directly or Web Storm,
0:24 there is probably some sort of blend there
0:27 but let's go and work with these templates just a little bit.
0:30 So if we just change the thing that we're returning from here,
0:34 let's make this interesting, we can leave project for now,
0:37 let's return some data, just some fake values,
0:41 we'll return some particular numbers, I'm not sure what they mean,
0:45 pretty much random, right.
0:48 So we will return those and what else are we going to return,
0:52 so over here, what else, let's return one more thing,
0:55 I'll call this show odds, it's true.
1:00 Okay, so now we're returning three pieces of information,
1:04 so let's go look at how we can use these in the template.
1:07 So each template language, we're going to look in this one,
1:10 each template language (Jinja 2, Chameleon, and so on)
1:13 have their own way of working,
1:15 but you'll see PyCharm actually understands these.
1:18 So let's go clean that up,
1:21 and in this content section let's just say
1:23 put an h1 template demo code, html code,
1:32 and then down here, let's say we would like to have another h2
1:38 and we'll say showing odd numbers as well.
1:42 Now, we want this to be visible only if show_odds is true, right,
1:49 but if it's false, we're going to hide it.
1:52 So, like I said, the different template languages have different ways of doing it
1:54 but PyCharm supports them,
1:57 so for example in Chameleon, we have the template attribute language tal
2:00 so we can come over here and type tal, and notice that,
2:02 we have all the options, tal repeat, tal condition and so on,
2:05 and what we're looking for is a condition
2:07 and the condition were testing is show_odds is true.
2:10 Maybe we could even do not show_odds, we'll say hiding odd numbers.
2:15 So then let's go down here and we'll do another div
2:19 and we'll have ul and li and notice we format this,
2:26 I'll show you something really awesome here in a second,
2:29 but let's suppose that we want to put a number here, that particular number,
2:34 so we have to loop over this set
2:36 and for each one of them we want to put a number,
2:39 so we can go over here and say tal:repeat, n data,
2:46 so down here we can just put n, next number is n
2:53 so watch this, let's run it,
2:58 we run it just in case Python side changes
3:02 boom, look at that, showing odd numbers as well, how cool is that?
3:10 So let's go to change this real quick, suppose this is data driven
3:13 get this back from the database and this comes back false this time.
3:16 Now we run it, hiding odd numbers, well not so much
3:22 let's go down here and we'll do this tal:condition n % 2
3:32 let's say show_odds or n % 2 = 0
3:51 so now we're up here, I guess that's not quite where we wanted
3:54 let's put this, let's do it like this, we'll put a div
3:58 and within the div, we'll put the li now,
4:00 I know you're probably thinking,
4:03 you know what, you are not allowed to have a div here and I know that
4:06 so I'll show you how we'll fix that, just a second.
4:09 So we'll come over here and we'll do the repeat here
4:11 but we'll just say omit tag is true, okay, now let's try it.
4:15 Boom, look at that, we're hiding the odd numbers,
4:18 we're only seeing the evens
4:21 and if we go back to our database here to our app here
4:28 and we say, you know actually this time show me those numbers
4:32 and we wait, run it again, here we go, showing odd numbers as well.
4:37 So you can see that we were able to use
4:39 over here the temple language really nicely
4:42 and we technically don't need this little span but that's okay.
4:45 So we are able to use the tal: type of tags for Chameleon
4:51 but like I said, you can use a different template of language
4:53 it will also support those features,
4:56 just you don't have the bracket percent type stuff from say Jinja.
5:03 Okay, little format, now the last thing while we're here I want to talk about,
5:09 there's a couple of things we did
5:12 that could have been smoother, that could have been better
5:14 one is, suppose I want to change this to a block quote,
5:17 I have no idea why I would do that,
5:19 but let's imagine I wanted this to be a block quote,
5:22 in a lot of editors you have to go, you type here,
5:24 I go over here and I go ok, I type here and I would say block quote
5:29 and I would go down here and have to remember to make that a block quote
5:32 but as you just saw if I work with this,
5:35 the ending tag is always in sync,
5:39 so if I want that a block quote, it's a block quote
5:42 and the html is always in sync, it is not there's some huge tag structure
5:47 and way down, somewhere you forgot to change
5:51 the /span to /block quote, so things don't work
5:55 PyCharm's got our back.
5:57 Let's just run that really quick, see what we get.
5:59 Beautiful— no it's not, but it took our change.
6:02 Now, notice also down here, we have navigation
6:04 if I want to go to the ul here I can go back to the li
6:07 if I want to see what div is containing that or maybe the parent div
6:10 I can go back to my block quote and keep working.
6:14 Now this page is pretty small,
6:16 maybe the other one would be a little more compelling
6:18 so if I am say down here, I could see what is this template thing,
6:23 oh that's right, there is the container, then there's the link
6:26 yeah that's the one I was on.
6:28 So this navigation is super, super helpful.
6:31 And finally if I have something like this
6:33 where I know I want to have a row with links,
6:36 with the ul with three items I could type this out super painfully,
6:40 and I could put the class and I could put the links
6:42 but— hold on to your hats folks.
6:45 PyCharm has this thing called zen coding,
6:48 let's check that out really quick while we're in here.
6:51 And I can say div, and that's going to create the div,
6:54 I could hit tab and it'll create the div
6:57 but in css the way you talk about classes is you say .class name
7:00 so I could .row and it will create a div with a class row.
7:04 However, we can go farther, we can say
7:07 and I want that div contains another dive that has the class links
7:13 and now if I hit tab, we get that.
7:16 And I could go farther and say I want a ul
7:18 and within the ul, I want the li and I want it three times,
7:22 watch what happens when I hit tab now.
7:24 Boom, it even navigates me through the pieces,
7:27 part one enter, no, part two, no help, enter and so on.
7:33 So this zen coding little thing, let me go back so you can see it,
7:37 where you sort of express the css statement of a structure,
7:42 a big hierarchy of html and then hit tab to expand it— fabulous.