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.
Poner algo en 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()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()
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")
mensaje2.text_color = "blue"El beneficio de usar cajas (Boxes)
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()lbl_output.font = "Times New Roman"
Siguiente Capitulo. 4.- Cambiando el tamaño de los Widgets y su alineación.
