How To Build Forms With QFormLayout - PyQt5 GUI Thursdays #5

what's going on guys john elder here from codingame.com and in this video we're gonna look at the q form layout for pi q t5 and python alright guys like i said in this video we're going to look at the q form layout 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 codeme.com we have dozens of courses with hundreds of videos that teach you to code use coupon code youtube1 to get 30 membership it's all my courses videos and books one time fee is just forty nine dollars which is insanely cheap okay like i said in this video we're gonna look at the q form layout and up until now we've been using the box layout and that's really handy but there's something you can use if you're going to create a form and this is you know obviously a very simple form we've got a couple of labels and some boxes and a button and when we click on this we can type in something here and then you know you click the button john whatever but this q form layout allows us to do this very very easily much easier than other layouts that come with pi qt so that's what we're going to look at in this video so let's head over to our code i've got a file called forme.pi this is the basic pi qt starter code that we always use i'm using the sublime text editor the git bash terminal as always and you can find a link to the code for this video and all my videos in the pin comment section below as well as a link to the pi qt5 playlist with a bunch of other iqt5 videos so okay we've got our main window we've got our set we're setting our title to hello world and now normally we would use this qv box layout that's what we've been using up until now but we're not going to use that in this video instead we're going to use the q form layout and actually let me put this this is the way we used to do it let me put this back up there so we can see now to use this we have to name it so let's call this form underscore layout and i'm going to set that equal to a qtw.q form layout right and now we need to set that so let's go self dot set layout and then we just want to pass in this name right so before we had self.set layout and then we just passed in directly the box layout instead now we're naming this a variable and then passing that variable in so it's slightly different the reason why we need to do it this way is because we need to be able to reference this later on and add things to it so we need a name for it so i've named it like that so okay we've got this here's our self.show we always need to have that now let's just add our stuff right or widgets or whatever you want to call them so what we want is a label going across the whole top and then two form items two q line edit boxes that we can type stuff into and a button so basically four things so let's just start making these so i'm gonna name this label underscore one and this is going to be a qtw.q label we've done this stuff before and i'm going to say this is a cool label row and everything in the q form layout oh i misspelled layout l-a-y there we go layout okay and like i said everything in a q form layout is a row right so there's our label now we remember we have been like we've been resizing fonts so let's go dot set font and that's going to be a q t g dot q font and let's name this helvetica make it like size 24. it's a qtg because up here we imported qt gui as qtg and this font thing hue font is part of the qt gui right so okay so this will create a label and set the size a little bit bigger we also now want an entry box for first name and last name so let's just call this f name and set that equal to a q t w dot q line edit and we want to pass in self and we've done this before we know what q line edits are if you're not familiar with them check the link to the playlist in the pin comment section below check that out so now we've got a first name and a last name we also want a button but i'm not going to pre-define the button and i'll show you why in just a second mainly just to show you two different ways to do this but okay we've got our stuff defined right now let's actually add rows to app so to do that we call our q form layout that we named up here right and this is why we named it so we can reference it down here so this is going to be form layout dot add row and anytime we want to add something we just do it like this so we're going to do a label two entry boxes and a button so we need four of these guys right so what do we want to add for each of these well the first thing i want is label one so i'll just put label one in there the next thing i want is one of these and one of these so to do that first we create a little label for it so i'm going to say first name and then we just pass in the thing right so here this will be last name and we'll just pass in l l underscore name so we've got first name and last name first name and last name which correspond to these two line edit guys now finally we want the button right so we could define the button in the exact same way we did here but we don't need to reference it later on we need to reference all of these things later on so they need names like label1 and fname and lname right so when we fill this out i want to be able to take that information and do something with it so i need to name it so that i can reference it right the button i really don't need to do that we're just going to click it so i can define it right here if i want or i could define it up here but i'll show you the second way to do it so inside of here we just go this is a button so it's a qtw dot hue push button right and then what do we want the button to say well we probably wanted to say press me right and we also wanted to do something so we can go clicked equals and remember we pass a lam duh and then i want to create a function called press it and we've done this before and this is a function so we put a little function brackets now notice this l it really looks like a capital l but this is a lowercase l make special note of that this is an uppercase l see it's white it looks angular this is a lowercase l it's just how sublime does it makes it look like an uppercase so okay we've got this preset function now we need to create it so down here i'm just going to define press it and then we can do anything we want when this button is pressed so our label up here is called label1 we want to change the text from this is a cool label row to something else so i can do this and then we can go dot set text and then we can pass in anything we want so i'm going to create an f string and i'm going to say you clicked the button and then we can pass in something from the form so let's grab the first name that's f underscore name so we would just go f underscore name dot text and that's a function and then maybe i'll put an exclamation point and okay that should work so let's go ahead and save this and run it form for me dot pi come up here python for me dot pi and when we do we see this is a cool label row we can type in john we can type in elder we click click the button you click the button comma john if we want to go crazy we can put first name and last name so inside of here we would do another one and call l underscore name dot text right if we save this and run it never guess what will happen now if i type in john elder and click the button you click the button john elder but the point of this q form layout thing is we very easily created a form that's sort of formatted the way we want it to be the way a normal form is you see right here it says first name and then the box last name and then the box it's doing that because we set it up right here as an add row with the text in the box text box so we don't have to mess around with the grid system and positioning both a label and a line entry box you know a q line edit box i guess technically called right we just do it like this with add row and piece of cake so you can put anything you want in here i'm just using line edits and labels you can put spin boxes combo boxes anything you want radio buttons all the things you can put in there just by using the add row and then passing in the defined thing and it's really cool so that's the q form layout you know if you're going to create a regular form and it's going to look like a form you know standard form layout the q form layout class is a really easy way to do it much easier than using even the grid layout system we haven't really talked about that too much we probably will in the future uh but still 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 codeme.com where you can use coupon code youtube1 to get 30 on memberships and pay just forty nine dollars to access all my courses over 47 courses hundreds of videos in the pds of all my best-selling coding books join over a hundred thousand students learning to code just like you my name is john elder from coding.com and i'll see in the next video

Channel: Codemy.com

Views: 5,590

Keywords: pyqt5 qformlayout, pyqt QFormLayout, pyqt5 forms, pyqt5 form layout, pyqt5 form example, pyqt5 login form, pyqt5 registration form, using forms with PyQT5, QFormLayout with PyQt5, codemy.com, John Elder, john elder pyqt5, PyQT5 Tutorial #5, pyqt5 tutorial python, pyqt5 tutorial python 3, pyqt5 tutorial, pyqt5 tutorial playlist, pyqt5 tutorial gui, gui programming in python, pyqt5 gui tutorial, pyqt5 modern gui, pyqt5 gui

Id: Lyph52xJe7U

Length: 9min 35sec (575 seconds)

Published: Thu Feb 18 2021