Herramientas y lienzo
El panel Herramientas (dock izquierdo) tiene los componentes arriba y la Estructura abajo; arrastra la barra entre ellas para dar más sitio a una. El lienzo del centro muestra el documento exactamente como se ejecutará, pero inerte: los botones no hacen clic y los campos de texto no escriben, así el ratón queda libre para editar.
La caja de herramientas
Sección titulada «La caja de herramientas»Todos los componentes que puedes colocar, por categoría: Comunes, Formularios (todo lo que el usuario escribe o elige), Fecha y hora, Presentación, Contenedores, Disposición, Navegación, Sistema (lo que habla con el sistema operativo), Componentes (los demás no visuales, que van a la bandeja bajo el formulario) y una categoría por cada grupo de componentes diseñados de tu proyecto. Pasa el ratón por una fila para ver la descripción del componente.
| Categoría | Componentes |
|---|---|
| Comunes | Etiqueta de texto, Título, Botón, Enlace, Botón con menú |
| Formularios | Cuadro de texto, Área de texto, Casilla, Interruptor, Opciones, Desplegable, Deslizador, Número, Lista, Buscador, Segmentado, Grupo de botones, Selector de color, Selector de iconos |
| Fecha y hora | Selector de fecha, Rango de fechas, Selector de hora, Calendario |
| Presentación | Barra de progreso, Insignia, Imagen, Imagen SVG, Visor de imágenes, Shader, Icono, Markdown, Indicador de carga, Etiqueta (chip), Aviso, Avatar, Grupo de avatares, Contador, Punto de estado, Atajo, Métrica, Gráfico, Tabla, Resumen de cambios, Estado vacío, Código QR, Salida de terminal |
| Navegación | Pestañas, Árbol, Ruta de navegación |
| Contenedores y Disposición | Panel, Marco, Tarjeta, Separador, Fila flexible, Columna flexible, Cuadrícula, Dock, Panel del dock, Espaciador |
| Sistema | Selector de archivos, Zona para soltar y, en la bandeja: Atajo, Vigilante de archivos, Proceso, Portapapeles, Diálogo de archivos, Notificación, Información del sistema, Lanzador, Monitor de red, Monitor de batería |
| Componentes | Temporizador, Tarea en segundo plano, Petición web, Ajustes |
| Multimedia y Audio | Webcam y los controles de audio: perillas, faders, pads, piano, medidores, formas de onda, espectro… |
El ejemplo Explorador de proyecto pone casi todos en un formulario, con un manejador para cada uno de sus eventos.
- Buscar componentes… filtra la lista por nombre (en inglés o en el idioma del editor) o por tipo.
- Puntero (la primera fila) es la herramienta normal de selección. Está resaltada cuando no hay componente elegido.
Colores de los iconos
Sección titulada «Colores de los iconos»Cada componente tiene un rol, y su icono lleva el color de ese rol en todas partes: la caja de herramientas, la estructura, la bandeja de componentes no visuales, la cabecera de los paneles Propiedades y Eventos y la ficha que sigue al puntero mientras arrastras. Así la estructura de un formulario se entiende de un vistazo: las cajas azules contienen al resto, los campos verdes recogen lo que escribe el usuario y los botones amarillos ejecutan tu código. El icono de la paleta junto al buscador muestra la misma leyenda.
| Color | Rol | Qué es |
|---|---|---|
| Azul | Disposición | Contiene y ordena otros controles: paneles, tarjetas, marcos, filas, columnas, cuadrículas, docks, separadores, espaciadores. |
| Verde | Entrada | Recoge un valor del usuario: cuadros de texto, casillas, interruptores, desplegables, deslizadores, números, selectores. |
| Amarillo | Acción | Ejecuta algo al pulsarlo: botones y botones con menú. |
| Cian | Navegación | Lleva de una vista a otra: pestañas, árboles, rutas de navegación, enlaces. |
| Neutro | Presentación | Muestra contenido: etiquetas, títulos, imágenes, tablas, gráficos, insignias. |
| Rojo | Multimedia | Sonido y vídeo: los controles de audio y la webcam. |
| Naranja | Sistema | Componentes no visuales: temporizadores, procesos, vigilantes de archivos, peticiones web, el portapapeles. |
| Morado | Propio | Tus propios componentes, hechos con el diseñador de componentes o con pz.Component. |
Los colores salen de la paleta de terminal del tema, así que cambian con el tema y se leen bien en temas claros y
oscuros. El rol se deduce del componente (si contiene controles, su categoría y sus eventos); un componente
registrado desde Python puede indicar el suyo con Component(..., role="input").
Colocar un control
Sección titulada «Colocar un control»Hay cuatro formas; usa la que te venga mejor:
| Gesto | Resultado |
|---|---|
| Arrastrar una fila de herramientas al formulario | El control cae donde lo sueltas, con su tamaño por defecto, dentro del contenedor que hay bajo el puntero (se ilumina mientras arrastras). |
| Clic en una fila y luego clic en el formulario | Lo mismo, en el punto donde hiciste clic. |
| Clic en una fila y luego arrastrar un rectángulo en el formulario | El control toma el tamaño del rectángulo (al menos 6×6 px); sus esquinas se ajustan a la cuadrícula. |
| Ctrl+Shift+A (Añadir control…) | Una lista con buscador; Enter añade el componente resaltado centrado en el formulario. |
Mientras hay un componente elegido, el puntero es una cruz y la barra de estado dice
Placing Button: click or drag on the form. Esc (o clic en Puntero, o en la misma fila otra vez)
suelta la herramienta. Los controles nuevos reciben un nombre libre según su tipo (button1, button2…) y quedan
seleccionados, con el panel Propiedades al frente.
Seleccionar
Sección titulada «Seleccionar»| Gesto | Selecciona |
|---|---|
| Clic en un control | Ese control (los demás se deseleccionan). |
| Clic en un control ya seleccionado | Mantiene la selección y convierte ese control en el principal: la referencia para alinear e igualar tamaños, dibujado con un borde más grueso. |
| Arrastrar en un hueco | Un rectángulo de selección: todos los controles que toca. Un contenedor y lo que tiene dentro cuentan una vez (el contenedor). |
| Ctrl+A | Todos los controles. |
| Clic en un hueco | Nada: el panel Propiedades muestra entonces el propio formulario. |
| Una fila de la estructura | Ese control, aunque esté tapado por otros. |
Con varios controles seleccionados, el panel Propiedades muestra las herramientas de alineación y espaciado en lugar de propiedades, y el panel Eventos pide que elijas un solo control.
Mover y redimensionar
Sección titulada «Mover y redimensionar»- Arrastra un control seleccionado para mover toda la selección. Las posiciones se ajustan a la cuadrícula (con el snap activo) y el grupo no sale del formulario.
- Suéltalo sobre un contenedor para meterlo dentro, o sobre el formulario vacío para sacarlo de su contenedor. El destino se ilumina con un marco de color de acento mientras arrastras.
- Las ocho asas de un único control seleccionado lo redimensionan desde ese borde o esquina; el borde opuesto no se mueve. Los controles nunca son más pequeños que el tamaño mínimo y no salen de su contenedor.
- El tirador bajo la esquina inferior derecha del formulario lo redimensiona (al menos 120×80, ajustado a la cuadrícula).
- Esc durante cualquier arrastre lo cancela y deja todo como estaba.
- Las flechas mueven la selección 1 px; Shift+flechas la mueven un paso de cuadrícula (1 px con el snap apagado). Varios empujones seguidos son un solo paso de deshacer.
Los controles bloqueados no se mueven ni se redimensionan (muestran un candadito sobre su esquina), y las herramientas de alineación los saltan.
Los contenedores y su pestaña
Sección titulada «Los contenedores y su pestaña»Los hijos de un contenedor lo cubren casi entero, así que un clic ahí elige un hijo. Para elegir o arrastrar el propio contenedor, usa la pestaña con su nombre sobre su esquina superior izquierda: aparece mientras el puntero está sobre el contenedor y mientras el contenedor, o un control suyo, está seleccionado. Clic derecho en la pestaña abre el menú contextual del contenedor. Ver Disposición y contenedores.
Snap, cuadrícula y guías inteligentes
Sección titulada «Snap, cuadrícula y guías inteligentes»| Herramienta | Dónde | Qué hace |
|---|---|---|
| Mostrar la cuadrícula | Barra de herramientas, barra de estado, Ver → Cuadrícula, G | Muestra u oculta los puntos de la cuadrícula. |
| Ajustar a la cuadrícula | Barra de herramientas (imán), barra de estado, Ver | Redondea posiciones y tamaños al paso de la cuadrícula al arrastrar, colocar y redimensionar. |
| Guías inteligentes | Barra de herramientas (regla), Ver | Ajusta el control que mueves a los bordes y centros de los demás controles y del formulario, y dibuja una línea roja mientras coinciden. |
| Redimensionar el contenido con sus anclajes | Barra de herramientas (ancla) | Al redimensionar el formulario, un componente o un contenedor libre, lo que hay dentro se mueve y se estira según sus anclajes, como en la ventana en ejecución. Activado por defecto. |
| Ajustar la selección a la cuadrícula | Barra de herramientas | Mueve y redimensiona los controles seleccionados (todos si no hay selección) sobre la cuadrícula. |
| Tamaño de cuadrícula | Propiedades del formulario (sección Diseñador) | El paso de cuadrícula de este formulario (2 a 64 px, 8 por defecto). Los formularios nuevos toman el valor de Ajustes. |
Las guías ajustan a menos de 4 px de un objetivo, en los dos ejes a la vez, así que un control puede alinearse con el borde izquierdo de uno y el centro de otro en el mismo arrastre.
Alinear, distribuir e igualar tamaños
Sección titulada «Alinear, distribuir e igualar tamaños»La barra de herramientas actúa sobre la selección:
| Botón | Efecto |
|---|---|
| Alinear a la izquierda / los centros / a la derecha | Alinea los bordes izquierdos, los centros horizontales o los bordes derechos. |
| Alinear arriba / al medio / abajo | Alinea los bordes superiores, los centros verticales o los bordes inferiores. |
| Distribuir horizontalmente / verticalmente | Reparte tres o más controles a la misma distancia entre el primero y el último. |
| Mismo ancho / alto | Da a todos los seleccionados el ancho o el alto del control principal. |
| Centrar horizontalmente / verticalmente en el formulario | Centra la selección en el formulario. |
| Traer al frente / Enviar al fondo | Cambia el orden de dibujo (qué queda encima). |
| Eliminar | Borra la selección (Supr o Retroceso). |
Con varios controles, la alineación usa los límites de la selección; con uno solo, alinea con el formulario. El panel Propiedades muestra las mismas herramientas cuando hay varios controles seleccionados.
Portapapeles e historial
Sección titulada «Portapapeles e historial»- Ctrl+C, Ctrl+X, Ctrl+V: copiar, cortar y pegar. Los controles pegados se desplazan un poco para que se vean; un contenedor se copia con todo lo que tiene dentro. Los controles pegados no están conectados: sus eventos empiezan vacíos, así no comparten manejadores con los originales.
- Lo copiado va al portapapeles del sistema, así que puedes pegar controles en otro formulario: otra pestaña, otra ventana de Pyzed Design o el mismo formulario tras reiniciar. En otro formulario, un control pegado conserva su nombre si allí está libre (si no, recibe uno nuevo), junto con sus propiedades, estilo, enlace y reglas. Pegar un texto que no son controles de Pyzed pega lo último que se copió en esta ventana.
- Ctrl+D duplica la selección sin tocar el portapapeles.
- Ctrl+Z deshace, Ctrl+Shift+Z (o Ctrl+Y) rehace. Cada documento tiene su propio historial; las ediciones repetidas de un campo (escribir un título, empujar con las flechas) se juntan en un paso.
El menú contextual
Sección titulada «El menú contextual»Clic derecho en un control del lienzo, en su fila de la estructura o en la pestaña de un contenedor:
| Entrada | Hace |
|---|---|
| View code | Abre el manejador del evento principal del control (o abre un componente diseñado en su pestaña). |
| Help | Abre la página del control en la referencia (Shift+F1). |
| Add inside… | Solo contenedores: la lista Añadir control, añadiendo dentro de este contenedor. |
| Group in a row / column / grid / panel | Envuelve la selección en una fila flex, una columna flex, una grilla o un panel nuevos. |
| Move out of contenedor | Saca el control de su contenedor, al padre del contenedor. |
| Cut, Copy, Paste, Duplicate | Como los atajos. |
| Bring to front, Send to back | Orden de dibujo. |
| Lock / Unlock | Bloquea el control en su sitio. |
| Delete | Borra la selección. |
El menú se abre en el puntero y no sale de la ventana. Esc o un clic fuera lo cierran.
La estructura
Sección titulada «La estructura»La Estructura lista todos los controles del documento en árbol. La primera fila es el propio formulario (o componente): clic para seleccionarlo, + le añade un control.
- Orden: el de más arriba primero, como las capas de un programa de dibujo. Los hijos de una fila flex, una columna flex o una grilla aparecen en su orden de disposición.
- Flecha: pliega o despliega los hijos de un contenedor. En un componente diseñado colocado, lista sus
propiedades y métodos públicos; haz clic en uno para insertar
form.ada.rate()(oself.stars.pick()en un componente) en el cursor del editor de código, o para copiarlo si no hay código abierto. - Ojo: oculta el control. Los controles ocultos no se ven al ejecutar el formulario y su nombre sale en gris en la estructura. Mira Diálogos, cajones y otros controles ocultos.
- Candado: bloquea el control para no moverlo ni redimensionarlo sin querer.
- + (contenedores): añade un control dentro.
- Arrastra una fila para reordenarla: una línea muestra dónde va (antes o después de una fila), y un marco cuando iría dentro de un contenedor. Suéltala en el lienzo para meterla en el contenedor bajo el puntero, o en el formulario.
- Clic derecho en una fila abre el menú contextual.
Diálogos, cajones y otros controles ocultos
Sección titulada «Diálogos, cajones y otros controles ocultos»Un diálogo, un cajón o una página que solo aparece al pulsar un botón es un contenedor con Visible apagado,
que el código muestra con form.status_dialog.show() (y .hide() para cerrarlo). El lienzo no dibuja los controles
ocultos, así un formulario con muchos no se convierte en un montón de paneles superpuestos:
- Selecciónalo en la estructura (o algo de dentro). Aparece delante del formulario, que queda oscurecido detrás, tal como se verá al ejecutarlo. Un aviso arriba muestra su nombre.
- Edítalo como siempre: muévelo, cámbiale el tamaño, suelta controles nuevos dentro desde las herramientas o cambia sus propiedades.
- Vuelve con Esc, la × del aviso o un clic en el formulario oscurecido.
Para ver todos los controles ocultos a la vez, atenuados en su sitio, activa Ver → Mostrar todos los controles ocultos.
Ocultar un control solo en el editor
Sección titulada «Ocultar un control solo en el editor»Si prefieres tener todos los controles en el lienzo y ocultar algunos solo mientras trabajas, como las capas de un programa de dibujo, pon Ajustes → Lienzo del formulario → Ojo de la estructura en Oculto solo en el editor. Así el ojo oculta el control (y lo que tiene dentro) solo en el lienzo: sigue oculto aunque lo selecciones, al ejecutar el formulario se ve, y Visible se cambia en el panel Propiedades. En este modo los controles con Visible apagado se dibujan normal. Lo que oculta el ojo se guarda con el formulario.
La barra de estado
Sección titulada «La barra de estado»De izquierda a derecha: la posición del puntero en el formulario, lo seleccionado (sign_in 344×32 at 48, 304,
3 selected, o el formulario y su tamaño) y, con un componente elegido, la pista para colocarlo. A la derecha: el
marco de ventana que se muestra alrededor del formulario (GNOME, macOS…: clic para ver el de otra
plataforma), el número de controles, Grid 8px (clic para mostrar u ocultar la cuadrícula) y Snap (clic para activar o
desactivar el ajuste). Con el editor de código abierto muestra además la línea y columna del cursor y el estado de
los servidores de lenguaje. Ocúltala con Ver → Barra de estado.