MÓDULO 8

Tkinter
 >GUIs
Historia:

La Interfaz gráfica de usuario o GUI (Graphic User Interface) es el

entorno visual de imágenes y objetos mediante el cual una máquina y
un usuario interactúan. A mediados de los 70’ las GUI comenzaron a
sustituir a las interfaces de línea de comando (CLI), y esto permitió que
la interacción con las computadoras fuera más sencilla e intuitiva.
Módulo 8

* 2022 / 3° Cohorte.
 >GUIs
Módulo 8

* 2022 / 3° Cohorte.
 >CLI
CLI - Interfaz de Línea de Comandos de cmd de windows
Módulo 8

* 2022 / 3° Cohorte.
 >GUI
GUI - Windows 3.1
Módulo 8

* 2022 / 3° Cohorte.
 >GUI
GUI - Windows 11
Módulo 8

* 2022 / 3° Cohorte.
 >GUI
En este curso ya aprendimos a crear programas con interfaces de línea
de comando usando las funciones print() e input(). Pero si queremos
crear una interfaz gráfica (ventanas) para nuestro programa, vamos a
necesitar un toolkit para GUI externo, ya que Python no posee uno
propio.
Módulo 8

* 2022 / 3° Cohorte.
 >Tcl/Tk y tkinter
Vamos a explicar brevemente qué son cada una de las partes de este
toolkit para GUIs:
● Tcl: Es un lenguaje de programación interpretado y dinámico, tal
como Python.
● Tk: Es un paquete de Tcl implementado en C que agrega
comandos a Tcl para crear y manipular widgets de una GUI.
● Un widget (en una GUI), también llamado 'control', es cada uno de
los elementos de la interfaz, como por ejemplo un botón, una
etiqueta, una barra de scroll y hasta una ventana.
Módulo 8

* 2022 / 3° Cohorte.
 >Tcl/Tk y tkinter
● Ttk: Themed Tk es una nueva familia de widgets de Tk que proveen
una mejor apariencia en diferentes plataformas de varios de los
widgets clásicos de Tk. Ttk es distribuido como parte de Tk.
● tkinter: tkinter («interfaz Tk») es una librería (un paquete) incluida
con Python. Es la interfaz por defecto de Python para el toolkit de
GUI Tk. Tanto Tk como tkinter están disponibles en la mayoría de
las plataformas Unix, así como en sistemas Windows. Como
mencionamos antes, Tk en sí no es parte de Python, es mantenido
por ActiveState. Internamente, Tk y Ttk usan funcionalidades del
sistema operativo subyacente, en otras palabras, Xlib en Unix/X11,
Módulo 8

Cocoa en macOS o GDI en Windows.

* 2022 / 3° Cohorte.
 >Tcl/Tk y tkinter
En otras palabras, desde Python vamos a utilizar la librería tkinter para
poder crear y manipular una GUI construida con Tk.

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
frame = ttk.Frame(root).grid()
ttk.Button(frame, text="Hola",
command=lambda: print("mundo")).grid()
Módulo 8

root.mainloop()

* 2022 / 3° Cohorte.
 >Tkinter
Instalación de tkinter
Tkinter está incluido dentro de la Libreria Estandar de Python si se
instala desde las distribuciones de la página oficial. Por lo tanto, no es
necesario instalar nada. Tcl/Tk y tkinter se instalan automáticamente
al instalar Python.
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter
Hola mundo
Probemos un programa mínimo para comenzar a usar tkinter.

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
frame = ttk.Frame(root).grid()
ttk.Button(frame, text="Hola",
command=lambda: print("mundo")).grid()
Módulo 8

root.mainloop()

* 2022 / 3° Cohorte.
 >Tkinter
