Organizing widgets with frames

- [Instructor] Frames are one of the fundamental widgets you'll use when organizing a Tkinter GUI. The frame is simply a rectangular region on the screen, and by itself that's not very exciting, what makes frames useful is that they can act as the parent and geometry manager to hold and organize other widgets. You can use the frame to organize a large GUI into smaller, more reasonably manageable sub regions. For example, we could create one frame to hold the navigation controls for our program, we could create another frame to hold the user control widgets, which might change depending on the current context of the program, and a third frame to display output information to the user. By dividing the GUI into these framed regions, we can easily make changes to one region without it affecting the others. If we needed to add some new buttons to the user control panel, we could do so without worrying about how it might accidentally shift things in the navigation controls, or information display frames. Another benefit of using frames to organize our GUI is that each frame can use a different type of geometry manager to display its child widgets. This lets us choose the best geometry manager to use for organizing the widgets in that frame. The navigation controls bar might be easiest to organize with the pack manager, whereas the user controls frames may be best laid out using the grid manager. Now let's go through the process of actually creating and configuring a frame. I've already imported the Tkinter package, as well as the Tkinter module, and I've created my root top level Tk window. To create a frame, I'm going to use the frame constructor found in the Ttk module, spelled with a capital F, and I'm going to pass in that first parameter of the top level root window to use as the parent for this frame. And after having created the frame, I'm going to use the pack geometry manager within that top level window to place the frame inside of it. You notice by default, the frame has a default height and width of zero, it'll stretch to fit any objects that I add to it, but if it has nothing inside, it'll shrink down. I can manually configure the width and height of the frame by using the width and height properties. So I use frame.config, I'm going to set my height to be 100, and my width to be 200, and when I enter this command, those values are represented in pixels, so I have a 100 pixel high, by 200 pixel wide frame. Now you notice, the frame doesn't have any border around it. There are six different types of frame relief that you can choose from to customize the look of your program. There's the flat relief, which doesn't have any border, and that's the default that's chosen, you can also select a raised or sunken relief, which make the frame appear to be either elevated or depressed, and you can choose a solid, ridge, or groove border, which will provide different styles of lines around your frame. To configure the type of relief for our frame, we use the relief property. We can configure it to one of those six options, spelled in all capital letters, so I'm going to select the ridge outline. You'll see now that my border has a border around it, using that ridge style. Our frame is currently empty, so let me add a widget to it. I'm going to create a button widget, using the Ttk button constructor. In previous examples, we've always used the root top level window as the parent for widgets we've added, but for this button, instead of using the root window, I'm going to make its parent the frame that I created up here. I'll also configure the text of the button to say click me, and I'm going to use the grid geometry manager here instead of the pack manager. I can do this because we've configured the top level root window to use the pack manager by using it on the frame up here, but we haven't associated a manager with the frame yet. So by using the grid geometry manager on this widget I'm adding to the frame, any other widgets I add to the frame later will also need to be done so by using the grid geometry manager. Notice that when I add the button to the frame, the frame closes down to change its size to fit the button. I can add padding to my frame to create a buffer around the button on the inside of the frame by configuring the padding property. Padding accepts a list of two values, the number of pixels in the X direction, and the number of pixels in the Y direction of padding to add around that frame. So now I've created a frame with 30 pixels of padding on the inside in the X direction, and 15 pixels of padding in the Y direction. The last thing I want to demonstrate for you is another type of frame that's available called the label frame. You create a label frame using the Ttk label frame constructor method, and notice here that both the L and F are capitalized in label frame. I'm going to make the top level root window the parent for this frame, and the label frame has similar properties to what you saw with the regular frame, such as height, and width, but it also has an additional property of text, and so I can set the text to whatever I want to, I'll do my frame here, and I'll have to use the pack geometry manager to add this frame because its a child of the root window, and we've already established that the root window is using the pack geometry manager when we added that first frame. You notice that when I create this label frame, it displays my text in the top left corner of it, and also creates this solid border around it. So this is handy if you want to organize and display text around your labels. One down side with the label frame is that you cannot modify the relief property, they always have this solid border around 'em, but they're useful because they have that text label available. Those are the basics of creating and configuring frames in Tkinter. Use frames to organize the sub sections of your GUI for easy management.