Python en Español

Ejemplos de la GUI de Python (Tutorial de Tkinter)

En este tutorial, aprenderemos a desarrollar interfaces gráficas de usuario (GUI del inglés Graphics User Interfaces) escribiendo algunos ejemplos de la GUI de Python usando el paquete Tkinter.

El paquete Tkinter está incluido en Python como un paquete estándar, por lo que no es necesario instalar nada para usarlo.


El paquete Tkinter es un paquete muy poderoso. Si ya ha instalado Python, puede usar IDLE, que es el IDE integrado que se envía con Python. Este IDE se ha escrito utilizando Tkinter. ¡Suena grandioso!

Usaremos Python 3.6, por lo que si está utilizando Python 2.x, se recomienda encarecidamente que cambie a Python 3.x a menos que sepa los cambios en el lenguaje para que pueda ajustar el código y se ejecute sin errores.Aprende a desarrollar aplicaciones de GUI utilizando el paquete Python Tkinter. En este tutorial, aprenderás cómo crear interfaces gráficas escribiendo ejemplos de GUI de Python

Asumo que tienes conocimientos de Python básico que te ayudará a entender lo que estamos haciendo.

Comenzaremos por crear una ventana, luego aprenderemos cómo agregar widgets como botones, cuadros combinados, etc., luego jugaremos con sus propiedades. Así que comencemos.

Crear tu primera aplicación GUI

Primero, importaremos el paquete Tkinter y crearemos una ventana y estableceremos su título:

El resultado debe verse como esto:

Python GUI examples create app

¡Increíble! Nuestra aplicación funciona.

La última línea llama a la función mainloop. Esta función llama al ciclo sin fin de la ventana, por lo que la ventana esperará cualquier interacción del usuario hasta que la cerremos.

Si olvidas llamar a la función mainloop, no aparecerá nada al usuario.

 

Crear un widget label (etiqueta)

Para agregar una etiqueta a nuestro ejemplo anterior, crearemos una etiqueta usando la clase label de la siguiente manera:

lbl = Label(window, text="Hello")

Luego estableceremos su posición en el formulario utilizando la función grid con su ubicación, de esta manera:

lbl.grid(column=0, row=0)

Entonces el código completo se verá de esta manera:

Y este es el resultado:

Python GUI examples add label

Sin llamar a la función grid para label, la etiqueta no aparecerá.

Set label font size

Puedes establecer la fuente de la etiqueta para agrandarla o quizá, colocarla en negrita. También puedes cambiar el estilo de fuente.

Para hacerlo, puedes pasar el parámetro font de esta manera:

lbl = Label(window, text="Hello", font=("Arial Bold", 50))

Python GUI examples label font

Debes tener en cuenta que el parámetro font se puede pasar a cualquier widget para cambiar su fuente, no solo a etiquetas.

Genial. Pero, la ventana es tan pequeña que incluso no podemos ver el título. ¿Cómo se establece el tamaño de la ventana?

Establecer el tamaño de una ventana

Podemos establecer el tamaño predeterminado de ventana, usando la función geometry, de esta manera:

window.geometry('350x200')

La línea anterior establece el ancho de la ventana en 350 píxeles y la altura en 200 píxeles.

Intentemos agregar más widgets como botones y ver cómo manejar el evento de click de un botón.

 

Agregar un widget button

Comencemos agregando un botón a la ventana. El botón se crea y se agrega a la ventana de la misma manera que la etiqueta:

Entonces, el código de la ventana se verá así:

Y el resultado se verá así:

Python GUI examples add button

Hay que tener en cuenta que colocamos el botón en la segunda columna de la ventana, que es la 1. Si olvidas eso y colocas el botón en la misma columna (en este caso la 0), se mostrará el botón solamente, ya que el botón estará por encima de la etiqueta.

Cambiar los colores de fondo y primer plano de un botón

Puedes cambiar el color de frente del botón o de cualquier otro widget usando la propiedad fg.

También, puedes cambiar el color de fondo de cualquier widget usando la propiedad bg.

