Introducción a la GUI con Tkinter en Python

Widgets

Los widgets son similares, en espíritu, a los elementos de HTML. Encontrarás distintos tipos de widgets para distintos elementos en Tkinter. Son elementos estándar de una GUI y ofrecen controles como botones, texto, menús y cuadros de texto.

Veamos todos estos widgets de Tkinter con un ejemplo (Fuente).

• Button: el widget Button tiene una propiedad de encendido/apagado. Cuando un usuario hace clic en el botón, se dispara un evento en Tkinter.

  Sintaxis: button_widget = tk.Button(widget, option=placeholder), donde widget es el argumento para la ventana/marco padre y option es un comodín que puede tener varios valores como colores de texto y fondo, fuente, command (para llamar a funciones), imagen y alto y ancho del botón.

• Canvas: Canvas se usa para dibujar formas en tu GUI y admite varios métodos de dibujo.

  Sintaxis: canvas_widget = tk.Canvas(widget, option=placeholder), donde widget es el parámetro para la ventana/marco padre y option es un comodín que puede tener valores como grosor del borde, color de fondo, alto y ancho del widget.

• Checkbutton: Checkbutton registra estados de encendido/apagado o verdadero/falso. Te permite seleccionar más de una opción a la vez e incluso dejarla sin marcar.

  Sintaxis: checkbutton_widget = tk.CheckButton(widget, option=placeholder), donde widget es el parámetro para la ventana/marco padre y option es un comodín que puede tener valores como título, texto, colores de fondo y primer plano mientras el cursor está sobre el widget, fuente, imagen, etc.

• Entry: el widget Entry se usa para crear campos de entrada o para obtener texto del usuario dentro de la GUI.

  Sintaxis: entry_widget = tk.Entry(widget, option=placeholder), donde widget es el parámetro para la ventana/marco padre y option es un comodín que puede tener valores como grosor del borde, color de fondo, ancho y alto del botón, etc.

• Frame: Frame se usa como contenedor en Tkinter para agrupar y organizar correctamente los widgets.

  Sintaxis: frame_widget = tk.Frame(widget, option=placeholder), donde widget es el parámetro para la ventana/marco padre y option es un comodín que puede tener valores como grosor del borde, alto y ancho del widget, y highlightcolor (color cuando el widget tiene el foco).

• Label: Label se usa para crear widgets de una sola línea como texto, imágenes, etc.

  Sintaxis: label_widget = tk.Label(widget, option=placeholder), donde widget es el parámetro para la ventana/marco padre y option es un comodín que puede tener valores como la fuente del botón, color de fondo, imagen y alto y ancho del botón.

Puedes encontrar la lista completa de widgets en la documentación oficial de Python.

Gestión de geometría

Todos los widgets en Tkinter tienen medidas de geometría. Estas medidas te permiten organizar los widgets dentro de los marcos padre o del área del widget padre.

Una de las clases de gestión de geometría, pack(), ya la hemos visto aquí.

Para este fin, Tkinter te ofrece tres clases principales de gestión de geometría:

• pack(): organiza los widgets en bloques y ocupa todo el ancho disponible. Es el método convencional para mostrar widgets en la ventana.
  
  
• grid(): organiza los widgets en una estructura tipo tabla. Lo verás en detalle más adelante en este tutorial.
  
  
• place(): sirve para colocar los widgets en una posición específica indicada por el usuario dentro del widget padre.

Organizar el diseño y los widgets

En esta sección del tutorial, usarás tanto geometry como widgets para ver la magia de Tkinter.

Para ordenar el diseño en la window, usarás la clase de widget Frame. Vamos a crear un programa sencillo para ver cómo funciona Frame.

• Definirás dos frames, superior e inferior, con la ayuda de la clase pack. La clase Frame ayudará a crear una división en la ventana. Básicamente, una única ventana se replica dos veces como parte superior e inferior en forma de Frame.

• Por último, crearás cuatro botones en la ventana, dos para cada frame. Puedes nombrar y colorear los botones como quieras mediante parámetros.

import tkinter

# Let's create the Tkinter window.
window = tkinter.Tk()
window.title("GUI")

# You will first create a division with the help of Frame class and align them on TOP and BOTTOM with pack() method.
top_frame = tkinter.Frame(window).pack()
bottom_frame = tkinter.Frame(window).pack(side = "bottom")

