In this chapter, we start creating amazing GUIs using Python 3.6 and above. We will cover the following topics:

• Creating our first Python GUI
• Preventing the GUI from being resized
• Adding a label to the GUI form
• Creating buttons and changing their text property
• Text box widgets
• Setting the focus to a widget and disabling widgets
• Combo box widgets
• Creating a check button with different initial states
• Using radio button widgets
• Using scrolled text widgets
• Adding several widgets in a loop

In this chapter, we will develop our first GUI in Python. We will start with the minimum code required to build a running GUI application. Each recipe then adds different widgets to the GUI form.

In the first two recipes, we will show the entire code, consisting of only a few lines of code. In the following recipes, we will only show the code to be added to the previous recipes.

By the end of this chapter, we will have created a working GUI application that consists of labels, buttons, text boxes, combo boxes, check buttons in various states, as well as radio buttons that change the background color of the GUI.

At the beginning of each chapter, I will show the Python modules that belong to each chapter. I will then reference the different modules that belong to the code shown, studied and run.

Here is the overview of Python modules (ending in a .py extension) for this chapter:

Python is a very powerful programming language. It ships with the built-intkinter module. In only a few lines of code (four, to be precise) we can build our first Python GUI.

To follow this recipe, a working Python development environment is a prerequisite. The IDLE GUI, which ships with Python, is enough to start. IDLE was built using tkinter!

Here are the four lines ofFirst_GUI.py required to create the resulting GUI:

Execute this code and admire the result:

In line nine, we import the built-intkinter module and alias it astk to simplify our Python code. In line 12, we create an instance of theTk class by calling its constructor (the parentheses appended toTk turns the class into an instance). We are using the aliastk, so we don't have to use the longer wordtkinter. We are assigning the class instance to a variable namedwin (short for a window). As Python is a dynamically typed language, we did not have to declare this variable before assigning to it, and we did not have to give it a specific type. Python infers the type from the assignment of this statement. Python is a strongly typed language, so every variable always has a type. We just don't have to specify its type beforehand like in other languages. This makes Python a very powerful and productive language to program in.

In line 15, we use the instance variable (win) of the class to give our window a title via thetitle property. In line 20, we start the window's event loop by calling themainloop method on the class instance, win. Up to this point in our code, we created an instance and set one property, but the GUI will not be displayed until we start the main event loop.

This recipe used a minimum amount of Python code to create our first GUI program. However, throughout this book we will use OOP when it makes sense.

By default, a GUI created using tkinter can be resized. This is not always ideal. The widgets we place onto our GUI forms might end up being resized in an improper way, so in this recipe, we will learn how to prevent our GUI from being resized by the user of our GUI application.

We are preventing the GUI from being resized, look at:
GUI_not_resizable.py

Running the code creates this GUI:

Line 18 prevents the Python GUI from being resized.

Running this code will result in a GUI similar to the one we created in the first recipe. However, the user can no longer resize it. Also, note how the maximize button in the toolbar of the window is grayed out.

Why is this important? Because once we add widgets to our form, resizing can make our GUI look not as good as we want it to be. We will add widgets to our GUI in the next recipes.

The resizable() method is of theTk() class, and by passing in(False,False), we prevent the GUI from being resized. We can disable both thex andy dimensions of the GUI from being resized, or we can enable one or both dimensions by passing inTrue or any number other than zero. (True, False) would enable thex-dimension but prevent the y-dimension from being resized.

We also added comments to our code in preparation for the recipes contained in this book.

A label is a very simple widget that adds value to our GUI. It explains the purpose of the other widgets, providing additional information. This can guide the user to the meaning of an Entry widget, and it can also explain the data displayed by widgets without the user having to enter data into it.

We are extending the first recipe, Creating our first Python GUI. We will leave the GUI resizable, so don't use the code from the second recipe (or comment thewin.resizable line out).

In order to add aLabel widget to our GUI, we will import thettk module fromtkinter. Please note the two import statements. Add the following code just abovewin.mainloop(), which is located at the bottom of the first and second recipes:

Running the code adds a label to our GUI:

In line 10 of the preceding code, we import a separate module from the tkinter package. Thettk module has some advanced widgets that make our GUI look great. In a sense,ttk is an extension within the tkinter package.

We still need to import the tkinter package itself, but we have to specify that we now want to also usettk from the tkinter package.

Line 19 adds the label to the GUI, just before we callmainloop .

We pass our window instance into thettk.Label constructor and set the text property. This becomes the text ourLabel will display.

Try resizing and maximizing this GUI with a label and watch what happens.

In this recipe, we will add a button widget, and we will use this button to change a property of another widget that is a part of our GUI. This introduces us to callback functions and event handling in a Python GUI environment.

We add a button that, when clicked, performs an action. In this recipe, we will update the label we added in the previous recipe as well as the text property of the button:

GUI_create_button_change_property.py

The following screenshot shows how our GUI looks before clicking the button:

After clicking the button, the color of the label changed and so did the text of the button, which can be seen as follows:

In line 19, we assign the label to a variable, and in line 20, we use this variable to position the label within the form. We need this variable in order to change its properties in theclick_me() function. By default, this is a module-level variable, so we can access it inside the function, as long as we declare the variable above the function that calls it.

Line 23 is the event handler that is invoked once the button gets clicked.

In line 29, we create the button and bind the command to theclick_me() function.

We also change the text of the label to includered as, in the printed book, this might otherwise not be obvious. When you run the code, you can see that the color does indeed change.

Lines 20 and 30 both use the grid layout manager, which will be discussed in the following chapter. This aligns both the label and the button.

We will continue to add more and more widgets to our GUI and we will make use of many built-in properties in the other recipes in the book.

In tkinter, the typical one-line textbox widget is called Entry. In this recipe, we will add such an Entry widget to our GUI. We will make our label more useful by describing what the Entry widget is doing for the user.

This recipe builds upon theCreating buttons and changing their text property recipe.

Check out the following code:

GUI_textbox_widget.py

Now, our GUI looks like this:

After entering some text and clicking the button, there is the following change in the GUI:

In line 24, we get the value of the Entry widget. We have not used OOP yet, so how come we can access the value of a variable that was not even declared yet?

Without using OOP classes, in Python procedural coding, we have to physically place a name above a statement that tries to use that name. So how come this works (it does)?

The answer is that the button click event is a callback function, and by the time the button is clicked by a user, the variables referenced in this function are known and do exist.

Life is good.

While our GUI is nicely improving, it would be more convenient and useful to have the cursor appear in the Entry widget as soon as the GUI appears. Here we learn how to do this.

This recipe extends the previous recipe,Text box widgets.

Python is truly great. All we have to do to set the focus to a specific control when the GUI appears is call thefocus() method on an instance of atkinter widget we previously created. In our current GUI example, we assigned thettk.Entry class instance to a variable named, name_entered. Now, we can give it the focus.

Place the following code just above the code which is located at the bottom of the module and which starts the main windows event loop, like we did in the previous recipes:

If you get some errors, make sure you are placing calls to variables below the code where they are declared. We are not using OOP as of yet, so this is still necessary. Later, it will no longer be necessary to do this.

Adding this one line (38) of Python code places the cursor in our text Entrywidget, giving the text Entrywidget the focus. As soon as the GUI appears, we can type into this text box without having to click it first.

We can also disable widgets. To do that, we will set a property on the widget. We can make the button disabled by adding this one line (37 below) of Python code to create the button:

After adding the preceding line of Python code, clicking the button no longer creates any action:

This code is self-explanatory. We set the focus to one control and disable another widget. Good naming in programming languages helps to eliminate lengthy explanations. Later in this book, there will be some advanced tips on how to do this while programming at work or practicing our programming skills at home.

Yes. This is only the first chapter. There is much more to come.

In this recipe, we will improve our GUI by adding drop-down combo boxes which can have initial default values. While we can restrict the user to only certain choices, we can also allow the user to type in whatever they wish.

This recipe extends the previous recipe,Setting the focus to a widget and disabling widgets.

We insert another column between the Entry widget and theButton widget using the grid layout manager. Here is the Python code:

This code, when added to the previous recipes, creates the following GUI. Note how, in line 43 in the preceding code, we assigned a tuple with default values to the combo box. These values then appear in the drop-down box. We can also change them if we like (by typing in different values when the application is running):

Line 40 adds a second label to match the newly created combo box (created in line 42). Line 41 assigns the value of the box to a variable of a special tkinter typeStringVar, as we did in a previous recipe.

Line 44 aligns the two new controls (label and combobox) within our previous GUI layout, and line 45 assigns a default value to be displayed when the GUI first becomes visible. This is the first value of thenumber_chosen['values'] tuple, the string"1". We did not place quotes around our tuple of integers in line 43, but they got casted into strings because, in line 41, we declared the values to be of the tk.StringVar type.

The preceding screenshot shows the selection made by the user as 42. This value gets assigned to thenumber variable.

If we want to restrict the user to only be able to select the values we have programmed into theCombobox, we can do that by passing thestate property into the constructor. Modify line 42 as follows:

Now, users can no longer type values into theCombobox. We can display the value chosen by the user by adding the following line of code to ourButton Click Event Callback function:

After choosing a number, entering a name, and then clicking the button, we get the following GUI result, which now also displays the number selected:

In this recipe, we will add three check button widgets, each with a different initial state.

This recipe extends the previous recipe,Combo box widgets.

We are creating three check button widgets that differ in their states. The first is disabled and has a check mark in it. The user cannot remove this check mark as the widget is disabled.

The second check button is enabled, and by default, has no check mark in it, but the user can click it to add a check mark.

The third check button is both enabled and checked by default. The users can uncheck and recheck the widget as often as they like. Look at the following code:

GUI_checkbutton_widget.py

Running the new code results in the following GUI:

