Curso Guizero 3. Diseño y apariencia.

Anteriormente. Capítulo 2: Widgets y Eventos.

Mejora el diseño de tu GUI colocando widget dentro de contenedores y cambiando su tamaño y alineación.

En este capitulo veremos un tipo especifico de widget llamado Box y aprenderemos como se puede usar para controlar el diseño de nuestra GUI.

¿Qué es un "Box"?

Un "Box" es un widget que actúa como contenedor para otros widgets. Por defecto es invisible y se puede utilizar para colocar más fácilmente otros widgets y modificar su diseño.

Se puede crear un "Box" de la misma manera que los otros widgets. El siguiente código crea un Box llamada "caja" que es parte de la App llamada "raiz":

from guizero import App, Box
raiz = App()
caja = Box(raiz)
raiz.display()

Cuando creas un "Box" puedes establecer varios parámetros iniciales.

• master: describe donde esta contenida la caja o "Box". En el ejemplo anterior la caja esta contenida dentro de raíz.
• align: se usa para alinear la caja dentro de widget en el que se sitúa. Veremos su uso más adelante aunque te adelanto que se usa el gestor de geometría pack por defecto en Guizero y funciona de forma automática como veremos más adelante.
• grid: en el gestor de geometría Grid se usa para indicar donde aparecerá la caja dentro de una cuadricula o grid.
• layout: este parámetro describe que gestor de geometría se va a utilizar 'grid' o 'auto' que corresponde con lo que en tkinter es el gestor de geometría pack.
• visible: determina si el "Box" será visible, lo cual ocurre por defecto.
• enabled: Este parámetro determina si la caja estará habilitada  Si no se establece entonces por defecto toma el mismo valor que tenga el parámetro del widget en el que se encuentra. En el ejemplo anterior el valor del parámetro para el elemento "raiz".
• width y height: o ancho y alto. Determinan el tamaño de la caja. Se puede especificar el valor "fill" para que utilice todo el espacio disponible o especificar manualmente el ancho y/o el alto.
• border: especifica el grosor del borde de la caja. El valor predeterminado es cero, es decir sin borde, pero se puede crear uno estableciendo su valor a "True" o un número mayor que 1.

Un Box o caja no es visible hasta que contiene otro widget. En el siguiente ejemplo vamos a ver como añadir un widget a un Box y que sucede cuando cambiamos algunos de estos parámetros.

Poner algo en la Caja.

Si queremos poner algo dentro de un Box, simplemente tenemos que poner el parámetro master de ese widget con el nombre que hayamos utilizado para crear el Box en cuestión. Siempre es el primer parámetro dentro de los paréntesis. En el siguiente ejemplo vamos a colocar un PushButton dentro de la caja:

from guizero import App, Box, PushButton
raiz = App()
caja = Box(raiz)
# insertamos un boton en la caja (Box)
boton = PushButton(caja)
raiz.display()

Se pueden alojar múltiples widgets en la misma caja. Intenta añadir otro PushButton o cualquier otro widget para ver los resultados.

Ahora crearemos un nuevo Box y cambiaremos algunos de los parámetros iniciales. Antes de ejecutar el siguiente código, intenta imaginar cómo se verá de distinta esta en relación con el código que usaste antes.

from guizero import App, Box, PushButton
raiz = App()
caja = Box(raiz, align="left", width="fill", border=2)
boton = PushButton(caja)
boton1 = PushButton(caja, text="Otro Botón")
raiz.display()

Como veremos, los widgets de Box son extremadamente útiles. Son útiles cuando se intentan diseños de GUI más sofisticados y se pueden usar para colocar varios widgets al mismo tiempo; Veremos esto en un paso posterior. También son útiles cuando se crean muchos widgets que deben tener el mismo aspecto, como veremos a continuación.

Desafio.

- Crea una aplicación que contenga tres cajas de diferentes tamaños.

- Cambia algunos parámetros iniciales más de tus cajas.

- Crea tres widgets más y coloca cada uno dentro de un cuadro diferente. ¿Puedes adivinar cómo se verá la aplicación antes de ejecutar tu script?

Puedes encontrar una posible solución al desafío en el siguiente enlace.

Mejorando la Apariencia 

Para comenzar a mejorar la apariencia de nuestras GUIs, veremos como cambiar propiedades de las mismas, como el fondo y el color de la fuente, la fuente en si misma y el tamaño del texto.

Vamos a utilizar este programa e intentaremos mejorar su apariencia:

from guizero import App, Text, ButtonGroup, Combo, PushButton, TextBox, Box
app = App(title="Generador nombres Heroes", width=300)

mensaje1 = Text(app, text="Escoje un adjetivo")
bgp_adjetivo = ButtonGroup(app, options=["Asombroso", "Hermoso", "Encantador", "Delicioso"], selected="Asombroso")

mensaje2 = Text(app, text="Escoje un color")
txt_color = TextBox(app)

mensaje3 = Text(app, text="Elige un animal")
cmb_animal = Combo(app, options=["Oso Hormiguero", "Tejón", "Gato", "Delfín", "Velociraptor"], selected="Oso Hormiguero", width=20)

btn_make_name = PushButton(app, text='Genera un nuevo superheroe')
lbl_output = Text(app, text="El nombre de tu heroe aparecerá aquí")

app.display()

Aunque aun no está completa vamos a intentar mejorar su apariencia.

Cambiando la apariencia de tu GUI.

Hay dos enfoques diferentes para cambiar la apariencia de una GUI. 

- Cambiar un parámetro de inicio.

- Cambiar una propiedad.

Cambio de Parámetros de inicio.

Cada vez que creamos un widget en Guizero, tenemos la posibilidad de establecer una serie de parámetros. Cada widget tiene diferentes parámetros de inicio. En la mayoría, se puede cambiar el color de fondo, el tamaño, el estilo del diseño, la posición y si el widget está activo o no. Para algunos, existen otros parámetros más específicos. Por ejemplo se puede cambiar el número de líneas que se mostrarán en un cuadro de texto y establecer el contenido del texto inicial.

Para averiguar que parámetros iniciales tiene un widget, puedes consultar la documentación. Si para programar estas utilizando un IDE, en muchos de ellos también, pero no en todos, puedes ver los parámetros de un widget escribiendo, por ejemplo app=App( y esperando que aparezca un menú de parámetros iniciales.

Voy a cambiar el color de fondo de la aplicación a rojo modificando la línea tres del código

app = App(title="Generador Nombres Heroes", width=300, bg="red")

Cambiar Propiedades.

Un método alternativo para modificar la apariencia de tus widgets es establecer propiedades después de que se haya creado el widget.

Por ejemplo, si deseas cambiar el color del texto en el mensaje 2, puede escribir

mensaje2.text_color = "blue"

Cambia el color del texto del widget mensaje2 a azul. Esta línea debe agregarse antes de la línea final del script, es decir antes de la línea app.display(), pero siempre después de que el widget haya sido creado.

Para conocer todas las propiedades que se pueden cambiar en cada tipo de widget puedes consultar la documentación.

El beneficio de usar cajas (Boxes)

Si quieres cambiar el color de fondo de cada widget en una aplicación, no tienes que repetir este código en cada uno. Si metes los widgets en un cuadro, puedes modificar las propiedades del mismo y esto se heredará a todos los widgets alojados en él. 

Pará ver esto vamos a colocar los últimos tres widgets del programa anterior dentro de un "Box" o Caja para lo cual añadiremos y modificaremos el código de la siguiente forma:

from guizero import App, Text, ButtonGroup, Combo, PushButton, TextBox, Box
app = App(title="Generador nombres Heroes", width=300, bg="red")

mensaje1 = Text(app, text="Escoje un adjetivo")
bgp_adjetivo = ButtonGroup(app, options=["Asombroso", "Hermoso", "Encantador", "Delicioso"], selected="Asombroso")

mensaje2 = Text(app, text="Escoje un color")
txt_color = TextBox(app)

mensaje3 = Text(app, text="Elige un animal")
cmb_animal = Combo(app, options=["Oso Hormiguero", "Tejón", "Gato", "Delfín", "Velociraptor"], selected="Oso Hormiguero", width=20)

#Creamos un box
caja = Box(app)

# modificamos cada widget de forma que estén alojados en la caja.
btn_make_name = PushButton(caja, text='Genera un nuevo superheroe')
lbl_output = Text(caja, text="El nombre de tu heroe aparecerá aquí")

# Ahora cambiamos las propiedades de la caja.
caja.bg = "white"
caja.text_size = 12

app.display()

Aunque hayamos insertado los dos últimos widgets en un Box, aún puedes cambiar sus propiedades individuales. Poe ejemplo es posible que quieras cambiar la fuente de texto de lbl_output.

lbl_output.font = "Times New Roman"

Nota: Si quieres ver la forma de especificar diferentes colores para los widgets puedes enlazar a la siguiente página del manual. Te será muy útil. 

                    Siguiente Capitulo. 4.- Cambiando el tamaño de los Widgets y su alineación.