Tkinter tutorial – part 2

Introduction

In the first part of our Tkinter tutorial, we created a simple graphical interface having a window and a label. The article explained how to create it and customize it. In the second part of the Tkinter tutorial, where we’ll add different widgets to our window. We will also learn to connect the GUI with the code by getting input from the user.

Adding a function button

Now, let’s add some widgets which enable the user to interact with. Let’s try adding a simple functional button and handle a simple button click event. Exciting, isn’t it? Let’s do a hands-on.

Adding a functional button to the window is similar to the process which we did for adding a label widget. We can customize the appearance of the button by changing foreground for a button using `fg` property. Similarly, we can change the background color for the button by the `bg` property. This property can be used to customize any widget. Let’s now add a functional button to the same window which we created and added a label widget:

import tkinter
root_window = tkinter.Tk()
root_window.geometry('950x200')
root_window.title("Tkinter tutorial")
label_widget = tkinter.Label(root_window, text="Build your own GUI with Tkinter", font=("Arial Italic", 40))
label_widget.grid(column=1, row=1)
fn_btn = tkinter.Button(root_window, text="Close", bg="grey", fg="black", font=("Arial Bold", 20))
fn_btn.grid(column=1, row=2)
root_window.mainloop()

The above code creates a functional button widget, based on our specifications. The output looks like:

Output:

Orienting the widgets

If you look at the above code, we have used the grid() function to specify the position of the widget. In case, this is not used, the widget will not be displayed. In the above example, we have placed the button on the third row of the window, which is 2. If you place the function button on the same row and column as we specified for the label widget, the button widget will be placed on top of the label widget. So, to handle such situations, `tkinter` module offers a method named ‘pack()’. This can be used instead of the grid() method. If your window has more than 2 widgets, we can use the pack() method instead of specifying the co-ordinates manually using the grid method. The pack() method throws widgets one on top of the other that is centered horizontally, based on the order we pack our widgets. This method also adjusts the window’s size according to the widget’s size. Let’s try to implement this function for the above-stated example.

import tkinter
root_window = tkinter.Tk()
root_window.geometry('950x200')
root_window.title("Tkinter tutorial")
label_widget = tkinter.Label(root_window, text="Build your own GUI with Tkinter", font=("Arial Italic", 40))
fn_btn = tkinter.Button(root_window, text="Close", bg="grey", fg="black", font=("Arial Bold", 20))
label_widget.pack()
fn_btn.pack()
root_window.mainloop()

The output looks like:

Output:

So, we have discussed how to orient the widgets in our window using the grid() method and pack() method. But, we need to keep in mind not to mix the grid() and pack() methods, both in the same container.

Now, we have just created a function button. If we click on it, nothing happens. Let’s now write a code to handle the button click event.

Handling functional button click event

In the previous example, we created a Button class instance that is pretty similar to the way in which we created the label widget. Now, to handle the functional button click event, we can add a command argument while creating the button widget. By adding this `command` argument, we can specify the program on how to react after the functional button click occurs. We can do this by adding the below chunk of code:

fn_btn = tkinter.Button(root_window, text="Close", bg="grey", fg="black", font=("Arial Bold", 20), command=root_window.destroy)

In this example, we have handled our button click event by configuring the command argument. We have called the root window’s destroy() method. This makes our window widget to close when the close button is clicked.

We have seen samples that barely shows the package’s basic capabilities. Let us dive in deeper to explore the complex and more intuitive Graphical User Interface capabilities of the Tkinter package.

Configuring the Widgets

We can configure the appearance of the widgets during the run-time of our program. This can be done by using the configuring element of the widget. For example, let’s create a window, a label, a button named “Click me”. We can configure the functional button during the run-time of the program by changing the button’s color.

import tkinter
root_window = tkinter.Tk()
root_window.geometry('950x200')
root_window.title("Tkinter tutorial")
def color_fn_btn():
    fn_btn.configure(text="Button color changed", bg="blue", fg="white")
label_widget = tkinter.Label(root_window, text="Build your own GUI with Tkinter", font=("Arial Italic", 40))
fn_btn = tkinter.Button(root_window, text="Click here", bg="grey", fg="black", font=("Arial Bold", 20), command=color_fn_btn)
label_widget.pack()
fn_btn.pack()
root_window.mainloop()

The sample output of the above code is:

Output:

If you click the “Click me” button, the color of the functional button along with its text changes as follow:

Output:

The color_fn_btn() function that we added configures the state of the button, once the button click event occurs.

Conclusion

I hope, the second part of the Tkinter tutorial made you understand the Tkinter module, better. We see how the Tkinter module has simplified our process in building a Graphical interface for our software. Keep reading the last part of this tutorial to create complex, intuitive GUIs.