Hola mundo
Este programa simplemente creará una pequeña ventana con un botón
con el texto "Hola". Al hacer click en el botón se escribirá (por consola)
el mensaje "mundo". Para detener el programa hay que cerrar la
ventana.
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter
Vamos a explicar que hace cada sentencia de este pequeño programa.
1. import tkinter as tk: Importa tkinter con el nombre tk (usando esa
línea de código, tk es el alias o apodo de tkinter para nuestro
programa), asi es más fácil referirnos al módulo cuando queramos
usar sus widgets. En este ejemplo empleamos tk.Tk() que sin el
alias debería haberse escrito tkinter.Tk().
2. from tkinter import ttk: con esta sentencia importamos el módulo
ttk (contenido dentro del paquete tkinter) para poder utilizar los
widgets modernos que este contiene. En nuestro ejemplo vamos a
Módulo 8

usar ttk.Button.

* 2022 / 3° Cohorte.
 >Tkinter
3. root = tk.Tk(): Creamos un nuevo objeto Tk que será nuestra
ventana principal y el widget que correrá el bucle de eventos o
"event loop" (vamos a explicar que es un bucle de eventos más
adelante).
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter
4. frame = ttk.Frame(root).grid(): Creamos un frame (o marco), que
tiene a la ventana root como "padre". Todos los widgets, salvo la
ventana principal, deben tener un widget "padre" y éste se indica
pasándolo como el primer parámetro (vamos a ver más sobre esto
en la sección de Jerarquía de widgets). Y lo posicionamos dentro
de root mediante el método grid() (vamos a ver como funciona
esto en la sección de Layout). Este widget es de tipo contenedor, lo
que quiere decir que puede contener otros widgets, aquí vamos a
colocar al botón.
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter
5. ttk.Button(frame, text="Hola", command=lambda:
print("mundo")).grid(): Al igual que en la sentencia anterior,
creamos un widget y lo posicionamos con el método grid().
Cuando creamos el nuevo widget de tipo botón, indicamos que su
padre es frame, que tendrá la leyenda "Hola" con el parámetro text
y con el parámetro command indicamos cuál será la callback (o
función) que se ejecute cuando se haga click. Acá usamos una
función lambda, ya que es simple y es conveniente declararla en
una sola expresión.
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter
6. root.mainloop(): Con esta última sentencia iniciamos el bucle de
eventos de Tk. Esto quiere decir que nuestra ventana cobra “vida” y
podemos comenzar a interactuar con ella. La ejecución de nuestro
programa se mantendrá dentro de este bucle hasta que se cierre la
ventana.
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter
Como podemos ver, tkinter nos permite crear y manejar widgets
mediante programación imperativa. Pero también podemos hacerlo
con un enfoque orientado a objetos, lo cual nos brinda facilidades para
estructurar y escribir nuestra aplicación de manera ordenada.
Veamos el ejemplo anterior escrito en el paradigma de POO.
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter
import tkinter as tk
from tkinter import ttk, messagebox
class App(ttk.Frame):
def __init__(self, parent):
super().__init__(parent)
ttk.Button(self, text="Hola", command=self.mensaje).grid()
@staticmethod
def mensaje():
messagebox.showinfo(message='mundo!')
root = tk.Tk()
App(root).grid()
Módulo 8

root.mainloop()
* 2022 / 3° Cohorte.
 >Tkinter
La diferencia adicional en este ejemplo, con respecto al anterior, es que
al presionar el botón el mensaje ya no se muestra por consola, sino que
se muestra en una ventana pop-up o de diálogo (el messagebox).
Al igual que en el ejemplo anterior, creamos un botón y lo agregamos al
frame. Pero indicamos como callback del command al método estático
mensaje de nuestra clase. Decidimos crear este método como estático,
ya que no utilizamos a self adentro.
El método mensaje solo crea y lanza una ventana de diálogo de tipo
messagebox con el mensaje "mundo" y un botón de "Ok" o "Aceptar".
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter
Event Loop - Bucle de eventos
Tk (y muchos otros frameworks para GUIs) utilizan una ejecución
orientada a eventos utilizando un bucle de eventos.
En Tk el bucle de eventos se ejecuta con la función mainloop().
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter
Dentro del bucle, Tk constantemente recibe los eventos del sistema
operativo, estos son por ejemplo:
● Un clic,
● Una tecla presionada,
● El movimiento del mouse,
● El cambio de tamaño de una ventana,
● Etc.
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter
Algunos de los widgets disponibles en Tk y ttk.
Widget Para qué sirve
tk.Frame, ttk.Frame Recuadro
tk.Label, ttk.Label Etiqueta de texto o de imágenes.
tk.Button, ttk.Button Botón.
tk.Entry, ttk.Entry Entrada de texto.