# Once the frames are created then you are all set to add widgets in both the frames.
btn1 = tkinter.Button(top_frame, text = "Button1", fg = "red").pack() #'fg or foreground' is for coloring the contents (buttons)

btn2 = tkinter.Button(top_frame, text = "Button2", fg = "green").pack()

btn3 = tkinter.Button(bottom_frame, text = "Button3", fg = "purple").pack(side = "left") #'side' is used to left or right align the widgets

btn4 = tkinter.Button(bottom_frame, text = "Button4", fg = "orange").pack(side = "left")

window.mainloop()

Ejecuta el código anterior y observa la salida.

Grid

Al igual que un Frame, grid es otra forma de organizar los widgets. Usa el concepto de matriz por filas y columnas. Hagamos una analogía entre la clase grid y la idea de filas y columnas con el siguiente diagrama.

Grid recibe principalmente dos parámetros: row y column. Como se muestra arriba, imagina que 00 corresponde al primer botón y 01 al segundo. Para colocar dos botones en paralelo, grid tomará como parámetros de fila y columna 00 y 01, respectivamente.

Usemos checkbutton para entender cómo funciona la clase grid. Definirás dos checkbuttons y especificarás texto para ambos. El estado de los checkbuttons lo decidirán onvalue y offvalue, mientras que el estado actual del checkbutton se rastreará con IntVar(), almacenado en una variable aparte. Cuando offvalue=1 y onvalue=0, el checkbutton correspondiente aparecerá marcado.

En cuanto a la clase grid, pasarás un parámetro row, que colocará el botón en la primera fila si row=0 y en la segunda si row=1.

import tkinter
from tkinter import *
top = tkinter.Tk()
CheckVar1 = IntVar()
CheckVar2 = IntVar()
tkinter.Checkbutton(top, text = "Machine Learning",variable = CheckVar1,onvalue = 1, offvalue=0).grid(row=0,sticky=W)
tkinter.Checkbutton(top, text = "Deep Learning", variable = CheckVar2, onvalue = 0, offvalue =1).grid(row=1,sticky=W)
top.mainloop()

Ejecuta este código y mira la salida.

Veamos otro ejemplo para entender grid. En este caso también pasarás column como parámetro junto con row.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# You will create two text labels namely 'username' and 'password' and and two input labels for them

tkinter.Label(window, text = "Username").grid(row = 0) #'username' is placed on position 00 (row - 0 and column - 0)

# 'Entry' class is used to display the input-field for 'username' text label
tkinter.Entry(window).grid(row = 0, column = 1) # first input-field is placed on position 01 (row - 0 and column - 1)

tkinter.Label(window, text = "Password").grid(row = 1) #'password' is placed on position 10 (row - 1 and column - 0)

tkinter.Entry(window).grid(row = 1, column = 1) #second input-field is placed on position 11 (row - 1 and column - 1)

# 'Checkbutton' class is for creating a checkbutton which will take a 'columnspan' of width two (covers two columns)
tkinter.Checkbutton(window, text = "Keep Me Logged In").grid(columnspan = 2)                 

window.mainloop()

¡Veamos la salida del código anterior!

¿A que está genial? Es muy sencillo y se parece mucho a cómo lo harías en HTML.

Funciones de binding o command

Las funciones de binding o command se invocan siempre que ocurre o se dispara un evento.

Veamos un ejemplo para entenderlas.

Definirás un botón que, al hacer clic, llama a una función llamada DataCamp_Tutorial. Esta función creará una nueva etiqueta con el texto GUI with Tkinter!.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# creating a function called DataCamp_Tutorial()
def DataCamp_Tutorial():
    tkinter.Label(window, text = "GUI with Tkinter!").pack()

tkinter.Button(window, text = "Click Me!", command = DataCamp_Tutorial).pack()
window.mainloop()

Ejecuta el código y observa la salida.

Además de invocar funciones de binding con un clic de ratón, también puedes invocar eventos con movimiento del ratón, mouse-over, clics, scroll, etc.

Ahora veamos la función bind, que te proporciona la misma funcionalidad que arriba.

Evento de clic del ratón mediante el método bind

El método bind ofrece una forma muy sencilla de implementar eventos de clic. Veamos tres funciones predefinidas que puedes usar directamente con bind.

Los eventos de clic son de tres tipos: leftClick, middleClick y rightClick.

• El parámetro <Button-1> del método bind es el evento de clic izquierdo; es decir, cuando haces clic con el botón izquierdo, bind llamará a la función especificada como segundo parámetro.
  
  
• <Button-2> para el clic central
  
  
• <Button-3> para el clic derecho

Ahora aprenderás a llamar a una función concreta según el evento que ocurra.

• Ejecuta el siguiente programa y haz clic con el botón izquierdo, central y derecho para llamar a una función específica.
  
  
• Esa función creará una nueva etiqueta con el texto indicado.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

#You will create three different functions for three different events
def left_click(event):
    tkinter.Label(window, text = "Left Click!").pack()

def middle_click(event):
    tkinter.Label(window, text = "Middle Click!").pack()

def right_click(event):
    tkinter.Label(window, text = "Right Click!").pack()

window.bind("<Button-1>", left_click)
window.bind("<Button-2>", middle_click)
window.bind("<Button-3>", right_click)

window.mainloop()

Fuente

Ejecuta el código anterior.

Cajas de alerta

Puedes crear cajas de alerta en Tkinter usando el método messagebox. También puedes formular preguntas con el método messasgebox.

Aquí crearás una caja de alerta sencilla y también una pregunta. Para generar una alerta, usarás la función messagebox showinfo. Para crear una pregunta, usarás el método askquestion y, según la respuesta, mostrarás un Label en la GUI.

import tkinter
import tkinter.messagebox

# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# Let's create a alert box with 'messagebox' function
tkinter.messagebox.showinfo("Alert Message", "This is just a alert message!")

# Let's also create a question for the user and based upon the response [Yes or No Question] display a message.
response = tkinter.messagebox.askquestion("Tricky Question", "Do you love Deep Learning?")

# A basic 'if/else' block where if user clicks on 'Yes' then it returns 1 else it returns 0. For each response you will display a message with the help of 'Label' method.
if response == 1:
    tkinter.Label(window, text = "Yes, offcourse I love Deep Learning!").pack()
else:
    tkinter.Label(window, text = "No, I don't love Deep Learning!").pack()

window.mainloop()

Ejecuta rápidamente el código anterior y mira la salida.

Mostrar imágenes

Si has podido seguir hasta aquí, añadir imágenes e iconos a la GUI será pan comido. Solo necesitas usar el método PhotoImage de Tkinter y pasarle la file_path como parámetro.

Así que, sin más, vamos a escribir un código para mostrar una imagen en la GUI.

import tkinter

# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# In order to display the image in a GUI, you will use the 'PhotoImage' method of Tkinter. It will an image from the directory (specified path) and store the image in a variable.
icon = tkinter.PhotoImage(file = "CNN.png")

# Finally, to display the image you will make use of the 'Label' method and pass the 'image' variriable as a parameter and use the pack() method to display inside the GUI.
label = tkinter.Label(window, image = icon)
label.pack()

window.mainloop()

¡Buen trabajo si has llegado hasta aquí!

Como extra, crearás una Calculator usando todo lo que has aprendido hasta ahora. Terminemos este tutorial por todo lo alto.

Crear una calculadora con Tkinter

Toda app con GUI incluye dos pasos.

• Crear la interfaz de usuario
  
  
• Añadir funcionalidades a la GUI

Empecemos a crear la calculadora. La mayor parte del código es autoexplicativo y algunas líneas están comentadas.

from tkinter import *

# Let's create the Tkinter window
window = Tk()

# Then, you will define the size of the window in width(312) and height(324) using the 'geometry' method
window.geometry("312x324")

# In order to prevent the window from getting resized you will call 'resizable' method on the window
window.resizable(0, 0)

#Finally, define the title of the window
window.title("Calcualtor")


# Let's now define the required functions for the Calculator to function properly.

# 1. First is the button click 'btn_click' function which will continuously update the input field whenever a number is entered or any button is pressed it will act as a button click update.
def btn_click(item):
    global expression
    expression = expression + str(item)
    input_text.set(expression)

# 2. Second is the button clear 'btn_clear' function clears the input field or previous calculations using the button "C"
def btn_clear():
    global expression
    expression = ""
    input_text.set("")

# 3. Third and the final function is button equal ("=") 'btn_equal' function which will calculate the expression present in input field. For example: User clicks button 2, + and 3 then clicks "=" will result in an output 5.
def btn_equal():
    global expression
    result = str(eval(expression)) # 'eval' function is used for evaluating the string expressions directly
    # you can also implement your own function to evalute the expression istead of 'eval' function
    input_text.set(result)
    expression = ""

