Anteriormente. Capítulo 1: Creando una interfaz gráfica de usuario.
Curso de Guizero 2.- Widgets y Eventos.
Widgets
Ahora que hemos creado nuestra primera y sencilla aplicación GUI usando el widget Text, vamos a ver unos cuantos más que podamos usar.
¿Qué es un Widget?
La palabra "widget" hace referencia a cualquiera de los diferentes elementos que podemos utilizar para construir una interfaz para nuestra aplicación. Aunque no conozcamos aún sus nombres, reconocerás muchos de ellos ya que constantemente los estas viendo en los diferentes programas informáticos o páginas web que utilices.
En el ejemplo superior se muestran siete tipos de widgets que podemos usar para construir el GUI. Los vamos a describir abajo, junto a una breve descripción de para que los podemos usar.
| nombre en guizero | nombre en tkinter | descripción |
| PushButton | Button, command button | Un botón que se puede pulsar y que sirve para múltiples propósitos. Junto con los cuadros y las etiquetas de texto son de los elementos más utilizados. |
| TextBox | Entry | Es una caja en la que se puede ingresar texto. Lo habrás utilizado en cualquier formulario de una página web para ingresar texto, por ejemplo. |
| Text | Labels | Las etiquetas de texto se utilizan para mostrar información al usuario. A diferencia de las cajas de texto, el texto no se puede editar. |
| ButtonGroup | Radio button | Se utilizan para escoger una opción entre un grupo de ellas. Por ejemplo en una página web se puede utilizar para escoger el pago de un bien con "tarjeta", "efectivo" o "transferencia para el pago". Es posible tener una opción preseleccionada por defecto. |
| CheckBox | Checkbox | Una sola casilla que se puede seleccionar y cuyo resultado será True, o False si no está marcada. En el ejemplo superior la opción de escojer entre algunos extras, utilizan el widget checkbox |
| ComboBox | Combobox, drop-down menu | Es como un cuadro de texto pero con un menú desplegable que permite al usuario elegir entre varias opciones. |
| Slider | Es un widget que permite escoger un valor usando un control deslizandose a lo largo de una línea. |
En este punto, ya hemos visto una descripción de los principales widgets que se pueden usar en una aplicación. También existen otros que se pueden utilizar como barras de menús o imágenes cuya documentación puedes consultar para tener una idea de lo que pueden hacer.
Eventos.
Explicación de los eventos y propiedades.
Para dar vida a las aplicaciones basadas en un GUI, tenemos que escribir código para responder a los diferentes eventos que pueden suceder. Cada widget es capaz de "sentir" cosas diferentes que les suceden. Por ejemplo para un "PushButton", esto incluye hacer clic, hacer clic con el botón derecho y pasar el mouse sobre él. Los eventos son pues acciones que se realizan sobre el widget.
Así mismo también vimos un explicación breve de lo que son las propiedades. Las configuramos para el widget TexBox, en el capítulo uno, para controlar su color de fondo, el tamaño del texto o su fuente. Las propiedades también se pueden leer, lo que permite obtener valores del usuario, como el valor elegido en un Slider (control deslizante) o el nombre escrito en un TextBox (cuadro de texto).
Leer un valor de una propiedad de un widget es muy sencillo. Si por ejemplo tenemos un TextBox (cuadro de texto) llamado color_favorito en el que el usuario ha escrito la palabra "rosa" podemos guardar este valor en una variable de la siguiente forma usando una variable:
color = color_favorito.value
Para poder experimentar con los eventos y las propiedades, crea un nuevo programa en Python, guárdalo como "eventguide.py" y escribe el siguiente código:
# Importa los widgets que usaremos y creamos la aplicación de nuestro programa.
from guizero import App, TextBox, PushButton, Text, info
app = App()
# La definición de las funciones para los diferentes eventos van aquí.
def btn_go_clicked():
info("Saludos","Hola, " + txt_name.value + " - Espero que tengas un buen día.")
# Los widgets de tu GUI van aquí.
lbl_name = Text(app, text="Hola. ¿Cómo te llamas?")
txt_name = TextBox(app)
btn_go = PushButton(app, command=btn_go_clicked, text="Hecho")
# Muestra la GUI en la pantalla.
app.display()Lee el código e intenta imaginar lo que hace.
Ahora ejecuta el código, introduce tu nombre y haz clic en el botón que pone "Hecho". ¿Hizo el programa lo que te habías imaginado que haría?
El programa, crea tres widgets:
- Una etiqueta de texto con el mensaje "Hola. ¿Cómo te llamas?"
- Un cuadro de texto donde podemos ingresar el nombre.
- Un botón con la etiqueta "Hecho" en el que se puede hacer clic.
Cuando se hace clic en el botón "Hecho", se crea un evento y hay tres líneas de código que manejan el mismo.
def btn_go_clicked() en la cual se describe que hacer si se pulsa el botón.
info("Saludos", "Hola, " + txt_name.value + " - Espero que tengas un buen día.")
El código para mostrar una ventana de información cuando se ha pulsado el botón:
- El primer parámetro "Saludos", es el título de la ventana.
- El segundo parámetro es el texto que aparecerá dentro de la ventana de información. En este caso un texto de bienvenida que incluye el valor que haya en el cuadro de texto (txt_name.value)
Cuando el widget PushButton se crea, incluimos command=btn_go_clicked para decirle a este botón, que cuando se pulse, la función btn_go_clicked debería ser ejecutada.
Cuando se ejecuta el programa, Python dibuja la GUI y luego espera a que se active un evento. Tan pronto como se hace clic en el botón (PushButton) se ejecuta el código en la función btn_go_clicked().
Nota. Al codificar una GUI es muy fácil confundirse entre variables, funciones y widgets. Para mejorar la legibilidad, el código incluye etiquetas como txt(texto), lbl (etiqueta) y btn (botón) para que los diferentes elementos que utilizamos puedan identificarse fácilmente.
Cuando escribas tu código, puedes llamar a tus variables y widgets como desees pero es mejor que uses una notación como la anteriormente indicada para que el código sea más fácil de depurar y corregir.
Un Desafio.
La mejor forma de aprender a crear GUIs interactivas es crearlas. Prueba a implementar algunos de estos elementos antes de continuar:
- Agrega dos widgets Text y TextBox para pedirle al usuario otra información (por ejemplo, el nombre de un animal). Cuando se haga clic en el PushButton, el cuadro emergente 'Info' debería mostrar esta nueva información (por ejemplo, 'Tu nombre es MARIA y te gustan los CACHORROS').
- Agrega un segundo botón (PushButton). Cuando el usuario haga clic en este botón, debería aparecer un mensaje diferente.
- Crea una nueva aplicación que le pida al usuario que ingrese una contraseña dos veces y luego les diga si la ingresaron de la misma manera las dos veces.
Puedes hacer clic en el enlace para encontrar una posible solución.
Como te habrás dado cuenta, cuando creamos una aplicación basada en eventos, no sucederá nada después de que se cargue el programa hasta que se active un evento.
Algunos ejemplos de eventos pueden ser:
- when_clicked Este ya lo hemos usado antes en el ejemplo.
- when_left_button_pressed Esto se puede usar junto con el próximo evento que explicaremos para hacer que los botones parezcan cambiar momentáneamente a medida que se hace clic en ellos.
- when_left_button_released Normalmente se usa junto al evento anterior.
- when_mouse_enters Se activa cuando el cursor del mouse ingresa a un widget. También se puede usar para proporcionar señales visuales a un usuario mientras navega por un GUI.
- when_mouse_leaves Se activa cuando el mouse abandona el widget.
- when_mouse_dragged Se activa cuando se hace clic en con el mouse y se arrastra el widget.
Podemos configurar una función para que sea llamada por un evento asociado a un widget de la siguiente forma:
nombre_del_widget.when_left_button_pressed = nombre_de_la_funciónNota: a diferencia de cuando llamamos a una función dentro de un programa, en este punto debes asegurarte de poner el nombre de la función si los paréntesis de apertura y cierre al final. () Esto es debido a que estamos usando la función como parámetro y no llamándola directamente.
En el siguiente ejemplo, los eventos when_mouse_enters y when_mouse_leaves se usan para resaltar el cuadro de texto cuando el mouse está sobre él configurando su fondo en azul claro.
# Importa los widgets que usaremos y creamos la aplicación de nuestro programa.
from guizero import App, TextBox, PushButton, Text, info
app = App()
# La definición de las funciones para los diferentes eventos van aquí.
def btn_go_clicked():
info("Saludos","Hola, " + txt_name.value + " - Espero que tengas un buen día.")
def highlight():
txt_name.bg = "light blue"
def lowlight():
txt_name.bg = None
# Los widgets de tu GUI van aquí.
lbl_name = Text(app, text="Hola. ¿Cómo te llamas?")
txt_name = TextBox(app)
# Cuando el cursor del ratón entra en el botón.
txt_name.when_mouse_enters = highlight
# cuando el cursor del ratón sale del botón.
txt_name.when_mouse_leaves = lowlight
btn_go = PushButton(app, command=btn_go_clicked, text="Hecho")
# Muestra la GUI en la pantalla.
app.display()
Una lista con todos los eventos disponibles la puedes encontrar en la página dedicada a Eventos en Guizero.
No hay comentarios:
Publicar un comentario