Creating Basic UI Elements

00:00 Creating Basic UI Elements in PySimpleGUI. If you’ve ever used a GUI toolkit before, then you may have heard the term widgets. A widget is a generic term used to describe the elements that make up the user interface, such as buttons, labels, windows, and so on. In PySimpleGUI, widgets are referred to as elements, which you may sometimes see capitalized.

00:25 One of the basic building blocks of PySimpleGUI is the Window(). To create one, you can use the following code.

00:38 Window() takes lots of different arguments—too many for me to cover here. However, for this example you can give the Window() a title, a layout, and set the margins, which is how big the UI window will be in pixels.

00:51 .read() returns any events that are triggered in the Window() as a string as well as a values dictionary. You’ll learn more about these in later sections of this video course.

01:03 When you run this code, you should see something like you’re seeing onscreen. This example doesn’t really do much other than possibly displaying a message to the user.

01:13 But if you’ve ever tried GUI programming before, you realize that this is an achievement in itself. Normally, you would have other elements besides a Window() in the application, so let’s add some text and a button into the mix.

01:27 Create a new file called hello_psg.py and add the code as seen onscreen.

02:12 Most GUI toolkits allow you to lay out the elements using absolute positioning or by allowing the GUI to lay them out dynamically. PySimpleGUI uses nested Python lists to lay out its elements. In this case, you add a Text() element and a Button() element.

02:29 Then you create the window and pass in your custom layout.

02:34 The last block of code here is the event loop. A graphical user interface needs to run inside a loop and wait for the user to do something. For example, the user might need to press a button in your UI or type something with their keyboard. When they do that, those events are processed by the event loop.

02:52 When you use PySimpleGUI, you make an event loop by creating an infinite while loop that reads events from the window object. If the user presses the OK button or the Exit button, then you want the program to end. To accomplish that, you break out of the loop and close the window.

03:11 As you can see, running the code generates the window with the elements that we’ve created, and note that the OK button functions to close the window.

03:22 With the basics of PySimpleGUI out the way, in the next section you’ll see how to create a functioning application.