Subtitles of the Movie

Now this video is entitled Understanding Flow Layout and what I want to do right here is talk about something that you may be missing if you've done web development before and that is that Visual Studio used to have this default setting and it was called Grid Layout and what we're in now, by default in Visual Studio, is Flow Layout. Now what that means is that any time on a page that I drop a new control on, it is going to try to go as far up the page or as far north as it can and as far west as it can. It's going to try to push it up and to the left, basically toward the upper left corner. You notice when I dropped this particular control in that it went right there. Now if I go drop another control - I'm going to pin this so you can see it - if I grab another button and drag it on and let it go notice it puts it right next to that one, and if I want it to be down, the easiest way to do it is just click on the right side, hit the left arrow once, hit it again, you'll notice my cursor's flashing between them, hit the Return button. Now I can keep hitting Enter, or Return and push this thing down. Now I can grab this one now and I can sometimes, yes there we go, I can drag it down. Notice that moved it down and if I have enough space here I can position these things somewhat simply by clicking on them and dragging them down. But you'll notice I cannot click on them and drag them over. Here's the reason. Grid Layout felt real cool in that I can grab things and slide them around the page and position them where I want them. What we were actually doing was a layout technique called Absolute Positioning. And I'm actually going to show it to you in just a second. The problem with that was with Absolute Positioning is, it's really cool when I'm developing it, but it's not suited for situations where the objects on the page need to adjust their positioning when the Web page content changes, when the text is resized, you know, a lot of the browsers now we can change the size of the text dynamically, when we're looking at a different sized screen resolution changes, it can introduce all kinds of strange things. This basically led to a lot of inflexible layouts. The controls start kind of bumping into each other and stacking up on top of each other, really hideous looking and very hard for the user to use. So Microsoft now is dropping us into Flow Layout and if we want to do Grid Layout we can and I want to show you. We'll play with this button right here. If I go to the Source back here, on that button and right here is my button. I'll click on the button and highlight it right here and I'm going to make this go away now so that we have space and I'll also make this go away. What I'm going to do is add style attribute, so all I do is type style equal and then I can put, notice it's going to start to find stuff for me now, position and so if I just hit Enter it will put that in - style equals position colon and I'm going to do absolute, so I'll just double-click absolute. Then I'm just going to put a quote - this is kind of cool the way this works, by the way - so notice I've told it that I want the button to be absolute position. Now normally I could go in here and put a top position, a left position and so forth, but I want you to notice something. If I go back to the Design window now I can grab this button and notice I can move it wherever I want it to go and it will sit there when I'm done. And if I go back to the Source you will now notice that it has added top 131 left 221. That means that I'm 131 pixels down from the top and I'm 221 over from the left. That make sense? And so, if I move this back this way and go back and look you'll notice my left's now 105. So this lets me move this thing all around and so I can reposition this thing down here now. Notice that if I preview this, run without debugging, it's not going to be a problem, it's going to show up down there where I put it. But if I resize this page or do anything like that, this thing is going to stick right there. It is going to continue to be in that same location and notice it just dropped off my screen because no matter what I do it's going to stay right there. Now this is not a good example because I'm dragging my window around, but the bottom line is, again, this feels really nice - let me get in Design Mode - when I'm working but it can cause some serious problems for me later on with the resolution and different screen sizes and so forth. So that's how you can get Grid Layout if you want it. You're going to have to go to every individual button and add this style. Now you can also use Cascading Style Sheets to do some of this and really the best way to do this is put it on divs so things can be moved around. You can go out and do some Google on that. But I just wanted to point out, for those of you who are screaming, hey wait, where's the Grid Layout? I want Grid Layout. That's how to get it back.