Window Creation
This is where the fun begins. In GUI programming, windows have "widgets" in them. In PySimpleGUI these are called "Elements" so that when you read "element" somewhere, you know it's a PySimpleGUI thing.
PySimpleGUI was designed by looking at the window creation problem visually. Remember, we're not coming at this problem from an Object Oriented programming point of view, so that frees us up to use other data structures, other constructs, other ways to view the problem.
Importing PySimpleGUI
Before we can use the PySimpleGUI package, we'll need to first import it. The coding convention that's recommended is to use this import statement when using PySimpleGUI:
You can read more about the recommended "Coding Conventions" and why they're important in a later section. For now, just go along with the recommendation and use this import statement.
Layouts - Rows of Legos
One metaphor for Elements is to think of them as Lego bricks. Except instead of building a wall from the bottom up, we're going to build it from the top down. We'll make the first row of bricks going across, then snap on the next row of bricks below that one, and keep going until we reach the bottom of the window.
In PySimpleGUI, the interior of the window, the definition of the contents, is called the layout. Let's examine this window. It has 3 types of very common GUI elements that I'm sure you've seen. 1. Text 2. Buttons 3. Checkboxes
Clearly it was "3 rows" as they're each labeled with "ROW 1", "ROW 2", "ROW 3".
In Python, things lined up one after another is best represented as a list. Lets write each row as a Python list...
Our first "row" could be represented as having the format of:
[Button, Checkbox, Button]
Row 2 would be
[Checkbox, Checkbox, Checkbox]
And row 3
[Button, Button]
Visually check it to see how they match.... but, we're actually missing something.... each row that some text at the front indicating the "ROW #", so each row will start with a Text, making row 1 actually be:
[Text, Button, Checkbox, Button]
Now that we have a format, in Python, for the rows, let's combine them to make the entire window. To do that, we simply put them in a list, making a layout be a "list of lists"
Notice how the code resembles the window visually. Each row matches up with a "row" in the window and as you scan down the layout, you can easily see how the rows of elements match the row of elements in the window.
There we have it...the definition of a window using one of the most fundamental building blocks in Python, the humble but oh so powerful list.
The Lego example was nice and all, but it's not "real" Python code... so let's get real.
Elements - The Lego Bricks
Elements are objects.
That's getting really real. You don't have to write code to make your own objects in PySimpleGUI, but you have to create some objects that PySimpleGUI has written for you.
To create an element, you'll create an object. A Text element is created by writing sg.Text(). A Button element is made using sg.Button(). And a Checkbox element is make by using sg.Checkbox().
Elements Are Configured When Created
Now that you know how to create an element, let's configure them. In some GUI frameworks, configuring a widget can take many lines of code. First you make the widget, then you set the font for it, then the background color, etc. Not all of them are like this, but some are.
PySimpleGUI elements have parameters for the things you can set for them. This makes configuring very easy when you can see the list of the parameters for an element. Because you, friend, are the important person here, a document was created so that you can easily see the parameters. This document is the "SDK Call Reference Guide" (or shortened to "Call Reference"). IF you use using PyCharm or an IDE that reads "docstrings", then your IDE can tell you the parameters as you are writing the code!
Returning to our example, the only thing that we need to set when creating these elements is the "Text" that is displayed. For the elements in the window, the text to be displayed is the first parameter. So.... to make the first row's first element, the code is:
Let's go ahead and write out the entire first row as a list
That's it for row 1. That's real Python code that we're going to run in a few moments.
Let's press on and write out the rest of the layout and assign it to a variable called layout.
layout = [ [sg.Text('ROW 1'), sg.Button('Row 1 - #1'), sg.Checkbox('Row 1 - #2'), sg.Button('Row 1 - #3')],
[sg.Text('ROW 2'), sg.Checkbox('Row 2 - #1'), sg.Checkbox('Row 2 - #2'), sg.Checkbox('Row 2 - #3')],
[sg.Text('ROW 3'), sg.Button('Row 3 - #1'), sg.Button('Row 3 - #2')] ]
Creating The Window
The window is also an object, so it has a form similar to the elements you've already learned. To make a window, we create an object sg.Window().
The Window object needs a minimum of these 2 parameters:
1. The window's title
2. The layout
Let's be brave and go for it....
Combining The Code So Far
import PySimpleGUI as sg
layout = [ [sg.Text('ROW 1'), sg.Button('Row 1 - #1'), sg.Checkbox('Row 1 - #2'), sg.Button('Row 1 - #3')],
[sg.Text('ROW 2'), sg.Checkbox('Row 2 - #1'), sg.Checkbox('Row 2 - #2'), sg.Checkbox('Row 2 - #3')],
[sg.Text('ROW 3'), sg.Button('Row 3 - #1'), sg.Button('Row 3 - #2')] ]
window = sg.Window('Window Title', layout)