How to Build User Interfaces with Python — Tkinter Widgets — Part. 1

This story follows the User Interfaces series. If you have missed the last Tkinter story, you can find it here:

What Is a Widget

Tkinter, and most of the UI libraries or frameworks existing work on a widget system. That’s why it’s so important to understand what is a widget.

A widget is an element of a GUI that can be used to display information, structure a UI, or give the possibility to the user to interact with the application.

In Tkinter, everything is a widget, except the top-level window containing the application.

If we take for example a calculator app, each button is a widget, the display of the result is a widget, and the frame containing all these elements is a widget too.

How to Use Widgets in Tkinter

I’ve already talked about this in the first story of this series, so I won’t go into too much detail here. But just a quick reminder, here is the syntax to create and use a widget:

from tkinter import ttk

label = ttk.Label(main_window, "Hellow World")
label.pack()

You can also bind commands to widgets:

def clicked():
    print("Button clicked!")

button = ttk.Button(main_window, text="Hello World!", command=clicked)

You can also bind more complex commands to widgets using events:

main_window.bind("<Button>", lambda event: callback("Button clicked!"))

For more detail about all these things, check this: How to Build User Interfaces with Python — Tkinter Basics.

Main Tkinter Widgets

Tkinter provides a lot of widgets for you to work with. It allows you to don’t have to code anything you need, because when you need to create a Tkinter application, chances are that the widgets you need are already integrated into Tkinter. We’ll review the main widgets, so the ones you will use most of the time.

Frame

To create a Frame, you use the ttk.Frame class. Like all the widgets, the first parameter is the container of the Frame, then you can provide optional keywords arguments:

• borderwidth
• class_
• cursor: Change the cursor appearance when the mouse cursor is over the frame.
• height
• padding
• relief: Specify the relief style for the border. It needs borderwidth to be set to be effective.
• style
• takefocus: A boolean value specifies whether the frame is visited during focus traversal. By default, it is False. So the frame widget does not accept focus.
• width

Some parameters don’t need comments as their purpose is obvious.

An example of a Frame with parameters can be:

frame = ttk.Frame(main_window, padding=(15, 20), relief='sunken', height=300, width=300)

• padding: there are many ways to provide this argument. You can use a single value if you want all padding to be the same (ex: padding=5 ), you can use a tuple to specify left-right and top-bottom padding as above, or you can use a tuple containing 4 values to specify the padding of each side individually (padding=(left, top, right, bottom ).
• height/width: if you don’t specify any values for these, they will be calculated automatically.

Frames can be a bit hard to understand as their only purpose is to contain other widgets, but this is also what makes them so important. Don’t worry, in the next story, we’ll probably see an example of a small Tkinter application you can build to practice.

Text

The Text widget is used to display an editable text area.

text = tk.Text(container, **params)

You can access its text using text.get(start, end) . You can insert text using text.insert(start, text) . You can also delete text using text.delete(start, end) .

Positions are given using Tkinter constants (tk.END , tk.START), strings ( "start" , "end" ), or using tuples following this format: (row, column) .

For example:

text_area = tk.Text(frame, width=40, height=10)
text_area.insert(tk.END, "Hello World!")
text_area.pack()

print(text_area.get("1.0", tk.END))

...

Hello World!

You can also disable this widget to make users unable to edit its content using the state property:

text_area["state"] = tk.NORMAL
text_area["state"] = tk.DISABLED

Checkbutton

It’s a widget displaying a checkable box. You can execute commands when the checkbox is checked or not, and when its state changes. Below is a sample checkbox to understand its keywords arguments:

is_checked = tk.BooleanVar()
checkbox = ttk.Checkbutton(frame, text="Check me!", variable=is_checked, onvalue=True, offvalue=False, command=lambda: print(is_checked.get()))

• variable: a variable storing the actual value of the checkbox.
• onvalue: the variable value when the box is checked.
• offvalue: the variable value when the box is not checked.
• command: a function executed when the checkbox’s state changes.

Slider

Using a Slider, you can change a value by moving an indicator.

current_value = tk.IntVar()
slider = ttk.Scale(frame, from_=0, to=100, orient=tk.HORIZONTAL, command=lambda value: print(current_value.get()), variable=current_value)

Like before, you can provide a variable to this widget whose value will be updated each time the Slider’s value changes. You can also provide a command executed when the Slider’s value changes.

Spinbox

It’s like a Slider, except you don’t change its value with a drag and drop.

spinbox_value = tk.IntVar()
spinbox = ttk.Spinbox(frame, from_=0, to=100, command=lambda: print(spinbox_value.get()), textvariable=spinbox_value)

textvariable is a parameter used to specify the variable displayed by the widget.

Final Note

There are many Tkinter widgets, each one with its well-defined purpose. In this story, we have discovered 5 of them. You also know some widgets such as a Label or a Button if you’ve followed the series.

But there are still a lot of widgets remaining. I’ll talk about some other widgets in the next story. In the meantime, I recommend you to experiment with the widgets you know to practice and try to create small applications.

Also, be sure to follow me so that you don’t miss the next story about other widgets!

You can find the other stories of this series here:

To explore more of my Python stories, click here!

If you liked the story, don’t forget to clap and maybe follow me if you want to explore more of my content :)

You can also subscribe to me via email to be notified every time I publish a new story, just click here!

If you’re not subscribed to Medium yet and wish to support me or get access to all my stories, you can use my link: