Curso Guizero. 1.- Creando una Interfaz Gráfica de Usuario (GUI)

Creando una Interfaz Gráfica de Usuario (GUI)

Aunque anteriormente hemos visto ya como crear GUI´s con Tkinter y Guizero he pensado que quizá al mezclar ambos procesos el resultado haya sido confuso. Así que vamos a ver, en este y los siguientes capítulos como crear Aplicaciones Gráficas exclusivamente utilizando Guizero. 

Este curso esta basado en el curso de la Raspberry Pi Foundation "Programming with GUIs."

¿ Que necesitaremos ?

Python 3

Un IDE o editor de código. El que más te guste Mu, Thonny, Visual Studio Code etc

La librería en Python de Guizero.

Instalando Guizero.

Guizero se puede instalar en Windows, Mac y Linux. Aquí vamos a ver como instalarlo en Linux, aunque es igualmente sencillo instalarlo en cualquier otro sistema. Solamente tienes que ir a su página web y seguir las instrucciones.

Para instalarlo primeramente abrimos una sesión de terminal. Luego usamos el administrador de paquetes de Python3 y tecleamos:

sudo pip3 install guizero

Si quieres instalar características adicionales tales como poder utilizar archivos jpg, escalar imágenes o usar gifts animados entonces necesitarás instalar Guizero de forma similar al comando anterior pero usando:

sudo pip3 install guizero[images]

Si ha pasado algún tiempo y queremos actualizar el paquete, entonces usaremos la siguiente opción:

sudo pip3 install guizero --upgrade

Creando tu primer GUI.

Utiliza el editor de código que hayas elegido y crea un archivo vacío llamado por ejemplo "primer_gui.py". Después copia el siguiente código o mejor, tecléalo directamente: 

from guizero import App, Text
app = App(title="Esto es mi primera GUI")

message = Text(app, text="Esta GUI es estupenda.")
app.display()

Antes de ejecutar el código, simplemente por el contexto, imagina cual será el resultado. Es una buena práctica para ir descubriendo la lógica de la aplicación y verás como con el tiempo serás capaz de ir anticipando como se desarrollará el programa.

Bien, ejecuta el programa. Deberías ver algo como esto:

Echemos un vistazo al código línea por línea para ver que es lo que hace.

- from guizero import App, Text

Esta línea le dice a Python que importe los objetos App y Text desde la librería de Guizero.

- app = App(title="Esto es mi primera GUI")

Aquí estas creando un objeto de Guizero, App y estableces su propiedad title con el título de la ventana.

En el app, en minúsculas, es donde pondremos el resto de widgets o elementos que contendrá la aplicación. 

- message = Text(app, text="Esta GUI es estupenda.")

Estás creando un widget para mostrar etiquetas de texto (Text) llamado message. Y le estamos diciendo a Python que esa etiqueta de texto (Text) aparezca en la ventana de la aplicación (app) que definimos anteriormente. También configuramos su propiedad text para que contenga el texto "Esta GUI es estupenda".

- app.display()

Ahora que ya hemos codificado como debe ser la Interfaz del Usuario, este comando le dice al ordenador que muestre la aplicación (app) en pantalla.

Esta sencilla aplicación no hace nada más por el momento que mostrar una ventana con un texto por pantalla, pero en breve le añadiremos más funcionalidades.

Propiedades.

Si has trabajado antes con la programación orientada a objetos, ya conoces que los objetos pueden tener diferentes propiedades. Si no estas familiarizado con la programación orientada a objetos, no te preocupes, el realizar interfaces gráficas de usuario es una de las mejores formas de aprender.

Una propiedad es algo que ayuda a describir un objeto como por ejemplo la etiqueta Text. Esta etiqueta tiene propiedades como color, texto, una alineación (p.ej. izquierda, derecha, centro) y un montón de otras cosas que pueden personalizarse para crear el GUI que quieras.

Una vez que has creado un widget y le has dado un nombre (en el ejemplo anterior lo llamamos message) puedes usar el nombrewidget.property = nuevo_valor para cambiar su apariencia. Por ejemplo message.textsize = 40 cambia el tamaño del texto a 40.

Ahora, reemplaza todo tu código con el siguiente:

from guizero import App, Text
app = App(title="Una Ventana")

primer_mensaje = Text(app, text="Letras GRANDES")
segundo_mensaje = Text(app, text="Esto es verde")

primer_mensaje.text_size = 40
segundo_mensaje.bg = "green"

app.display()

Cuando ejecutes el código, verás que tienes dos Text Widgets y que el primero es más grande pero con menos colores que el segundo.

Al crear elementos o widgets en Guizero, recuerda que estos aparecen en el mismo orden en el que se crean.

Un Desafío.

- Intenta modificar el programa para añadir un tercer widget, usando el elemento Text, debajo de los otros dos 

- Para que el color del texto sea rojo en lugar de verde.

- Usa una fuente de letra diferente.

Puede hacer click en el enlace para ver una posible solución.

Un aspecto a mejorar al enfrentarnos a un nuevo programa es acostumbrarnos a leer la documentación del mismo. La documentación de Guizero describe como instalarlo y crear GUIs, además de proporcionar una referencia de cada uno de los widgets que podemos usar. Por ejemplo podemos mejorar la compresión sobre la etiqueta Text consultando su documentación.

En Resumen.

- Todos los programas de Guizero necesitan crear un objeto App al cual poder añadir los demás widgets.

- Los Widgets son elementos individuales que pueden usarse para construir un GUI, como los botones o etiquetas de texto.

- Los Widgets necesitan una app maestra a la que conectarse y aparecerán en la página en el orden en el que se crearon.

- Utilizando app.display() se mostrará el GUI.

Siguiente capítulo. Widgets y Eventos.