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