¿Qué es Tkinter?
Tkinter es la biblioteca estándar de Python aunque algunas veces los nombre como un framework
para crear interfaces gráficas de usuario (GUI, por sus siglas en inglés). Es como una caja de
herramientas que te permite agregar ventanas, botones, cuadros de texto, menús y más a los
programas.
Algunas características clave de Tkinter:
Es fácil de usar: Ideal para empezar con interfaces gráficas y obtener resultados rapidos.
Viene incluida con Python: No se necesita instalar nada adicional (solo importar la biblioteca).
Personalizable: Puedes cambiar colores, tamaños, fuentes y estilos de los elementos visuales.
Multiplataforma: Funciona en Windows, macOS y Linux.
Para empezar a trabajar con Tkinter no necesitamos instalar nada ya que bien integrado con Python.
Solo debemos importar la biblioteca de Tkinter y podemos poner un alias
Tkinter está basado en la creación de interfaces graficas con Widgets que son elementos visuales
que componen la interfaz gráfica. Piensa en que los widgets se manejas como piezas de lego, con
las que podemos ir armando la interfaz gráfica de un programa.
Empecemos construyendo una ventana de la siguiente forma
Para que la ventana se muestre necesitamos usar el método mainloop(). Este método permite
mantener la ventana abierta y ver los cambios que hagan en la ventana o los eventos que
ejecutemos como oprimir un botón.
A continuación, se crea una etiqueta o widget de tipo label y se agregar a la ventana
Haciendo referencia a que los widgets son como piezas de lego, se puede decir que agregamos la
etiqueta a la ventana, ya que la ventana es como la base sobra la cual vamos a armar la interfaz
gráfica. Cuando creamos la etiqueta, un Label el cual pide 2 parametros, el primero es donde se va
a mostrar este widget y el segundo parámetro es el texto que contendrá. Después de creada la
etiqueta, con ella se puede invocar al método pack() que sirve para indicarle una posición dentro de
la ventana. A continuación, el resultado de la ventana con la etiqueta. Puede que la ventana se vea
pequeña cuando ejecute el programa, por ello vamos a configurar algunas características de la
ventana.
Algunas configuraciones a la ventana
Resultado de las configuraciones
En Tkinter, hay tres métodos principales para posicionar widgets dentro de la ventana como por
ejemplo posicionar un Label. Vamos a verlos uno por uno con una explicación clara y visual.
1. pack() - Organiza en bloques (vertical u horizontal). Este método coloca los widgets uno debajo
del otro (por defecto) o uno al lado del otro si usas side.
Parámetros útiles:
side — Controla la dirección (top, bottom, left, right).
fill — Expande el widget (x, y o both).
padx y pady — Agrega espacio o margen alrededor del widget.
Nota: dentro de un mismo contenedor (en este caso ventana) no se pueden mesclar
administradores de geometría, es decir no puede haber pack() – grid() o place() juntos
2. grid() - Sistema de filas y columnas. Divide la ventana en una cuadrícula (como una tabla) y colocas
los widgets en coordenadas (row, column).
Parámetros útiles:
row y column — Define la fila y columna donde irá el widget.
columnspan / rowspan — Permite que un widget ocupe varias columnas o filas.
padx, pady, sticky — Espaciado y alineación (n, s, e, w para arriba, abajo, izquierda, derecha).
3. place() - Posicionamiento exacto por coordenadas (x, y). Coloca widgets en posiciones específicas
usando píxeles exactos.
Parámetros útiles:
x, y — Coordenadas exactas donde se colocará el widget.
anchor — Controla el punto de anclaje (center, nw, ne, etc.).
En la line 19 de la siguiente imagen vemos que también podemos configurar o modificar algunas
características de los widgets, en este caso se cambió el texto de la etiqueta
También podríamos cambiar el texto de la etiqueta accediendo a la posición clave valor, ya que los
widgets se comportan como diccionarios, llamaríamos al widget y entre corchetes a la clave y el
nuevo valor ejemplo:
Importación del paquete ttk.
from tkinter import ttk
este paquete trae actualizaciones y mejoras para la creación y estilo de widgets. Es recomendable
importarlo, más adelante lo estaremos usando.
Funciones Lambda: Las funciones lambda o anónimas son funciones que se usan para
reemplazar funciones sencillas y a la vez tratar de resumirlas en menos código. Una función lambda
es creada con el objetivo de reemplazar a una función que será usada pocas veces, o que tal ves se
use una vez y no se vuelva a usar, se usa para reemplazar funciones sencillas que no contengan
ciclos o bucles en su cuerpo. Las funciones Lambda se definen sin nombre utilizando la palabra
reservada lambda. Son especialmente útiles en situaciones donde se necesita una función como
argumento para otra función, como en las funciones sorted(), map(), filter() y otras funciones de
orden superior.
➢ Crea una función para sumar dos números y retorne el resultado
➢ Ahora la convertiremos a una función Lambda
Vamos a crear otra función con un uso un poco más útil
➢ Crea una lista de tuplas llamada lista_estudiantes con 5 tuplas, cada tupla debe contener un
nombre y una nota
➢ Crea una función que llame retornar_nota(estudiante) esta función debe retonar la posición
1 del estudiante. El estudiante sería una tupla de la lista
➢ Usa la función sorted para generar una lista ordenada
➢ Convirtamos esta función a una funciona lambda
Convertir a lambda
Agregar botones: para esta ocasión usemos el ttk en lugar de tk, ya que este paquete tiene
actualizaciones y mejoras. Como se puede ver en la línea 18 de la siguiente imagen, se creó un el
botón_1 y similar a crear una etiqueta, también fue posicionado con el administrador de geometría
place, recordemos que no es recomendable combinar administradores de geometría, aunque si en
este caso usáramos pack para posicionar el botón, es posible que no nos arroje un error
inmediatamente pero al ir agregando más widgets, en algún momento fallará
Para poder darle un comportamiento al botón debemos usar el parámetro command y a este
asignarle una función o método, pero es importante pasarlo sin paréntesis para que el botón pueda
escuchar los eventos o clics que se hacen en el botón
Si esto lo manejáramos siempre de este modo, el problema sería que no podríamos agregar
parámetros a los métodos o funciones que le pasemos a los botones, por eso se vamos a usar
funciones lambda. Otra característica importante de las funciones lambda es que son de tipo
callback, esto quiere decir que puede ser usada como argumento de otra función y no se ejecutará
sino hasta que haya un evento o acción que interactúe con ella cuando la función principal se
ejecutada, miremos el siguiente ejemplo
Ahora vamos a agregar una ventana informativa al momento de ejecutar el botón.
Prime debemos importar el método showinfo
Luego en la función o método agregamos la función showinfo
Campo de texto: es un componente que permite ingresar o capturar información
Con el método Entry podemos crear el textfield o textbox, que permite escribir información para
ser capturadas, similar a cuando hacemos un input en Python
Vamos a conectar el textbox con el botón, para que al momento de oprimir el botón captura la
información agregada al textfield
En la función guardar_texto usamos una variable llamada texto_guardado a la que se le asigna el
contenido que tiene el textbox usando el método get()
En el botón, en el parámetro command se le asigna el la función guardar_texto. En este caso como
no necesitamos pasar parámetros, entonces no es necesario usar lambda
Ahora vamos a crear un nuevo archivo un nuevo archivo en Python, y vamos a poner en práctica lo
aprendido, además vamos crear un campo de texto y con la información que ingrese el usuario
vamos a modificar una etiqueta
➢ importa ttk de paquete tkinter
➢ importa la función showinfo del paquete tkinter.messagebox
➢ crea una ventana
➢ modifica a la ventana la siguientes características
✓ Tamaño de la ventana
✓ Desactivar el que la ventana sea redimensionable
✓ Agrega un background
✓ Agrega un titulo
➢ Crea una etiqueta con el texto “Castilla La Nueva” agrégala a la ventana con el administrador
de geometría pack()
➢ Crea una función llamada guardar que capture el contenido de un textbox, imprime el
contenido capturado en la consola y también con el showinfo
➢ Crea el campo de texto, usa el tipo de letra “calibri” con tamaño 10, posiciónalo en la
ventana con .pack()
➢ Crea un botón con el texto “Enviar”, posiciónalo en la ventana con .pack()
➢ Crea una nueva etiqueta con texto “Default” ese texto debe ser modificado con el texto
capturado del textbox. Para hacer esto llamamos a la nueva etiqueta en la función guardar
y en la clave ['text'] = texto_capturado
Método Grid: el método grid permite organizar los widets o elementos en una ventana en orden
como en cuadriculas. Para manejar el grid podemos simular que es una matriz, ya que los elementos
se pueden ubicar en filas y columnas y estas inician numerándose desde 0, Ejemplo de una ventana
con seis espacios donde ubicar elementos
Columna 0 Columna 1
Fila 0 F0,C0 F0,C1
Fila 1 F1,C0 F1,C1
Fila 2 F2,C0 F2,C1
Vamos a crear 3 botones y ubicarlos de la siguiente manera
➢ Intenta cambiar el orden de los botone y publícalos de manera horizontal y diagonal
Como pueden ver en la siguiente imagen, los botones no tiene margen y todos están unidos, para
mejorar esto lo podemos hacer con el método columnconfigure()
Con el método columnconfigure() podemos configurar el tamaño que tendrán las columnas en la
ventana, pero debemos hacerlo antes de posicionar los botones
En el siguiente ejemplo vamos a configurar la columna cero, según como está el ejemplo no veremos
ningún cambió, ya que parámetro weight por defecto está inicializado en cero
Si cambiamos el peso a 1 entonces la columna ocupará el máximo espacio posible, ejemplo
Como se puede ver en la imagen anterior, el botón 1 está en la columna cero con un peso de 1 y los
otros botones tiene por defecto un peso de cero que la obliga a ocupar el mínimo espacio posible
Si configuramos las demás columnas, podemos indicarle el peso que van a tener y esto dividirá el
espacio disponible de la ventana entre las columnas. Ejemplo
Igualmente podemos configurar las filas de con el método rowconfigure() y tiene la misma lógica
de peso que el columnconfigure() Ejemplo
➢ Configura que todas las filas tengan el mismo espacio
Hasta el momento tendríamos una ventana con 3 columnas y 3 filas, lo cual dividiría la ventana en
9 celdas, cada botón está ubicado en una celda. Ejemplo
También podemos alinear el botón dentro de la celda, con el parámetro sticky. Como vimos
anteriormente en la guía, sticky permite alinear a N,S,E,W, también en combinaciones de NE, NW,
SE, SW, NS, EW, NSEW
En la siguiente imagen se ve como el Boton 1 es alineado al norte de su celda
➢ Prueba alineada los botones con todas las combinaciones mencionadas
Si queremos que el botón sea más grande podemos usar los parámetros padx e pady, ejemplo
Creación de un login con Tkinter
Vamos a crear un login para poner en práctica lo aprendido hasta el momento y también
aprenderemos algunos conceptos nuevos como el uso de frames. Un frame es un objeto similar a
una ventana que también permite agregar botones, labels, textbox, etc. Pero nos permite organizar
mejor los elementos o la interfaz gráfica en la pantalla
Crea un archivo nuevo para crear el login, importa los paquetes y crea una ventana con las siguientes
configuraciones
Luego vamos a crear un frame
Ya con el frame creado vamos a dividirlo en columnas y filas dando un peso a cada columna o fila
para que se organicen los widgets de la forma que deseemos. El frame vamos a empezar
dividiéndolo en 2 columnas, en la columna cero con un peso de 1 y la columna 1 con un peso de 3.
Ejemplo:
Como todavía no tenemos widgets en el frame, por el momento no vamos a ver cambios
Vamos a crear algunos widgets en el frame. Primero vamos a crear una etiqueta, pero en esta
ocasión no la vamos a publicar en la ventana sino dentro del frame. Ejemplo
Por ahora se visualizaría así
Ahora vamos a crear una etiqueta para indicar donde se debe escribir el usuario y la caja de texto
donde se puede escribir el usuario
➢ Crea la etiqueta contraseña y el el textbox para ingresar la contraseña. Guíate con el
ejemplo anterior
Para que el textbox del la contraseña no muestre los caracteres ingresados, agregamos el
atributos show= ’*’
Si queremos que el titulo “Login” quede centrado podremos combinar dos celdas, agregando el
atributo “columnspan” para esto es importante tener claro el concepto de cuadricula o matriz.
ejemplo: volvemos a la línea donde creamos en titulo “Login” y agregamos “columnspan=2” igual
al dos porque ocupara el espacio de dos columnas
Por último vamos a agregar el botón “Enviar”, para ingresar con el usuario y contraseña
suministrado
Ya tenemos la maquetación del login, ahora vamos a usarlo, primero vamos a repasar y crear una
base de datos en SQL.
➢ En Workbench crea una nueva base de datos con nombre “usuarios_bd”
➢ Agrega una tabla llamada “usuarios” con los campos, id_usuario como entero, llave
primaria, no nulo y autoincremental. Correo como varchar, no nulo y único. También el
campo contraseña como varchar y no nulo
➢ Crea una nuevo Query y agrega a 5 usuarios
➢ Crea otra Query para consultar los usuarios registrados
Luego vamos a reutilizar el pool de conexiones de los ejercicios pasados para conectarnos a esta
nueva base de datos
➢ En el archivos donde estes haciendo el login, importa la clase “conexion” del archivo
“pool_conexion”
➢ Debemos ir al archivo “pool_conexion” y cambiar los datos de conexión a la base de datos
Luego en nuestro archivo del Login vamos a configurar la lógica para realizar la consulta a la base
de datos para el inicio de sesión
➢ Crea una función con nombre “comprobar_datos”
➢ En una variable captura la información de la caja de texto del usuario ingresado
➢ En otra variable captura la información de la caja de texto de la contraseña ingresada
➢ Crea una tupla con los valores de las variables de los puntos anteriores
➢ En una variable guarda la sentencia sql para consultar si el usuario y contraseña existen en
la base de datos
➢ Crea bloque whit y crea una conexión del pool de conexiones
➢ Usa el execute para hacer la consulta a la base de datos
➢ Con un if verifica si la base de datos encontró información o si es None, dependiendo de la
respuesta crea un showinfo para mostrar un mensaje de inicio de sesión exitoso o error al
iniciar sesión
➢ En el botón “Enviar” crea una función lambda que ejecute la función de comprobar_datos
