Curso Guizero 4. Cambiando el tamaño de los Widgets y su Alineación.
Un elemento importante a considerar a la hora de planificar una GUI es el tamaño de los elementos que la componen. En este capitulo, vamos a ver diferentes métodos para cambiar tanto la altura como el ancho de los widgets.
LOS GESTORES DE VENTANAS.
Antes de ponernos a cambiar el tamaño y diseño de los widgets de nuestra aplicación, es importante que tengamos en cuenta el papel que desempeña el administrador de ventanas, que es una parte del sistema operativo con el que estemos trabajando.
El administrador de ventanas es el que finalmente establece como se van a ver nuestros widgets, donde se colocan en la ventana y que propiedades se pueden cambiar.
Por ejemplo, el mismo código ejecutado en diferentes sistemas operativos da lugar a resultados diferentes:
De izquierda a derecha: macOS, windows10 y Rapsbian.
Aunque las diferencias entre ambos son pequeñas, no debes pensar que tu código dará lugar a los mismos resultados en diferentes sistemas operativos.
Parámetros de tamaño.
Los parámetros height (alto) y width (ancho) nos permiten cambiar fácilmente las dimensiones de los widgets.
Para especificar el alto y ancho de un widget podemos usar estos parámetros al crear el widget. Si no lo hacemos este se creará con un tamaño predeterminado. Pero también podemos especificarlos después de haberlos creado para cambiar su tamaño.
Si ejecutas el siguiente código puedes ver un ejemplo de un widget PushButton configurado con el tamaño predeterminado y otro con 10 caracteres de alto y 20 de ancho:
from guizero import App, PushButton
app = App()
button = PushButton(app, text="Tamaño por Defecto")
button_sized = PushButton(app, text="Nuevo tamaño", width=20, height=10)
app.display()
Filling
Una forma alternativa para especificar el alto y el ancho de un widget es configurar sus parámetros height and width con "fill" (rellenar en castellano). Esto le indica al widget que utilice todo el espacio disponible.
Un ejemplo de uso del valor "fill" con los parámetros height and width puede ser el siguiente:
from guizero import App, PushButton
app = App()
button = PushButton(app, height=10, width=20)
button_sized = PushButton(app, text="Usando todo el espacio", width="fill", height="fill")
app.display()(No olvides poner las comillas alrededor de fill.)
HACIENDO QUE TODO SE ALINEE.
Cuando los widgets se colocan en un contenedor, como en una APP o un Box, en Guizero se pueden colocar de dos formas: automática o usando cuadrículas. De forma automática se utiliza el gestor de geometría PACK y si usamos cuadrículas el gestor de geometría GRID. Aunque por defecto no se contempla también podemos utilizar de forma mixta el gestor de geometría PLACE aunque no lo veremos en este capítulo lo puedes consultar en el correspondiente enlace. Esta elección de diseño es un parámetro inicial para cada contenedor y, por lo tanto, debe especificarse cuando se cree el mismo.
Empezaremos explicando como se colocan los widgets por defecto y en un capítulo posterior veremos como usar cuadrículas (GRID).
Diseño Automático.
Si no especificamos el otro gestor de geometría, por defecto los widgets se colocan de forma automática, en el orden en que se crean, comenzando en la parte superior del contenedor y colocándose en el centro del mismo. (Usan el gestor de geometría Pack)
Los widgets también se pueden alinear a la izquierda, a la derecha o en la parte inferior del contenedor usando el parámetro align. Intenta imaginar como se verá la siguiente aplicación antes de ejecutar el código:
from guizero import App, Text
# El diseño automatico está ya predeterminado.
app = App(title="align")
# Crea una serie de widgets cada uno con una alineación diferente.
top_text = Text(app, text="En la parte de arriba", align="top")
bottom_text = Text(app, text="En la parte de abajo", align="bottom")
left_text = Text(app, text="A la izquierda. ", align="left")
left_text_1 = Text(app, text="A la izquierda de nuevo", align="left")
right_text = Text(app, text="A la derecha", align="right")
app.display()Cuando se colocan varios widgets en el mismo contenedor y con la misma alineación, aparecen por orden, por lo que left_text aparece primero que left_text_1 en este ejemplo.
Alineado de Widgtes dentro de un Box.
El alinear widgets dentro de una caja o Box nos va a permitir mejorar mucho el diseño. Un buen ejemplo es la forma de colocar algo en una esquina de la aplicación, en vez de en la parte superior, inferior, derecha o izquierda como hemos hecho hasta ahora.
Mira el código siguiente e intenta adivinar ¿Dónde aparecerá el widget PushButton?
from guizero import App, Box, PushButton
app = App()
box = Box(app, width="fill")
button = PushButton(box, align="left")
app.display()Se puede usar una caja o Box para mantener los diferentes elementos alineados entre si. Vamos a profundizar un poco más en el concepto intentando usar lo que hemos aprendido para recrear la bandera de un país de Oceanía llamado Tonga. Utilizamos cajas para crear y colocar la cruz y rellenar el resto de la bandera.
Prueba a eliminar los elementos Box de este script (deberás cambiar los parámetros maestros de los otros widgets) y mira lo que se crea cuando se ejecuta, en comparación con la versión con las cajas.
from guizero import App, Text, Box, PushButton, TextBox
app = App(width=300, height=200)
app.bg= "white"
# Divide la bandera en dos secciones, una superior que contendrá la cruz y un bloque rojo inferior.
top = Box(app, align="top", width="fill")
bottom = Box(app, width="fill", height="fill")
# Crea un cuadro para contener la cruz, alineado a la izquierda en la sección superior.
cross = Box(top, align="left")
# Se necesitan dos cajas para construir la cruz.
flag = Box(cross)
# Establece el fondo a blanco.
flag.bg = "white"
# Haz las partes superiores de la cruz con cuatro bloques rojos del mismo tamaño.
first = Text(flag, bg="red", align="top", height=1, width=3)
second = Text(flag, bg="red", align="left", height=1, width=3)
third = Text(flag, bg="red", align="left", height=1, width=3)
fourth = Text(flag, bg="red", align="left", height=1, width=3)
# Crea el segundo cuadro directamente debajo del primero, de modo que la pieza final
# de la cruz se añadirá a la parte inferior de la misma. Intenta ejecutar el
# programa sin esta caja para ver dónde se colocaría automáticamente.
flag_cont = Box(cross)
# Establece el fondo a blanco
flag_cont.bg = "white"
# Completa la bandera
fifth = Text(flag_cont, height=1, width=3, align="bottom", bg="red")
# Rellena el resto de la bandera de color rojo.
fill = Text(top, align="left", height="fill", width="fill", bg="red")
fill_cont = Text(bottom, height="fill", width="fill", bg="red")
app.display()Puedes encontrar el código superior en el siguiente enlace.
Construyendo un editor de texto.
Con lo que hemos visto hasta ahora vamos a intentar un desafío. Crear un procesador de textos sencillo. Necesitarás seguramente consultar la documentación de Guizero.
Empecemos.
Primero debemos comenzar planificando que es lo que la aplicación debe hacer y que widgets se adaptan mejor a la tarea. Echa un vistazo a un editor de textos que tengas en tu ordenador para inspirarte (El block de notas puede ser un buen ejemplo, haz clic en el menú archivo para ver algunas opciones que te brinda el editor de texto)
Nuestro editor de texto va a ser muy básico pero tendrá que tener los siguientes elementos:
- Un cuadro de texto para escribir.
- Un cuadro de texto para especificar el nombre del archivo.
- Un PushButton para guardar el archivo.
- Un PushButton para leer los archivos guardados.
Tomate un momento para diseñar el editor de texto incorporando los cuatro elementos. ¿Pondrás el botón Guardar en la parte superior o inferior del GUI? ¿Lo colocarás junto al botón de abrir? ¿Qué tamaño debe tener el cuadro donde se escribirá el texto?
Iremos añadiendo cada uno de los componentes. Intenta modificar el código sobre la marcha para que los widgets se adapten a tu diseño. Recuerda que Guizero coloca los widgets en el orden en el que se crean comenzando desde la parte superior. Eso significa que a lo mejor debes reordenar el código para adaptarlo a tu diseño.
Comienza dibujando en un papel como quieres que sea tu aplicación y luego intenta crear el diseño de la misma. No te preocupes por el código ya que lo desarrollaremos a la vez que iremos explicándolo.
La forma más fácil de manejar los controles y mantenerlos juntos es utilizar una caja (Box). Yo simplemente la llamaré caja porque vamos a meter ahí los controles de la aplicación pero realmente puedes llamarlo como quieras mientras te quede lo que representa.
from guizero import App, TextBox, PushButton, Box
app = App(title="Procesador de Textos")
# Crea una caja para meter los controles.
# Queremos que ocupe todo el ancho de la aplicación.
caja = Box(app, align="top", width="fill")
# crea un TextBox para el nombre del archivo
nombreArchivo = TextBox(caja, text="archivo.txt", width=38, align="left")
# Crea un botón Grabar, que se usará con la función para grabar posteriormente.
btn_save = PushButton(caja, text="Grabar", align="right")
# Crea un botón Leer, que se usará con la función leer posteriormente.
btn_read = PushButton(caja, text="Leer", align="right")
# Crea un TextBox, el cual no está en la caja y ocupa el resto de la GUI
escritorio = TextBox(app, multiline=True, height="fill", width="fill")
app.display()
# función para leer archivos:
def push_leer():
with open(nombreArchivo.value, "r") as f:
escritorio.value = f.read()
# función para escribir archivos:
def push_grabar():
with open(nombreArchivo.value, "w") as f:
f.write(escritorio.value)Ambas funciones usan la función "Open" de Python. Si no estás familiarizado con ella puedes encontrar más información aquí.
Antes de seguir leyendo, intenta averiguar cuales son los parámetros nombreArchivo.value y escritorio.value e imagina que hará la función cuando se la llame.
La función push_leer() abre un archivo donde el nombre del mismo coincide con la propiedad del valor del TextBox nombreArchivo. Luego establece que la propiedad del cuadro de texto "escritorio" sea el contenido del archivo, es decir carga el contenido de texto del archivo en el cuadro de texto del escritorio.
La función push_grabar() realiza lo contrario. ¿Puedes deducir cuales son los valores de nombreArchivo.value y escritorio.value en este caso?
Finalmente necesitamos programar a los botones de Grabar y Leer para que ejecuten las funciones respectivas cuando se activen. Esto se hace añadiendo el parámetro "command" a cada uno de los widgets.
btn_save = PushButton(caja, text="Grabar", align="right", command=push_grabar)¿Puedes escribir el código equivalente para el widget btn_read?
Cuando el procesador esté más avanzado les daremos a los usuarios más opciones de estilo para el texto. Haremos esto en el próximo capítulo así que no olvides guardar el archivo.
Siguiente Capítulo.- 5. Controlando la GUI.