In lines 47, 52, and 57 we create three variables of the IntVar type. In the line following each of these variables, we create aCheckbutton, passing in these variables. They will hold the state of theCheckbutton (unchecked or checked). By default, that is either 0 (unchecked) or 1 (checked), so the type of the variable is atkinter integer.

We place theseCheckbutton widgets in our main window, so the first argument passed into the constructor is the parent of the widget, in our case, win. We give eachCheckbutton widget a different label via itstext property.

Setting the sticky property of the grid totk.W means that the widget will be aligned to the west of the grid. This is very similar to Java syntax and it means that it will be aligned to the left. When we resize our GUI, the widget will remain on the left side and not be moved towards the center of the GUI.

Lines 49 and 59 place a checkmark into theCheckbutton widget by calling theselect() method on these twoCheckbutton class instances.

In this recipe, we will create three tkinterRadiobutton widgets. We will also add some code that changes the color of the main form, depending upon whichRadiobutton is selected.

This recipe extends the previous recipe,Creating a check button with different initial states.

We add the following code to the previous recipe:

Running this code and selecting theRadiobutton namedGold creates the following window:

In lines 75-77, we create some module-level global variables which we will use in the creation of each radio button as well as in the callback function that creates the action of changing the background color of the main form (using the instance variablewin).

We are using global variables to make it easier to change the code. By assigning the name of the color to a variable and using this variable in several places, we can easily experiment with different colors. Instead of doing a global search-and-replace of a hardcoded string (which is prone to errors), we just need to change one line of code and everything else will work. This is known as theDRY principle, which stands forDon't Repeat Yourself. This is an OOP concept which we will use in the later recipes of the book.

Line 80 is thecallback function that changes the background of our main form (win) depending upon the user's selection.

In line 87 we create atk.IntVar variable. What is important about this is that we create only one variable to be used by all three radio buttons. As can be seen from the screenshot, no matter whichRadiobutton we select, all the others will automatically be unselected for us.

Lines 89 to 96 create the three radio buttons, assigning them to the main form, passing in the variable to be used in the callback function that creates the action of changing the background of our main window.

ScrolledText widgets are much larger than simpleEntry widgets and span multiple lines. They are widgets like Notepad and wrap lines, automatically enabling vertical scrollbars when the text gets larger than the height of theScrolledText widget.

By adding the following lines of code, we create aScrolledText widget:

We can actually type into our widget, and if we type enough words, the lines will automatically wrap around:

Once we type in more words than the height the widget can display, the vertical scrollbar becomes enabled. This all works out-of-the-box without us needing to write any more code to achieve this:

In line 11, we import the module that contains theScrolledText widget class. Add this to the top of the module, just below the other twoimport statements.

Lines 100 and 101 define the width and height of theScrolledText widget we are about to create. These are hardcoded values we are passing into theScrolledText widget constructor in line 102.

These values aremagic numbers found by experimentation to work well. You might experiment by changingscol_w from 30 to 50 and observe the effect!

In line 102, we are also  setting a property on the widget by passing inwrap=tk.WORD.

By setting thewrap property totk.WORD we are telling theScrolledText widget to break lines by words so that we do not wrap around within a word. The default option istk.CHAR, which wraps any character regardless of whether we are in the middle of a word.

The second screenshot shows that the vertical scrollbar moved down because we are reading a longer text that does not entirely fit into thex, y dimensions of theSrolledText control we created.

Setting thecolumnspan property of the grid widget to3 for theSrolledText widget makes this widget span all the three columns. If we do not set this property, ourSrolledText widget would only reside in column one, which is not what we want.

So far, we have created several widgets of the same type (for example, Radiobutton) by basically copying and pasting the same code and then modifying the variations (for example, the column number). In this recipe, we start refactoring our code to make it less redundant.

We are refactoring some parts of the previous recipe's code,Using scrolled text widgets, so you need that code to apply this recipe to.

Here's how we refactor our code:

GUI_adding_widgets_in_loop.py

Running this code will create the same window as before, but our code is much cleaner and easier to maintain. This will help us when we expand our GUI in the coming recipes.

In line 77, we have turned our global variables into a list.

In line 89, we set a default value to thetk.IntVar variable that we namedradVar. This is important because, while in the previous recipe we had set the value forRadiobutton widgets starting at 1, in our new loop it is much more convenient to use Python's zero-based indexing. If we did not set the default value to a value outside the range of ourRadiobutton widgets, one of the radio buttons would be selected when the GUI appears. While this in itself might not be so bad,it would not trigger the callback and we would end up with a radio button selected that does not do its job (that is, change the color of the main win form).

In line 95, we replace the three previously hardcoded creations of theRadiobutton widgets with a loop that does the same. It is just more concise (fewer lines of code) and much more maintainable. For example, if we want to create 100 instead of just three Radiobutton widgets, all we have to change is the number inside Python's range operator. We would not have to type or copy and paste 97 sections of duplicate code, just one number.

Line 82 shows the modified callback function.

This recipe concludes the first chapter of this book. All the following recipes in all of the next chapters will build upon the GUI we have constructed so far, greatly enhancing it.