El canvas

Las pantallas de una app se diseñan en un editor visual: arrastras widgets de una paleta a un canvas, posicionas al píxel con la ayuda de una cuadrícula y de guías inteligentes, y afinas cada detalle en un inspector a la derecha. Esta página explica ese entorno de trabajo — todo lo que viene después (widgets, datos, eventos) ocurre dentro de él.

Los ejemplos son de la app Gestión de Clientes: un CRM con pantallas de cuentas, oportunidades y dashboards.

#Abrir y crear pantallas

Las pantallas viven en la barra lateral de la app, en la pestaña UI, dentro de la sección Pantallas. Hacer clic en una pantalla la abre en una pestaña del espacio de trabajo — puedes tener varias pantallas abiertas lado a lado, y cada pestaña recuerda lo que estaba haciendo.

Para crear una pantalla:

1. Abre la app y elige la pestaña UI en la barra lateral.
2. En la sección Pantallas, haz clic en el botón Nueva pantalla.
3. Dale un nombre — por ejemplo, Ficha de Cliente — y confirma con Crear.
4. La pantalla se abre de inmediato en el espacio de trabajo, lista para diseñar.

La misma sección tiene carpetas (Nueva carpeta) para organizar el árbol, las pantallas de Sistema (login, recuperación de contraseña y registro — con ruta y parámetros fijos) y los layouts — plantillas reutilizables que quedan para el capítulo Layouts y diseño por dispositivo.

#Las tres zonas del diseñador

Zona	Qué es
Widgets (izquierda)	El catálogo de widgets. Arrastra cualquiera al canvas — la pista en el propio elemento te lo dice: Arrastra al canvas.
Canvas (centro)	La página de la pantalla, dibujada a la escala real del dispositivo activo, ya con el tema de la app aplicado. Lo que ves es lo que la app muestra.
Inspector (derecha)	Las propiedades de lo que está seleccionado — o de la propia pantalla, cuando no hay selección. Tiene dos pestañas: Propiedades y Estructura.

Sobre el canvas está la barra de herramientas: los tres dispositivos (Web (1280px), Tablet (768px), Mobile (390px)), undo/redo, capas, duplicar, eliminar, alinear/distribuir, Previsualizar y el zoom (Ampliar, Reducir, y el porcentaje clicable para Restaurar 100%).

La paleta Widgets agrupa el catálogo por tipología (Contenedores, Editores, Acciones y navegación, Contenido y Datos, más Custom cuando la app tiene widgets propios); cada grupo se pliega con un clic en el título, y la caja Buscar de arriba filtra por nombre, sin distinguir mayúsculas ni acentos. El ancho de la paleta se arrastra por el borde derecho y se recuerda; doble clic en el tirador repone el de origen. La paleta, la barra de herramientas y la cabecera son las mismas en los diseñadores de workflows y de informes.

#La cuadrícula

El canvas se apoya en una cuadrícula que mantiene las pantallas ordenadas sin atarte:

• En horizontal, la página se divide en 48 pistas, con un intervalo fijo en píxeles entre pistas (el canal). La posición y el ancho de un widget se cuentan en pistas, en cuartos de pista: es lo que hace que una pantalla diseñada en web siga proporcional en un modal más estrecho. Un widget que ocupa varias pistas ocupa también los intervalos que quedan dentro de él; entre dos widgets en pistas adyacentes queda exactamente un canal, en cualquier monitor.
• En vertical, el encaje es en pasos de 8 píxeles; la posición y la altura se guardan al píxel.

El canal y el ancho máximo del contenido se definen en la app, en Ajustes ▸ Tema ▸ Cuadrícula de las pantallas, y cada pantalla puede sustituirlos en la categoría Cuadrícula del inspector. Con un ancho máximo, el contenido deja de estirarse por encima de él y queda centrado (o a la izquierda). Para que dos widgets queden a la distancia del canal, se colocan en pistas adyacentes; una pista vacía entre ellos vale una pista más un canal.

Al arrastrar, el widget encaja en la columna y en el paso vertical más cercanos. Si necesitas soltarlo exactamente donde está el ratón, mantén la tecla Alt durante el arrastre — el encaje se desactiva mientras esté pulsada.

Los mismos valores pueden escribirse a mano: con un widget seleccionado, la categoría Layout del inspector muestra Col, Ancho (en pistas, con decimales en cuartos: 12,25), Y y Alto (en píxeles).

El canalón se define para web y escala con el ancho del dispositivo: 16 px en web (1280 px) son 10 px en tablet y 5 px en móvil, para que el espacio entre widgets sea proporcional en pantallas pequeñas. Por eso dos widgets en franjas adyacentes quedan siempre a la distancia correcta, sea cual sea el dispositivo.

#Seleccionar, mover, redimensionar

• Clic selecciona un widget; Shift+clic añade o quita de la selección; arrastrar desde una zona vacía dibuja una caja de selección que atrapa todo lo que toca.
• Arrastra un widget para moverlo; tira de las asas de las esquinas y de los bordes para redimensionarlo.
• Las flechas del teclado mueven la selección: ←/→ una columna, ↑/↓ un píxel — y Shift+↑/↓ ocho píxeles cada vez.
• Soltar un widget dentro de un Panel, de unas Pestañas o de una Barra fija lo convierte en hijo de ese contenedor: pasa a moverse con él y la posición queda relativa al contenedor.

#Guías inteligentes

Mientras arrastras o redimensionas, el canvas compara el widget en movimiento con los vecinos y sugiere encajes — las guías se dibujan al momento:

Guía	Cuándo aparece
Alineación	Un borde o el centro del widget queda alineado con el borde/centro de un vecino — el widget se pega a esa línea.
Espaciado igual	Estás soltando el widget a la misma distancia a la que dos vecinos ya están uno del otro — la fila queda con intervalos exactos.
Tamaño igual	Al redimensionar, el ancho o el alto queda igual al de un vecino — se pega a ese tamaño.

La alineación gana al espaciado, y el espaciado gana a la cuadrícula: cuando estás visiblemente intentando pegarte a un borde, es eso lo que pasa.

#Alinear y distribuir

Con dos o más widgets seleccionados, la barra de herramientas activa los botones de alineación: Alinear a la izquierda, Centrar en horizontal, Alinear a la derecha, Alinear arriba, Centrar en vertical y Alinear abajo. Con tres o más, se suman Distribuir en horizontal y Distribuir en vertical, que igualan los intervalos manteniendo el primero y el último en su sitio.

Con varios widgets seleccionados el inspector resume: N widgets seleccionados — usa la barra para alinear/distribuir.

#Capas

Los widgets pueden superponerse — una Etiqueta sobre una Imagen, por ejemplo. El orden se controla en la barra de herramientas: Traer al frente, Avanzar una capa, Retroceder una capa y Enviar atrás.

#Anclas — amarrar a los márgenes

Por defecto, un widget se queda donde lo posaste. Las anclas amarran bordes del widget a los márgenes de la página (o del contenedor donde está): selecciona un widget y haz clic en los pines que aparecen en medio de cada borde — Amarrar arriba, Amarrar a la izquierda, Amarrar a la derecha, Amarrar abajo.

• Amarrar izquierda + derecha hace que el widget se estire con el ancho de la página — el clásico encabezado a todo el ancho.
• Amarrar abajo pega el widget al fondo de la página — una barra de botones que queda abajo, tenga la página la altura que tenga.

#La altura de la página

La página de una pantalla tiene altura fija por dispositivo — nunca crece sola con el contenido. El borde inferior del canvas es un asa: arrástrala para ajustar (Altura de la página — arrastrar para ajustar). Bajo el contenido, el fondo de la pantalla continúa hasta el final (el fondo continúa hasta el final de la pantalla). Si el contenido pasa de la altura, el usuario hace scroll — salvo que lo desactives (ver las propiedades de la pantalla).

#Deshacer, rehacer y los atajos

