Tkinter Basics 4: Nested Layouts and Scrollbars

greetings once again python coders this is alan d moore author of this book python gui programming with tk inter available wherever fine programming books are sold and in this video we're going to do a little bit more with layouts so this is part 4 of a series if you have not been following with us so far you might want to go back to part one and get up to speed we've been building a little diary application and it's all laid out on the root window using grid right now which is fine for a small gui like this but as our guise get bigger and more complex there are some things we might like to do we're also going to look at how to do a scroll bar in this video so let's dive right in okay so when you're doing a layout we've already seen that every widget takes a parent widget and so far we've been using root for that but we don't have to use root we can actually use any widget we want most commonly to organize a gui we're going to use something called a frame so up here under subject i'm going to create a frame that we can use to hold the label and the entry together so it'll look like this so we'll call it subject frame and the class is tk dot frame and a frame is it's just a blank widget it's like an empty panel now to put our widgets on that frame first thing we need to do is change their parent widgets so from root we're going to put subject frame and with the entry as well we're going to do subject frame and once we've put these on another widget the geometry manager resets so we're no longer going to be gridding them with respect to the root window the grid is now with respect to the subframe and in fact we don't even have to use grid we could just use something else we could use pack as you know from previous videos you can't mix geometry managers on a single parent widget but when you're using a different parent widget you can use a totally different geometry manager we'll stick with grid right now just to be consistent and we actually don't need to change anything here because this is going to be row 0 of the subject frame now we have to add subject frame to the root window and actually i should up here under tk frame specify root as its parent so we'll go ahead and grid that and now we're only using one column let let me go ahead and save that let's show you what that looks like so notice now this label and the entry are in column one because they're on one widget so what root sees as far as this child widget is just that one frame and it's all going in column one we'll go ahead and get category in its own frame cat frame sdk dot frame root as the parent and we'll change to cat frame option menu on cat frame now like i said our grid coordinates are now reset because these the label and the option menu are now on the frame not on the root so we can go ahead and actually just get rid of that row and column because this will be at row 0 column 1. sorry the label will be at 0 0 the input will be at 0 1 and then we need to add our cat frame to the root and we can just call grid without arguments because we want it in the next available row in the first column and that's the default for grid okay no reason to put private input but we can get rid of its row and column specification because again we just want it on the first column of the next available row now on our message input let's go ahead and get rid of row and column because again we want it on the next row in the first column and we no longer need column span because we only have one column and for our save button we'll go ahead and get rid of column we'll keep the row i'll tell you what we'll just get rid of row we don't need that either all right so we don't need row or column on save button either because that's going to just be in that one column on the root window now and for our status bar we'll keep the row 100 we can get rid of column and column span we'll save that let's run it we still have this over here because of our column configure statement up at the top let's go ahead and change that to zero weight equals one and we'll run it again all right okay one thing we're going to want to do when we grid these is we are going to want to set the sticky we'll just do it the short way sticky equals ew that's east west by the way this one we'll just do east so it sticks on one side let's give that a shot all right there we go now this does become verbose because if i want these to stretch out again i do need on my subframes to also do a column configure so we'll do that subject frame specify the weight cap frame column configure weight equals one run that oops we wanted to actually configure one column 1 to have that weight not the labels let's do that and let's run it again there we go so now each of these frames we've got it configured now notice that these don't line up okay and that's because each one of them has its own separate frame we're no longer in a grid where every column is going to be kept intact each row is its own independent frame in which there's a grid okay so something to keep in mind and obviously for this gui this is just kind of pointless to add these extra frames i'm just showing you how it's done because as you get into more complicated gui's you're going to want to do that okay so the next thing that i want to show you is a different kind of frame called a label frame it's just like a frame except it has a label and we're going to put our message input on one so right here above message input i'm going to create message frame that's going to be tk.label frame we'll put that on a root now label frame takes an argument of text and we'll just say message well let's go ahead and put our input on message frame and let's add message frame dot grid and we'll stick it to all sides north south east west run that and now you can see our message is inside of this box which has a little message specification and of course to expand that we need to do a column configure again message frame column configure zero weight equals one there we go now we're inside that message frame all right the next thing we're going to do is we're going to add a scroll bar to our text widget and why would we want to do that let's run our application real quick and let me just paste in some text here just the standard lorem ipsum here i'm going to paste it down until i go below the bottom now notice it's just cut off i can use my scroll wheel or my trackpad to scroll up and down here but i don't have any visual indication of where i'm at in the scrolling and i don't have any way you know with the mouse button that i could control that what we want there is a scroll bar so let's add one now in tk enter there are only certain widgets that can respond to a scroll bar you can't do this just arbitrarily for anything unfortunately it does not work on a frame there's a way around that but it's a little more complicated but it does work on our text widget our text widget is able to scroll so to do that the first thing that we're going to do is we're going to create a scroll bar so we'll just call it scroll bar and that is a tk.scroll bar widget and of course it needs to be on the message frame and let's go ahead and grid that scroll bar dot grid row equals zero column equals one and we will stick it to the east side of that frame all right actually we want to stick it to the north south and east sides so that it stretches the full height of that frame let's run that and we have a scroll bar so if i paste in my text again we have a scroll bar but it doesn't respond okay there's another step we need to take here we need to tell the scroll bar that it needs to work with that text input so to do that there's some connections we need to make first off we need to connect the scroll bar to the message frame so that when we move the scroll bar it moves the message frame and we do that by configuring its command keyword and that goes to the message inputs y view method okay so we've got a command argument for our scroll bar just like for a button it has a command when it's activated it needs to have a callback so we're setting that callback to the y view of the message input and y view is a method that will scroll that up and down there's also x view which would scroll it horizontally okay but we also need to tell our scroll bar if we were to say scroll our text widget using a using the mouse or something like that we need to tell our scroll bar to adjust itself and it also needs to know like where am i at in the content so to do that our message frame has a configuration argument called why scroll command and we need to set that equal to scroll bar dot set so again this is an argument why scroll command there's also an x scroll command for scrolling horizontally but we want to connect the vertical scrolling to the scroll bar set and then that means when we scroll our message frame in some other way it will tell the scroll bar hey you need to set yourself to hear where i'm scrolling to let's go ahead and run that oop i got a little bug here sorry it shouldn't be the message frame it's the message input that we connect apologies if that confuse you all right let's save that now let's paste in forum ipsum and you can see hopefully that the scroll bar over here is now functional so there you go that is using sub frames and using the scroll bar and remember you can't use a scroll bar with just anything you can use it with a text input you can use it with a canvas which we'll talk about in a future video you can use it with a tree view which we'll talk about in a future video and if you do some workarounds you can use it with other things as well which we'll get into later hope this has been educational for you i plan to have some more videos coming soon for now remember to check out the book python gooey programming with tk enter take care and god bless

Channel: Alan D Moore Codes

Views: 829

Keywords: Python, tkinter, GUI, Packt, programming, live coding, easy, basics, Tcl/tk, GUI layout, scrollbar, frame, labelframe

Id: qM3sXJhFGiA

Length: 15min 23sec (923 seconds)

Published: Mon Feb 22 2021