btn = Button(window, text="Click Me", bg="orange", fg="red")

Python GUI examples button colors

Ahora, si trataste de hacer click en el botón, no pasó nada, porque el evento click del botón aún no está programado.

Manejar el evento click de un botón

Primero, escribiremos la función que necesitamos ejecutar cuando se haga click en el botón:

Luego la cablearemos con el botón especificando la función de esta manera:

Fíjate que, escribimos clicked simplement y no clicked() con paréntesis.

Ahora el código completo se verá de esta manera:

Y cuando hacemos click en el botón, el resultado es el esperado:

Python GUI examples button click event

¡Buenísimo!



Entrada de datos usando la clase Entry (Tkinter textbox)

En los ejemplos anteriores de Python GUI, vimos cómo agregar widgets simples, ahora intentemos obtener una entrada del usuario utilizando la clase Tkinter Entry (cuadro de texto de Tkinter).

Puedes crear un cuadro de texto usando la clase Tkinter Entry de esta manera:

txt = Entry(window,width=10)

Luego, puedes agregar el widget a la ventana usando la función grid, como siempre.

Entonces nuestra ventana será así:

Y el resultado será el siguiente:

Python GUI examples add entry widget

Ahora, si haces click en el botón, se mostrará el mismo mensaje anterior. ¿Qué tal si se muestra el texto ingresado en el widget de entrada?

Primero, podemos obtener texto de entrada usando la función get. Entonces podemos escribir este código en nuestra función clicked, de esta manera:

Si haces click en el botón y hay un texto en el widget de entrada, se mostrará “Welcome to ” concatenado con el texto ingresado.

Y este es el código completo:

Ejecuta el código anterior y verifica el resultado:

Python GUI examples entry widget event

¡Increíble!

Cada vez que ejecutamos el código, tenemos que hacer click en el widget de entrada para establecer el foco para escribir el texto, ¿qué pasa si configuramos el foco automáticamente?

Establecer el foco en el widget de entrada

Eso es súper fácil, todo lo que tenemos que hacer es llamar a la función focus de esta manera:

txt.focus()

Y cuando ejecutes el código, notarás que el widget de entrada tiene el foco para que puedas escribir el texto de inmediato.

Deshabilitar el widget de entrada

Para deshabilitar el widget de entrada, puedes configurar la propiedad state como deshabilitada (disabled):

txt = Entry(window,width=10, state='disabled')

Python GUI examples disable entry widget

Ahora, ya no podrás ingresar ningún texto.

 

Agregar un widget combobox

Para agregar un widget combobox, puedes usar la clase Combobox de la librería ttk, de esta manera:

Luego puedes agregar los valores al combo.

Python GUI examples combobox

Como puedes ver, agregamos los elementos del combobox usando una tupla de valores.

Para configurar el elemento seleccionado, puedes pasar el índice del elemento deseado a la función actual.

Para obtener el elemento seleccionado, puedes usar la función get, como se muestra a continuación:

combo.get()

 

Agregar un widget Checkbutton (Tkinter checkbox)

Para crear un widget Checkbutton, puedes usar la clase Checkbutton de esta manera:

chk = Checkbutton(window, text='Choose')

Además, puedes configurar el estado checked pasando el valor de activación al Checkbutton, de esta manera:

Verifica el resultado:

Python GUI examples add checkbutton

Establecer el estado de un Checkbutton

Aquí creamos una variable de tipo BooleanVar que no es una variable Python estándar, es una variable Tkinter. Luego la pasamos a la clase Checkbutton para establecer el estado de verificación como la línea resaltada en el ejemplo anterior.

Puedes establecer el valor booleano en falso para desactivarlo.

Además, puedes usar IntVar en lugar de BooleanVar y establecer el valor en 0 o 1.

Estos ejemplos dan el mismo resultado que con BooleanVar.

 


Agregar widgets radio button

Para agregar radio buttons, simplemente puedes usar la clase RadioButton, de esta manera:

rad1 = Radiobutton(window,text='First', value=1)