Cada gesto — soltar, mover, redimensionar, cambiar una propiedad, eliminar — es un paso de historial. Deshacer (Ctrl+Z) y Rehacer (Ctrl+Shift+Z) están en la barra; los movimientos de teclado seguidos se funden en un solo paso, para que el undo no tenga que retroceder tecla a tecla.

Atajo	Acción
Ctrl+Z / Ctrl+Shift+Z (o Ctrl+Y)	Deshacer / Rehacer
Ctrl+C / Ctrl+X / Ctrl+V	Copiar / Cortar / Pegar (la copia entra desplazada una columna)
Ctrl+D	Duplicar la selección
Ctrl+A	Seleccionar todos los widgets del dispositivo activo
Delete o Backspace	Eliminar la selección
Escape	Limpiar la selección
Flechas / Shift+↑↓	Mover la selección (columna a columna; 1 px; 8 px)
Ctrl+rueda del ratón	Zoom

En Mac, usa ⌘ donde dice Ctrl.

#Guardado automático y previsualizar

No hay botón de guardar: los cambios se guardan solos. La esquina superior derecha dice en qué punto están — Guardando…, Guardado, o Fallo al guardar — inténtalo otra vez si algo fue mal (basta tocar de nuevo para repetir).

El botón Previsualizar guarda lo que esté pendiente y abre la pantalla en la app real, en una pestaña nueva del navegador — pasas por el login como cualquier usuario y ves la pantalla funcionando con datos de verdad.

#El inspector

El inspector tiene dos pestañas:

• Propiedades — todo lo editable en lo que está seleccionado.
• Estructura — el árbol de widgets del dispositivo activo.

#Propiedades de un widget

Con un widget seleccionado, la parte superior del inspector muestra el tipo y el id del widget (en letra monoespaciada) — es este id el que usas en el código de los eventos. Las propiedades se organizan en categorías; cada widget muestra solo las que le atañen:

Categoría	Qué contiene
Layout	Col, Ancho, Y, Alto, y los interruptores Visible y Activo (un widget inactivo queda gris y sin interacción, también por teclado).
Acceso	Exige la acción — una acción declarada en Ajustes ▸ Permisos; quien no la tenga no usa el widget. En Sin la acción eliges Ocultar o Mostrar desactivado.
Contenido	Textos, etiquetas, iconos — y los Valores de la frase (ver abajo).
Datos	La conexión a datos del widget (ver Datastores y datos).
Comportamiento	Opciones de funcionamiento — vistas, arrastres, acciones al hacer clic.
Validación	En los campos de formulario: Obligatorio, reglas estándar y script (ver Widgets).
Interacción	Acciones de clic de widgets como el Botón.
Apariencia	Estilo visual (ver abajo).
Eventos	Los eventos del widget (ver Eventos y el SDK).

Algunos widgets tienen elementos internos editables — una columna de la Tabla, un campo de la Lista, una pestaña de las Pestañas. Haz clic en el elemento directamente en el canvas para editarlo; el inspector cambia a ese elemento y el botón volver al widget te trae de vuelta.

#Apariencia

La categoría Apariencia es igual en (casi) todos los widgets: Fondo, Borde con Trazo del borde (Continuo, Discontinuo, Punteado), radio, padding, Sombra (Sin sombra, Suave, Media, Fuerte, Extra), y las opciones de Texto — color, Tamaño, Peso, Alinear texto. Los colores aceptan los tokens del tema de la app o valores hex — usa los tokens siempre que puedas, para que el widget acompañe al tema.

El radio (px) es el radio de las esquinas del widget, en píxeles, y prevalece sobre el radio del tema en todo el widget: en el marco y en los elementos de dentro (el campo de un input, las celdas de una tabla, las tarjetas de una lista). Vacío usa el radio del tema; cero son esquinas rectas. Los widgets dentro de un contenedor con radio propio siguen con el del tema, salvo que tengan el suyo. Las listas que se abren por encima (las opciones de una lista, la ventana de selección) se quedan con el radio del tema. KeplinGo sigue la misma regla.

Los widgets con cabecera propia (paneles, tablas, gráficos…) añaden aquí Mostrar título y Mostrar descripción, con sus textos.

#Reglas de formato

Aún en Apariencia, las Reglas de formato cambian el estilo según los datos: pintar de rojo las filas atrasadas, ocultar un botón según la sesión, poner un KPI en verde por encima del objetivo.

1. Haz clic en Nueva regla.
2. Elige el ámbito — El widget, Cada fila o Una celda (fila/celda solo existen en widgets que dibujan filas, como la Tabla).
3. En Cuando, añade condiciones (campo, operador, valor — el valor puede venir de un parámetro, de la sesión, del estado…). Sin condiciones, la regla se aplica siempre.
4. En Entonces, elige lo que cambia: Fondo, Color del texto, Negrita, Cursiva, Subrayado, Alineación, Formato u Ocultar.

El orden cuenta — la última regla que coincida es la que manda. El interruptor Activa desactiva una regla sin borrarla, para experimentar. Y el código de los eventos tiene siempre la última palabra sobre las reglas.

#Valores de la frase

Cualquier texto de un widget puede tener huecos: escribe {n} en el texto (por ejemplo, «{n} contas activas») y la sección Valores de la frase aparece en la categoría Contenido, para que digas de dónde viene cada valor — de un datastore, de un parámetro, de la sesión, del estado o de otro widget. Es la forma de poner números vivos dentro de frases traducibles sin escribir código.

#La pestaña Estructura

La pestaña Estructura lista todos los widgets del dispositivo activo, en árbol (contenedores con los hijos dentro). Sirve para seleccionar lo que está tapado, ver lo que está oculto (Oculto por un contenedor padre) y conmutar la visibilidad inicial de cada widget con el ojo — Ocultar en este dispositivo / Mostrar en este dispositivo.

#La pantalla y sus propiedades

Haz clic en una zona vacía del canvas (o pulsa Escape) y el inspector pasa a mostrar la propia pantalla:

Sección	Qué define
Pantalla	El nombre y la Ruta — el camino de la pantalla en la dirección de la app (minúsculas, números y guiones).
Parámetros de ruta	Los parámetros que la pantalla recibe en la dirección (ej.: el id de la cuenta en /ficha-de-conta/:id). Cada uno puede ser Obligatorio; el orden se ajusta con Subir/Bajar.
Comportamiento	Scroll de la pantalla — Automático o Sin scroll.
Acceso	Pantalla pública (sin sesión) — la pantalla se abre sin login; los datos vienen solo de APIs públicas.
Apariencia	El fondo de la página: Color, Imagen (assets) y Ajuste (Cubrir, Contener, Estirar, Centrar, Repetir).
Navegación	La Pantalla padre de una página que no está en ningún menú (un detalle): la app resalta su menú y mantiene abierta la barra lateral. Ver Navegación de la app.
Presentación	Si la pantalla es una página normal, un Modal (centro) o un Panel lateral (derecha) — detallado en Eventos y el SDK. Con Barra (área de widgets), la pantalla es el contenido de un área de widgets de la Navegación de la app.
Template de la pantalla	El Layout asociado — ver Layouts y diseño por dispositivo.
Datos	Los datastores de la pantalla — ver Datastores y datos.
Eventos	Los eventos de la pantalla (onLoad, onParamsChange, onUnload) — ver Eventos y el SDK.

#¿Por qué no…?

• ¿Por qué no puedo mover un widget? Si aparece con un candado, viene de un layout — la posición se edita en el propio layout, no en la pantalla. Ver Layouts y diseño por dispositivo.
• ¿Por qué el widget no encaja donde quiero? Las guías y la cuadrícula le están ganando a tu gesto — mantén Alt para desactivar el encaje mientras arrastras.
• ¿Por qué desapareció el widget del canvas? Mira la Estructura: puede estar oculto (ojo), dentro de una pestaña que no está activa, o detrás de otro widget (usa las capas).