Using Layout Containers

00:00 In the previous lesson, I showed you button and input widgets. This lesson is about how to use layout containers to position things on the screen.

00:09 You may recall me whining about CSS a few lessons back. I’m fine with the simple concepts like make this thing this color. It’s the layout utilities that tend to make me cranky.

00:19 You see, I’m an old man and was using the web before CSS was invented. In fact, I was doing a fair amount of GUI coding at the time using the TK library. So when CSS came out and ignored all of the standard ways of laying things out that had been in computer science for decades, it was a bit frustrating.

00:38 Lots of web coders at the time stuck with using tables to do layouts because CSS hadn’t really solved the problem. You can do most layout nowadays, but there are three ways of doing each thing and they often aren’t compatible with each other.

00:52 So why am I bringing this up besides to give you the full old man rants at cloud experience? Well, Textual gets CSS right. It uses it for the styling parts and leaves most of the layouts to the widgets.

01:05 Like with TK and most other GUI platforms that predated CSS, Textual uses a nested set of boxes for layout. Textual calls these containers. There’s a vanilla container used to hold things and specialized ones that do fancier layout to try to keep your code to a minimum.

01:22 Containers are widgets like any other in Textual, but they’ve done something clever. Instead of yielding them directly, you use a context manager. Why? Well, because then the widgets you yield within their block are the ones that belong to that container.

01:37 By combining containers within containers and widgets as you go, you can arbitrarily place your widgets pretty much anywhere you want. Let’s go build a couple more apps to explore how this works.

01:50 I’m going to keep the apps simple so I can concentrate on how containers work. Logically enough, containers live in a module with the same name. The vertical container stacks widgets within it vertically.

02:02 I normally recommend using a separate file for style rules, but you can use the CSS property to embed them as a string if you like. This can be handy for throwing something together quickly like I am here, or if you’re building a custom widget.

02:16 Sometimes keeping the rules together with the widget makes it more clear. So you can visualize the widget stack. I’ve got a single rule here putting a border around our Static widget objects.

02:27 Do note you can’t live-edit these and have them show up in your app. That only works if you’re using a separate file.

02:34 Inside of the .compose(), you use your container as a context manager under the covers. The objects, .__exit__() that gets triggered when the block is done fires the yield that you expect to be associated with a widget.

02:47 Any widgets that get yielded inside of the context block belong to the container and get rendered inside of it. Here I’m creating 20 Static widgets in a loop.

02:57 The rest of this code is just the usual stuff. Let me go to the terminal and run this.

03:08 The vertical container stacks are Static widgets, one on top of each other. Recall that I created 20 of them, but because of the border, each of these widgets is taking up three lines, which means the screen fills and you can’t see them all.

03:21 They’re there, just hidden. If you have enough screen real estate and made the window bigger, you would be able to see them all.

03:29 With one simple change, this can become far more useful.

03:34 This program is almost identical to the one I showed you with just two small changes.

03:39 I’ve replaced the vertical container with the vertical scroll container, which is one of its subclasses. I’ll let you guess what this does. Along with the new import, I replaced the old container with this one and everything else is the same.

03:54 Let’s go run this.

04:00 Textual has scroll bars. I can mouse wheel the container or use the keyboard’s arrow and paging keys to move around.

04:10 I love the fact that the page down is even animated, giving you a visual clue as to what’s happening rather than just refreshing the screen in the new position. As you might suspect, to go along with vertical and vertical scroll, there are also horizontal and horizontal scroll classes.

04:27 I’m also fond of the center, right, and middle containers. The first two center or right justify their contents, while middle is for centering vertically, something that CSS still sometimes makes a little challenging.

04:42 By combining the nesting containers, you can pretty much do any layout you want, but if you’ve got a lot of positioning to do, the grid layout may help you do it with less code.

04:51 That’s next.