tk.Checkbutton, ttk.Checkbutton Para indicar una opción seleccionada o no.

tk.Radiobutton, ttk.Radiobutton Para marcar una de varias opciones.

Módulo 8

ttk.Combobox Cuadro combinado de opciones múltiples.

* 2022 / 3° Cohorte.
 >Tkinter
Una muestra de varios widgets de Tk en una ventana de ejemplo
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter
Usar más de una ventana
En Tk, todos los widgets existen dentro de una jerarquía. El widget raiz,
es la ventana principal root. Todos los demás widgets son sus hijos o
hijos de sus hijos y así. Incluidas otras ventanas que usemos.
Para crear otra ventana que sea parte de nuestro programa debemos
utilizar el widget toplevel. Este widget debe tener como padre a la
ventana principal.
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter

def abrir_ventana (self):

# creamos la ventana secundaria
# como padre indicamos la ventana principal (no usamos
grid)
toplevel = tk.Toplevel( self.parent)
Secundaria(toplevel).grid()
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter
Treeview - grilla o tabla
Si en nuestro programa necesitamos mostrar datos en una grilla o
tabla, podemos usar el widget treeview.
Un treeview es un widget que contiene items en una jerarquía. Con él se
pueden hacer árboles (como su nombre lo indica) y tablas.
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter
Treeview - grilla o tabla
En la jerarquía de items de un treeview, el item principal está
simbolizado como una cadena vacía ''. Este item no se muestra, pero
debemos indicarlo como el nodo padre de los items que quieramos
insertar.
Para agregar items a un treeview vamos a usar el método insert(), y
como parámetros indicamos el nodo padre, en que parte lo vamos a
insertar (por ejemplo tk.END indica el final de la grilla) y los valores
(como una tupla).
Módulo 8

* 2022 / 3° Cohorte.
 >Tkinter
Documentación
Para ver la documentación de Tk, como también todos los demás
widgets que se pueden usar, recomendamos visitar la siguiente página:
http://tkdocs.com/tutorial/index.html
Módulo 8

* 2022 / 3° Cohorte.
 >Figma y TkinterDesigner
Si bien podemos crear GUIs escribiendo cada sentencia manualmente,
también existe una forma de hacerlo más sencillo y automático,
diseñando la interfaz con una herramienta gráfica y luego convertirla a
código Python.
Esto lo podemos lograr con la herramienta online Figma, que nos
permite diseñar una interfaz de manera gráfica y luego utilizando el
paquete Tkinter-Designer que traduce esa interfaz a Python.
Módulo 8

* 2022 / 3° Cohorte.
 >Figma y TkinterDesigner
Usar Figma tiene sus ventajas, es más rápido y fácil crear la interfaz.
Pero, por otro lado, al traducirse, la interfaz terminará escrita en el
paradigma imperativo. Habrá que modificarla un poco para poder
convertirla a POO. También hay que agregar cambios si se quiere
generar una interfaz de más de una ventana. Luego veremos como.
Módulo 8

* 2022 / 3° Cohorte.
 >Figma y TkinterDesigner
Introducción a Figma
Figma es una herramienta online para diseñar interfaces de manera
gráfica.
Módulo 8

* 2022 / 3° Cohorte.
 >Figma y TkinterDesigner
Introducción a Figma
Para poder utilizarla solo hay que crear una cuenta gratuita (se puede
autenticar con una cuenta de google).

Para crear una interfaz que sea compatible con Tkinter, simplemente
debemos seguir algunas pautas al nombrar los elementos (que luego
se convertirán a widgets).
Módulo 8

* 2022 / 3° Cohorte.
 >Figma y TkinterDesigner
