Kivy Design Language - Python Kivy GUI Tutorial #5

what's going on guys john elder here from codingme.com and in this video we're going to start to look at the kivi design language all right guys i said in this video we're going to start to look at the kivi design language 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 kodamy.com where i have dozens of courses with hundreds of videos to teach you to code use coupon code youtube1 to get 30 membership that's all my courses videos and books one time fee just forty nine dollars which is insanely cheap okay we are moving right along with our kibby tutorials here and in this video we're gonna start to look at the heavy design language and i kind of talked about it a little bit in the last video i didn't get into the details but the kiwi design language allows us to sort of abstract away all of the design elements in our code so that our actual python code here is just python right instead of like trying to set all of these you know different uh designy things like uh font size and height and all these things we could put all that in another file and it sort of take care of it for us and it's just a best practices to always try and keep your design stuff and your code stuff separate and sort of think of this like css and html if you're familiar with html you know all website design stuff is like css it goes in a css file and then we reference that on the html file which is just the bare bones of the website itself so kind of the same way sort of think of it like that so i've got the same code that we worked on in the last video i've called this file design dot pi using the sublime text editor and the git bash terminal as always so let's come through here and start to clean this stuff up so let's see we've got all these widgets listed so actually let's take out all of this stuff that we've been working on in the last few videos all of our widgets right and the button and i'm gonna leave when we press the button this little method here right but i'm gonna take everything else out now so we've got our my grid layout and we still got our main my app class here with our build method in here so we need to change this from grid layout to widget we no longer want to inherit grid layout we want to inherit widget now we don't have widget up here so we need to import it so let's go from kibi uix dot widget you want to import capital widget right okay now this is we'll look at this a little bit later but okay we're essentially starting over right so let's save this and run it we can run pythondesign.pi and when we do we just get a blank app here right so we're basically starting over so what we need to do is create a separate file for our kivy design file and we can come up here and file new file and we get a blank file now we need to name this a very specific way so here's our main class with our my app app right it's got our build method in there right whatever you called this you need to call your kvdesign file sort of the same thing it needs to be unless you use the word app right we call this my app so we remove app part and we're just going to call our kibby design file my.kv all right so let's come back over here let's go file save as and let's save this as my dot kv right and we want to save this in the same kibi gui directory that we saved this file right so if we called this one elder we would call our kivi file elder dot kv and notice the lower case i always want to keep it lower case right but we didn't we called this my app so our qivi file is my.kv it's not my app.kb that will throw an error i'm not really sure why they built it that way but if you used app on here take the app part off and just call your kv file my.kv so okay we've got that now let's come over to this file and we want to start out by sort of putting a tag here to reference what grid layout we want to play with and we called our grid layout here my grid layout right so we can copy this bring it over here slap it in this little tag and we're good to go now we indent everything in the kivi design file right and by indenting i mean hitting the tab key on your keyboard notice how when i hit the tab key once boom it pops over i am not hitting the space bar a bunch of times do not do that you have to have you have to use the tab key it's very specific and very important right python is tab sensitive and especially so here you have to use the tab bar i don't know how many times i've had problems with students in the past who use the space bar to just space over you cannot do that here you have to use the tab key so inside of here we can do whatever we want right so let's try and recreate the app that we did earlier right so remember there was three labels and three input boxes and a button so we start out by creating a grid layout and you put a co a colon there right and then hit enter and now tab over inside of this grid layout we can just sort of start defining all the things we want and we start out how many columns do we want we want one column right just like before we're gonna have one column and then we're gonna put another grid layout inside of there with two columns just like we did earlier right same sort of thing so then inside of this grid layout we wanna put another grid layout and inside of that one we want it to be two columns right so same thing we did in the last video or a couple videos ago where we created two grid layouts and put one inside of the other by indenting this right here we're putting it inside of this one that's how this works by indentation right if we put this like this this would not be inside of this and it'd be all messed up right but if we indent it then the second grid layout with two columns is going to be inside this main grid layout with one column okay following me so inside of this grid layout we can now label the things that we want so we want a label right and we tab over that label needs to be have text of and let's say name okay and you'll notice i put a space here and i did not put a space here you could put a space there i just for numbers for some reason i tend to not put spaces and for strings i do just to help me read it easier but that's how this works so we had a label now we also had a text input and for that remember we put multiline [Music] equals false and again you could put a space or not it doesn't really matter right so this will put in two columns in column one the label and column two the text input now we had three of these guys so i'm just going to copy this and sort of paste it three times make sure you get your indentations correct here this other one was favorite pizza and multi-line false and this one was favorite color multi-line false okay we also had a button we want that button to be in our main grid layout so it will span both of them remember we did that so instead of indenting it inside of this guy we want it indented inside of this guy so let's come down here and bop it over and this is going to be a button and we want the text of that button to say say submit and then we'll work on the functionality in just a little bit we just want to put this up onto the screen for now so okay that's good and you'll notice just sort of follow this line of this button here it's even with this second grid layout indented inside of our grid layout our main grid layout right this button is not inside of here like these guys are right it's sort of outside that way that way right so okay let's go ahead and save this file let's go ahead and make sure this file is saved and let's run this and you'll notice in here we haven't done anything to reference this file kibi just knows to look for it in the same directory based on whatever you named this so it's looking for a my.kid file anyway by default it just knows to do that so we don't have to actually reference it anywhere in this file so okay let's go ahead and run this see if that worked oh and an error unknown class grid layout ah there we go this needs to be capital l capital l here capital l there okay all right it's the day after the election i'm exhausted get up late watching the results and there were no results okay so anyway here we go we've got this and it's all crammed into one little area down here we click the button nothing actually works so it looks right but this is obviously wrong so we need to blow this up and make it the size of the entire app and we can do that pretty easily let's head over here to our kibby design file and inside of this first grid layout where it has one column we can set the size for this whole thing we can go size and then we want this to be width and height but we want it to be the writ the width and the height of the entire app the root app so we go root dot with and root dot height i want to spell root right there we go and that should do the trick so let's go ahead and save this and run it see what this looks like and now boom it's expanded for the whole thing we see submit and we're good to go and notice this is small font if we wanted to change that we could head back over here to our button and we could go font underscore size and set that i think we had it at 32 before and we could run this now and boom our text is big again for the submit button and that's really all there is to it so much much easier to sort of abstract all this away and keep your design stuff in its own sort of file and uh pretty easy now you're gonna we're gonna learn all of these things texted put label button all the things that go in here as we go on and learn more about this in this video i just want to show you a very basic sort of how to use this and sort of go from there now our button doesn't actually work and we can make it work if we want fairly quickly here what we need to do is sort of our python app here doesn't understand that any what any of these things are so we need to sort of very specifically point out hey we want to make these variables and we do that by giving them ids so we can come up to our main grid layout right here and let's define some variables so we can call name and this is going to be name we'll give this one pizza and it will be pizza and this one will be color and it will be color right and you'll see how these sort of reference each other in a minute now we need to come down to each text input box and define the id so this one is going to be have an id of name this one is going to have an id of pizza and this one will have an id of color alright so we can save this now we can almost use these but we need to sort of make a quick change to our design file up here we need to import something now we in order to use these we need to use something called an object property because these are going to be like little object-y things so let's go from kivy.properties we want to import object property and there we go proper t and now make sure the o and the p are capitalized so now inside of our grid layout here we can set up those variables so we can go name equals and this is going to be an object property and we want to pass none in here because when the app starts these things won't have any value until we type something in right so we'll set them as none so let me just copy this three times the other one was pizza and the other one was color now we've got our press sort of method in here that works from the last videos in this case we don't need it have an instance anymore we just need to pass self but then everything else pretty much stays the same now we haven't set it up to print this onto the screen of the app and that's a little bit more complicated so instead of doing that we'll talk about that later we can let's just print it to the screen so i'm going to grab all of the stuff that we output from the last couple of videos and just print this to the terminal right so get rid of that so this will pass hello name or you like pizza and your favorite color is color this should output to the terminal all the rest of these things stay the same okay so that looks good now one last thing we need to do we need to call this function from our kivy design file so we called this function or method whatever you want to call it we called it press so now we come down here to the actual button itself and we go on underscore press like we did last time we want to go root dot press and this is a little function so we use our function parentheses all right so go ahead and save this and again this is press because we call this press all right okay so save this file save this file let's run this one more time so we've got john john likes pepperoni and favorite color let's say blue click the button nothing happens in our app these things disappear as we expect but when we close this down in the terminal it says hello john you like pepperoni pizza and your favorite color is blue so that works we'll get into putting it on the screen later this video is getting a little bit long but i will point out really quickly remember in the last video we cleared these by putting self.name.txt back to zero that still works even with the heavy design file thing separate so that's the kiwi design language we're going to get into this in a lot greater detail going forward we're probably going to end up using this method as opposed to the earlier method but you really kind of needed to learn that earlier stuff in order for this to make more sense otherwise you'd be like what are all of these things what are grid layouts what are calls what are you know labels text input what is all these things so we needed that sort of ground work before we could start using the kiwi design file probably but strictly speaking this is probably a better way to do it again you're abstracting your design elements away from your python code which is always a good idea and this sort of seems weird right lots of colons and indentations but you'll get used to it really quickly it's very similar to css css has the same sort of colon system going on right the indentation is a little different but uh you know it seems maybe a little overwhelming to have all this stuff on here but really it will start to make sense when you start thinking in tabs you know when we want something inside of something else we just tab it in and now it's in there all right we've got our second grid layout we tab the stuff into that right and uh pretty cool 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 cody.com where you can use coupon code youtube1 to get 30 memberships to pay just 49 to access all my courses over 47 courses hundreds of videos in the bds of all my best selling coding books join over 100 000 students learn to code just like you my name is john elder from codedeep.com and i'll see in the next video

Channel: Codemy.com

Views: 27,461

Keywords: kivy design language, python kivy design language, using the kivy design language, kivy design template, kivy tutorial, kivy python, python kivy tutorial, kivy tutorial for beginners, kivy tutorial python, kivy python tutorial, python kivy, kivy for beginners, kivy python app development, kivy python app, kivy python full course, kivy python tutorial for beginners, kivy tutorial #5, kivy tutorial build with python, kivy, python

Id: k4QCoS-hj-s

Length: 16min 13sec (973 seconds)

Published: Wed Nov 04 2020