Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Alternating rows via an HTML helper in the view
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
Now before we call it quits with our design, there is one thing I'd like to talk about and it will give you some really powerful techniques
0:08
for working with these page templates, these Chameleon templates in general, and it also will make maintaining these pages that are like this, easier.
0:16
So, there is a few things that are a little bit weird here, let's suppose I want to add a new element, like a new horizontal slice
0:23
which I opened up the right page to do that so let's suppose after the news we'll just have another one.
0:34
and I just have this say like right here, another row, something like that, another slice. Now, watch what is going to happen, when I hit refresh,
0:46
notice, oh this one is next to what kind is it, this is an "a", well, it's next to an a above it, so it needs to be a "b".
0:56
OK, but now below it, below it there is a "b", darn it, and now I need to switch that to an "a". Now if I run it again, you can see when I scroll down,
1:07
it's like Whac-A-Mole, like as you reorder these things, as you interact with them, this is super annoying, like why should I have to do this,
1:13
and you don't have to do this, this is like the work a computer can do. What we can do is we can actually tell our view:
1:20
Hey, I would like you to just manage this for me, so how do we do that?" Probably, you could also do some kind of cool alternating CSS jQuery thing,
1:28
but we are just going to do it straight up in Python. So remember our view, or our controller is over here.
1:35
We want to give this view some capability, remember when the page is rendered, an instance of this class is created, and then it's passed,
1:44
it does its work and then it's passed into the view name down to the template
1:49
and it's a persistent object that is stuck for the entire rendering of that page.
1:54
So let's go over here and say that this is going to have some kind of field. So we can come down here and say this has some kind of field,
2:02
alternate_mode or something like that, equals False, or some to that effect. we are going to write a function, get_alternate_row_style,
2:19
I'll just call it alternate_row_style, OK, what we are going to do is we want to say self.alternate_mode = not self.alternate_mode
2:30
when it has cycled those, it will say if self.alternate_mode oh my gosh, sorry my C was coming through there for a second,
2:39
"not" alternate, so we want to toggle these and now we are going to say if it's True, we are going to return alternate, like this
2:48
and else: we are going to return empty. So this is going to be like the modifier type of thing going on here.
2:55
So remember we need view, view this home controller and we want to take this, so let's go over here, and let's just change this
3:02
like forget all this content section a / b stuff. now, just so I don't completely wreck the style,
3:10
the style is based on this content section "a", content section "b" from the theme,
3:16
so just for expediency sake, I would probably do clean up on this later, let's just add an additional class that we'll use to alternate the color.
3:24
And like anything, we want to generate text in our view, would you like this, say view.alternate_row_style like that.
3:33
Or, maybe the terminology is weird, but it's going to return what it's going to do is toggle its mode from True to False, True to False, True to False,
3:43
and let's actually... let's do it like this, so it starts with whatever its real value is, not the opposite.
3:54
And it's going to return this, which we can use as CSS class. OK, so up here, we are going to say "get me the alternate style"
4:02
and we are just going to put this on every slice, and when we duplicate one of these slices, like who cares,
4:06
I am going to say "a", and it looks like this. I want to say "a" and it looks like this, like I said, we do some cleanup,
4:12
we'll probably just have content section, and content section plus the style alternate. That was the one that was messed up, we had two of them,
4:21
and now it's going to get a in this again, OK, now that was a Python code, so we've got to rerun it and let's see how it looks here.
4:31
It's not going to look so good, because we are not styling it, based on this but if we were to go look at the page source,
4:38
I think it would be good, now let's just go back and style that here, so we had something about "b", right, where did it go?
4:45
I'll put it over here, great. This could actually go into home, which we're going to do in a second, but we want to just look at alternate, OK.
4:53
So what we have for "b", this is what we are going to have now, and we probably want to make this a little bit stronger, we'll do like this,
5:02
if we have the content section a that also has an alternate, we are going to do this thing to it, and this only applies to the home page,
5:11
so let's put it over in the home page section. OK, let's see where we are, we are not there yet, alright,
5:19
and of course, this style that I was looking for is down here, here we go, I think actually that's all I need, let's find out.
5:30
No, almost, this one is 222. Here we go, look at this, so now we've got row, alternate row, row, alternate row, row, alternate row,
5:42
there is little bit of margin here that we need to maybe take care of, but that's fine,
5:48
now watch if I go into take this another row out, if I remove it, our site doesn't require all this juggling, it's just going to be fixed.
5:56
It's really cool. So over here, like you know what, we don't want this anymore, forget this section. It's out, now if I run it, look the site works
6:03
from the design perspective perfectly. And so we can do just little bits of... I don't know what you think of them,
6:11
as like HTML helpers, that our templates can use, Chameleon templates can reach back and go "hey,
6:17
I know you can keep track of state, because you are an object, you are an instance of an object, and you can run Python code",
6:22
so just do a little bit of like more advanced computing then it's easy to do in a set of Chameleon templates.
6:29
So this technique is usable for alternating rows like I said, there is like some CSS and other things you can do,
6:35
some JavaScript to pull that off, that's not a huge deal, but this technique is much more broadly applicable than just for alternating rows,
6:44
so I wanted to make sure to show it to you, and of course, this is how it works on my website.
6:49
That's it for Bootstrap, go out there and build something awesome. With Bootstrap plus Bootstrap themes, you are basically a good designer.
6:59
So go out there and brace your creative side and make something that will impress you and all your customers.