Python Desktop Apps with PyQT5 | Frank A | Skillshare

Python Desktop Apps with PyQT5

Frank A

Python Desktop Apps with PyQT5

Frank A

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 3m)
    • 1. Introduction

      0:13
    • 2. Qdesigner

      2:58
    • 3. Hello world

      5:08
    • 4. Button click

      5:35
    • 5. Name greeter

      6:51
    • 6. Create a calculator part1

      4:42
    • 7. Create a calculator part2

      4:30
    • 8. Layouts

      5:56
    • 9. Create image viewer part1

      2:36
    • 10. Create image viewer part2

      3:18
    • 11. Create notepad part1

      3:21
    • 12. Create notepad part2

      6:05
    • 13. Create a webbrowser part1

      7:04
    • 14. Create a webbrowser part2

      4:31
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

240

Students

--

Projects

About This Class

Learn Python Desktop programming, learn the skill you need to succeed 

If you are in IT, you are really missing out if you don't learn PyQt. It's the most used desktop module. So, don't be left behind!

At the end of this course, you will be able to make desktop apps with Python!

Meet Your Teacher

Teacher Profile Image

Frank A

Teacher

Sharing my experience in Technology here. I have a background in Computer Science and worked with nearly every programming language on the planet. I graduated with highest distinction during my masters program. I've worked on projects ranging from Robotics, Web Apps, Mobile Apps to Embedded Systems. These courses will help you achieve your goals.

