GUI Python with Tkinter – Part 2 – The widgets

Widgets are the building blocks of GUI programs. When building a GUI the main question become which components (widgets) should appear in the window?

The syntax that is used to add a widget is as follows:

my_widget = Widget-name(its container window, ** its configuration options)

To exemplify, let’s add two widgets (a label, and a button) to the root window we have created in the part 1. This is my test.py file:

from tkinter import *
root = Tk()

label = Label(root, text="Label widget")
button = Button(root, text="Button widget")

label.pack()
button.pack()

root.mainloop()

Open the file using the terminal by running the following command:

python3 test.py

You will get a pop up window as is shown below.

Tkinter GUI

We added a new instance named label for the Label widget. The first parameter says that the root is the parent (so it is placed within the root window). The second parameter configured its text option.
The same way, an instance of a Button widget is defined. This is also bound to the root window as its parent.
The pack() method is required to position the widgets within the window.

Important:

  • Widgets are objects derived from their respective widget classes.
  • Widget have options that decide the behavior and appearance (attributes, colors, font size etc).
  • Attributes can be set or changed later by using the .config() or .configure() methods (.config() and .configure() are interchangeable).

You can create a widget in one line and then add the pack() method (or other geometry managers) in the next line:

label = Label(root, text="Label widget")
label.pack()

You can also write both lines on the same line:

Label(root, text="Label widget").pack()

This method doesn’t save a reference to the widget created.

Note:
You should keep a reference to the widget in case the widget has to be accessed later on in the program.

These are all 21 core Tkinter widgets:

  • Toplevel
  • Label
  • Button
  • Canvas
  • Checkbutton
  • Entry
  • Frame
  • LabelFrame
  • Listbox
  • Menu
  • Menubutton
  • Message
  • OptionMenu
  • PanedWindow
  • Radiobutton
  • Scale
  • Scrollbar
  • Spinbox
  • Text
  • Bitmap Class
  • Image Class

Let’s display some of these widgets in our root window.

from tkinter import *
# The main window (root window)
root = Tk()

scrollbar = Scrollbar(root)
scrollbar.pack(side = RIGHT, fill = Y)

# First Frame
menu_bar = Frame(root)
menu_bar.pack()

label1 = Label(menu_bar, text = "--- First Label ---")
label1.pack()

menubutton = Menubutton(menu_bar, text = "Menu Button")
menubutton.pack()

# Second Frame
frame = Frame(root)
frame.pack()

label2 = Label(menu_bar, text = "\n\n--- Second Label ---")
label2.pack()

label3 = Label(frame, text = "Label widget")
label3.pack()
entry1 = Entry(frame, width = 30)
entry1.pack()
button1 = Button(frame, text = "Button widget")
button1.pack()
checkbutton1 = Checkbutton(frame, text = "Remember Me")
checkbutton1.pack()
radiobutton1 = Radiobutton(frame, text="Male", value = 1)
radiobutton1.pack()
radiobutton2 = Radiobutton(frame, text="Female", value = 2)
radiobutton2.pack()
optionmenu1 = OptionMenu(frame, "Select Bike", "Honda", "Yamaha", "Suzuki")
optionmenu1.pack()

# Third Frame
frame3 = Frame(root, background = '#ffffff', padx = '30', pady = '30')
frame3.pack()
label3 = Label(frame3, text = "\n\n--- Third Label ---")
label3.pack()

listbox1 = Listbox(frame3)
listbox1.pack()
spinbox1 = Spinbox(frame3)
spinbox1.pack()
scale1 = Scale(frame3)
scale1.pack()
labelframe1 = LabelFrame(frame3, width = "300", height = "50", borderwidth = "3", text = "Label Frame 1", bg = "green")
labelframe1.pack()
message1 = Message(frame3, text = "I am \n a \n message", width = "70")
message1.pack()

# Fourth Frame
frame4 = Frame(root, background = "green", padx = '30', pady = '30')
frame4.pack()
label4 = Label(frame4, text = "\n\n--- Fourth Label ---")
label4.pack()

text1 = Text(frame4, width = "1200", height = "600")
text1.pack()
scrollbar = Scrollbar(frame4)
scrollbar.pack()
canvas = Canvas(frame4, width = "1200", height = "600")
canvas.pack()

root.mainloop()

When we run the file in the terminal we get what the picture shows below.

Tkinter GUI

I know! It looks terribly ugly but don’t worry, we are going to fix that in the Part 3.

Leave a Reply