Anteriormente. 4.- Cambiando el Tamaño de los Widgets y su Orientación.
Vamos a explicar como funciona el código del capítulo anterior en el que diseñamos un procesador de texto sencillo. En muchos editores de texto los usuarios tienen la posibilidad de personalizar el texto, cambiar el tamaño, color, tipo de letra etc. Si intentaste diseñar la aplicación propuesta en el capitulo anterior, seguro que tuviste buenas ideas sobre que controles te gustaría añadir y donde encajarían estos en los widgets respectivos.
Vamos a añadir un ComboBox a nuestro editor de texto que permitirá a los usuarios elegir entre diferentes tipos de letra y también añadiremos un control deslizante para modificar el tamaño del texto.
Cambiando la fuente del Texto.
Para añadir la posibilidad de cambiar la fuente del texto, necesitamos utilizar un widget ComboBox que permita a los usuarios el elegir entre una lista de fuentes. Para colocarlo, lo situaremos en una caja que estará en la parte inferior del texto. Lo llamaré barra_control ya que será una barra situada en la parte inferior, donde estarán los controles de tipo de letra, tamaño y otros que se aplicarán al texto.
### Remplaza la línea de importación original por esta:
from guizero import App, TextBox, PushButton, Box, Combo, Slider
barra_control = Box(app, align="bottom", width="fill", border=True)
tipo_letra = Combo(barra_control, options=["courier", "times new roman", "verdana"], align="left", command=cambiar_fuente)def cambiar_fuente():
escritorio.font = tipo_letra.valueCambiando el tamaño del texto.
Para que los usuarios puedan cambiar el tamaño del texto, he agregado una nueva función representada a través de un control deslizante.
Al crear el control deslizante, tendremos que establecer unos parámetros iniciales. Debe estar alojado en la caja barra_control, y alineado de forma que aparezca en la parte inferior y al lado del Combo para cambiar el tipo de letra. También tenemos que indicarle que al modificarse la barra deslizante se llame a la función para cambiar el tamaño de la fuente. La llamaremos cambiar_tamano_texto. Intenta averiguar como funciona.
tamano = Slider(barra_control, align="left", command=cambiar_tamano_texto, start=10, end=18)def cambiar_tamano_texto():
escritorio.text_size = tamano.value
# Hay que cambiar el tamaño del texto porque si el texto se hace más grande esto podría afectar
# al tamaño del cuadro de texto , ya que GUIZERO necesita saber como mantener el diseño previsto.
escritorio.resize(1, 1)
escritorio.resize("fill", "fill")Esta función establece la propiedad del cuadro de texto del escritorio en función del valor establecido en el control deslizante. También cambia el tamaño del escritorio para que pueda mostrar el texto, incluso si el texto es muy grande, sin cambiar el diseño de la aplicación.
A continuación vamos a ver como queda todo el código junto. El tuyo puede ser un poco diferente en función de como sea tu diseño.
from guizero import App, TextBox, PushButton, Box, Combo, Slider # 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) def cambiar_fuente(): escritorio.font = tipo_letra.value def cambiar_tamano_texto(): escritorio.text_size = tamano.value escritorio.resize(1, 1) escritorio.resize("fill", "fill") # Hay que cambiar el tamaño del texto porque si el texto se hace más grande esto podría afectar # al tamaño del cuadro de texto , ya que GUIZERO necesita saber como mantener el diseño previsto. 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") # create a TextBox for the file name nombreArchivo = TextBox(caja, text="archivo.txt", width=38, align="left") # create a save button which uses the save_file function btn_save = PushButton(caja, text="Grabar", align="right", command=push_grabar) # create an open button which uses the open_file function btn_read = PushButton(caja, text="Leer", align="right", command=push_leer) # create a TextBox which is not in the box and fills the rest of the GUI escritorio = TextBox(app, multiline=True, height="fill", width="fill") barra_control = Box(app, align="bottom", width="fill", border=True) tipo_letra = Combo(barra_control, options=["courier", "times new roman", "verdana"], align="left", command=cambiar_fuente) tamano = Slider(barra_control, align="left", command=cambiar_tamano_texto, start=10, end=18) app.display()
Habilitar, Deshabilitar y Ocultar Widgets.
Cuando creamos nuevas funciones, no necesariamente queremos que estén disponibles todo el tiempo. Vamos a ver como habilitarlas o deshabilitarlas según nuestras necesidades.
Muchos editores de texto permiten a los usuarios realizar un seguimiento de si se ha guardado un archivo desactivando el botón Guardar, cuando el archivo se ha guardado y volviéndolo a activar cuando se realizan nuevas ediciones. Cuando el botón Guardar está deshabilitado, puede aparecer más oscuro o como que está presionado para indicar claramente que no se puede usar.
Vamos a implantar esto mismo en nuestro procesador de texto, de manera que si hemos guardado las modificaciones no podamos pulsar el botón guardar hasta que no haya nuevos cambios.
Habilitando un Widget.
Por cada widget que coloquemos en un Gui, podemos elegir si habilitarlo o no. Si está habilitado podrá ejecutar su función. Si está deshabilitado, seguirá siendo visible y aparecerá en la aplicación, pero no será interactivo. Los widgets deshabilitados tienen una apariencia diferente para indicar claramente su estado.
Podemos configurar un widget para que este habilitado o deshabilitado cuando se crea configurando sus parámetros iniciales. De forma predeterminada están configurados para estar habilitados por defecto. El siguiente código muestra la diferencia entre un Pushbutton habilitado o deshabilitado.
from guizero import App, PushButton
app = App()
on = PushButton(app, text="on", enabled = True)
off = PushButton(app, text="off", enabled = False)
app.display() 
También puedes llamar a .enable() y .disable() como métodos en un widget. Esto cambiará el estado del widget a activo o inactivo. Por ejemplo puedes deshabilitar un cuadro de texto como este:
from guizero import App, TextBox
app = App()
textbox = TextBox(app)
textbox.disable()
app.display()Puedes probar a editar el código y establecer textbox.enable() para ver la diferencia.
Añadiendo Funciones al botón Guardar.
Vamos a aplicar lo que hemos visto anteriormente para crear un botón Guardar que se desactive cuando se ha usado y se vuelva a activar al editar el texto. Lo primero que tenemos que hacer es decirle al PuhButton btn_save que se deshabilite cuando se presiona. Vamos a añadir el código a la función push_grabar() que es la que guarda el archivo de texto cuando se presiona el botón. El código añadido será el que desactive el botón. Antes de mirar el código, intenta averiguar si sabes cual debería ser esa línea.
# función para escribir archivos:
def push_grabar():
with open(nombreArchivo.value, "w") as f:
f.write(escritorio.value)
# Desactiva el botón
btn_save.disable()A continuación lo que queremos es que se vuelva a activar cuando se edite el texto. Para hacer esto necesitamos crear una función que lo vuelva a habilitar. Esta función se puede agrupar a las demás al principio del programa. Lo llamaremos enable_btn_save.
def enable_btn_save():
btn_save.enable()Queremos que se llame a esta función cuando se edite el texto. El parámetro command en un cuadro de texto llamará a la función cuando se edite el texto, por lo que tendremos que añadir este parámetro en el widget escritorio para conseguir lo que queremos.
escritorio = TextBox(app, multiline=True, height="fill", width="fill", command=enable_btn_save)Si ahora ejecutamos el código de la aplicación del procesador de textos, deberíamos poder deshabilitar el botón de guardar haciendo clic en él y volver a habilitarlo al editar el texto.
También puedes intentar cambiar el código para que el botón de guardar este deshabilitado al iniciar el programa.
Hacer que los widgets sean invisibles.
Una alternativa a deshabilitar los widgets es ocultarlos. Al igual que vimos anteriormente, el ocultar un widget se puede hacer desde sus parámetros iniciales o llamándolos desde un método.
El parámetro inicial por defecto es que el widget este visible. (True por defecto, aunque también se puede configurar como False.) y los métodos a aplicar pueden ser .hide() para hacer el widget invisible y oculto o .show() para hacer visible el widget.
A veces, puede ser preferible que un widget desaparezca por completo cuando no se puede usar. Sin embargo, cuando un widget se configura como invisible, desaparece por completo y también se elimina del administrador de diseño, por lo que hacer que un widget sea invisible puede afectar la apariencia de su GUI.
Añadiendo una barra de menús.
En lugar de mostrar todas sus funciones directamente, muchos editores de texto tienen una barra de menú que oculta las opciones al usuario hasta que las necesita. Esta es una característica especialmente útil si tienen muchas opciones. En este paso, veremos cómo agregar una barra de menú.
MenuBar
Las barras de menú son widgets en Guizero que te permiten instalar un menú de elementos, cada uno de los cuales puede revelar un submenú desplegable con más opciones.
Una barra de menús debe estar contenida en la aplicación principal. No se puede colocar dentro de un cuadro o cualquier otro tipo de ventana. Para crear uno debemos establecer una lista de nivel superior que describa las opciones que estarán visibles en la aplicación y el contenido de cada submenú, así como las funciones que lo acompañan.
Vamos a verlo con un ejemplo.
from guizero import App, MenuBar
# Estas son las funciones que se llaman seleccionando opciones de cada submenú
def file_function():
print("Opciones de Archivo")
def edit_function():
print("Opciones de Edición")
app = App()
menubar = MenuBar(app,
# Este es el menú de opciones
toplevel=["Archivo", "Editar"],
# Las opciones están guardadas en listas anidadas, una lista por cada opción del menú.
# Cada opción de la lista contiene un nombre y una función.
options=[
[ ["Archivo opcion 1", file_function], ["Archivo opcion 2", file_function] ],
[ ["Editar opcion 1", edit_function], ["Editar opcion 2", edit_function] ]
])
app.display()
Como podemos ver en este código, las opciones en la barra de menús se registran en una serie de listas.
Hay tres capas de listas:
- La lista más externa es una lista que contiene todos los submenús. La longitud de esta lista debe ser la misma que la longitud de la lista del nivel superior (toplevel)
- En la siguiente capa hay una lista para cada submenú. La longitud de cada una de estas listas debe ser igual a la longitud del submenú correspondiente.
- La capa más interna es una lista para cada opción de submenú. Cada una de estas listas contiene dos elementos: el nombre de la opción y la función que se llamará cuando se seleccione.
Antes de diseñar una barra de menú para nuestro editor de texto, haz una pausa y piensa qué opciones se deben incluir. Puedes usar el script anterior para que se incluya un nombre para cada opción.
Agregando la Bara de menú al editor de texto.
Ahora ya lo tenemos todo listo para para agregar una barra de menús al nuestra aplicación de Editor de Texto.
Como debe ir en la parte superior de nuestra aplicación y no se puede alojar en una caja, debe ser el primer widget que añadamos. No olvides importar el módulo Menubar.
La barra de menú del siguiente código tiene opciones para abrir un archivo, guardar un archivo y salir del editor.
from guizero import App, TextBox, PushButton, Box, Combo, Slider, MenuBar
# 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)
# Desactiva el botón
btn_save.disable()
def cambiar_fuente():
escritorio.font = tipo_letra.value
def cambiar_tamano_texto():
escritorio.text_size = tamano.value
escritorio.resize(1, 1)
escritorio.resize("fill", "fill")
# Hay que cambiar el tamaño del texto porque si el texto se hace más grande esto podría afectar
# al tamaño del cuadro de texto , ya que GUIZERO necesita saber como mantener el diseño previsto.
def enable_btn_save():
btn_save.enable()
# Una nueva función para cerrar la aplicación.
def exit_app():
app.destroy()
app = App(title="Procesador de Textos")
menubar = MenuBar(app,
# Este es el menú de opciones
toplevel=["Archivo"],
# Las opciones están guardadas en listas anidadas, una lista por cada opción del menú.
# Cada opción de la lista contiene un nombre y una función.
options=[
[ ["Abrir", push_leer], ["Guardar", push_grabar], ["Salir", exit_app]],
])
# Crea una caja para meter los controles.
# Queremos que ocupe todo el ancho de la aplicación.
caja = Box(app, align="top", width="fill")
# create a TextBox for the file name
nombreArchivo = TextBox(caja, text="archivo.txt", width=38, align="left")
# create a save button which uses the save_file function
btn_save = PushButton(caja, text="Grabar", align="right", command=push_grabar)
# create an open button which uses the open_file function
btn_read = PushButton(caja, text="Leer", align="right", command=push_leer)
# create a TextBox which is not in the box and fills the rest of the GUI
escritorio = TextBox(app, multiline=True, height="fill", width="fill", command=enable_btn_save)
barra_control = Box(app, align="bottom", width="fill", border=True)
tipo_letra = Combo(barra_control, options=["courier", "times new roman", "verdana"], align="left", command=cambiar_fuente)
tamano = Slider(barra_control, align="left",
command=cambiar_tamano_texto, start=10, end=18)
app.display()DESAFIO.
- En este paso, aprendimos a crear una barra de menús y añadimos un menú con varios submenús. ¿Puedes intentar agregar un segundo submenú a tu barra de menú? (Por ejemplo que tenga la opción de Ayuda y dentro un submenú con el típico "acerca de")
- ¿ Como se pondría una ventana de advertencia para avisar al usuario si intenta salir de la aplicación sin guardar su archivo ?
- ¿Podrías poner un botón para cambiar el editor a "Tema Oscuro" es decir que convierta el fondo a negro y el texto a blanco cuando se pulse.
Si te atascas en el desafío, intenta leer la documentación de Guizero para obtener ayuda.
Si lo que quieres ver el código del "procesador de textos" terminado, lo puedes encontrar en el siguiente enlace.
