Create Your First GUI App in Python | PyQt6 Tutorial

hey how's it going guys in this video we're going to build a face simple application using pyqd6 all right so this is going to be our tutorial uh lesson number one so here i design a very simple interface using the qt designer application and let me launch the application so this is basically everything i'm going to create in this video so from this application will have a q line edit field so basically that's the input field a push button and a text field and what this application will do is we're going to input a value from the input field so say i want to print my name j and when i click on the push button it's going to print a message hello followed by my name jay and that's it and i'll show you how to use the qt designer on the next video all right so before we begin i'll need to install the library so here let me launch my command prompt so to install pi qd6 all you need to do is just need to use the command pip install pyq d6 in your command prompt and since i already have the library installed so i can just close the command window right so here let me activate my environment i'm going to select qd6 so start by importing here let me increase the font size so start by importing the system module and let me save the python script as demo.pi and here i want to take you to pi qd6 modules documentation so here's the little modules that we can use or we can import in our application most of the times depending on the application that you are creating the modules i will be using may be a little bit different but in general you will be using the qt widgets module inside this module these are all the widgets that you can import to your application so you'll have a combo box and here's the uh check box calendar widget radio button push button and so on it may take a little time to actually get used to using every single widget for now let's create the application right so from pyqt six dot qt will address i'm going to import the following class q application keyword q line edit so this is basically the input field and q j is basically the window i also want to import my push button so the class name is q push button and the text box is going to be q text edit widget because i want to insert my wedges in your vertical order so i'm going to import this class called qfe box layout so this stands for vertical box layout and because i want to insert an icon to my application so here me takes you to my uh project folder so here inside my folder i have this a map star icon and to embed an icon from pyqd6 the qt gui module i'm going to import the queue icon class and this are everything i need to import to create this application when you are creating a pi qd application you must have a queue application instance and let's go to queue applications documentation all right so the q application class manages the ui application control flow and the list object is basically your arguments and by default if i'm not going to provide any argument we can insert empty list and a lot of time you're going to see people use assistant ar gv so this is when when you are using a command prompt to run the application sometimes you may want to provide your own arguments usually let's use a system.argument statement and to execute the application we'll use the uh statement app.execute right now if i run the script it's not going to do anything because we haven't created uh the application yet so let's go ahead and create the application i'm going to name this class my app i'm going to insert keyword as the appearing class now go back to line 13 and here i'm going to construct my app instance and name the instances window this goes to my app now this window instance is going to inherit all the characters from this my app class and from keyword class there's a mythical show to display the window so here i can type window.show if i run it that's going to display the application window so right now we have the shell so basically a blank window we can design what would yours or controls want to implement to the application so first let's give this application a title so i'm going to use uh the self.set window title method and i'll name this application hello app entering builder an icon i'll use the set window icon method and from q icon class i'll insert the icon file path me maps.ico if you want to resize the window since i want to uh set the window width to 300 and window height to 200 so it's going to be outwards and heights now if i launch the application and here i have a blank window with an icon and the window title on the top let me make the windows size a little bit bigger so i'll change the width value to 500 and for the height let's do 350. right so i'm going to create my layout option to organize my widgets so here's my qfe box layout instance and we also need to uh set the layout so that way the layout class will take effect now i want to insert all my widgets to uh this layout archer or basically my uh container to hold all the widgets so let's create the widgets first this is going to be our input field and it's going to be a q line edit object and push button and because i know i'm not going to uh use this uh button object and any other methods so i'm going to remove the self reference and it's going to be output field actually let me just name this a self.output and it's going to be a text box so i'm going to assign a q text editor class as the object right so we have create all our widgets so this is going to be uh bridges now i can add all the widgets to my layout option so to add the widget to the layout object we'll use the add widget method inside the adwords method we're going to insert the widget names so the first one is going to be self.input field and it's going to be button and it's going to be output if i run the application so here is my input field my push button and my output text box and here notice that my font is a little bit too small so let's configure the fonts by applying a css style sheet so from app instance we can use the set style sheet method to insert our own css style i want to apply the font size to let's do 25 pixel to all the uh woodrow objects and for the push button i want to set the default font size to 20 pixel now this time if i launch the application and find insert j and the font size is going to be much bigger and here we have an implement any functionalities to the push button so let's do that right now so first uh let's insert a label to our push button for the caption let's say say hello and i want to assign a shortcut to a letter s so i'm going to insert input and symbol right next to uh letter s right so we have the interface created now we just need to create the function to print the name in the output field so create a method called say hello and first we need to grab the name from the input field circle this is input text and forms of input field dot text and it's going to return the current text that i type in the input field they want to print message hello followed by the person's name right click on the push button so from output field i should now prefer phone cell.output i can use the settext method to insert the message that i want to display i want to say that hello for by giving the input text value and that's it and to assign this a function to the push button so there are two ways we can do it one is to directly link to the click signal and he will assign the function say hello the other approach is we can reference the signal manually so from button.click dot connect and we can then assign the uh function name or method name so sub da say hello in item method will work just fine i'll go with the first one and that's the script to build the entire application right now let's give it a try so if i launch the application i'm going to type my name j and here i'm going to use the shortcut alt s and i'll print the message hello j if i change the name from j to google and i'll click on the push button and that's going to update the message to hello google all right so this is someone to show in this video for the next video i'll show you how to use the qt designer to design your application

Channel: Jie Jenn

Views: 65,209

Keywords:

Id: SelawmXHtPg

Length: 13min 3sec (783 seconds)

Published: Fri Feb 19 2021