expression = ""
# In order to get the instance of the input field 'StringVar()' is used
input_text = StringVar()

# Once all the functions are defined then comes the main section where you will start defining the structure of the calculator inside the GUI.

# The first thing is to create a frame for the input field
input_frame = Frame(window, width = 312, height = 50, bd = 0, highlightbackground = "black", highlightcolor = "black", highlightthickness = 1)
input_frame.pack(side = TOP)


# Then you will create an input field inside the 'Frame' that was created in the previous step. Here the digits or the output will be displayed as 'right' aligned
input_field = Entry(input_frame, font = ('arial', 18, 'bold'), textvariable = input_text, width = 50, bg = "#eee", bd = 0, justify = RIGHT)
input_field.grid(row = 0, column = 0)
input_field.pack(ipady = 10) # 'ipady' is an internal padding to increase the height of input field


# Once you have the input field defined then you need a separate frame which will incorporate all the buttons inside it below the 'input field'
btns_frame = Frame(window, width = 312, height = 272.5, bg = "grey")
btns_frame.pack()


# The first row will comprise of the buttons 'Clear (C)' and 'Divide (/)'
clear = Button(btns_frame, text = "C", fg = "black", width = 32, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_clear()).grid(row = 0, column = 0, columnspan = 3, padx = 1, pady = 1)
divide = Button(btns_frame, text = "", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("")).grid(row = 0, column = 3, padx = 1, pady = 1)


# The second row will comprise of the buttons '7', '8', '9' and 'Multiply (*)'
seven = Button(btns_frame, text = "7", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(7)).grid(row = 1, column = 0, padx = 1, pady = 1)
eight = Button(btns_frame, text = "8", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(8)).grid(row = 1, column = 1, padx = 1, pady = 1)
nine = Button(btns_frame, text = "9", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(9)).grid(row = 1, column = 2, padx = 1, pady = 1)
multiply = Button(btns_frame, text = "*", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("*")).grid(row = 1, column = 3, padx = 1, pady = 1)


# The third row will comprise of the buttons '4', '5', '6' and 'Subtract (-)'
four = Button(btns_frame, text = "4", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(4)).grid(row = 2, column = 0, padx = 1, pady = 1)
five = Button(btns_frame, text = "5", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(5)).grid(row = 2, column = 1, padx = 1, pady = 1)
six = Button(btns_frame, text = "6", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(6)).grid(row = 2, column = 2, padx = 1, pady = 1)
minus = Button(btns_frame, text = "-", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("-")).grid(row = 2, column = 3, padx = 1, pady = 1)


# The fourth row will comprise of the buttons '1', '2', '3' and 'Addition (+)'
one = Button(btns_frame, text = "1", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(1)).grid(row = 3, column = 0, padx = 1, pady = 1)
two = Button(btns_frame, text = "2", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(2)).grid(row = 3, column = 1, padx = 1, pady = 1)
three = Button(btns_frame, text = "3", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(3)).grid(row = 3, column = 2, padx = 1, pady = 1)
plus = Button(btns_frame, text = "+", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("+")).grid(row = 3, column = 3, padx = 1, pady = 1)


# Finally, the fifth row will comprise of the buttons '0', 'Decimal (.)', and 'Equal To (=)'
zero = Button(btns_frame, text = "0", fg = "black", width = 21, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(0)).grid(row = 4, column = 0, columnspan = 2, padx = 1, pady = 1)
point = Button(btns_frame, text = ".", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click(".")).grid(row = 4, column = 2, padx = 1, pady = 1)
equals = Button(btns_frame, text = "=", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_equal()).grid(row = 4, column = 3, padx = 1, pady = 1)


window.mainloop()

Conclusión

¡Enhorabuena por completar este tutorial!

Con lo aprendido aquí, ya estás listo para crear algunas apps GUI sencillas. Te queda por conocer más métodos para dar estilo e interactuar con los objetos de una GUI.

Un ejercicio útil sería intentar desarrollar aplicaciones como la calculadora; te ayudará a ganar confianza y a tener una visión más completa de todo lo que es posible con Tkinter.

Aún queda mucho por cubrir, y quizá te interese explorar el concepto de clases en Tkinter; puedes consultar esta documentación.

No dudes en dejar tus preguntas sobre este tutorial en la sección de comentarios.