Input Boxes and Buttons - Python Kivy GUI Tutorial #2

what's going on guys john elder here from codename.com and in this video we're going to look at input boxes and buttons for kivi and python all right guys like i said in this video we're going to look at input boxes and buttons but before we get started if you like this video you want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codingme.com where i have dozens of courses with hundreds of videos that teach you to code use coupon code youtube1 to get 30 off membership that's all my courses videos and books for one time fee it just 49 which is insanely cheap okay so in the last video we installed kibi and we did you know a couple basic labels in this video i want to put input boxes and a button now this looks kind of crazy right now we'll get into changing the design later right now i just want to talk about how to create these input boxes and buttons if we click this we can see a it says something on the screen everything kind of changes size and things like that it's kind of neat keep clicking it and it keeps changing and that's what we're going to look at in this video so i've got the starter code from the last video up on the screen i've got a file called input.pi i'm using the sublime text editor and the git bash terminal as always okay so let's come up here and in this video like i said i want to create input boxes and buttons and we're going to talk a little bit about some of the grid layout options that you have we're not going to get into it in great detail in this video we'll talk about all the different options for layouts in future videos like i said in this video we just want to get started with input boxes and buttons the most basic sort of input output thing in any sort of programming language so we need to import a few things every time we do something in kiwi we got to import something it's kind of ridiculous but we come up here and go from kivy dot uix dot grid layout we want to import grid layout and you'll notice capital g and the capital l it's lower case here right so we also want to from kivy.uix dot text input we want to import text input and again notice capital t and capital i this is always the case capital g capital l capital t capital i and then finally we want to go from heavy dot uix dot button we want to import button and button is capitalized there's only one word in it so only one capitalization so okay we've got these three things we've now imported now we can use them so let's create another class to start building these things out so let's go class and i'm going to call this my grid layout and this is going to inherit grid layout and that comes from right here now like i said there are several different layouts that you can use there's float layout box layout grid layout i want to say stack layout relative layout and anchor layout we're going to talk about a bunch of those in the future in this video we're just going to use grid layout and grid layout kind of does what it sounds like it creates a grid right so okay so now let's initialize infinite keywords we can pass into this class right so let's go define underscore underscore init underscore underscore and we want to pass in self and we also want to pass in those infinite keywords and to do that we use star star quarks and this is a kind of a basic class sort of thing if you're familiar with object-oriented programming with python if not you might want to brush up on your object-oriented python a little bit but uh to understand what we're doing in these things or otherwise just sort of follow along so now let's call the grid layout constructor and don't worry about these terms i'm using if you're not familiar with them just kind of roll with it this all become familiar as you start using these things more often so we can call super and then we want to call my grid layout and also self and this is going to be dot underscore underscore and knit underscore underscore and again we're going to pass in those korgs okay so we're pretty much ready to go now we need to just start mapping out things so first off let's determine how many columns so let's set the columns so i want at least two columns so let's go self dot calls and set that equal to two and we'll change this around and play with this and see what happens in a minute but we can set our columns so now we can just add widgets right so add the things that we want and sort of like enter everything is a widget and we have text widgets we have text input widgets we have button widgets we have label widgets we have all the different things so let's go self dot add underscore widget and let's start out with a label and we want the text to equal name something like that right okay now let's add input box so first we want to define the thing and then we want to add the thing so we can go self dot i'm just going to call this name and this is going to be a text input widget and let's go multi-line equals false so this will create a box and it'll be just one line if you want more than one line you can set this to true and we'll see what that looks like in a second so after we define it and define this now let's add it so we can go self dot add underscore widget and we want to add self dot name which is just this guy right here now you may be asking how come we didn't do two steps for this label because we didn't really define the thing to start out with we just put it right in here to begin with what the text is going to be so we could get away with doing it just in one line here i don't know there's a little bit more going on here so we'll just break this into two things so okay so that that looks good now we can just copy as many of these as we want so if we want for instance two we just add another one and here instead of name let's put favorite pizza and i'm gonna call this one pizza and here we're going to add it add pizza and this name is important we're going to reference this later on when we pull the information out of whatever you typed into the box right so okay now if we want another one we can add another one as many as you want doesn't really matter here let's go i don't know favorite color right and here we go color and down here we go color okay so we've got all this stuff now we need to tell our app to sort of use it right so remember in the last video we returned this label that said hello world we don't want to do that anymore now we want to just return my grid layout like that and our build function here right which is just what we call this class so we can go ahead and save this now let's head back over here make sure you're in your c kivi gui directory make sure your virtual environment is turned on and we can go python input.pi and pop up up does all the things and when that happens we get this huge thing now again this is giant and sized and we can look in the future about changing the design of this thing which we will but for now we just want to get this up and functional and you can see as we resize this they dynamically resize which is really nice right it's one of the nice things about kibby and if we make this bigger if you hit enter it just goes out of it because we we set that to multi-line false so you can only have one line right okay so we've got that so now let's build a button so let's come up to our my grid layout and let's create a submit button and this is going to be self and i'll just call this submit and it's going to be a button and we want the text to equal submit and let's give this a font underscore size of like 32 to make it bigger so we can read it easier and then we can go self dot add underscore widget which is how we're always adding these things and we want to call self.submit right so we save this now nothing will happen when we click this button but the button should at least work so let's run this guy again and you can see there's a submit button we can click it and it doesn't really do anything now you'll also notice that it just is in this column right here it's not spanning the whole thing i'll show you how to do that probably in the next video how to span the whole column it's a little complicated than what you would normally think you're not going to use like a call span function we have to actually change some stuff around and it's a little complicated and weird but for now i just want to make sure we get this button up and running so okay and speaking of this thing not going all the way across here you'll notice that kiwi just kind of puts these things where it wants we've told it two columns so we've got column one and column two and it's just sort of guessing where these things go and that's how the grid layout thing work it works it just kind of guesses if you want to be more specific on where the things are placed then you can use different layout options that we'll talk about in the future but the grid layout just kind of guesses and puts them in there so if we changed the columns so we head back over here really quickly and let's change this to like six columns if we save this and ran it he's just going to guess how we want these and it's going to look like this a label input box label input box label input box so one two three four five six and then the submit button is down here that's kind of weird right we can come back here and change this to i don't know three run this again and we get this weird looking thing so it's just kind of guessing and putting them in the columns we could change it to one that's kind of uh nicer looking maybe all right so i don't know it all kind of lines up looks kind of mobily right i don't know but anyway that's that's the grid layout we'll talk more about this in the future but for now i'm going to set this back to 2 so it looks a little bit more normal okay so now we've got this button down here but it doesn't actually do anything so in order to make it do something we have to bind the button and to do that we go self dot submit dot bind and then on underscore press we want to set this equal to what do we want to happen when we press the button we want to run a function and in the function we'll do whatever we want to do but to designate that function we would call self dot press all right so this is going to be the function we're going to create the press function right because we're pressing the button call it anything you want it really doesn't matter just you call it bob if you want and that works so now outside of this init function we can create our press function so right here so let's go define press and inside here we want to pass self and we also want to pass instance because when we're binding things we're passing an instance of something if you're familiar with kinder event bindings we always pass an event in sort of like the same thing we're passing an instance of this whole thing in here and then now what do we want to do with it well we can create variables of our input boxes and then do something with them so i'm going to call this one name i'm going to call the other one pizza and the last one we'll call color and then for here we can go self dot name dot text and i'm just going to copy this and paste it here and then this will be self.pizza.txt and this will be self.color.text where am i getting this well the dot text is the text input and we named this one pizza so we're calling pizza's text whatever we entered in the text box right so then we can come down here and we can do anything we want with this we could print it out to the print it out to the terminal if we wanted to right so let's create a little f string here and let's say hello name you like pizza pizza and your favorite color is color exclamation point right okay so that looks good let's go ahead and save this and run it see if that worked so i'm going to say john favorite color or my favorite pizza is let's say pepperoni back when i used to eat meat favorite color is let's say blue now if we click submit nothing happens but if we close this down here in the terminal it says hello john you like pepperoni pizza and your favorite color is blue so we've grabbed the stuff from the form that we filled out and we did something with it so very very cool and pretty easy now we could we don't have to put it on the terminal like that obviously we could let's say uh print it to the screen right so let's go self and let's walk this through again so how do we add text to our app well we did it up here right so it's just add widget in fact i can just copy this whole thing and the text is going to be whatever we put here now maybe we want to put all of this stuff as the text so we can do that notice i use single quotes you can do single or double doesn't matter at all and that should work so let's go ahead and save this and run this guy again so john let's say cheese and let's say black changing our answers around and you can see it's trying to fit it into this column it doesn't really have enough room so if we resize this it fits hello john you like cheese pizza and your favorite color is black and that's pretty cool so again we're going to get into this layout in the future moving this stuff around because this didn't quite fit in this video i just want to show you how to use the basic functionality of these things how to create a text input box how to enter stuff into it how to click a button how to grab the information out of there and do something with it we don't really care what we're doing with it but we're doing something now notice after i hit this button this stuff still is in here how do we get rid of that stuff that's really easy we can do that real quick we just come down here and in this same function after we press the button let's say clear the input boxes we can just call name dot text and set that equal to nothing right so we've got three of them so self dot pizza dot text and self dot color dot text we can just set them all to nothing so save this let's run this one more time up and we can just enter anything in here and then boom they disappear very cool one more thing i'll show you we set this text up here for the name let's say yeah for the name one multi-line to false if we set this to true we could run this again and just see what this does so here we can do this we can hit enter and we can just continue on down that's what multi-line does right that becomes a hassle when you actually do stuff with it later on but that's cool so that's how you do input boxes and buttons pretty simple pretty straightforward if you're not familiar with object oriented programming classes and things like this this may look a little weird you know just sort of maybe familiarize yourself a little bit more with object oriented programming class stuff with python we're just going to roll with this this will become more familiar as we do it more often you'll get used to this sort of thing with using self in front of everything right and stuff like that it's really not that tough try not to wrap your brains around it too hard if it doesn't make a whole lot of sense just kind of roll with it i promise it'll make sense more as we start to use it and it's actually really easy so that's all for this video if you like to be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codeme.com where you can use coupon code youtube1 to get 30 off memberships pages 49 dollars taxes all my courses over 47 courses hundreds of videos and the pds of all my best-selling coding books join over 100 000 students learning to code just like you my name is john alder from codingme.com and i'll see you in the next video

Channel: Codemy.com

Views: 52,376

Keywords: kivy input text, kivy button on_press example, kivy button on press, kivy button tutorial, kivy gridlayout tutorial, kivy GridLayout, kivy input box, kivy input tutorial, kivy clear input, kivy text input, kivy python, kivy.uix.label, kivy.uix.gridlayout, kivy.uix.textinput, kivy.uix.button, codemy, kivy codemy, codemy kivy, kivy press button, kivy enter text, kivy columns

Id: S41RPtdWe78

Length: 17min 33sec (1053 seconds)

Published: Thu Oct 29 2020