Tkinter-Designer
Para usar esta librería de terceros no hace falta instalarla, nos bastará
con clonar el repositorio git que está en GitHub.
Podemos clonar el repositorio en cualquier lugar de nuestra PC con el
comando:
git clone https://github.com/ParthJadhav/Tkinter-Designer.git
Módulo 8

* 2022 / 3° Cohorte.
 >Figma y TkinterDesigner
Tkinter-Designer
Una vez clonado el repositorio se creará la carpeta
Tkinter-Designer. Para instalar sus dependencias debemos entrar
a la carpeta desde la línea de comandos y ejecutar:
pip install -r requirements.txt
Dentro de la carpeta Tkinter-Designer, tenemos que entrar a la
carpeta gui y ejecutar el archivo gui.py usando Python, de la
siguiente manera:
python gui.py
Módulo 8

Esto ejecutará la interfaz gráfica de Tkinter-Designer.

* 2022 / 3° Cohorte.
 >Figma y TkinterDesigner
Como mencionamos, al diseñar la interfaz en Figma debemos prestar
especial atención al nombrar los elementos que creamos, para que
luego puedan convertirse en widgets de Tk.
Módulo 8

* 2022 / 3° Cohorte.
 >Figma y TkinterDesigner
A la izquierda está el nombre que debemos usar en Figma, a la derecha
el widget de tkinter asociado.
Figma Element Name Tkinter Element

Button Button

Line Line

Text Label

Rectangle Rectangle

TextArea Text Area

Módulo 8

TextBox Entry

Image Canvas.Image() * 2022 / 3° Cohorte.

 >Figma y TkinterDesigner
Además de esto, también tenemos que tener en cuenta lo siguiente:
● Debemos comenzar con un Frame y colocar a los demás
elementos dentro, el tamaño que le demos será el tamaño de la
ventana en Tk.
● Para crear un botón, primero lo diseñamos con la herramienta de
Rectángulo, luego colocamos el texto con la herramienta de Texto,
y finalmente debemos seleccionar a ambos y presionar la
combinación de teclas Ctrl+G para agruparlos. No hay que olvidar
de colocarle el nombre “Button”.
Módulo 8

* 2022 / 3° Cohorte.
 >Figma y TkinterDesigner
Módulo 8

* 2022 / 3° Cohorte.
 >Figma y TkinterDesigner
Una vez que hayamos diseñado una interfaz en Figma tenemos que
convertirla con Tkinter-Designer. Tkinter-Designer toma la interfaz,
mediante una URL (link) de Figma, y un Token de Acceso y devuelve un
archivo .py.
Para crear el Token de Acceso tenemos entrar a la sección de
Configuración (Settings) de Figma, luego a la sección de Cuenta
(Account) y ahí buscar Personal Access Token. Nos pedirá un nombre,
al dárselo nos devolverá el Token (un código) . Importante anotar y
guardar el Token, ya que no lo podremos volver a pedir. Este Token nos
Módulo 8

servirá para poder autenticarnos cada vez que solicitamos una URL de
nuestras interfaces creadas y guardadas en Figma.
* 2022 / 3° Cohorte.
 >Figma y TkinterDesigner
Para obtener una URL de nuestra interfaz, debemos ir al botón de
Compartir (Share) en Figma y copiar el enlace.
Una vez que tenemos la URL y el Token de Acceso, podemos ejecutar
Tkinter-Designer y generar nuestro archivo .py
Módulo 8

* 2022 / 3° Cohorte.
 >Figma y TkinterDesigner
El archivo generado está listo para ejecutarse.
Módulo 8

* 2022 / 3° Cohorte.
 >Figma y TkinterDesigner
Solo tenemos que crear las callbacks (funciones) que ejecute cada
botón.
Recordar que con Tkinter-Designer solo podemos crear ventanas
principales, por lo tanto, si diseñamos ventanas secundarias debemos
modificar el código y crear la ventana como TopLevel en lugar de Tk.
Módulo 8

* 2022 / 3° Cohorte.