Ten en cuenta que, debes establecer el valor para cada botón de opción con un valor diferente; de lo contrario, no funcionarán.

El resultado del código anterior se ve así:

Python GUI examples add radio button

Además, puedes configurar el command de cualquiera de estos botones de opción para una función específica, de modo que si el usuario hace click en alguno de ellos, ejecuta el código de la función asignada.

Aquí un ejemplo:

¡Bastante simple!

Obtener el valor del radio button (opción seleccionada)

Para obtener el botón de opción actualmente seleccionado o el valor del botón de opción, puedes pasar un parámetro variable a los botones de opción y más adelante puede obtener su valor.

Python GUI examples get radio button value

Cada vez que seleccione un botón de opción, el valor de la variable cambiará al valor de la opción seleccionada.

 

Adicionar un widget ScrolledText (Tkinter textarea)

Para adicionar un widget ScrolledText, puedes usar la clase ScrolledText, de esta manera:

Aquí especificamos el ancho y el alto del widget ScrolledText, de lo contrario, rellenará toda la ventana.

Puedes ver el resultado:

Python GUI examples add scrolledtext

Establecer el contenido del scrolledtext

Para establecer el contenido del scrolledtext, puedes usar el método insert, de esta manera:

txt.insert(INSERT,'You text goes here')

Borrar/limpiar el contenido de un scrolledtext

Para borrar el contenido de un widget scrolledtext, puedes usar el método delete, de esta manera:

txt.delete(1.0,END)

¡Grandioso!

 


Crear un MessageBox

Para mostrar un cuadro de mensaje usando Tkinter, puedes usar la librería messagebox, de esta manera:

¡Bastante simple!

Vamos a mostrar un cuadro de mensaje cuando el usuario haga click en un botón.

Python GUI examples show messagebox

Cuando hagas click en el botón, un cuadro de mensajes informativo aparecerá.

Mostrar mensajes de error y de advertencia

Puede mostrar un mensaje de advertencia o mensaje de error de la misma manera. Lo único que debe cambiarse es la función message.

Mostrar diálogos de pregunta-respuesta

Para mostrar una caja de mensaje del tipo si/no al usuario, puedes usar uno de las siguientes funciones messagebox:

Puedes elegir el estilo de mensaje apropiado, de acuerdo a tus necesidades. Simplmente reemplaza la función showinfo en el código anterior y ejecútalo.

También puedes revisar qué botón hizo click el usuario, usando la variable result.

Si haces click en OK o yes o retry, devolverá el valor True; pero, si eliges no o cancel, retornará False.

La única función que devuelve uno de tres valores es la función askyesnocancel, que devuelve True o False o None.

 

Agregar un SpinBox (widget de números)

Para crear un widget Spinbox, puedes usar la clase Spinbox, de esta manera:

spin = Spinbox(window, from_=0, to=100)

Aquí creamos un widget Spinbox y pasamos los parámetros from_ y to para especificar el rango de números del Spinbox.

Además, puedes especificar el ancho del widget usando el parámetro width:

spin = Spinbox(window, from_=0, to=100, width=5)

Verifiquemos el ejemplo completo:

Python GUI examples spinbox

Puedes especificar números para el Spinbox en lugar de usar todo el rango, de esta manera:

spin = Spinbox(window, values=(3, 8, 11), width=5)

Aquí, el widget Spinbox solamente muestra 3 números: 3, 8 y 11.

Establecer el valor por defecto del Spinbox

Para colocar el valor por defecto del Spinbox, puedes pasar el valor al parámetro textvariable, de esta manera:

Ahora, si corres el programa, el Spinbox te mostrará el valor 36 por defecto.

 

Adicionar el widget Progressbar

Para crear una barra de progreso, puedes usar la clase progressbar, de esta manera:

Puedes establecer el valor de la barra de progreso, de esta manera:

bar['value'] = 70

Puedes establecer este valor según el proceso que desees, como descargar un archivo o completar una tarea.

Cambiar el color de un Progressbar

Cambiar el color de un Progressbar es un poco complicado al principio, pero muy fácil en realidad.

