Entry Widgets in CustomTkinter - Tkinter CustomTkinter 3

what's going on guys Jonathan here from teakinter.com and in this video we're going to look at entry boxes for custom kinter and python all right guys like I said in this video we're going to look at entry boxes for custom kinter but for a good start if you like this video want to see more like be sure to smash like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and be sure to grab your totally free PDF copy of my Kinder widget quick reference guidebook this thing is awesome over 150 pages with all the connector widget attributes grab your free copy today just head over to techinter.com forward slash widget-book enter your email address I'll shoot that right out to you and while you're there think about membership ntkenter.com you get all my courses all my future courses for one low price use coupon code YouTube to get 30 off membership if you're interested alright in the last video we talked about buttons for custom kinter in this video I want to talk about entry boxes and that's this sort of round thing right here and I've made it look round normally it doesn't look around we'll take a look at the default in just a second and you can see you could type I've changed the color if we click the button it says hello we can clear it so let's head over to our code I'm using the Sublime Text Editor in the gate batch terminal as always and as always you can find a link to the code in the pin comment section below as well as link to the playlist with all the other videos in this Custom kit your playlist so check that out if you haven't so far so got a file I'm calling it ctk underscore entry dot Pi we've got our basic custom kinter starter code that we always have and let's come down here and let's just create a quick label I'm going to call this my underscore label and this is going to be a custom tkenter.ct K label we want to put it in a root we want the text for now to be nothing and let's change the font also while we're at it to helvetica and like I don't know 24 make it nice and big so then let's underscore label dot pack this guy and let's give this a pad y of like 40 really push it down the screen so now let's create an entry box so I'm going to call this my underscore entry and this is going to be a custom tkenter.ctk entry and again notice the c and the T are capitalized the K is not and then the e in entry is capitalized same thing here with the label all right and we want to put this in root now strictly speaking this is all that we need we could just get away with just that but I'm going to start out by giving this some placeholder text and I'm going to say enter your name and we're going to do a bunch of other things so I'm going to put these on separate lines so let me just go ahead and Well for now why don't we just do it like that okay now we also need to my underscore entry did I pack this guy let's give this C pad y like 20 push down screen a little bit so okay so far so good now we need a button real quick so let's go minor score button and this is going to be a custom decanter dot ctk button and we want to put it in root let's have the text say submit something like that and let's give this a command of submit we'll make this function in just a second for now let's minorscore button dot pack this guy asking this pad while like 10 push down screen a little bit so now let's come up here very quickly and let's just create that function and for now let's just pass so let's go ahead and save this and take a look and see what this looks like I'm in my C T country.com directory unless we're on python ctk underscore entry dot pi and when we do we get this little entry box here you can see it looks pretty modern and cool looking it's sort of outlined and gray inside of it's a darker gray when we type the text is sort of white looking uh let's see let me close this and run it again notice the placeholder text says enter your name the color of that it's kind of light gray or not quite white but light gray let me click on it to disappear so very cool and uh it's kind of all there is to it now if this is all you want that's fine you're done but we have all kinds of different options we could play around with for this thing so let's come up here and first how do we find out like what's in it like if we type something in there how do we get whatever that is and do something with it so in our submit function let's take our label let's go minerscore label and let's dot configure this thing now remember you can't dot config this it has to be dot configure that's sort of a weird thing about custom kinter and then let's set the text equal to whatever is in this my entry label so to grab whatever's in there we just call my entry dot get right and since we're asking for a name let's create an F string here and let's say hello and then we'll put these in Brackets so this will say hello and then whatever you typed in there so let's just go ahead and save this and run it real quick just make sure that worked so here I can type in John when I click submit it says hello John okay so that's cool now how do we configure this entry box how do we change it around what can we do with it and how well first let's start out with the height and width so we can change the height and width of it pretty easily so let's set the SQL to 50 and let's set the width to like I don't know what 200 something like that save this and run it and now suddenly the box is much wider and taller still works the same if we go ahead and do this and click the button still says hello John so okay that's cool uh this text inside here now that the entry box is bigger we might want this text to be bigger too how do we change that well super simple there we can change the font and we do this just the same way we did with a label we can set this to whatever we want I'm going to say helvetica and like 18 something like that save this and run it now you notice already the placeholder text is bigger and when we type that text is bigger too so that's cool now you'll notice the shape of this thing it's kind of square but the edges are a little bit rounded we can change that corner radius as well just like we did with the buttons in the last video if you didn't check if you didn't see that video check it out we can change that just by calling the corner underscore radius and setting that to some number the bigger the number the more the curvature I guess you would say all right so go ahead and save this run this guy and now boom we have a definitely more rounded entry box very cool so what about color so right now the text color is very light gray almost silver what if we want to change that super easy we can just change the text underscore color so I might want to turn this to Green you can also use your hex color codes so something like that whatever I'm just going to use the word green you can also do it like that just like all color things with Kinder you can use the color name or the hex color code go ahead and save this you'll notice the placeholder text color is the same but if we type now it's green we can also change the placeholder text color and you'll never guess what the attribute name for that is it's placeholder underscore text underscore color and here maybe we want to set this to Blue I don't know go ahead and save this let me add a comma there just for good measure and whoa now the placeholder text is bright blue don't like that one bit let's go ahead and change that to like I don't know dark blue save this and run it I'm just being picky now that's still not great I would probably use a color a hex color code to get the same color as this button but whatever you get the idea super simple now what about the color of the entry box itself you can see it's sort of light gray on the border and dark gray in the middle how do we change that well super easy also we can change the F ground underscore color F ground stands for foreground and this is going to be a tuple let me make a little comment here outer inner and you separate these with a comma the first one will be the outer color right so I don't know we could say blue or something right and then the inner color I don't know let's go light blue I'm bad with colors but you know this will at least show it if we save this and run it you could just sort of make out the outer border of this thing it's dark blue or blue I guess the inside is obviously light blue so all right and uh yeah that's pretty good now we are submitting this thing and it's doing something up here but what how do we clear the screen for an entry box well let's create another button real quick while I'm thinking about it and let's call this the clear underscore button and this is going to be a custom kinter dot ctk button we want to put it in root I want the text to say clear and let's give this a command of clear and we'll create this function just a second for now let's clear underscore button dot pack this guy give it a pad why like 10 push down screen a little bit and we can come up here and Define our clear function and in order to clear the entry box we just call my underscore entry dot delete and inside here we pass a parameter from zero to end so 0 is the first position of the text so this will take everything from the very first letter in the entry box all the way to the end and delete it so if we save this head back over here let's try this guy again clear the screen run this again here if we type something in here click submit and we click clear Boom the entry box disappears it click it deletes itself very cool and uh yeah that's all there is to it so what else can we do with this entry box now we've covered pretty much everything we can also change the state you could change the state in all widgets basically and you probably already know how to do that let's come up here and give a comma here and let's just set the state equal to disabled save this run it now the entry box isn't going to work at all you can see there isn't even any placeholder text I'm clicking on it I'm typing nothing has happened it's completely disabled uh we can't submit or clear just says hello and that's you know not great you could change this back to normal or just leave it off because the default is normal but if you put it as normal you can change it like that we could also do that same thing with a button let's say on the submit button here let's go my underscore entry dot configure State equals disabled and if we copy this and also on the clear button we set this back to normal if we save this and run it whenever we type something so if I type in John here that green text is horrible click submit it says hello John now I'm clicking on this and it's completely disabled I can't do anything here I can't type but if I then click clear it clears it and it sets it back to normal so now I can type again you can see the cursor is blinking when I hit submit the cursor stops blinking because this whole thing has been disabled and then I can clear it again and use it again so that's one way to do that that's probably how you would normally do it using buttons of some sort or programmatically or whatever but pretty simple pretty cool and that's all there is to it so that's the entry box for custom kinter pretty simple lots of different things you could do with it pretty easy to use and very handy so that's all for this video if you liked it be sure to smash like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and be sure to grab your totally free PDF copy of my kinter widget quick reference guidebook this thing is awesome over 150 pages with all the kinter widget attributes grab your free copy today just head over to techinter.com forward slash widget book enter your email address and I'll send that right out to you and while you're there to think about membership in tkinter.com get all my courses on my future Tech enter courses for one low price use coupon code YouTube to get 30 off membership if you're interested my name is John Elder from teakinter.com and I'll see in the next video

Channel: Tkinter․com

Views: 19,253

Keywords: customtkinter entry widget, custom tkinter entry widget, customtkinter entry, tkinter entry widget, tkinter.com, john elder, john elder tkinter, john elder customtkinter, john elder tkinter tutorial, customtkinter entry delete, customtkinter entry get text, python tkinter, tkinter python, python gui

Id: mwalgzuEfvw

Length: 11min 41sec (701 seconds)

Published: Tue Aug 22 2023