Eventos de cada componente
Los widgets de Pyzed reaccionan a eventos en dos capas:
- Sus eventos propios: los parámetros
on_*de cada componente, comoon_pressde un botón oon_selectde un árbol. Avisan de lo que significa para el componente (se cerró una pestaña, se abrió una fila) y suelen pasar un valor (el texto, el elemento, el estado nuevo). - Los eventos comunes: 18 eventos que tiene cualquier widget, sea cual sea, y que se conectan con
.on(...): clics, paso del puntero, arrastre, foco, teclas y tamaño. Unpz.Componentademás lanzaon_mountyon_unmount.
Así que un componente puede tener sus eventos propios más los 18 comunes. Entre los 114 componentes de la biblioteca hay 160 eventos propios; los que más tienen aparecen primero en la tabla del final.
ui.list_item("main.py", self.abrir, icon="file").on( # on_press es su evento propio right_click=self.mostrar_menu, # los comunes: cualquier widget mouse_enter=lambda: setattr(self, "encima", "main.py"), drag=lambda e: self.mover(e.dx, e.dy), # recibe el pz.Event)Los eventos comunes
Sección titulada «Los eventos comunes»Los tiene todo widget. Un handler sin argumentos se llama sin nada; uno con un argumento recibe un pz.Event.
| Grupo | Evento | Cuándo |
|---|---|---|
| Ratón | click |
Se hizo clic en el widget (se pulsó y soltó el botón izquierdo). |
| Ratón | double_click |
Dos clics seguidos. |
| Ratón | right_click |
Se pulsó el botón derecho (úsalo para menús contextuales). |
| Ratón | middle_click |
Se pulsó el botón central (la rueda). |
| Ratón | mouse_down |
Se pulsó cualquier botón sobre el widget (event.button). |
| Ratón | mouse_up |
Se soltó cualquier botón sobre el widget (event.button). |
| Ratón | mouse_enter |
El puntero entró en el widget. |
| Ratón | mouse_leave |
El puntero salió del widget. |
| Ratón | mouse_move |
El puntero se movió sobre el widget (event.x, event.y). |
| Ratón | scroll |
La rueda giró sobre el widget (event.dx, event.dy en líneas). |
| Arrastre | drag_start |
Se pulsó el botón izquierdo y el puntero se movió unos píxeles. |
| Arrastre | drag |
El puntero se movió mientras se arrastra (event.dx, event.dy desde el anterior). |
| Arrastre | drag_end |
Se soltó el botón después de arrastrar. |
| Foco | focus |
Se hizo clic en el widget y ahora recibe las teclas. |
| Foco | blur |
Un clic en otro sitio le quitó el foco. |
| Teclado | key_down |
Se pulsó una tecla con el foco (event.key, por ejemplo "ctrl-s"). |
| Teclado | key_up |
Se soltó una tecla con el foco (event.key). |
| Tamaño | resize |
El widget cambió de tamaño, también la primera vez (event.width, event.height). |
Campos de pz.Event
Sección titulada «Campos de pz.Event»| Propiedad | Descripción |
|---|---|
type |
El nombre del evento ("click", o un evento propio de un componente). |
x, y |
Posición del puntero relativa al widget (position da las dos). |
window_x, window_y |
Posición del puntero en la ventana. |
screen_x, screen_y |
En la pantalla (None donde el sistema no lo dice, como Wayland). |
dx, dy |
Cantidad de desplazamiento, o movimiento del arrastre desde el drag anterior. |
width, height |
El tamaño del widget (size da los dos). |
button |
"left", "right", "middle"… |
key |
La combinación de teclas, como "ctrl-s". |
shift, ctrl, alt, logo |
Modificadores pulsados. |
value, source |
En los eventos propios de un componente: el dato y el componente. |
Qué reciben los handlers
Sección titulada «Qué reciben los handlers»Los controles que producen un valor llaman a tu función con él. Las formas más habituales:
| Handler | Descripción | Eventos |
|---|---|---|
() |
Nada: el evento ya es la noticia (una pulsación, un cierre, Enter). | ui.alert(on_close=), pz.mouse_area(on_press=), pz.mouse_area(on_release=), pz.mouse_area(on_right_press=)… |
(event) |
Un pz.Event: su value trae el dato y source el componente. |
ui.AuthPrompt(on_pick=), ui.AuthPrompt(on_cancel=), ui.AuthPrompt(on_open_url=), ui.AuthPrompt(on_copy=)… |
(text) |
El texto nuevo, en cada pulsación de tecla. | ui.shortcuts(on_query=), ui.picker(on_query=), ui.search_input(on_input=), ui.input(on_input=)… |
(x, y) |
La posición del puntero, relativa al widget. | pz.mouse_area(on_move=), pz.canvas(on_press=), pz.canvas(on_release=), pz.canvas(on_right_press=)… |
(value) |
El valor nuevo: un número, un color, una opción… | ui.number_field(on_change=), ui.slider(on_change=), ui.toggle_group(on_select=), ui.radio_group(on_select=)… |
(info) |
Un dict (desplazamiento y tamaños) o un ui.ErrorInfo. |
pz.scrollable(on_scroll=), ui.editor(on_scroll=), ui.error_boundary(on_error=), ui.error_boundary(on_details=)… |
(id) |
El id de la fila o pestaña (en un árbol, su ruta). | ui.tree(on_toggle=), ui.tree(on_select=), ui.tree(on_open=), ui.tree(on_context=) |
(tab_id) |
El id de la pestaña. | ui.tab_bar(on_select=), ui.tab_bar(on_close=), ui.tab_bar(on_drag=), ui.tab_bar(on_context=) |
(row) |
La fila (el dict u objeto que pasaste en rows). |
ui.table(on_row_press=), ui.table(on_row_double_press=), ui.table(on_row_context=) |
(dx, dy) |
Cuánto giró la rueda, en líneas. | pz.mouse_area(on_scroll=), pz.canvas(on_scroll=) |
(checked) |
El estado nuevo, True o False. |
ui.checkbox(on_toggle=), ui.switch(on_toggle=) |
(line) |
La línea del registro (un ui.LogEntry). |
ui.console(on_context=), ui.console(on_open=) |
(name) |
Un nombre: del icono o de la acción del editor. | ui.editor(on_action=), ui.icon_picker_dialog(on_pick=) |
(url) |
La URL del enlace. | ui.markdown(on_link=), ui.reference_browser(on_open_url=) |
(size) |
El tamaño nuevo en píxeles, al terminar de arrastrar. | ui.panel(on_resize=), pz.resizable(on_resize=) |
(item) |
La opción elegida. | ui.segmented(on_select=), ui.select(on_select=) |
Eventos de cada componente
Sección titulada «Eventos de cada componente»Propios cuenta los eventos on_* del componente; Total suma los 18 comunes (y mount / unmount en las clases pz.Component).
| Componente | Propios | Total | Sus eventos |
|---|---|---|---|
| Área de ratón | 10 | 28 | on_press, on_release, on_right_press, on_double_click, on_enter, on_exit, on_move, on_scroll, on_middle_press, on_middle_release |
| Consola | 8 | 26 | on_query, on_toggle_level, on_clear, on_copy, on_context, on_open, on_source, on_write |
| Barra de pestañas | 7 | 25 | on_select, on_close, on_drag, on_drop, on_drag_over, on_context, on_new |
| Editor | 6 | 24 | on_change, on_cursor, on_scroll, on_zoom, on_action, on_hover |
| Barra de cambios | 5 | 25 | on_keep, on_reject, on_keep_file, on_reject_file, on_open |
| Lienzo | 5 | 23 | on_press, on_release, on_right_press, on_move, on_scroll |
| Marco de ventana | 5 | 23 | on_drag, on_minimize, on_maximize, on_close, on_menu |
| Zona para soltar | 5 | 25 | on_drop, on_files, on_reject, on_enter, on_leave |
| Árbol | 4 | 22 | on_toggle, on_select, on_open, on_context |
| Aviso de inicio de sesión | 4 | 24 | on_pick, on_cancel, on_open_url, on_copy |
| Selector de fecha | 4 | 24 | on_change, on_open, on_close, on_dismiss |
| Tabla | 4 | 22 | on_sort, on_row_press, on_row_double_press, on_row_context |
| Cambios sin guardar | 3 | 21 | on_save, on_discard, on_cancel |
| Campo de texto | 3 | 21 | on_input, on_submit, on_clear |
| Diálogo de error | 3 | 21 | on_close, on_go_to, on_logs |
| Fila de lista | 3 | 21 | on_press, on_right_press, on_double_press |
| Llamada a herramienta | 3 | 23 | on_allow, on_allow_always, on_deny |
| Paleta de comandos | 3 | 21 | on_query, on_submit, on_press |
| Pregunta | 3 | 21 | on_input, on_submit, on_cancel |
| Select | 3 | 21 | on_select, on_open, on_close |
| Selector de hora | 3 | 23 | on_change, on_open, on_close |
| Selector de iconos | 3 | 23 | on_change, on_pick, on_close |
| Selector de rango de fechas | 3 | 23 | on_change, on_open, on_close |
| Botón dividido | 2 | 20 | on_press, on_menu |
| Buscador | 2 | 20 | on_query, on_submit |
| Calendario | 2 | 22 | on_change, on_month |
| Campo numérico | 2 | 20 | on_change, on_submit |
| Chip | 2 | 20 | on_press, on_remove |
| Confirmación | 2 | 20 | on_confirm, on_cancel |
| Deslizador | 2 | 20 | on_change, on_release |
| Fila de servicio | 2 | 22 | on_toggle, on_primary |
| Historial de hilos | 2 | 22 | on_open, on_delete |
| Límite de errores | 2 | 20 | on_error, on_details |
| Migas de pan | 2 | 20 | on_press, on_more |
| Notificación | 2 | 20 | on_dismiss, on_press |
| Selector de color | 2 | 22 | on_change, on_press |
| Acordeón | 1 | 19 | on_toggle |
| Alerta | 1 | 19 | on_close |
| Atajos | 1 | 19 | on_query |
| Aviso | 1 | 19 | on_dismiss |
| Barra de estado | 1 | 19 | on_press |
| Barra de título | 1 | 19 | on_press |
| Botón | 1 | 19 | on_press |
| Botón de icono | 1 | 19 | on_press |
| Campo de búsqueda | 1 | 19 | on_input |
| Capa | 1 | 19 | on_dismiss |
| Capa de diálogo | 1 | 19 | on_dismiss |
| Casilla | 1 | 19 | on_toggle |
| Catálogo | 1 | 21 | on_install |
| Cifra | 1 | 19 | on_press |
| Desplazable | 1 | 19 | on_scroll |
| Desplegable | 1 | 19 | on_toggle |
| División | 1 | 19 | on_resize |
| Elección | 1 | 19 | on_cancel |
| Espacio de trabajo | 1 | 19 | on_resize |
| Grupo de alternancia | 1 | 19 | on_select |
| Grupo de radios | 1 | 19 | on_select |
| Insignia | 1 | 19 | on_press |
| Interruptor | 1 | 19 | on_toggle |
| Lista virtual | 1 | 19 | on_scroll |
| Markdown | 1 | 19 | on_link |
| Menú | 1 | 19 | on_press |
| Modal | 1 | 19 | on_close |
| Panel | 1 | 19 | on_resize |
| Popover | 1 | 19 | on_dismiss |
| Redimensionable | 1 | 19 | on_resize |
| Segmentado | 1 | 19 | on_select |
| Selector de archivos | 1 | 19 | on_change |
| Tarjeta | 1 | 19 | on_press |
| Visor de referencia | 1 | 19 | on_open_url |
| Acerca de | 0 | 18 | — |
| Animación | 0 | 18 | — |
| Avatar | 0 | 18 | — |
| Barra de herramientas | 0 | 18 | — |
| Cabecera de lista | 0 | 18 | — |
| Cabecera de panel | 0 | 18 | — |
| Campo de formulario | 0 | 18 | — |
| Código QR | 0 | 18 | — |
| Columna | 0 | 18 | — |
| Contador | 0 | 18 | — |
| Contenedor | 0 | 18 | — |
| Cuadrícula | 0 | 18 | — |
| Disposición anclada | 0 | 18 | — |
| Divisor | 0 | 18 | — |
| Dona | 0 | 18 | — |
| Efectos | 0 | 18 | — |
| Encabezado | 0 | 18 | — |
| Espacio | 0 | 18 | — |
| Estado vacío | 0 | 18 | — |
| Etiqueta | 0 | 18 | — |
| Facepile | 0 | 18 | — |
| Fila | 0 | 18 | — |
| Flex | 0 | 18 | — |
| Gráfico de barras | 0 | 18 | — |
| Grupo de ajustes | 0 | 18 | — |
| Icono | 0 | 18 | — |
| Imagen | 0 | 18 | — |
| Indicador | 0 | 18 | — |
| Kbd | 0 | 18 | — |
| Medidor de contexto | 0 | 18 | — |
| Minigráfico | 0 | 18 | — |
| Pila | 0 | 18 | — |
| Pista de atajo | 0 | 18 | — |
| Plan | 0 | 20 | — |
| Progreso | 0 | 18 | — |
| Responsivo | 0 | 18 | — |
| Resumen de cambios | 0 | 18 | — |
| Shader | 0 | 18 | — |
| Spinner | 0 | 18 | — |
| Terminal | 0 | 18 | — |
| Texto | 0 | 18 | — |
| Texto enriquecido | 0 | 18 | — |
| Tooltip | 0 | 18 | — |
| Vista de diferencias | 0 | 18 | — |
Sigue con Apps, ventanas, formularios y componentes, que explica cómo crear tus propios eventos, e Imperativo, declarativo y funcional, con las tres formas de manejarlos.