Shifting Gears for GUI Development in Python

Why you need to change the way you think about programming.

From the very beginning, it’s drummed into us: your program runs sequentially, top down, calling functions as the calls are hit, and returning to the next line in your program. The order of your statements determines the flow of your program, and if you do things out of the proper order, errors, or worse, subtle bugs ensue.

And then, you’re confronted with development of a GUI, and all those “rules” fly right out the window. Almost anything can happen at any time, governed only by the whims of the end user and completely outside your scope of control.

The Libraries

There are several different frameworks you can use to create Graphical User Interfaces (GUIs). The two I use are PyQt5 and Pythonista UI, but others include TKinter and Kivy, and others. But the principles are much the same in all of them:

1. Laying out the physical locations of various items on the screen.
2. Defining the reactions of those items to the things the user does on the screen and keyboard.
3. Defining the conditions to flow between one layout on the screen and another.

Many of the libraries also include a tool to design your layouts in a “drag-and-drop” fashion, speeding development and reducing the need to track the physical locations of items in the layout. These tools also facilitate ease in modifying your layout without requiring extensive changes to your code. This adds a “step 0” to the above, that being to load the design templates into your program and associate the items into your code.

An example

Let’s look at a simple example: we’ll build a screen containing a button and a text field that will increment by one each time the button is pressed. This will demonstrate the interaction between the screen and the program.

First, let’s quickly lay out the screen:

This is what my design looks like on my iPhone using Pythonista UI. It includes one label widget (most libraries call the items you can arrange on the screen “widgets”) which I named count and initialized to the text “0”. All labels are considered to be strings. It also has one button widget with the text field”Add 1”, and has an action (the function to be called when the button is clicked) of “add_one_to_count”.

The following is the boilerplate code with just the additional add_one_to_count() function and a line to save count to a variable to reduce the amount of typing.:

That’s actually all the code required to make the screen functional. The action function gets the current string from count, adds one, and replaces the value in count.

ui.load_view() reads the .pyui file with the same name as the program, processes the layout defined there, and returns the layout. If no .pyui file exists, a blank layout is set up, and you can define your own widgets and place them on the screen yourself.

The call to .present() at the last line of the code starts the “event loop”, which watches for events on the screen, like buttons clicked, and calls the associated actions, if any. Touches / clicks elsewhere on the screen are ignored, simply because no action has been associated with them.

Summary

This has been a very simple example of the style of programming required for GUI programming. While this example uses Pythonista UI, the principles are the same for TKinter and PyQt, and most other GUI libraries.

In the next installment, we’ll look at what other widgets can be used and the types of interactions they allow.