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.value
Esta función establece la propiedad fuente (font) del escritorio (TextBox) con el valor seleccionado en el Combo tipo_letra, es decir cambia la fuente elegida.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")
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()
from guizero import App, PushButton
app = App()
on = PushButton(app, text="on", enabled = True)
off = PushButton(app, text="off", enabled = False)
app.display()
from guizero import App, TextBox
app = App()
textbox = TextBox(app)
textbox.disable()
app.display()
# 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 enable_btn_save():
btn_save.enable()
escritorio = TextBox(app, multiline=True, height="fill", width="fill", command=enable_btn_save)
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()
- 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.
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()
- 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.