Primero, crearemos un estilo, luego en dicho estilo estableceremos el color de fondo; y, finalmente, asignaremos el estilo al Progressbar.

Revisa el siguiente ejemplo:

Y el resultado quedará así:

Python GUI examples change progressbar color

 


Adicionar un diálogo para archivos (elegir archivo y directorio)

Para crear un diálogo de archivos (para elegir archivos) puedes usar la clase filedialog, de esta manera:

Después de que escojas un archivoy hagas click en abrir, la variable file tendrá la ruta del archivo.

También puedes elegir multiples archivos de la siguiente manera:

files = filedialog.askopenfilenames()

Especificar los tipos de archivo (filtro por la extensión del archivo)

Puedes especificar los tipos de archivo usando el parámetro filetypes, que, precisamente especifica la extensión en tuplas.

file = filedialog.askopenfilename(filetypes = (("Text files","*.txt"),("all files","*.*")))

Puedes solicitar el directorio a usar con el método askdirectory:

dir = filedialog.askdirectory()

Puedes especificar el directorio inicial del diálogo especificando el initialdir, de esta manera:

¡Fácil!

 

Adicionar una barra de menú

Para agregar una barra de menú, puedes usar la clase menu, de esta manera:

Primero, creamos el menú. Luego, añadimos nuestra primera etiqueta. Finalmente, asignamos el menú a la ventana.

Puedes agregar los elementos del menú, en cualquir menú, con la función add_cascade(), de esta manera:

menu.add_cascade(label='File', menu=new_item)

Entonces, nuestro código quedará así:

Python GUI examples add menu bar

De esta manera, puedes agregar tantos elementos como quieras.

Python GUI examples menu add cascade

Aquí agregamos otro elemento del menú llamado «Edit» con un separador de menú.

Puedes notar una línea punteada al principio, bueno, si haces click en esa línea, mostrará los elementos del menú en una pequeña ventana separada.

Puedes deshabilitar esta característica, deshabilitando la característica tearoff, de esta manera:

new_item = Menu(menu, tearoff=0)

Simplemente reemplaza el new_item en el ejemplo anterior con éste y ya no mostrará la línea punteada.

No es necesario que recordarte que puedes escribir cualquier código que funcione cuando el usuario haga click en cualquier elemento del menú, especificando la propiedad command.

new_item.add_command(label='New', command=clicked)

 

Adicionar un widget Notebook (control de pestañas)

Para crear un control de pestañas, se deben seguir tres pasos.

  • Primero, crear un control de pestaña usando la clase Notebook
  • Crear la pestaña usando la clase Frame.
  • Adicionar la pestaña al control de pestañas.
  • Empaquetar el control de pestañas para que sea visible en la ventana.

Python GUI examples notebook widget

De igual manera, puedes añadir tantas pestañas como quieras.

Agregar widgets a las pestañas

Después de crear las pestañas, puedes colocar widgets dentro de ellas, asignado la propieda parent con la pestaña deseada.

Python GUI examples add widgets to notebooks

Adicionar espacio para los widgets (separación o padding)

Puedes añadir separación a tus controles para que se vean bien organizados, usando las propiedades padx y pady.

Simplemente pasa padx y pady a cualquier widget y dáles un valor.

lbl1 = Label(tab1, text= 'label1', padx=5, pady=5)

¡Así de simple!

En este tutorial, vimos muchos ejemplos de Python GUI que utilizan la biblioteca Tkinter y vimos lo fácil que es desarrollar interfaces gráficas para usarlo.

Este tutorial cubre los aspectos principales del desarrollo de la GUI de Python no todos. No hay tutorial o un libro pueda cubrir todo.

Espero que encuentres estos ejemplos útiles. Mantente con nosotros.

Gracias.

Mokhtar Ebrahim
Estoy trabajando como administrador de sistemas Linux desde 2010. Soy responsable de mantener, proteger y solucionar problemas de servidores Linux para múltiples clientes de todo el mundo. Me encanta escribir guiones de shell y Python para automatizar mi trabajo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *