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.

We will start by using thetkinter GUI toolkit.

The old world of the DOS Command Prompt haslong been outdated. Some developers still like it for development work. The end user of your program expects a more modern, good-looking GUI.

In this book, you will learn how to develop GUIs using the Python programming language.

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 because, otherwise, the book would get too long, and seeing the same code over and over again is rather boring.

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 usingtkinter!

Let's take a look at how to create our first Python GUI:

1. Create a new Python module and name itFirst_GUI.py.
2. At the top of theFirst_GUI.pymodule, importtkinter:

import tkinter as tk

3. Create an instance of theTk class:

win = tk.Tk()

4. Use the instance variable to set a title:

win.title("Python GUI")

5. Start the window's main event loop:

win.mainloop()

The following screenshot shows the four lines ofFirst_GUI.py required to create the resulting GUI:

6. Run the GUI module. On executing the preceding code, the following output is obtained:

Inline 9, we import the built-intkinter module and alias it astk to simplify our Python code. Inline 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 thetk alias so we don't have to use the longer wordtkinter. We are assigning the class instance to a variable namedwin (short for a window) so that we can access the class attributes via this variable. 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. Pythoninfers 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 by calling thetitle() method, passing in a string.

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 have created an instance and set one attribute (the window title), but the GUI will not be displayed until we start the main event loop.

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

We've successfully learned how to create our first Python GUI. Now, let's move on to the next recipe.

By default, a GUI created usingtkinter 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.

Here are the steps to prevent the GUI from being resized:

1. Start with the module from the previous recipe and save it asGui_not_resizable.py.
2. Use theTk instance variable,win, to call theresizable method:

win.resizable(False, False)

Here is the code to prevent the GUI from being resized (GUI_not_resizable.py):

3. Run the code. Running the code creates this GUI:

Let's go behind the scenes to understand the code better.

Line 18 prevents the Python GUI from being resized.

Theresizable()method is of theTk()class and, by passing in(False,False), we prevent the GUI from being resized. We can disable both thexandydimensions of the GUI from being resized, or we can enable one or both dimensions by passing inTrueor any number other than zero.(True, False)would enable thexdimension but prevent they dimension 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 our GUI can make itnot look the way we want it to look. We will add widgets to our GUI in the next recipes, starting withAdding a label to the GUI form.

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

We've successfully learned how to prevent the GUI from being resized. Now, let's move on to the next recipe.

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 anEntry 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).

Perform the following steps to add a label to the GUI from:

1. Start with theFirst_GUI.py module and save it asGUI_add_label.py.
2. Importttk:

from tkinter import ttk

3. Usettk to add a label:

ttk.Label(win, text="A Label")

4. Use the grid layout manager to position the label:

.grid(column=0, row=0)

In order to add aLabel widget to our GUI, we will import thettk module fromtkinter. Please note the twoimport statements on lines 9 and 10.

The following code is added just abovewin.mainloop(), which is located at the bottom of the first and second recipes (GUI_add_label.py):

5. Run the code and observe how a label is added to our GUI:

Let's go behind the scenes to understand the code better.

In line 10 of the preceding code, we import a separate module from thetkinter package. Thettk module has some advanced widgets such as a notebook, progress bar, labels, and buttons that look different. These help to make our GUI look better. In a sense,ttk is an extension within thetkinter package.

We still need to import thetkinter package, but we need to specify that we now want to also usettk from thetkinter package.

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

In this recipe, we will update the label we added in the previous recipe as well as thetext attribute of the button. The steps to add a button that performs an action when clicked are as follows:

1. Start with theGUI_add_label.pymodule and save it asGUI_create_button_change_property.py.
2. Define a function and name itclick_me():

def click_me()

3. Usettk to create a button and give it atext attribute:

action.configure(text="** I have been Clicked! **")
a_label.configure (foreground='red')
a_label.configure(text='A Red Label')

4. Bind the function to the button:

action = ttk.Button(win, text="Click Me!", command=click_me)

5. Use the grid layout to position the button:

 action.grid(column=1, row=0)

The preceding instructions produce the following code (GUI_create_button_change_property.py):

6. Run the code and observe the output.

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 in the following screenshot:

Let's go behind the scenes to understand the code better.

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

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.

Intkinter, a typical one-line textbox widget is calledEntry. In this recipe, we will add such anEntry widget to our GUI. We will make our label more useful by describing what theEntry widget is doing for the user.

This recipe builds upon theCreating buttons and changing their text attributes recipe, so download it from the repository and start working on it.

Follow these steps to create textbox widgets:

1. Start with theGUI_create_button_change_property.pymodule and save it asGUI_textbox_widget.py.
2. Use thetk alias oftkinter to create aStringVar variable:

name = tk.StringVar()

3. Create attk.Entry widget and assign it to another variable:

name_entered = ttk.Entry(win, width=12, textvariable=name)

4. Use this variable to position theEntry widget:

name_entered.grid(column=0, row=1)

The preceding instructions produce the following code (GUI_textbox_widget.py):

5. Run the code and observe the output; our GUI looks like this:

6. Enter some text and click the button; we will see that there is a change in the GUI, which is as follows:

Let's go behind the scenes to understand the code better.

Instep 1 we are creating a new Python module, and instep 2 we are adding aStringVar type oftkinter and saving it in thename variable. We use this variable when we are creating anEntry widget and assigning it to thetextvariable attribute of theEntry widget. Whenever we type some text into theEntry widget, this text will be saved in thename variable.

Instep 4, we position theEntry widget and the preceding screenshot shows the entire code.

In line 24, as shown inthe screenshot, we get the value of theEntry widget usingname.get().

When we created our button, we saved a reference to it in theaction variable. We use theactionvariable to call theconfigure method of the button, which then updates the text of our button.

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.

In this recipe, we learn how to make the cursor appear in the Entry box for immediate text Entry rather than the need for the user toclick into the Entry widget to give it thefocus method before typing into the entry widget.

This recipe extends the previous recipe,Creating textbox 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 atkinterwidget we previously created. In our current GUI example, we assigned thettk.Entryclass instance to a variable namedname_entered. Now, we can give it the focus.

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

1. Start with theGUI_textbox_widget.pymodule and save it asGUI_set_focus.py.
2. Use thename_enteredvariable we assigned thettkEntry widget instance to and call thefocus()method on this variable:

name_entered.focus()

The preceding instructions produce the following code (GUI_set_focus.py):

3. Run the code and observe the output.

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 now, so this is still necessary. Later, it will no longer be necessary to do this.

Adding line 38 of the 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 textbox without having to click it first. The resulting GUI now looks like this, with the cursor inside the Entry widget:

We can also disable widgets. Here, we are disabling the button to show the principle. In larger GUI applications, the ability to disable widgets gives you control when you want to make things read only. Most likely, those would be combobox widgets and Entry widgets, but as we have not yet gotten to those widgets yet, we will use our button.

To disable widgets, we will set an attribute on the widget. We can make the button disabled by adding the following code below line 37 of the Python code to create the button:

1. Use theGUI_set_focus.pymodule and save it asGUI_disable_button_widget.py.
2. Use theactionbutton variable to call theconfigure method and set thestate attribute todisabled:

action.configure(state='disabled')

3. Call thefocus() method on thename_entered variable:

name_entered.focus()

The preceding instructions produce the following code(GUI_disable_button_widget.py):

4. Run the code. After adding the preceding line of Python code, clicking the button no longer creates an action:

Let's go behind the scenes to understand the code better.

This code is self-explanatory. In line 39, we set the focus to one control, and in line 37, we 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.

We've successfully learned how to set the focus to a widget and disable widgets. Now, let's move on to the next recipe.

In this recipe, we will improve our GUI by adding drop-down comboboxes that 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:

1. Start with theGUI_set_focus.pymodule and save it asGUI_combobox_widget.py.
2. Change the button column to2:

action = ttk.Button(win, text="Click Me!", command=click_me)
action.grid(column=2, row=1)

3. Create a newttk.Label widget:

ttk.Label(win, text="Choose a number:").grid(cloumn=1, row=0)

4. Create a newttk.Combobox widget:

number_chosen = ttk.Combobox(win, width=12, textvariable=number)

5. Assign values to theCombobox widget:

number_chosen['value'] = (1, 2, 4, 42, 100)

6. Place theCombobox widget intocolumn 1:

number_chosen.grid(column=1, row=1)
number_chosen.current(0)

The preceding steps produce the following code (GUI_combobox_widget.py):

7. Run the code.

The code, when added to the previous recipes, creates the following GUI. Note how, in line 43 in the preceding code, we assigned a tuple withdefault values to the combobox. 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):

Let's go behind the scenes to understand the code better.

Line 40 adds a second label to match the newly created combobox (created in line 42). Line 41 assigns the value of the box to a variable of a specialtkinter 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 were cast into strings because, in line 41, we declared the values to be of thetk.StringVar type.

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

If100 is selected in the combobox, thevalue of thenumber variable becomes100.
Line 42 binds the value selected in the combobox to thenumber variable via thetextvariable attribute.

If we want to restrict the user toonlybeing able to select the values we have programmed into theComboboxwidget, we can do it by passing thestate attributeinto the constructor. Modifyline 42 as follows:

1. Start with theGUI_combobox_widget.pymodule and save it asGUI_combobox_widget_readonly.py.
2. Set thestate attribute when creating theComboboxwidget:

number_chosen = ttk.Combobox(win, width=12, textvariable=number, state='readonly')

The preceding steps produce the following code (GUI_combobox_widget_readonly.py):

3. Run the code.

Now, users can no longer type values into theComboboxwidget.

We can display the value chosen by the user by adding the following line of code to our button click event callback function:

1. Start with theGUI_combobox_widget_readonly.pymodule and save it asGUI_combobox_widget_readonly_plus_display_number.py.
2. Extend the button click event handler by using theget()method on thenamevariable, use concatenation (+ ' ' +), and also get the number from thenumber_chosenvariable (also calling theget() method on it):

def click_me():
    action.configure(text='Hello ' + name.get() + ' ' +
    number_chosen.get())

3. Run the code.

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 next to the name entered (GUI_combobox_widget_readonly_plus_display_number.py):

We've successfully learned how to add combobox widgets. Now, let's move on to the next recipe.

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

• The first is disabled and has a checkmark in it. The user cannot remove this checkmark as the widget is disabled.
• The second check button is enabled, and by default has no checkmark in it, but the user can click it to add a checkmark.
• The third check button is both enabled and checked by default. The users can uncheck and recheck the widget as often as they like.

This recipe extends the previous recipe,Creating combobox widgets.

Here is the code for creating three check button widgets that differ in their states:

1. Start with theGUI_combobox_widget_readonly_plus_display_number.py module and save it asGUI_checkbutton_widget.py.
2. Create threetk.IntVar instances and save them in local variables:

chVarDis = tk.IntVar()
chVarUn = tk.IntVar()
chVarEn = tk.IntVar()

3. Set thetext attributes for each of theCombobox widgets we are creating:

text="Disabled"
text="UnChecked"
text="Enabled"

4. Set theirstate todeselect/select:

check1.select()
check2.deselect()
check3.select()

5. Usegrid to lay them out:

check1.grid(column=0, row=4, sticky=tk.W)
check2.grid(column=1, row=4, sticky=tk.W)
check3.grid(column=2, row=4, sticky=tk.W)

The preceding steps will finally produce the following code (GUI_checkbutton_widget.py):

6. Run the module. Running the new code results in the following GUI:

Let's go behind the scenes to understand the code better.

Steps 1 to4 show the details and the screenshot instep 5 displays the important aspects of the code.

