Tkinter Beginner Course - Python GUI Development

[Music] what is going on guys welcome back this video is going to be a beginner course on tk inter we have used tk inter a couple of times on this channel already to build graphical user interface applications but i never published a video tutorial or a video course on the very basics of tk inter so what is a window how do we set some basic stuff up uh what are layouts what are the individual widgets that we can use and so on what are their functionality how do i do certain things certain basic things in tk inter uh i have used tk enter and i have explained the process so whenever i created something and typed some parameters i explained what they did but i never published a full course on the basics of tk enter which is what i want to do today so let's start with the fact that if you want to use tk intro you need to import it but you don't have to install it since it's part of the core python stack it's a library that is used to build graphical user interfaces in python it's the default way to build graphical user interfaces with python of course you can also go with pi qt5 for example but that is something that you need to install specifically tk enter is part of the core python stack in order to use it we just need to say import tk enter and usually i like to use tk as an alias so import tk inter stk what some people like to do in tutorials and i have done this myself as well is to say from tk inter import everything now this is not considered to be best practice because you import more than you need and it can lead to some ambiguity and problems so if you can avoid it just don't do it like that just import tk inter sdk or just import tk enter and then always when you want to use something for example a button you don't say button but you say tk dot button for example now in order to create a window that's quite simple we just need to say some name for the for the window for example root or window i'm going to call it root and then you say tk.tk but with a capital t and then uh you call the constructor and then all we do is we say root dot main loop not like that root dot main loop like this and by running the script here we will see that we already have an application so this is a very basic way to just create a simple graphical user interface window we don't have anything in here we don't have any uh dimensions set up we don't have any title or anything like that but this is the basic way to create the window now this window has certain properties we can set a title we can set the geometry and those two things are actually the most important for the beginning so we're going to say root dot and in order to set the geometry we don't use a set geometry function we just use the geometry function and we pass to that function a string with the dimensions so first the x value then the y value in this case we could say something like 800 x 500 so it would create a window with a width of 800 pixels and a height of 500 pixels and of course you can play around with that however you want we can also swap that uh let's do something like 500 times 500 so we have a square more or less uh and then we can also set the title of the window by just saying root dot dot title uh my first gui for example now if we do that there you go you can see that we have a title now so those are the basics we can set the geometry and the title uh now i want to get right into the widgets because that's what what uh tk intro is all about we want to have something inside of that window and if you want to add something to that window you create the object you pass this window as the parent object and then you use a layout to get this object or this widget into the graphical user interface usually you use something like pack or grid there is also place where you can just choose the coordinates but usually you go with pack or with grid which are the two layouts and we're going to look at all of them today so uh what we're going to do first now let's go with a simple label a label is just a text so let's say label equals and then tk.label with a capital l and what we pass first here is the parent object so the parent object of the label uh the parent the parent window the master is going to be root itself so label is going to be part of root and then we can set some named parameters the text of the label is going to be hello world for example and then we can also pass some design stuff like the font if we want to define a font what we do is we say font equals and then we pass a tuple and the first element of that tuple is going to be the font family so arial for example and the second one is going to be the font size for example 18 points i think it's points not pixels i hope that's true now if we want to get that label into the root all we need to do is we need to specify um a layout that we use as you can see we can use pack we can use grid and i think somewhere down here should also be uh place there you go we're going to go with pack for now we're going to build everything with pack for now and what we can add here as well is a padding but first of all let's see what it looks like without a padding uh not debug sorry let me run this again there you go we have a simple label as you can see it's quite uh basically at the topmost position with a small uh with a small padding you could say with a small distance with a small spacing uh what we can pass here is pad x equals 20 for example and pad y equals 20. obviously x is for the x dimension for the horizontal padding and y's for the vertical padding there you go you can see there's a little bit more distance now so we can do that with other uh elements as well let's go with a simple text box text box is going to be tk.text with a capital t root is going to be the master object again then uh text you can also set a text if you want to but usually you want the user to input the text what you can set for a text box is you can set the height so you can say or actually let's don't set the height and see what it looks like without setting the height but we're going to add a font here again ariel but this time a little bit smaller so let's say it's 16 points and then text box dot pack and let's just do no padding for now and you can see that it uh is the whole it it scratches across the whole graphical user interface and it has no distance here uh on the horizontal because of course uh we don't have any padding here so now if i scale the window you can see it's quite large uh so if i want to set the height to something specific i can also go ahead and say okay i want the height to be three and then it's going to be way smaller as you can see here it's going to be three lines so i can write something here i can write something here and here and now of course i can also go down but then i have to scroll all right so this is a basic text box we can also use an entry if we want to an entry is basically just a text box with height 1 without multi-line features and all that so if you want to have a text box for a password maybe an entry is more useful than a text so let me maybe show you that my entry is going to be tk dot entry like that part of root and then just my entry dot pack and you can see that this here is an entry because it's one line i cannot press enter i mean i can press enter but nothing happens it doesn't go into multi-line whereas here even if the height was one i can still scroll down uh this is the difference we're going to use a text box here though um and of course we can also add a padding now maybe we don't want to have a vertical padding because we already have one from the label and it's fine but maybe you want to have a horizontal one so pedex is going to be 20 and now you can see that we have some distance here now 20 seems to be a little bit too much so let's go with 10 this should look fine there you go now we can also add a button now and we're going to talk about buttons later on in more detail because we got to add some functionality to the button we're not going to do that now i'm just showing you that you can add a button here so a button is tk.button and pass it to root again and the text of the button is for example click me and it can also have a font i'm going to go with arial again and we can go with 18 again and then button.pack there you go and you can see i can click that button uh since there is no padding it is exactly below directly below the text box so we can go with some padding pedex equals 10 and pad y equals 10 maybe you want to have some padding here as well pad y equals 10 and you can see now it looks a little bit better now this function doesn't have a functionality obviously we are going to talk about that in a second as i or not in a second a couple of minutes as i already told you uh but those are some of the widgets some of the most important widgets we can also just type tk dot and if you have an ide you're going to see what you can use here so for example we also have a check button here uh we have frames a frame is basically just a frame a an area that you can put buttons into for example or text boxes just widgets we have list boxes we have menus and all that so you can play around with that now let's try out let's try the grid layout because the grid layout is a little bit more interesting when it comes to multiple buttons for example in a row so if you want to have a calculator for example let's call up the windows calculator you don't want to have one button below the other buttons you want to have a grid of buttons like here so you want to have for example a text box a label and then you want to have some buttons here in a grid layout if you want to do that in python first of all i have a video on that so you can just check out the gui calculator with tk intro on my channel uh but now we're just going to have a grid of buttons and for this we're actually going to use a button frame so let me just think about this we're going to use a label here in the pack layout we're going to use a text box with a pack layout and we're going to add a frame so the frame is going to be tk or actually let's call it button frame is going to be tk.frame the frame itself is going to be part of root so it's going to have root as a master um and that's actually the only parameter that we pass here but then we're going to say button frame dot configure or actually column configure and here we can set the zeroth column to have a weight of one this is going to be important because we want the buttons to stretch we don't want to have three buttons in a row and then a lot of space left and right we want it to stretch to fill the x-axis and we're going to talk about that uh in a second how exactly we're going to do that but this is a setting that we need we need to say column configure for the individual rows depending on how many rows you have obviously if you have multiple uh actually columns sorry if you have multiple columns uh if you have five columns you need to do it for all five of the columns in this case we're going to have three columns so we're going to do it for the three columns here and what we're doing now is we're going to say btn 1 is going to be tk button and here now we're not going to pass root as the master we're going to pass the button for a master master because the button is going to be inside of the button frame and the button frame is going to be inside of the root so we're going to pass button frame here and the text is just going to be one we're not going to have any functionality here we're going to say arial and font size 18 and what we do now is we say btn 1 dot and now not pack but grit and grid takes the parameters row and column so row zero and column zero basically means first row and first column we're in programming we start counting with zero unless you use matlab obviously but that's where you start so for example we want to have the first button in the first row and the first column so zero zero now we also want it to be sticky to the west and to the east so to the left and to the right so what we can do is we can say sticky equals tk.w plus tk.e i mean i think you can also pass a string so you should also be able to say w and e or you can also say uh news for north e north east west and south yes uh but i like to do it like that tk.w plus tk dot e for west and east so basically what we want to have is uh maybe i'm going to explain this with paint real quick we don't want to have uh a window where we have like a text box and then a bunch of buttons like that right so if we have three columns here we don't want to have a numpad like that we want to do it more like that we want to stretch the buttons here of course equally sized not the way i draw them but want them to be stretched across the whole row so we want it to be like that one two three and this is why we do the sticky uh the sticky stuff so we can copy that now and just paste this uh how many times four more times so we have button one button one here we have button two button two button three button three button four button four five five six and of course we need to change the text to 2 3 4 5 and 6. and now we can place them in different columns so we can say okay we want to have button 2 also in the first row but in the second column so we change this to 1 this to 2 then we want to have 3 buttons and start the next row so button 4 would be in row 1 but column 0 then row 1 column one row one column two and those are actually just two rows but we can actually take a look at that now so once we have the grid um i think we only need to pack the frame so we're going to say button frame dot pack because remember we have the pack layout in general but inside of the button frame we have the grid layout so the grid layout of the application or actually the the layout of the application is not the grid layout it's the pack layout but inside of the button frame we have the grid layout uh but because of that we need to say button frame dot pack and we're going to say fill equals x actually as a string is enough we can also pass tk.x i think but this means that it's going to stretch into the x dimension and now you can see that we have the result that we want it a basic grid layout uh where we can do that now before we move on i also want to show you the place function so instead of using grid or pack we can also use the place function to place something manually for example down here i can say another button it's going to be tk.button and it's going to be part of root and it's going to have a text test and now we're going to see another button dot place and i can just say x equals uh what's the geometry 500 times 500 let's just say 200 and 200 for y and then i can say height equals i don't know 100 and width equals 100 as well and by doing that i can just decide on the position because pack is a layout we have a certain structure grid is a layout we have a certain structure we can manipulate parameters place basically means put it there and make it that size so it's a very manual thing and you can see that in this case it looks quite bad but this is how you can place widgets exactly where you want all right so i think you understand now basically how tk intel works we import the module we create a root window we add some widgets and then we choose a layout for example grid or pack or we use the place function to create our graphical user interface now the next step is to add some functionality so to button clicks for example or to certain events that happen we want to add some functionality to the graphical user interface so that it's more than just a design and for this we're going to define our graphical user interface inside of a class because oftentimes it's a little bit tricky with the order in which you define a certain element so if you have the graphical user interface defined and then the functionality in terms of functions so you have a function that does something this function maybe needs to know the graphical user interface in order to access certain elements then again the graphical user interface needs to know the function because the function is what it's called what is called when we do something and this can get a little bit tricky in a class in an object we have everything structured so i can just say refer to that ui element via the self object or refer to that function via the self object it's just a best practice or better practice to do it inside of a function so let's say again import tk import tk enter sdk and then we're going to create a class my gui like that and in the constructor we're going to have the whole graphical user interface process so we're going to start with self.root is going to be tk.tk as before and then self.root.mainloop so just calling the constructor is going to create the graphical user interface already now so that we don't do just anything here let's uh think about a very simple application we're going to have a simple label at the top we're going to have a text box where we can enter some text as a user and then we're going to have a button and when we click that button we're going to get a message box with the text that we typed in the text box displayed onto the screen and in addition so that we use a little bit more ui elements we're also going to add a checkbox if that checkbox is checked we're going to get the pop-up if it's not checked so if it's unchecked we're going to get some console output so we're going to get the message printed onto the console if it's checked we're going to get a pop-up so let's start with the label we're going to say self.label is going to be tk.label again and it's going to be part of self.root and we're going to say the text is your message for example and the font is going to be arial [Music] 18 for example self dot label dot pack padding x equals 10 padding y equals 10 [Music] then self dot text box going to be tk text box or tk text self dot root and font equals ariel 16 self.textbox dot pack pad x 10 pad y 10 and of course don't forget the height let's say the height is five for something should be enough and then we're going to add the checkbox so the checkbox is going to be self.check it's going to be tk.check button it's going to be part of self.root and we're going to say the text is show a message box like that and i don't think that we need much more for that i mean of course yeah we need uh to have the font size again ariel and 18 or actually let's make the 16. now the check button in tk enter is a little bit tricky because we cannot just into intuitively go and say self.check dot uh is checked or something and we get true or false we need to add a variable to that check button and this variable is going to have the value of the check button it's a little bit complicated uh so let's first say self.jack.pack uh pack pad x equals 10 pad y equals 10 as well and uh before that we're going to create now here's self dot let's just call this check check state or something and this is going to be tk dot int var in variable basically and this in variable is going to have this integer variable is going to have the state of the checkbox and in order to get that we need to say variable equals self dot check state like that and last but not least let's add the button self dot button is going to be tk dot button self dot root the text is going to be show message font is going to be ariel 18 self.button.pack there you go now in order to add the functionality first of all we're going to define the function itself so we're going to say def and we're going to call the function here show message like that i'm going to pass for now and in order to make this function being executed when the button is clicked we're just going to go to the end here and say command equals and then self dot show message now it's important that you don't call the function so you don't want to say show message and then parentheses like that because we're not calling show message we're passing show message as a parameter and it's going to be called whenever we click the button so if we for example write something like hello world here and we create a my gui object here at the bottom and we run the script we should be able that when i press we should be able to see that when i press show message we see hello world in the console all right so it works now all we need to do is we need to um to show the message from the text box here onto the screen via message box depending on the check so the first thing is want to know okay is the checkbox checked or not now in order to get the the state of this variable here we need to now say print self.checkstate.get like that this gets uh the state of the checkbox so now if i run this you're going to see that we're going to get a number if i click it you see 0 if i check and then click it you see one so if the check box is unchecked we're going to have zero otherwise one and this is what we can look at so we're going to say if self dot check state dot get equals zero then we're just going to print what exactly are we going to print we're going to print the content of the text box so self dot text box and this is again something that's a little bit tricky because in uh in tk intro we need to use the get function and provide a start and an end so index 1 index 2. the index 1 is a string which is 1.0 if you want to start in the beginning and if you want to stop uh in the end so if you want to go all the way to the end you have to pass tk.end now this is a little bit unusual because in other frameworks you would just say box dot get value or get text or dot text here you need to say dot get and you need to pass that as a beginning and this is an end if you want to get everything and otherwise if we don't get that we're going to we're going to print a message box and for that we need to make an import we need to say from tk inter import message box like that and now we're just going to say message box dot show info and the content first of all the title is going to be message and the message itself is going to be self.textbox dot get again 1.0 tk.end which basically means go all the way through so this should already work if i type something there we go and if i uncheck this we see it in the command line instead of in a message box so this works fine uh what else did we want to do here now one thing that i would like to add here because this is something that a lot of people are asking when i do gui tutorials is how can i do something like when i'm in the text box i don't want to click the button i want to say enter for example and based on that click based on that keyboard press i want the same thing to happen now in this case enter would be a stupid choice because enter is something that we can use inside of the text box to change the text but maybe we want to have something like control enter and control enter basically triggers that this function is executed as well how can we do that it's again a little bit tricky in tk enter it's not the most straightforward thing but what we do here is we go to the text box and we say self dot text box and then we can bind something here we can bind a certain type of event to a function for example we combined key press in angle brackets this has to be that exact string this thing has to be bound to self dot and now we can define another function for example let's call it shortcut and we can pass an event here we have to pass an event here because the event is going to be passed by the bind function so we bind the keypress event to self.shortcut and this automatically passes an event and from that event object we can now uh look at what's happening now one thing that i want to show you is that this event object has certain parameters now if i run this i'm not sure if we're going to see that so if i'm now in the message box here you can see that whenever i press something we get a key press event down here and this keypress event has an event a state here and a key symbol so what we're interested in is we want to have enter and we want to have control now if i run this here and i just press enter you can see the key symbol is return now if i press control you can see the key symbol is control but if i hold ctrl and i press enter you can see that the key symbol was returned but the state was control mod 1. so if i run this again and i don't press control i just press enter you can see that the state was mod 1 if i now press control and enter you can see control is part of the state so all we need to do here in order to get the key combination is we need to uh print event dot key symbol and we need to print event dot state and this is going to tell us what we need to look for because if i now press enter we get return and the state is eight if i press ctrl enter the state is 12 and return is uh return is the button so all i need to do here is i need to say if event dot state equals 12 and event dot key symbol equals return then do something for example let's print hello for now to see if that works in the first place so now if i press something else nothing happens but if i press ctrl enter we get hello so this works now instead of printing hello we're just going to call show message so self.showmessage and now you're going to see that if i have something in here and i now press ctrl enter oh of course we need to trigger that checkbox otherwise we're not going to get the message box but you can see that this trigger is the same thing as the button so this works like that um now one thing that i would like to also show you is that sometimes i mean in this case probably not but sometimes you want to have some uh closing dialogue so when you press the close button you don't want the application to just be closed but maybe you want to ask the user do you really want to leave or do you want to save something we're not going to talk about safe dialogues and open dialogues and all that i think in the editor video in the notepad clone you're going to find that dialog but besides that or actually that was pi qt but i think in a paint clone you're going to find safe and open file dialogs today we're going to only talk about the closing event so what happens when i close the window how can i react to that so let's say maybe i just want to print hello world or goodbye whenever the user presses on the x button now in order to get the event what we need to do is we need to say self dot root dot protocol and this is now a string which is called wm underscore delete underscore window and what we passed here as a second parameter is the function that we want to call whenever this event happens so whenever we click on the close button we're going to call that function let's call it on closing and of course we need to define it down here so def on closing and in here we're going to just say print hello world and important we need to also destroy the window because if we don't do that all that's going to happen is that i'm going to print hello world when i click that it's no longer going to close so we need to say self dot root dot destroy so again there you go now instead of printing hello world we're going to ask for uh for the user to confirm that the user wants to leave the application so we're going to say i need to look up the syntax again here if messagebox dot and now we can choose a dialog from here we have something like ask question ask retry cancel ask yes no cancel or ask yes no this is what we're going to use here uh ask yes no there you go and we're going to pass the title quit question mark message equals do you really want to quit question mark now if the answer to that is yes we're going to have a positive value here so this if statement is only going to be triggered if we uh if we pass if we press yes and otherwise we're going to do nothing so if i press on x now do you really want to quit no nothing happens do you really want to quit yes destroyed now last but not least for this video in order to just show you a little bit more ui elements we're going to also add a menu to the top so something like here in pycharm with file edit view and all that we're going to keep it minimal but i'm going to show you how you can just create a simple menu bar and inside of that menu bar you want to have different menus for example file and action or help or something and then we can also add functionalities to the individual presses inside of that menu bar so what we're going to do is we're going to say self dot menu bar which is going to be the main thing it's just going to be tk dot menu and it's going to be part of self dot root then we're going to also create self dot file menu and this is going to be tk menu as well so one menu is going to be part of the other menu and this is going to be part of self dot menu bar and we're going to also pass the parameter uh tear off or tear off tierra right is going to be zero so that we have otherwise we're going to have a dashed line at the top and we don't want that and inside of that file menu we're now going to add some uh things that we can do so for example we can say self dot file menu dot add command and we're going to have a simple command with a label close and this label close is going to have the command exit we're going to refer to the basic python exit function and that's all it's going to do now if i want to add this now to the final to the to the menu bar what i do is i say self dot menu bar dot add cascade and the menu i'm adding is self dot file menu and the label of that menu is going to be file and then last but not least i think i need to also add the menu bar to the root and we do that by saying self.root.config and we set the menu of the root to be self dot menu bar so now if we run this you can see we have file up here and i can click on close and closes the window now actually we can also link this to not exit but to self dot on closing i think that it has the same effect as clicking this button so no or yes there you go so this also works now we can also add multiple commands i'm going to add the same command again so we can say close with error or close without question just so we have a second item here we're going to pass exit here and between those we're going to have a separator so we can also say file menu dot at separator and this may be useful if you have a lot of different options of different categories you can have this separator line between these two buttons here or between these two commands now let's just um so that we see that this also works let's just add another menu so action menu for example is going to be tk menu part of self dot menu bar tear off zero um not sure how it's pronounced tear off tear off i think tear off makes more sense right let me know in the comment section down below so action menu dot add command on we can just say i don't know label is going to be show message and the command is going to be self dot show message like that then again self dot menu bar actually let's do it down here add cascade self dot action menu and label is going to be action there you go so now we have action so uh show message like that if we have the message box checked this is going to work as well one final thing i want to show you is if you want to for some reason clear the text box let's create a second button self dot clear button and this button shall delete the content of the box so let me just write it real quick text equals clear font equals ariel 16 no 18 actually the command is going to be self dot clear and we're going to define it self dot clear button dot pack with padding and uh if we want to do that we need to do something similar to the getting here so we need to also specify these indices so what we're going to do is we're going to say def clear and we're going to say self dot text box dot delete and here we pass 1.0 and tk.end as far as i know this is how it's done so there you go if i write something and click on clear this clears the message box all right so that's it for today's video i hope i was able to give you a good introduction to tk inter if you liked that video let me know in the comment section down below and click the like button and of course don't forget to subscribe and hit the notification bell to not miss a single future video for free other than that thank you very much for watching see you next video and bye [Music] you

Channel: NeuralNine

Views: 3,382

Rating: 5 out of 5

Keywords: tkinter guide, tkinter, tkinter tutorial, tkinter course, tkinter python, python gui tutorial, python gui course, python gui guide, python gui development

Id: ibf5cx221hk

Length: 38min 59sec (2339 seconds)

Published: Wed Sep 29 2021