Tkinter - Pack and Grid (ttk widgets) #tkinter

okay so in this video i'm going to show you the difference uh between pack and grid um i'm going to be creating a window that has four rect rectangles all around it i'll show you what i want to create in tk enter so i'm just going to bring up inkscape so i can kind of design what i have in mind so first we're going to have our root window okay so i'll just make it that color so this is going to be the root window in the root window i'm going to put a frame and i'll make that blue so so again this this here is the uh is the root window this is going to be a frame and the frame will be covering the entire window like that and on this frame i'm gonna put four rectangles on each side so here's one on the left one on the right i'll just make it a different color one at the top and one at the bottom okay so the colors won't matter here it's just just wanted to show you that you know the there they're four separate rectangles so in the middle of this frame i want to put a label that just says hello like so so i want to create this window using pack and and also do and also create the same exact window using grid that way you can see the difference on how both of them are used so i'll get started with code okay so the first thing i'll do is i'll import tk enter so import tk enter as tk and i'm also going to import uh ttk from it so from tk enter import ttk so this will have our themed widgets which is what i'll be working with then we'll create our root window like our main window so root you called tk.tk and then we have our main loop so our code has to go in between uh this line and this line so in in here okay so i'm going to give it a size of give the window a size of let's say 640 by 480. 480 let's just see what we have so far okay so this is what we have and remember i i want to put a rectangle on the left on the right at the top and at the bottom and put a label in the middle that says hello and it's all gonna go on a on a blue frame um so the first thing we need to do is add our frame uh because if i go back to our uh illustration here remember we have a frame on the back of all the widgets okay so we'll just define our frame so i'm just going to call it frame underscore main equal ttk frame and the master is going to be root okay and we're going to be using uh pack for for this okay so at the bottom here i'm going to pack it and i'm putting space here because i'm going to be adding some more widgets so here i'm going to pack it but this won't be sufficient which you'll later see so if i actually run this you won't actually see anything on the screen yet so the other thing i want to do is make this frame blue and to do that i have to use a ttk styles so so we'll do that up here so we'll say style equal ttk style and we'll call this main frame dot t frame and we'll set the background to blue uh so this mainframe is just something i've made up it's just a just a name but this section is important so dot t frame the the class name for a ttk frame is uh t frame and the reason i know that is because if i do um you know frame may not windfall class like that it this will tell me the name of the class of of of a ttk frame class and what i do it's it's going to be uh t frame um actually we'll go ahead and we'll we'll do that we'll just print it out just so we can make sure okay so i'm just saying so i'm just gonna run this yeah so you can see down here the name of our class is t frame and that's that's how you can find out the class name of any ttk um widget okay so the name that we gave it mainframe dot t frame uh we didn't give it this name sp i mean we did but it's not something that we've made up it's so it's inheriting from t frame our mainframe is inheriting from t frame and we're basically saying uh give us everything that t frame has and put it into mainframe but instead make the background blue so the difference in our mainframe compared to the original t frame that tk enter comes with is that we're making our background blue so that means here when we're defining our ttk frame we can give it the style that we defined up here so ttk dot frame and we're putting it into root and then we're going to say style we're going to make it mainframe dot t frame and when we do that tk enter will know that we're referring to this okay so i'm just gonna run that and we still don't really see anything on the screen and that's because we're simply just packing it on the screen where we're not expanding it we're not filling anything so we have to give it two things so we have to say expand equal true and we also have to say fill equal tk dot both so if we run that yeah so now it covers the whole screen so expand equal true will tell tk enter to give as much space to expand it as as much as it needs and fill will uh will will will tell it which direction to to fill so in this case if i put tk.x it's only going to fill uh horizontally which uh which we'll see here so you can see it's just going uh it's just expanding left and right it's filling all the way left and right um but it's not it's not filling vertically if i just say tk.x or sorry tk.y we see the other way around um it's just a vertical and if we say both it's going to expand it both ways so that's what that means okay so now we have our blue frame which is the one on the back in our illustration now we need to actually create the uh the rectangles so we'll get started on that so we have let's just close that okay so let's define frame left equal ttk frame root so we have to give these ones a different color too so i'm just gonna um actually i'll just type it so style.configure and we'll say um frame left and then dot t frame because we have to inherit from that and background we'll say yellow next one frame right t frame background equal orange style dot configure frame top dot t frame background equal red and frame bottom dot t frame background equal [Music] purple okay so now we've defined the different colors for our rectangles now we just have to create those rectangles so frame left we're going to use this style so we say style equal frame left dot t frame that one's done next one we're going to define frame right ttk.frame root style equal frame right dot t frame next one is frame top ttk that frame putting it into root and frame top dot t frame next one is frame bottom ttk that frame root style equal frame bottom dot t frame okay so now we have all our rectangles created now we just have to pack them on the screen so the first one's going to be so i'm going to put some comments here so define styles here we're going to say create widgets and here we're going to say pack on the screen okay so so the first one we're going to pack on the screen will be our left rectangle so this one and the colors aren't matching necessarily with what i've defined in the code but that's okay but the background is like the the the frame is blue so that's that's matching so so i'm going to pack this one okay so frame left dot pack so now we have to say side equal tk left next one actually let's just run that first see what we get uh so we're not really seeing much yet okay so we also have to um we have to give this a fill as well so that it expands um so that it you know covers the whole vertical section on the left hand side so we'll say fill equal tk y okay so we're still not really seeing it and the reason is we have to give this a we have to give it a size so we have to give it a width and we also have to give some of them a height so if i if i go back to our illustration right now what's happening is it's so thin we're not actually seeing it it's like this but we want it to be that size so to do that when we're creating the widget on this one we have to give it a width so i'll say width equal 50. okay so let's just run that no we're still not seeing it um okay so side equal tk left frame that left frame left we should be able to to see it now uh what am i missing oh i see what our issue is okay so i've accidentally put all of these into root um but these are not supposed to go into root they're go they're supposed to go into the mainframe so that was my bad okay so we need to put these into the main frame or frame main as i've called it so what i did is instead of putting these rectangles on the main on on this on on the blue frame i've put them directly on the window which i don't want okay so now i've told them that the parent is frame main not root okay let's uh try that again all right that's better okay so now it's on there so we see it on the left hand side and now we can continue on with frame right psi equal tk right fill equal tk y and we also have to give this a width of 50 as well otherwise we won't see it you know if i change this to width 150 you'll see it gets bigger if i change if i don't specify the width at all um well you kind of see it but it's just so thin you hardly see it so we have to say width equal 50 here okay so moving on so we've created the uh the left rectangle the right one now we'll do the top and the bottom so frame top dot pack side equal tk top um fill this time we'll say tk.x so it fills it horizontally rather than vertically and we also have to give this a size but we're not going to give it a width and the reason is um it's going to fill horizontally anyway because we're going to tell it to but we have to specify the height in this case we have to specify the width because it's automatic we told it to automatically fill vertically but here it's automatically going to fill horizontally but so we have to specifically tell it what the height will be same thing with the bottom one so um so to do that we'll say height equal 50 and the bottom one will also say height equal 50. i'll make these ones double quotes so it's more consistent there we go okay so let's just make sure the top one shows up it does and let's add the bottom one too um bottom will be fill equal tk dot x as well and it's t k dot bottom okay let's run that okay so we've created our four rectangles now we just have to put our little hello label in the middle to to do that i'm just gonna go back to where we're creating our widgets and i'm going to say lbl hello so label hello equal ttk label and we're going to put that into frame main and the text we're just going to call it just going to have it show hello and now we're gonna pack that and so label hello dot pack without any arguments uh but this won't give us exactly what we need and i'll show you why so if i run that we can see hello is on there but it's not centered and that's because we haven't told it to expand so it's not expanding uh to take up as much space as it needs so we'll say expand equal true and that should center it and it does yep so we've created it using pack and the cool part is if we ex if we resize this or if we maximize it tk enter will automatically resize the widgets uh we don't have to put any extra code in there for uh for resizing tk enter is handling that for us and that's because we we've told it to to fill uh we've we've told it to expand you know these are all the different things that that tell tk enter what to do when when it comes when when the window gets resized okay so i'm going to show you the same thing but using grid okay so to do the same thing using grid um it's going to be slightly different uh we have to to to recreate this using grid we have to give it uh column numbers and and and row numbers and um and and you'll see it's it's actually quite a bit different than using pac okay so we'll uh we'll start with our uh with our code so it's going to be the same a lot of it's going to be the same so import tk enter stk from tk enter import ttk um root is going to be tk.tk and we're going to put our main loop here and the the code is going to go in between i'm going to copy and paste a lot of the widget creation stuff from the last one so just to save some time so the styles and the creation of the widgets are going to be identical and also the geometry the size of the window is going to be the same as well so the only thing that's going to be different is the way where is the geometry manager essentially okay so if i run this okay so yeah so we have uh we got a blank window now so which is good so if you remember from the uh pack example the first thing we want to put on the screen is we want to grid the the the frame and i'll explain why i'm putting everything on a frame uh near the end of this video okay so now we're going to say grid widgets on the screen all right so now we can say frame main dot grid and we have to give it a row and a column so i'm just gonna say column zero sorry row zero column zero and even if you don't specify anything like this it's gonna still be row zero column zero because that's the default but i like to specify it just so i can see it it's just a personal preference so this won't be enough which you'll see here shortly so if i run this we still don't see the blue frame uh because remember there's a blue frame on the back and that's what i'm trying to put on the screen right now but we're not getting a blue blue frame and the reason is we have to actually tell the grid geometry manager to expand um and to give it as and to take up as much room as it needs um and to do that we have to go to the parent of the widget and tell it what to do if anything gets grid and gets gridded onto it um so frame main has a parent and its parent is root so we have to tell root that if any anything gets gridded onto root we want it to expand uh we want it to fill as much space as as needed in a specific row and a specific column to do that i'm just going to go right up to where all the other root stuff are i'm going to say root.grid row configure and it wants it wants a row number so row zero and and then we say weight equal one then we do the same thing with the column because this is only for the row so we say grid column configure column 0 weight equal 1. so basically what this is saying is we're going to be gridding frame main in row 0 and column 0. and up here we're telling it that we want to expand uh row zero and column zero and to tell it that we want to use as much space as possible in in those columns and in in that column in that row uh sorry this one needs to be one so column configure zero weight equal one okay so if i run this now we should um actually there's still one more step that's needed so even this won't actually give us exactly what we need okay as you can see there so another additional thing we need is we need to specify the sticky when we're gridding so sticky east west north south if i run it now it covers the whole screen so here we're telling it to expand uh to stick to each of these corners each of these sides in other words um we want this blue frame to to to stick to the right which is east we want it to stick to the left which is west we wanted to stick to the top which is north and we wanted to stick to the bottom which is south so that's why we're saying sticky equal east west north and south and now it it the the blue frame expands everywhere if i were to remove these two like if i were to comment grid column configuring row grid row configure uh this is what we would we would get so you can tell it's not working still well without those two codes if i put only one of them like if i put row configure i still don't see it it's probably there somewhere but it's so thin that i'm just not seeing it i think it might be maybe on the left hand side and if i only have grid column configure yeah i can see it at the top it's so thin again you can barely see it okay but if i have both it's going to use up as much space as it needs so it's very very important to use grid row configure and grid underscore column configure if you want your widgets to uh to take up as much space as as as they need to take up any extra space i should say because if you don't specify uh if you don't specify that uh grid won't automatically use up extra space okay um so we're putting this in the parent and the rule here applies to the children of root so the the so root has one child here specifically one direct child which is uh frame main because we're putting that in root and we need to do the same thing in frame main because frame main will end up becoming a parent for all the rectangles the frames and also the hello label okay so we also have to do a grid row configure for for that as well okay so we should do that here so frame main um this one's going to be slightly different row configure we we are going to uh tell it to use up as much space like extra space if it needs to and and row zero just like our first example but for the column portion of it we're going to tell it to use up as much space as it needs in column one and i'll show you why so if i go back to our illustration here so we have to actually give them a row number and a column number uh for each of these widgets so the left hand rectangle will end up becoming row zero column zero and we also have to give it a sticky so we want it to stick to the east and we want it to stick to the north and south so ens okay so the one at the top it's still going to be row zero but it's gonna be in column one because this one's gonna be this one's column zero this one's column one and this one's column two and the sticky for this is going to be [Music] east west and north like that okay because we want it to stick to the top which is north left which is west and the right which is east okay so rectangle on the right this one's still going to be row zero but it's going to be column two and we want it to stick to uh the east north and south and the one at the bottom it's going to be row zero as well but it's going to be column one just like the one at the top and we want it to stick to east and west and south so this way this way and at the bottom okay so another thing that we need to tell it to do is we need to uh we need to tell the label where to position so we want this to still be in row 0 and column one as well yeah yeah so row zero column one um but we won't actually specify the uh the sticky for for this one but if i go back into the code remember how in frame main uh up here we did row configure grid row configure column or sorry row zero weight equal one and column one weight equal one so we're telling it well we're telling row zero column one to use as much space as it needs that's basically what we're what we're telling it okay so if i go back into our code okay so we're uh so so this is where we're at currently we just have our blue frame so let's put the rectangle on the left so frame left dot grid row equal zero column equals zero yeah so row equals zero column equals zero and the sticky is going to be ens ens and let's just make sure that works yeah it works okay let's do the one on the right frame rate dot grid row equal zero i believe it was column equal to yeah and sticky as ens actually for sticky for frame left it should be uh wns because it's west so west is uh left okay so let's run that again okay okay so it it works okay so frame top dot grid row equals zero column equal 1. rho equal 0 column equal 1 and e w and these are sticky okay let's just make sure that works it does and the one at the bottom row equals zero column equal one and e ws okay let's just make sure that works and it does okay now we need to grid our hello label so here we'll say hello label dot grid row equals zero column equal one and we're not going to give it a sticky um yeah it just goes right in the middle we don't want it to stick in any of the sides we want it to be right in the middle uh so we don't need to specify a sticky um like if i were to say sticky equal e it should stick over to the right yeah and you know but we don't want it to stick anywhere so if we don't specify it just centers it yeah so that's how it's done using grid um and in the same as pack when i resize it it i don't have to worry about writing any extra code to make that happen tk interior will automatically resize the widgets uh to to make it fit um so some things to uh to go over here i was going to mention why i put everything onto a frame rather than just putting it all on root and the reason is i have more flexibility now over all these uh widgets i have flexibility over all the rectangles uh on the four corners and also the the label in the middle so for example if i wanted to add a border around this or if i wanted to uh if i didn't want all the rectangles to to to touch the edge of the window right now it's really easy to do because it's all part of one frame i won't have to go to each frame and write any special code i just have to write code for the the the frame uh the mainframe the uh the blue frame uh because that's the parent of all those rectangles so i can just go here where i'm grading the the blue frame and i can say give it a pad y of five and give it a pad x of also five and look at that and if i move this over so you can see it better see how it it's not touching the edge of the the window now if i if i had to put the rectangles directly on the root window i would have had to write that code one by one for each of those rectangles so that they wouldn't touch the sides but because i put everything all in one frame it's it's really easy i just have to change that one line so i hope that was uh useful to you one other thing i was going to mention is you've probably noticed that i've used ttk widgets rather than tk widgets and the reason is i believe in my opinion that any new applications being built should be built using ttk because those are the newer widgets that come with tk enter as far as i'm concerned um i believe the uh the original older widgets like tk dot frame and tk dot button like not the ttk ones but just the tk widgets i believe those ones are there primarily for backwards compatibility with older tk applications but if i ever start a new project i will most definitely start with uh with ttk widgets rather than tk widgets well i hope you enjoyed this uh video uh if you like it hit the like button and uh and thank you very much for watching have a nice day

Channel: JobinPy

Views: 888

Keywords:

Id: xlluDUeG1ZQ

Length: 35min 55sec (2155 seconds)

Published: Sat May 29 2021