Inlines 47,52, and57 ,we create three variables of theIntVar type. In the line following each of these variables, we create aCheckbuttonwidget, passing in these variables. They will hold the state of theCheckbuttonwidget (unchecked or checked). By default, that is either0 (unchecked) or1 (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 attribute.

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 toward 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 threeradio button widgets. We will also add some code that changes the color of the main form, depending upon whichradio button 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:

1. Start with theGUI_checkbutton_widget.pymodule and save it asGUI_radiobutton_widget.py.
2. Create three module-level global variables for the color names:

COLOR1 = "Blue"
COLOR2 = "Gold"
COLOR3 = "Red"

3. Create a callback function for the radio buttons:

if radSel == 1: win.configure(background=COLOR1)
    elif radSel == 2: win.configure(background=COLOR2)
    elif radSel == 3: win.configure(background=COLOR3)

4. Create threetk radio buttons:

rad1 = tk.Radiobutton(win, text=COLOR1, variable=radVar, value=1,
                      command=radCall)
rad2 = tk.Radiobutton(win, text=COLOR2, variable=radVar, value=2,
                      command=radCall)
rad3 = tk.Radiobutton(win, text=COLOR3, variable=radVar, value=3,
                      command=radCall)

5. Use the grid layout to position them:

rad1.grid(column=0, row=5, sticky=tk.W, columnspan=3)
rad2.grid(column=1, row=5, sticky=tk.W, columnspan=3)
rad3.grid(column=2, row=5, sticky=tk.W, columnspan=3)

The preceding steps will finally produce the following code (GUI_radiobutton_widget.py):

6. Run the code. Running this code and selecting theradio button namedGold creates the following window:

Let's go behind the scenes to understand the code better.

In lines 75-77, we create some module-level global variables that 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 thewininstance variable).

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 the 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 that 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 whichradio buttons 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 scroll bars when the text gets larger than the height of theScrolledText widget.

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

1. Start with theGUI_radiobutton_widget.pymodule and save it asGUI_scrolledtext_widget.py.

2. Importscrolledtext:

from tkinter import scrolledtext

3. Define variables for the width and height:

scrol_w = 30
scrol_h = 3

4. Create aScrolledText widget:

scr = scrolledtext.ScrolledText(win, width=scrol_w, height=scrol_h, wrap=tk.WORD)

5. Position the widget:

scr.grid(column=0, columnspan=3)

The preceding steps will finally produce the following code (GUI_scrolledtext_widget.py):

6. Run the code. We can actually type into our widget, and if we type enough words, the lines will automatically wraparound:

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

Let's go behind the scenes to understand the code better.

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 wraparound 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 scroll bar moved down because we are reading a longer text that does not entirely fit into thex, y dimensions of theScrolledText control we created.

Setting thecolumnspan attribute of the grid layout to3 for theScrolledText widget makes this widget span all of the three columns. If we do not set thisattribute, ourScrolledText widget would only reside in column one, which is not what we want.

We've successfully learned how to use scrolled text widgets. Now, let's move on to the next recipe.

So far, we have created several widgets of the same type (for example, aradio button) 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 for this recipe.

Here's how we refactor our code:

1. Start with theGUI_scrolledtext_widget.pymodule and save it asGUI_adding_widgets_in_loop.py.
2. Delete the global name variables and create a Python list instead:

colors = ["Blue", "Gold", "Red"]

3. Use theget() function on theradio button variable:

radSel=radVar.get()

4. Create logic with anif ... elif structure:

if radSel == 0: win.configure(background=colors[0])
    elif radSel == 1: win.configure(background=color[1])
    elif radSel == 2: win.configure(background=color[2])

5. Use a loop to create and position theradio buttons:

for col in range(3):
    curRad = tk.Radiobutton(win, text=colors[col], cariable=radVar,
    value, command=radCall)
    curRad.brid(column=col, row=5, sticky=tk.W)

6. Run the 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.

Inline 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 forradio button widgets to start at1, 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 ourradio button 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).

Inline 95, we replace the three previously hardcoded creations of theradio button 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 just3radio button 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 1 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 GUIs we have constructed so far, greatly enhancing it.