To your success!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: welcome to the fight. And best, of course, Do you want to make desktop? Perhaps India scores will teach you how to make desktop, perhaps on to create your own note beds in our own image, fewer your own Web browser and a lot of cool stuff. 2. Qdesigner: we can start a graphical designer program gold designer, So I typed it in your terminal and you'll see Q t designer startup. So when starts, you can choose what kind of window you once. So you have dialogues, just the main window or religions. So we'll go with main window in selected screen size. Click creates. So now on the left, you simply have a lot off widgets. So what have you got here? That buttons got eyes in views. Containers, input widgets display widgets into some other stuff. This is our main window, and so we can simply click whichever widgets we want and records onto the window. Maybe you want to have two buttons and some other things like extended fields, and you can resize them, obviously. So in this blue, things can drink these somewhere. So you've got all kind off, which is here, I wonder. On the right Here you'll see the layoffs Difficulty main window, which constrains central widgets that's contained teacher widgets. You can navigate Rudy the window. You see this finger and below it you see the properties off every widgets. So, in case we select a button, this series has an object name geometry. You can set a tool tip, which is like the text it pops up can change the text, so there's an option. Text in there can also set a Nike, and she wants him to death and some other options. So this program designer allows you to design your graphical program so you don't have to do that from Coach. You can simply drag and drop whichever widgets you want to see. And there's really all kind of things in here. You've got all kind of boxes since, well, kind off. I think this is a kid under all kind of things in here. So it also depends on, like, How do you want to see? But ultimately you can a graphically design on the windows off your graphical application. 3. Hello world: Let's make the hello world, so we're going to start designer and click main window. Select a size you want. I think this size is just fine. This creates No, we don't just add hello world through the window. So searching in this between these widgets and we'll take the label, which is just plain text. Changed the text into have a world, and we want to change the front size because it's quite small. Don't know where it's. His funds rests on these three dots. You can change the size to a larger size. You can also change the font type. You want him and changed the besides as well. Just going to add this here can also change the opiate name if you want to like this. So now we have a basic window you can preview. It's you got to form preview. See what it will look like so might say that it's a bit too much to the left you can actually use to cursor keys to move them around. If you hold the control key while moving leakers resting the cursor keys, it'll take smaller steps. So just pressing the cursor keys. It takes a big steps. My holding the control key. You can take small, small steps. So if you go to a foreign preview, you see what it looks like, might once it's down. Okay, now we're going to export its Goto foul. Save us. That's going to name it's example dot t y safe. It's yes. And now we have a u Y. Fell. So if he closes, we can actually see this. Your wife l You go to the right directory. So we load to you. I fell and you'll see it's an XML fell. This fell defines the whole window that we just created. So you'll see the resolution here. See the difference we selected in your city. The text here So all of it is. Desire is created automatically in this type of coats, calls XML. So this is in there simply an XML fell. That's the gift, defines what we see any window. So if you add more widgets, you'll see more of this widgets per apartments. You see the home. It just gets larger and larger. The more thing she went So we want to Lotus fell actually and fightin. So start up the mix and all time disk oats. So we import the system module will import e bike UT models. So all of these, then if the program starts, it starts in the main function, which is this. It's like this is where it starts. So we defined that. We want a que application with the command line arguments and we'll create a window and the window will execute. When it's finishes execution, it exits, so it's waste forward. He weights and sell it exits. So then the main thing you want to do is to look out a window, which loads and creates an object off the type que main window. So we define our loss hair and inside this class, and we load the U. Y. You've seen this line of coat and you'll see example to wise. They fell. We just exported, and we simply show It's so if we were to lunch it, you see a window showing hello worlds, and this is just fighting codes, which loads De XML fell. So try to run. This coat might seem a bit daunting at first, but if you get used to it 4. Button click: Let's create a button. So if you button is clicked, this will do in action pretty like a hello world example, but weekend indirect. So first thing we'll do is open up designer. So designer allows us to design the user interfaces, so select a size now because we're only going to add a button to speak. One of the smallest size creates. Okay, so maybe not decides we wanted. But it's like a push button. So you'll see there several buttons in here and whichever button he wants to use from the coal perspective, the the usage is the same. Okay, so we've got a push button here you can resize it to. So a bigger size or smaller size, whichever you would like can position somewhere in the center. You see, it's have an object name, and so, by default, is caused push button. Now, this is not a very explicit name, because now, if you have a big user interface and you might have 10 buttons and all of them push button one push button to within three, so you might want to give that an explicit name. And so name it example Button, which in itself is not very explicit, but it will do for this example. You know, there's a lot of properties here, and the property once we're looking for is text. So you notice that there's a green collar here and you can change the change. The text. You can also change the phones E. Aiken. I can size. You can create shortcuts and you have several options in there case. And now we've got a basic screen. Might want to change the window side unless, well, whichever you can change TV. I came. I can if you want and all kind of properties being to design the whole user interface. And so we'll do with this. We'll have a button, which is what we want. And if we clicked the button, something will happen. Bacon fell. Save us, but an example. That's why Safe. Okay, so now we've great it are you surrender face, we can close designer. We can open our plights and editor and greatly program. So had already great city program. So we grant simply initialized q t We create a window and it keeps running until we exit. In this class we created window. You see it interest from Q main windows from Piketty ends. Basically, all you need to know is that we low T user interface fell here. So if you just copy this coats and run it, he will see that it's loads to use or interface. Let's run this program. Don't open a terminal here and you'll see we have the user interface. We just designed all in Biden coats. If we click on it, nothing actually happens. So we need to connect a button to a function. It's definer function. Let's call the function click. You know, it's pretty basic. Okay, so now we have a function. But the function is not called anywhere. And so to make its connectors with the button, we need to explicitly defined it. So he named it, but an example. The me button the screen. Hence we need to connect a click with the function. Now if you run it. See, there's no about an example. For example, Button Okay, so if you click it now, it's Costis its function. And so you see that with this just we added this line as well as this one. No, you can also show a message box if it's more, more your thing. Specify a window title. So then we kind of say any in geographical, their faces not moving back and forth between the terminal. You see, now we have a graphical message book show up. So that's it for a basic button. So now, if you click about any function is called and you see we have a graphical output simply using this line, the other line can be removed, and so this simple program creates a button click application. 5. Name greeter: It's great a hello world, but a custom one that we can write your own name and it will tell us hello and on our name . So a custom hello world with an April box on the button. So first thing we'll do is great. Start designer. Select your main window. Great IDs, so we need a mutton and write some text. So simple submits and told media input Field for online at its in which you can type your name right and you want some other labeling there. So instead of Texan able good to say name. So are these and as well as your submit button resize it, and you might want to change the label front of it. Quite fin bigger. It's a bit larger, no, and we've like form review. See what it looks like so commit smaller is a good idea, and you can move it with you therapies, quality control key and the arrow keys. You can move this thing around, so I would be careful which, petitioning for your user interface. It's one of it to the left. Think. Okay, take form preview and you'll see very basic app, right? You cannot starting lift status Bar on the bottom right? Must like status bar. We can make this smaller. Previewed seems got a basic window and the title, Mr Right Scroll down to Window title. No name is hello. So if you preview issue, say, Hello Web when you can type your name, have you been able to submit it where it's creature? So let's save this. It means Hello, doggie y, and you have to keep in mind the names of these widgets. So this way did his importance, and we name it line edits and the other one is boost button so it can clothes designer and open your favorite by tonight it or whether that is, you know, spider by charm, or he makes or whatever you can use whichever excited toe coat. And it's really wants. So I'm going to open. He called, and you'll see. We simply loads. Hello, that's you. Why? So this is the whole coat that simply starts the program, right? And so if we would start example of by, Let's see Justin the program. But nothing happens if we pressed the button. So we want to connect to call a function. If we breast and button and let's your missions books. We conflicted button. Okay, so he doesn't show it yet because it's not connected. We only created a function here. We need to connect a button, said he push button connected to the function. Say Hello, said this line connects actually be graphical widgets. So the button witty function. Now if we run, it's you see, it's Ghostie message books and what we want to show is the value off this name, right? So you want to be able to enter your name and get the missions. And so we time name is equal to it was called a Line Edits hands instead of world Will say hello name. Okay, so let's run it and you can type your name in here. You'll see it shows the message books, shows your name and what's still If there is an empty line, it only says hello, right, which is logical because it s name to the ends. But if there is nothing specified, it just says hello. You probably want to show a message saying, Answer your name if there is no name entered and so we can type if the length off the name smaller than the minimum length, so well defined it. Then show much. Is books seeing Enter your name right? Otherwise we'll show the name. So instead of just a number we specified and the variable for debts so that we don't have, like some magic number floating around, let's say three. So if the name is shorter than three until show whenever right? So once you write a name here whichever name he wants, I'll tell you the name. And so this is the basic program. Did will greet you with your own name. 6. Create a calculator part1: Let's make a simple calculation program sure, going toe at button as well as to text fields to said the input right? So once a number button as well can choose. It's been books for that, all right, so check two of those. And so it also had a label describing what he's actually mean. And so Landis X and great, another one named Why? So is your sore calculate x times y. And we'll make sure that's Kelly. Looks nice. Say 12 If these hair this one it larger right in the window of its father. So we can simply tired calculate x times y For this, we just program can take a preview. Okay, so we would be able to select a number. This text doesn't quite rise. Yes. So concert your ladle there. And let's also give it a name so that we inside the coat we know what we what will use. And so this starts to look like some graphical interface. Now, instead of being so explicit, it may just want to say calculates for these buttons, we should also give them a name. So no spin books. The other is named spin Books underscored to today's are not very good names. So with we can name it spin books, birth Let's say we ads underscore X and underscore White so that from the codes, we know exactly which the change we need. And so we have got spin books, X look, explain looks Why? And somebody calculates So it will do. Take another preview, you see, has some spacing Herren's. It's basically what it would look like now. It might also want to give the window a title. Okay, so now we have a window side as well, Scotty to imports and the calculate button. So safe. This my name is calculator. That's you. Why? Like safe? I can't Can loads the Niko's saving a scalpel later. Bye. Okay, so we have to load. He writes you. I felt it. This is the previous one. So that's loan calculator, don't you? Why can close this program calculator you? Why? And so if we start the program, it will show the calculator screen. So began said our input values here and press a button. But of course, nothing happens because we didn't yet writing code for death 7. Create a calculator part2: we're going to connect a button that we've created in the previous video with actual coat. So when did win me Percy button? Quickly button. Something happens. And so we and if you remember, we could named it, Button calculates, and we, if it's connected with we click it. It caused the function self that calculates, which is these methods dysfunction? So basically, what we do know is weak raise. It's a new function called calculates to simply these two lines of Khost, and we connected using this line. So if we were to remove this line, nothing would actually. So let's see what it actually looks like. Randy Coats, Click calculates. You see, it actually does something So dysfunction is called because on this line we have the connection with the function self that calculates. Just dismiss it, too. The magic carpet. So if you're right is exactly as it's shown, it will do the same. Now we want to to use it as a calculator. So we want to calculate X times y so that if we select some numbers here to actually show the outputs instead off hello world and so to do so, we need to get those values, so we need to get the value of X and the value of y. And if you remember, we called them Spin Books X and speaks. Why? So we can get value in this way and now we could bring those values and we need to print those values has drinks. This is how we can outputs X and white. Let's try it out. Randy Coats. We're going to set some numbers. Click calculates, and you'll see we're out putting X and Y. Now we obviously want to calculate the output. And so the output that's called Z X times Why and now we can simply help with Z and say infection. So if he run, it's you'll see weekend set our number. Click calculates, and you'll see it calculates X times y and we can also I put that in the same line. It's so times why he called to Z. So you get this lines of Prince a whole output and etc. Removed the empty line here. So now this is the complete program, and if you run it said some values, you'll see it all. Put that instantly so you can create your own calculator program in the same fashion to remember to its once you low to you are using the calculator you I fell. You need to calculate. You need to connect the button to the Met it. So that's self doubt calculates which we defined here. Just show you the whole coat on the screen. So this is the old goat. That's great city calculate. Obviously it loads the calculator. You, I fell does we could raise its in designer, so those those names need to be exactly the same. The B button calculates Spain box accents Pain books. Why are the ones that need to have been set in the properties window in designer? 8. Layouts: Let's have a look at layouts. So if we create a new window mean window, some size create. You see, we have several layouts here. So what are these for? These are for aligning all of your widgets. So if you would select a vertical layout and he would add widgets in there, let's say buttons. See, they are audits in the vertical direction. So now a four button hysterically. We need each other, right? So the lead, it's just go on the right here. Click Sorry on this one and click the leads. Now you can select, for example, the results on layouts and at which it's and you'll see they are audits. The whole results all direction. If you review its see, all of them are lines horizontally now. It doesn't mean your whole application is in this layout, so you can completely add buttons or whatever any position he wants. It's just that within this, they out they are aligned in a certain direction. Now there's another one off piece, which could be quite beneficial. So if you want to lay out a bunch of widgets and you can lay out so many grids, so just direct them on there now. If you drag it to decide, you see a blue line so you can align them that way. So there, Steve Blue Line again. It's not there. There you go. You see a blue line and we wanted better. Okay, so now we have three by three. They else, and you'll see their alliance quite nicely. If you want, you can change the layout size. She gets mirror in this form or, if you want, you can click right. Mouse button layouts ends layouts horizontally, so now they are stretched, according to this ICE review that you would resize it. See they get smaller or bigger, has the window sizes. And so this doesn't only apply to layouts. Of course, if you would have another widgets, let's see, uh, it's accepted. Fields. You see it immediately sizes to be full size. And so if you preview it and you would have some sexton here, I can resize it and you'll see it sizes along nicely. We teach region. Finally, there is the formally else and any formally out beacon simply, I reckon, the mold there and you'll see it's aligned as a form, and so you could have say Great question forming there. Right. So you got at savers. This'll able hands. They book would say name and you could have a line field in there. I'm sorry. Okay, so we have some. Now. Could have 1/9 name field in there and as well as other names. Rights. You could have a last name in there with another text field. Where is this thing? 10 Under text. Field ends. You could have some something better, right? Saying that? No. Whatever. So you can create a form that way. You might want to the vetoes on the top. Whatever. I can resize this thing. It can create our form. So that's different than the layouts you see there, like cigarettes. Results on vertical well, really submit them in a certain direction. Where is the form? You are really creating a form. Obviously you don't have to use these layouts. You can simply pulled widgets wherever you want him as you see fit. So you quits whatever buttons she wants. Whichever widgets you once and now you'll see that this his finger automatically submits, or it Ultimately, the button is automatically the whole screen size, which is probably not what you want, so click on the right mouse button layout and click break layouts. Now you'll see the button is only usual size again, so that's basically what you need to know about layouts. 9. Create image viewer part1: that's great. An image fewer. So start designer like main window and you'll select your screen size and press create. See the main window. It's actually named main window. Instead, off image viewer, scroll down on the rights. He'll see window title hands. I was going to name its image, your name, your program, anything you want. So now we need something to show images. When you look through, this might not be directly obvious about the label. Instead of just texted also supports images, so you'll see text here. He removed that you see it has Big Smith We conduct, and there's a small arrow there. Consider next choose fell. And from here you can select the fell. For example, Aiken's hands. I don't know. Whichever he met. You once selected this one from the from the computer disk. If you click preview and see an image right in your window. Now this is nice, but it's not a name if you're yet, so he wants a menu so that we can open new new images. Double click. It's up film press. Enter in your seedy new options. Pop up open inside exits so that we can see the fells in here. We also have an option to scale its. So let's say we want to scale it. Click on skill contents. Obviously, this thing should fit in the old screen, right? Most but only window layouts recently. And you might also want vertically. So now the whole thing. The image automatically fits into this cream, right? So now we've got our basic, even fewer program, but there's no coach it. So let's save the program, its name, its image view. That's your wife and save it now, the next video. We'll great tickles. 10. Create image viewer part2: So let's load our image viewer for the same programmers use or And we simply specifying the you I fell. We want to open toe run. It's You see the image viewer image and open an exit button, but it doesn't actually do anything. And so we need to create on open file dialog that sets the pick smith for the image. We do that with these lines, so we simply open dialogue with this line, get the foul name and we said to image dysfunction may set image and showed the fouled. I look, but we're not actually connected. It's with the menu Indians with the main menu. So this menu needs to be connected dysfunction to this function and so type self dots Action Open, which is name off the open button. But regards connects, hands opened. I look, if you run, it's see we can file open and we can select an image which will then show you can select different images. Basically, we have our image viewer, but we also want to connect the exit button. So great another function that's just going after exits, and we're just going to connecting menu button with the function right. Synthetic file exits, feed, exits, hands. You can open any image that you want and one thing that you might not want. It's like an stress image when you start up, and so what we can do is to open. The wife fell again. So scroll down to image. Fuel you Why and you'll CD picks Memphis set here so we could simply remove that line ends . I could see it starts with an empty window instead. And so if he opened a foul, shows the image. But it doesn't show like the empty or distressed mailbox image. So now we have our basic image. Fewer. Let me just show you the code again so she can take a look. So this is all the code for an image viewer. So we connect Manu actions. These two and we have the functions below. So to see the exit function, the open function, these two lines Getty foul name for using a foul they look. And the last 1 60 The image 11. Create notepad part1: Let's create a note. Better cologne and so basic text editor, Startup designer. Click on Main Window. You see, we have several options for the layouts. Ends going to go with B J landscape that creates now. Nope, it has many wants up and basically in text fields. Integrator menu. We simply start typing here on top so we can have file open safe option parents. Some ex adoption Now inside this window, we want to have a text view so we can change. Choose deplane texts at it. This should probably be inside the layups. And so you can pick, for example, the vertical layouts inside the vertical layout. He won t text fields and notice named Plain Text said it has object name. So can change that text if you once. Excellent. Now we have a little problem. Sophie for preview, it's and to re resize the window. It's not really changing. I see so the window he text window stays the same. So to change that, click rice multi person to your right. Most, but only on the window. Go to layouts and you'll see we have laid out horizontally, vertically or just size. So we had click just size. You'll see this instead. You want tohave they out in grits. So now if you review its let's see, it changes and one thing you'll notice it does. It has this border around it, so this border is created by the central widgets. So if you if you don't know UFT Navigator or the Inspector only only right, so you can click through your whole user interface and the central widgets Hezb E margins. So this it's the spacing around it set of nine. We changed them to zero. You see that? It starts fitting inside the window. Now we have a program that looks more like a program seeing. So now we have a basic no pets. They re size it. We were window Reese ices as well. Now you might want to extent he the men, you might have an edit here or help hell button and probably wanted about because you have to show that you made a separate we review again. You see, this is what the preview looks like. We've got a basic note bed interface. None of the buttons work because it's in a preview when we can type text in here to be created the basic no bets user interface. So the next video will great the actual code for this, that we can actually use it. 12. Create notepad part2: next thing we'll do is Neymar program. So click on your main window, scroll down to Window Tidal and you can name your program. So I named it. No bets then will save the user interface. Supplicant fell. Save us no pet, don't you? Why? And save its had already saved it. So that's why I got this. Papa. Next will open up your bites and editor and a low t know pit that you I fell. So that's this foul and you can if you to run it. You simply see the same it it there. That's enough T buttons, work rights. It's We're going to write a coat and you'll see that if you click on the menu, for example, Open conceded action name is off. The object name is called Action Open to Remember that. So we need to connect this one to a function so action open. Let's create our function. So you see, we have to call the triggered instead of clicked. And then we call the function open dialogue. Well, great and filed a look in which we simply get the founding. So if we to run this and we opened a foul, get filed a look and we could open. Some fell and you'll see it returned to Triple, said of The first element is actually the fell pots and the seconds is another thing. So we just need the 1st 1 We'll continue. Okay, so we get the first elements. Can we read that data? Right. So now we simply reach a data we could print out data to screen. It's Run it now and we click on file open. Like some file. Everything is shown on the screen whether we want to show it in the text editor. Right? So inside the sex ed it. That's what we called it. Something Click on it. See text editor here Unless you changed the name to something else. And it has a function called Got set, plain text. And we simply said it to data. No, it's run its open a foul. You'll see the output in here. No, no, just at all of the lines seem not to appear quite right. Yes, it is. Because we have not replace here. Remove this. Just read it open. So now we've opened a basic fell and we can start connecting the other buttons right So the other one is probably called safe dialogue that fail safe action safe. Okay, so we can again connected one to a new function. Hence he quote greater safety are looking there and we can connect all of them. Right? So there's probably action exits, right? Connected oneto A function? No, just accidents. And we also had an about dialog click help about action about gonna test one. And that's when we could simply show the the dialogue rights so measures books will do. Okay, so if you run, it's see one of them right exits when we have a typo here case if he ran it cyclic help about seeing it is not quite point rights. Just be amount. You see your message books now If you fell open, you can open it fell right and you can also exit it. So if you want, you can also implement a safe dialogue and other functionality in there. But this is principally how d how you would great attacks Editor 13. Create a webbrowser part1: will make Web browser using pipes, and so the first thing we'll do is start designer click on Main Window Click Create, so it'll show on a basic empty window. You press click on form review. Who sees just an empty window? Might Wonder City Window title. And so there's a value call called Title in Here Somewhere Window Tile and will name its on Fight and Whip Somewhere else. No, let's just call it by Web. Something easy to remember. So we've got a problem by Web, and it is just an empty window. Now we want to share Web pages now by Q T has a widget for debts called Q Web Few This one . If we drop it onto the window, you see it's just an empty, empty by default, so there's no weapon shown by default. You'll see euro said toe about blink, which is always an empty, empty page. So if you want, you can set a euro in there, whichever pays you want to sit there. Now, if you'd preview, it's see the page will pop up in a second or so unless it shoots. Okay, you didn't set it squat, stubborn with setting it. Apparently, you cannot have reached him. Okay, Just hit. Enter when you do that, so you can pick any page you want. Actually, if you preview it, you'll see it locally paid. Since inlay haddock, your web fuel doesn't have a border, so it doesn't have a nice surrounding, which is kind of what you once when you have a Web browser, you don't want these kind of cut off. So it looks like So we concluded by taking one of the containers. Now there are several containers. Widgets stick with your frame, which itself So we're going to go with frame and just largest Now you'll see it looks much better if you go to preview again and see it has a nice surrounding now that looks complete in that sense. So all I know is just a preview, but can enlarge it if you once so you could make it larger and you'll see the order the right here. So the web fuel was inside the frame, which is what we want now It's not positioned right, so you'll see it makes big steps if we use the arrow keys. And so, if you hold the control key. You can take smaller steps with the arrow keys, so that fits nicely. And if you hold the shift key and the control keys in the arrow keys, you can resize it on the right. You see the way that is getting smaller or bigger, just using the up and down left and right keys and holding control and shift. Okay, so now this thing seems to fit right. We would review its looks a bit like a Web browser, but still, we don't have a Euro bar, and I've got some left spacing here. Let's move the whole thing a bit. Let's say this should be fine, okay? And we might want to have the window of its smaller review. It again starts to look a bit like a Web browser. Now we don't have a euro more. So the pain when you can type the what based as you want to visit, it's what it's ago bottom. So these are things we want toe yet, and first, let's this thing is called Web Few, so just keep that in mind in the object name, so we want to have a go button. Let's make a big parts in there. Snake pushing Latin, meant to name a go button makes more sense and set a text to go if you want. You can also said the phones properties in there she could take a look. Make it a big larger if you want some. Okay, so that that looks like amidst exaggerated, say, 20. Maybe a bit smaller, depending on how you like it. You could also set a Nike, and if you want, we're in my grounds. So the adoption Aiken. It's right here can set one if you want, and we'll need something to type the weapon resting. So let's speak on line. Edits. It's going to be a bit larger. The name It's Websites Way notes. Okay, so we've got a very basic brause of you here. Be indebted, Slick. Not too fancy looking yet, so it's changed this size of it. Okay, so that looks something like a Web browser, right? We could type a euro and go, but it obviously wont do anything yet, but otherwise it's If you look at it, you say Okay, it's a Web browser. What we want to do is exported coat, because once you're finished designing you can save its to click on file, Save us and we'll Never the Web, don't you? Why, Chris Center? So now we safety you. Why? We can load it into fight. 14. Create a webbrowser part2: So we created a Web browser in fightin at last in the queue designer, and we have some code that simply loved. See your wife else and it's wept at you. Why that we saved from designer, but it just he fell. You go does executive to say misty previous examples. And so if he ran this coat you see a Web browser show up, which loads D new webpage. You'll see a go button text fields, but pressing the button doesn't do anything yet. And so let's do that. Snus connected. So what do you want to do is when we clicked a button, it should open a new page, right? Greater function, open sites or that's naming new page. Whatever does it name you once and from here we could just bring. Instead, the button is clicked, so now we need to connect him this methods. So this one to the to the button click. The button itself was called Go button, so connective function to the button, so this line will connect this function to the existing go. But it's this line to yet If we save it and the run, it's you see if we press see you go, but and it will output text to terminal, and we want to get the value off the web browser bar. Right? So where we type the website, I the risk is actually the pace we want to visit. We want to get its value now. We called it website, so we'll have to use that name. Safety your l type something here, Bill. See, it's you don't have to fail. You yet s okay now we have devalue often websites, so this line will get the value off this text line. Then what we want to do is go to the page. Right? So the actual witches that shows the website is called a Web fuel. So let me just show you this is called a wet few. So this thing right here that shows webpage right now scuttled like, Phew. And so what's himself? That what few. That loads. And the funny thing is, this load methods doesn't take a string, but takes so called cute girl. So that's this to the coach. And we run the program can type something in here. So let's say any any page spree like the go button and you'll see, we have a simple Web browser that can visit pages read. So whatever paid she wants to visit, you can take any any place you like. And basically, that's how it works, right? We've created a simple Web browser. We're just a few lines of coat. So this is the whole coat. Remove the enters and this land could be removed as well. Okay, so this simple coat or this this girl will greater Web browser for you just in fighting. So we created our own Web browse. Are you going to add more functionality? Few once So obviously modern browsers have all kind of functionality addicts, so it's not just showing the page, but they also have history, bookmarks and other kind of features.