Master PyQt5 part3: Hand-coding a GUI

greetings Python coders this is once again Alan Timur and I am still the author of mastering GUI programming with Python a book that sails the seven seas of Pi cute and returns with a bountiful booty of knowledge available from Amazon or from the publisher pact publications in our last video we looked at taking our application template that you see here and turning it into a GUI by using cute designer UI files in this video we're gonna do the same thing except we're not gonna use cute designer files we're actually just gonna hand code this GUI now you're probably saying to yourself I can't do that that's complicated that's hard I need a graphical interface to build gooeys and I'm telling you right now you're wrong because you're a smart person and this isn't that difficult and in fact if you're a beginner I would really recommend taking this approach especially with a simple GUI because you're gonna understand a lot more about the cute libraries and about coding duties and your code is gonna be cleaner and a lot less convoluted so soapbox aside let's get started I'm in my template here and the first thing I'm gonna do inside this init function is start creating widgets okay so the first thing we need are labels let's say username label and we're going to use a cute widgets cue label class with an argument containing the string that we want the label to have in it we'll do the same for a password label now we need our inputs so to do these we're going to use a Q line at it we'll start with the username and we don't need any arguments there next we'll do our password input another line edit okay last of all we need some buttons for the cancel button and the submit button so for those we'll use aq push button alright and as an argument will put the text that appears on the button maybe we'll make that login so those are our widgets now for our password input any password input you've seen in the last 15 years will normally obscure whatever text that you enter in we want that on our password input because we want to be safe we don't want anyone looking over our shoulder to see our password how do we do that let's pop over to the browser and we're looking here at the Q line edit class documentation now this is not Python documentation this is the C++ documentation unfortunately for us pi q does not have comprehensive API documentation for all the classes instead it directs us here to the C++ documentation that's because PI cute is really just a thin wrapper around the cute libraries okay so more or less we're just interacting with these C++ objects through Python the downside here is that we have to kind of translate C++ to Python in our heads as we look at this documentation now there is also PI side which is coming along in development and it has documentation and that may be more useful for us as that develops currently I don't find that it's complete enough or nicely laid out enough for me you can certainly check it out as well but we're going to look at the Q documentation C++ and as we look down here at the list of properties every widget has got properties that we can set and we can set these properties to change various attributes of our line at it in this case we want the echo mode property so let's take a look at the echo mode property all right so we can see right here we either want to set it to normal no echo password or password echo on edit all right and what we want is just password the standard password functionality to actually set the value of echo mode we need to use something called an accessor function accessor functions are something used in languages like C++ and Java that are highly object oriented and there are simply methods that are used to either set or get the value of a property instead of like we would often do in Python where we just set it directly these languages have special methods set aside for setting these values in cubed to retrieve the value it's usually just the property name which you call as a function to set the value is usually set followed by the name of the property so we can see these right here these access functions echo mode and set echo mode now the value we pass in shows us another C++ convention so anytime cute needs to select between various options it tends to use in nuns and num is just a named value usually just an integer in the background but it's a named value so that you're passing in something that's explicit so if we click on echo mode here this is the enum for echo modes and it's a property of the queue line edit class we can see normal echo password so we can see the values these they're just integers right so we could just pass in the number two but we don't want to be cryptic we don't want magic numbers so we're gonna be passing in this Q line edit password now this double colon is a C++ syntax in Python we just use it period let's go back to our code and let's see how that looks so I'm gonna call password input dot set echo mode remember that's our accessor function and then I'm gonna pass in this value sorry Q line edit dot password so this is the enum value that will set it to password mode and that's all we need to do now in PI cute we also have the option of setting properties when we call the constructor so we could say up here echo mode equals Q widgets Q line edit password that's another way you can do it although I will warn you that sometimes for whatever reason this way doesn't work I don't know why it's just kind of inconsistent so unless I've got a lot of properties to set and I want to save space I'll just do it this way we'll just use the accessor method and keep it like that so that's all of our widgets defined so let's head over to the terminal and we'll run our file as you can see we just get a blank window where our widgets well we've created our widgets but just because they live inside a main window doesn't mean that main window knows to put them on the screen well we have to do is we have to create a layout and we have to add our widgets to that layout so we don't add widgets directly to another widget we have to have this intermediary object called a layout so I can create a layout and they live in the cute widgets library we'll create one called the cute hbox layout there are different layout classes and each of them has a different way of arranging widgets within it the H box is a very simple layout that just simply stacks widgets side by side from left to right as you add them so then I can say layout dot add widget you'll say username label layout add widget won't go ahead and add the input next user name input layout dot add widget password label layout add widgets password input alright now we've added them to our layout but we need to tell you that this widgets layout is layout so we do that by using an accessor method so we say soap outset layout and we'll set it to that layout object now if we go back to our terminal here is our box and you can see things are just laid out horizontally side to side well that's not really what we want though let's try a out this time we'll try a V box layout or vertical box layout let's see what that looks like so this time the vertical box layout has stacked our widgets on top of each other but we don't really want that do we we would really kind of like our label to be next to our input and we certainly don't want our buttons stacked on top of each other there's a couple of ways we can do that actually three ways we can do that one way we can do it is to nest layouts so we can create a second layout called user name layout make it an H box layout make it an H box layout we'll add our username components to the username layout then we can add our username layout directly to our layout so you can add layouts to other layouts but you cannot add widgets directly to widgets widgets have to be out of the layouts layouts can be added to neither a widget or to another layout let's see what that looks like ah we forget our namespace so cute widgets dot QH box layout okay now you can see we have a nested layout here so this is inside this H box layout is inside the V box layout that's one way to do it another way we can do this is we can use a cue grid layout alright so in a grid layout it's sort of like a table or a spreadsheet where everything's in a Cell so when we call add widget we need to give it a row and a column let's give that zero if we don't it'll just add it to the next row so let's see what that looks like oh well here we go okay actually we don't need key words here so just positional arguments here guess I was thinking of another toolkit oops and we need to remove our user name layout there we go so this is our grid layout and you'll notice that it actually established that there were two columns in this grid and it just kept adding column after column so that's pretty good so that is maybe what we want but there's an even better option cute has a layout called the form layout which is used for any kind of a form like this so where you've got a label and then a widget a label and a widget and this is a great convenience layout because actually we don't even need to create label objects in this case we use its add a row method we can specify the label text and then the input widget that saves us a lot of coding we can even just get rid of these labels up here again let's try our file oh and we've got something going on here let's see what's going on oh yes we don't need to add our password widget twice ah there we go perfect so apart from saving you some coding another thing this does is it does platform specific things as far as styling so if you were to use this on Mac it would actually arrange things so that it looks like forms on Mac are supposed to look same thing on Windows Linux it does platform appropriate things for forms so anytime you have a form situation like this I would recommend using that alright let's finish off here by adding in our buttons so we can say layout add row and what I want from my buttons is I want them to be grouped together horizontally under the inputs so to do that I'm actually going to put them on a widget so I'll create another queue idjit you may give it a horizontal layout okay and notice I'm not assigning my layout a name here because I can always just retrieve it by calling the accessor function for the layout so that's what I'm doing here that's another way to do this rather than explicitly naming your layout all right so I'm going to have the cancel button and I'm going to add the submit button finally I'm going to add a row with a blank label and my button widget and there we go as you can see my buttons are pushed over here under the inputs I can type my username I can type my password and it's obscured I can click these buttons so again this is all the code that it took it's not a lot of code we could probably even make that a little bit smaller if we really wanted to like I said if we if we didn't use our accessor methods if we just use properties or keyword arguments here for the properties but even so this is not a lot of code and it's all right here we don't have a second file to deal with again if you like using cute designer that's fine too I just want to make the point that it's not that hard to hand code these things it does take a little bit of reading in the documentation but that's a healthy thing I think for anybody learning to work with PI Q so that's all we're gonna do for now in the next video we're gonna show you how to actually get these gooeys to do something right we're going to connect our inputs to some functionality that's all for now again do check out my book there will be links in the description I will have all the example code linked in the description you all have a great day do lots of coding god bless

Channel: Alan D Moore Codes

Views: 5,065

Keywords: Python, PyQt5, PyQt, Qt5, GUI Programming, Packt, Mastering GUI Programming with Python

Id: QdOoZ7edqXc

Length: 19min 50sec (1190 seconds)

Published: Wed Sep 04 2019