Adding Frames To Your Program - Python Tkinter GUI Tutorial #11

what's going on guys John elder here from Konami common in this video I want to show you how to use frames with Kenter and Python alright guys in the last video we created a status bar for our app in this video I want to change focus a little bit show you another widget that Kenter uses the frame but before we get started if you like this video want to see more like it be sure to smash the like button below subscribe to the channel and be sure to check out Cody me.com where I have dozens of courses with hundreds of videos that teach you to code use coupon code youtube to get $22 off membership that's all my courses videos and books for a one-time fee of just $27 which is insanely cheap ok so I've got a new file open and I've just got the same sort of standard code that all of our projects start with and let's go up here and save it as what how about frame dot PI just frame okay so framed up pi now what we want to do is create a frame and a frame is just what it sounds like it's a little like box as a border you could have a label on it or not and it's just it's sort of used to just keep things organized in your app so you might have different sections that you want to sort of put together visually and a frame is a good way to do that so frames are real easy to create it's just a widget like all the other widgets and we create it mostly the same way that we create other widgets so I'm just gonna call this frame you can call it anything you want and it's called the actual term is a label frame right so we want this in route and let's say we want the text to equal this is my frame I don't know right now we can also give this some padding let's go pad X equals 5 and pad y equals 5 and we'll play around with these padding's in a minute to show you exactly what they do so now we want to put this on the screen so let's go frame and let's just pack this in real quick here and let's give this some padding so pad x equals let's say 10 and had y equals 10 and we'll see sort of exactly what this does with the padding Y this is 10 and this is 5 in a little bit once we get this thing built we play around with it a little bit so let's see if we save this I don't think this will actually do any things we haven't put anything in the frame yet but we can run this to see let's go python notice I'm in my c4 slash GUI directory where we've been saving all our files so far ants call this frame dot pi run it yeah so let me pull this over it doesn't really do anything yet because we haven't put anything in the frame so that's the next thing do we want to do so we can do anything we want but I mean we could put anything inside of this we want just for purposes of showing you how to do this I'm just gonna create a simple button I'm gonna call it B hey so button this is a button widget we've done this a zillion times already so we won't not now normally we would say put this in root right our root container but now we don't want it in Roo we want it in frame which is this thing right here we were saying put this in the frame right so other other than that it's basically the same we could just go text equals don't click here all right and then like anytime we want to add this to a thing we could just pack this in there okay so let's save this come back here and run this guy and here we go here we see this is my frame and inside of it is a button that says don't click here the button doesn't do anything because we didn't tell it to do anything but yeah that's pretty much it so notice this frame that's kind of cool let's close this and run it one more time now let's play around with this remember we had different padding's pad X and pad Y for the frame itself and then when we packed it we gave it some padding so look at this let's pull up the code again and pull this up here so you'll notice when we hacked it when we packed the frame whoops disappeared we gave it ten and ten for Pat X and Pat wide and we've done pad x and pad Y before it pads on the x-axis and the y-axis and you notice that's on the outside here because this is 10 on the inside we put 5 and you can see that's like that so let's play around with this let's go Pat X 100 and Pat Y 100 to really make this dramatic so let's save this come back here and run it again notice boom you have padding X&Y as a hundred so this you know packs it inside of the the outside container here right so that's interesting or we could do the opposite put that back and let's say Oh had X and pad Y inside of let's just say fifty run this again that's a little better now we've put some padding inside of the frame so that's really all you have to keep in mind with this padding when you create it your own way create any widgets it's always a two-step process we create the widget and then we put it on the screen so in this one we created the widget and when we do that when we gave that thing padding that goes inside of the frame and then here we put it on the screen and that pad X and pad Y goes outside of the frame so just sort of keep that in mind now the last thing I want to talk about when it comes to this and this is kind of weird right so check this out normally we just pack things when you know don't care right otherwise we use a grid and then we've positioned things the thing about pack and grid is you can't do them both you can either do pack and pack or grid and grid so you notice here we did pack here and pack here well with a frame that's not necessarily true anymore you can do a grid inside the frame so for instance we can go grid row equals 0 column equals 0 we save this now normally we would get an error if we did this but now we pull this over and boom it works now it's positioned in the same spot because there isn't another thing in there but we can create another button to show you just to prove one last time so we could go I don't know b2 and I'm just going to copy this whole thing and right over here don't click here or here okay so b2 grid we want row equals 1 and column equals 1 so we want it down and over right so save this run it boom you see sure enough we can play around with the grid system inside this frame even though for the frame itself we packed it very cool very interesting something to definitely keep in mind now one last thing I said that that was the last thing but we have one actual other last thing and that's this little label right here this is my frame we can actually get rid of that as well just right here remove it completely and if we do that and save it we get this kind of a cleaner look right very cool so think of frames use them all that you're probably gonna use them all the time I mean there's always times when you have different sections of your screen that you want to sort of keep separate you might have all the buttons on this side and a frame and all the form things on this side and a frame and then you might have another frame where there's images or who knows what but sort of separating things out visually is always a good idea and does how you do it with frames so that's all for this video if you liked it be sure to smash the like button below subscribe to the channel and check out Kona Meachem or you can use coupon code youtube to get $22 off membership so you pay just $27 to access all my courses hundreds of videos and the PDFs of all my best-selling coding books join over 50,000 students learning to code just like you my name is John elder from go to me.com and we'll see you in the next video

Channel: Codemy.com

Views: 91,194

Keywords: python, tkinter, gui, python tkinter, tkinter python, python gui, tkinter gui, gui python, graphical user interfaces python, tkinter grid system, grid system tkinter, python grid system, build graphical user interfaces with python, how to build graphical user interfaces with python, how to python tkinter

Id: _auZ8TTkojQ

Length: 9min 0sec (540 seconds)

Published: Mon Feb 11 2019