Create New Windows in tKinter - Python Tkinter GUI Tutorial #14

what's going on guys John elder here from coding me comment in this video I want to show you how to create new windows with kinder and python alright guys in the last video we looked at message boxes in this video I want to show you how to create new windows in your program you know up until now we've just basically had one big window we've had message boxes and little things like that but as far as like creating a whole new window we haven't looked at that yet and likely you're gonna need to do that in some point in your careers 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 be sure to check out coda me comm where I have dozens of courses with hundreds of videos that teach you to code use coupon code youtube to get twenty two dollars off membership that's all my courses videos of books for one time via just twenty seven dollars which is insanely cheap ok so I created a new file called base dot pi and it just has the same you know starter text starter code that we've used throughout this series and so what we want to do here is just create a new window so how do we do that well you notice up until now we've been using this root window it just shows one big window on the screen and that's it so you know likely you're gonna want to add a different type of window or a different window if you click a button if you do a drop-down thing whatever how do you do that well you start just by defining it I'm going to call it top and set that equal to top level and it's just this top level function so if we save this and run it we get right off the bat and pull us over this is our main window there's nothing in it and then also this second window and you can tell the difference because the icon is different up here right this is just the kinder default icon whereas this one has our little coda me icon right so okay that's not that great go come back and close this now any time you want to do something in here you just do it inside you just do it after this so you know if we wanted a label let's just call this label equals label now normally we would put this in root right well now we have this top we can put it in so we can designate different windows that way and we can set the text equal to a little world whatever and then let's just pack this on the screen so let's run this real quick and back over here and run it oh no ah typo already there we go lowercase T I do that a lot I think seems like at least the second time in this series I've done that okay so now we have our main thing and then our second window and the second window says hello world so you can oh you can put anything in there you want for instance we could put an image in there remember a few videos ago we use this image dot TK thing so we could go let's get rid of this and let's just say my underscore image set that equal to image TK dot photo image and then image open and then call the image now I think we had we had a directory called images that we set up and inside of there I had this Aspen dot PNG picture we do that and then create let's create a my underscore label e/l and just set this equal to a label we want this to be in top and we want the image to equal my image and we need to pack this on the screen work so if we save this and run it real quick boom boom we get our first normal window with nothing in it and then we have this second window with me and Aspen a little yawning here so you notice it says learn to code at code me.com which is the same title as this one we can change that too pretty simple in fact we could just copy these two things for the title and the icon and I'm just gonna put this right under here and instead of root here obviously we want top same thing here top so if we save this come back over here run it again we get our main window has the icon and this is learned Dakota Dakota me which is what it said before so let's change that real quick - what we want my second window alright very creative Hey alright so now now we get this my second window right okay so that's kind of cool I guess but chances are you don't want all these windows just fly open every time you open your program you want it to only open if you click a button or do a drop down or click a link or do something you want to be able to control when they appear right so how do we do that well let's create a button I'm gonna call it button and it's call button we want this in route we want the text to say open second window and then we want the command to be what open okay so now we need an open function method whatever you want to call them open find open now inside of here is where we want all this stuff right so now we tab all this stuff over hoops go that seems like it should work right so yeah he's sort of woollen sort of one I'll show you just now what I'm talking about so we saved this come back over here and run it again oh you know what once again forgot to pack the button dot pack it said we're having a day here in Vegas it's cloudy kind of cooler than normal my brain is just not woken up yet today so save this now we'll run it okay so we get this window has a button I misspelled window hey alright so we click this now this second window opens but check this out the image didn't love what's going on here well what actually happened here is all of our code right here we're calling this my IMG variable and we're setting it equal to this image but this is a local variable right we need this to be a global variable because for some reason when you're in a function like this with a second window python sees this local variable and it thinks it's garbage it gets swept up in the Python garbage collection and it doesn't get displayed so all we need to do is call global for my image and now this should work we save this run it again we get this guy if we click it sure enough it opens very cool and it's just one of those weird things I'm not even exactly sure why the mechanics of why it does that he just it it just does notice when we did this earlier we had all this stuff outside of this function it worked just fine because it's in the root it's in the main window so the local variable works in the main window it just doesn't work in the next one that you open this top level window all right so we can play around this some more we can go button to equals button and we want this to be in top and let's go text equals closed window how do we do that well we want the command to equal top dot destroy I think we looked at destroy a few videos ago that's how you can close things we just have to make sure and designate that we want to destroy top not root so if I save this come back over here and right oops drag this over all right so open second window a third time I forgot to pack the button alright dot pack Tania's one of those days here in Vegas cloudy Vegas today alright so now we have open second window when we do that we get the second window says my second window has the icon has our image as this button we close it boom it closes we can open it again there it is again we can close it we can open it oh he can close it and on and on and there we go so that's pretty much it pretty simple you know you don't want to run two versions of this TK function at the same time instead you want to call this top level it's just what tkinter calls the second window that you want to open and pretty straightforward the only thing to really worry about is this global thing if you try something inside of here and it doesn't work try adding whatever you're trying to do as a global variable that will likely fix it but yeah pretty simple 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 Cody me.com where you can coupon code youtube get $22 off memberships they pay just $27 to access all my courses hundreds of videos in the pds of all my best-selling coding books join over 50,000 students learning to code just like you my name is John elder from Kuta me comm will see in the next video

Channel: Codemy.com

Views: 84,756

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, new windows in tKinter, tkinter windows

Id: qC3FYdpJI5Y

Length: 9min 52sec (592 seconds)

Published: Wed Mar 20 2019