Layouts y diseño por dispositivo
Plantillas reutilizables detrás de las pantallas, y un diseño propio para web, tablet y móvil — sin herencia, con reglas claras.
Dos cosas de esta página se parecen y no son lo mismo:
- Un layout es un diseño compartido por varias pantallas — el encabezado, el marco, el pie que se repiten. Se hace una vez y se usa en todas partes.
- Un dispositivo es un diseño de la misma pantalla para otro tamaño — la web, la tablet, el móvil. Cada uno es independiente.
Una va de reutilizar entre pantallas; la otra va de servir la misma pantalla en pantallas de tamaños distintos.
Layouts
Un layout es un documento como una pantalla — tiene widgets y puede tener datastores — pero sin ruta, sin parámetros y sin reglas de acceso. No se navega a un layout: es el fondo de quien lo usa.
Crear un layout
- En la barra lateral, pestaña UI, sección Pantallas.
- Haz clic en el botón Nuevo layout, en la cabecera de la sección (o, en el menú ⋯ de una carpeta, para crearlo dentro).
- Escribe el Nombre del layout — el campo sugiere ej.: Base con encabezado.
- Crear.
El layout queda en el mismo árbol de las pantallas (la nota lo dice: El layout queda en el árbol de las pantallas — arrástralo a donde quieras), con icono propio, y se abre de inmediato en una pestaña.
Diseñar un layout
El editor es el mismo de las pantallas — paleta, canvas, inspector, los mismos gestos y los mismos atajos (ver El canvas). Las diferencias son a propósito:
| En el layout | Por qué |
|---|---|
La insignia de la cabecera muestra /layout. |
Un layout no tiene ruta. |
| No hay Parámetros de ruta, Presentación ni Eventos de la pantalla. | Nada de eso es del layout. |
| En vez de Template de la pantalla, el inspector tiene Template base, con la línea Base. | Un layout puede apoyarse en otro. |
Nota
Los widgets de un layout no tienen eventos. El layout es estructura y apariencia; el comportamiento es de cada pantalla — y ahí es donde se escribe, incluso para los widgets que vienen del layout.
Poner un layout en una pantalla
- Abre la pantalla y haz clic en una zona vacía del canvas (el inspector pasa a mostrar la pantalla).
- Abre la categoría Template de la pantalla.
- En la línea Layout, elige el layout. Para quitarlo, elige — sin layout —.
La pista de la categoría resume el contrato: Plantilla detrás del contenido: los widgets del layout aparecen bloqueados; las propiedades y eventos se configuran por pantalla.
Qué cambia en la pantalla
Los widgets del layout pasan a aparecer en el canvas de la pantalla, por detrás de su contenido, y con un candado en la esquina. Lo que se puede y no se puede hacer con ellos es una regla fija:
| En la pantalla, sobre un widget del layout | |
|---|---|
| Mover, redimensionar, eliminar, duplicar | No. La posición se edita en el propio layout. |
| Cambiar propiedades (textos, colores, opciones) | Sí — y el cambio es solo de esta pantalla. |
| Visible / Activo | Sí, por pantalla. |
| Eventos | Sí — el comportamiento es siempre de la pantalla. |
| Acceso y Valores de la frase | No. Se definen en el layout. |
El inspector te dice en qué situación estás: Widget del layout: la posición se edita en el layout; propiedades, visibilidad y eventos son de ESTA pantalla.
Sin «zonas de contenido»
No hay slots ni áreas reservadas: el contenido de la pantalla se dibuja siempre encima del layout. Quien diseña el layout es quien deja el espacio libre donde las pantallas van a escribir — un encabezado arriba, una barra abajo, y el medio vacío.
Consejo
Diseña el layout con el centro vacío y un margen generoso. Un layout que ocupa el centro obliga a todas las pantallas a esquivarlo para siempre.
Colisiones y cadenas
Dos reglas que la plataforma verifica y se niega a romper:
- Ids y nombres únicos. Una pantalla y su layout no pueden tener el mismo id de widget ni el mismo nombre de datastore — Colisión con el layout: el id de widget «…» existe en los dos. No hay prefijos automáticos: el nombre que elegiste es el nombre que queda.
- Como máximo 3 niveles, y sin vueltas. Un layout puede apoyarse en otro (Template base), pero la cadena para en tres — La cadena de layouts excede 3 niveles. — y un ciclo se rechaza.
Cuando el layout cambia
La pantalla guarda solo cuál es el layout y los cambios que hizo a widgets suyos. El diseño no se copia — por eso cambiar el layout cambia todas las pantallas que lo usan, al momento, en la app publicada.
Dos consecuencias prácticas:
- En el constructor, una pestaña de pantalla que ya estaba abierta no se actualiza sola cuando guardas el layout: cierra y reabre la pantalla para verla con la versión nueva.
- Eliminar un layout en uso no se impide. Las pantallas que lo usaban pasan a abrirse sin él, con el aviso El layout asociado ya no existe. — no se rompen, pero se quedan sin el marco.
Diseño por dispositivo
Una pantalla tiene tres diseños posibles, uno por dispositivo:
| Dispositivo | Ancho de referencia |
|---|---|
| Web (1280px) | Ordenador. |
| Tablet (768px) | Tablet, y ventanas estrechas. |
| Mobile (390px) | Móvil. |
Se conmutan en los tres botones a la izquierda de la barra del diseñador.
La cuadrícula es la misma en los tres — 48 pistas con el mismo canal — y lo que cambia es el ancho de cada pista. Un widget con 24 pistas ocupa la mitad de la página en cualquier dispositivo; el canal mide lo mismo en los tres; la altura, esa, se cuenta siempre en píxeles.
No hay herencia
Esta es la regla que explica todo lo demás: cada dispositivo tiene su árbol de widgets, completo e independiente. No existe «ocultar en la web y mostrar en el móvil» entre árboles — lo que no está en el árbol de un dispositivo no existe en ese dispositivo.
La web existe siempre. La tablet y el móvil pueden estar por diseñar — y en ese caso la app sirve el diseño web, comprimido al ancho real. Es un repliegue para servir, no herencia: siguen siendo diseños separados a la hora de editar.
Empezar el diseño de un dispositivo
Elige Tablet (768px) o Mobile (390px) en una pantalla que aún no los tenga y el diseñador muestra la tarjeta Este dispositivo aún no tiene diseño, con la explicación — Cada dispositivo tiene su diseño propio. Mientras este no exista, el runtime sirve el diseño web. — y dos caminos:
| Botón | Qué hace |
|---|---|
| Copiar del web | Duplica el diseño web como punto de partida. Los ids de los widgets se mantienen (las conexiones a datos y el código siguen encontrándolos) y los anchos se reajustan por ser en columnas. |
| Empezar vacío | Una hoja en blanco, para diseñar desde cero. |
La copia ocurre una vez. A partir de ahí los diseños siguen vidas separadas: tocar la web no toca el móvil.
Atención
Mientras el dispositivo tiene diseño, la barra muestra Eliminar el diseño de este dispositivo. La confirmación es clara — El diseño de este dispositivo desaparece y el runtime vuelve a servir el web. No hay vuelta atrás. — y lo es de verdad: no hay Deshacer para esta operación.
Ocultar widgets en este dispositivo
Dentro de un dispositivo, la pestaña Estructura del inspector tiene un ojo en cada widget: Ocultar en este dispositivo / Mostrar en este dispositivo. Un widget oculto sigue en el árbol y sigue siendo editable desde la Estructura — solo no sale en la pantalla.
Si lo que está oculto es el contenedor, los hijos van con él — y su ojo lo explica: Oculto por un contenedor padre.
La altura de la página
La altura es por dispositivo: un móvil puede tener una página mucho más alta que la web para la misma pantalla. Arrastra el borde inferior del canvas (Altura de la página — arrastrar para ajustar) para cambiarla.
Cuando la página es más alta que el dispositivo, el canvas dibuja una línea discontinua con la etiqueta fondo del viewport — ahí es donde acaba lo que se ve sin hacer scroll. Todo lo que esté bajo esa línea solo aparece a quien haga scroll en la página.
Lo que la app sirve
En la app publicada, el dispositivo lo elige el ancho de la ventana: por debajo de 640 px es móvil, por debajo de 1024 px es tablet, por encima es web. Redimensionar la ventana cambia el diseño servido, ahí mismo.
Sin diseño para el dispositivo detectado, se sirve el web. En la app móvil nativa, ese repliegue se anuncia — Esta pantalla no tiene diseño para móvil — mostrando el diseño web.
El botón Previsualizar abre la pantalla en la app real; para ver cómo queda en otro tamaño, cambia el tamaño de la ventana del navegador.
Eventos, ids y dispositivos
Como cada dispositivo es un árbol, el mismo id de widget puede existir en
los tres — es a propósito, es «el mismo widget lógico en otro tamaño».
Pero cada uno tiene sus propiedades y su código: cambiar el onClick
del botón en la web no cambia el del móvil.
Al escribir código (ver
Eventos y el SDK), recuerda que
keplin.widgets.get("...") solo encuentra widgets del dispositivo que
está corriendo. Un widget que solo existe en la web da error en el móvil.
Layouts y dispositivos, juntos
Las dos cosas se combinan por la misma regla: el layout se compone por dispositivo. Un layout diseñado solo en la web aparece también en los árboles de tablet y móvil de las pantallas que lo usan, sirviendo su propio diseño web — y un layout con diseño propio para móvil sirve ese.
Nota
La barra de navegación de la app no viene del layout: se diseña en el editor de Navegación y la app la dibuja alrededor de la pantalla. Un layout puede tener una barra suya — pero esa es contenido de la pantalla y no sabe navegar sola.
Cómo decidir
| Situación | El camino |
|---|---|
| El mismo encabezado en 20 pantallas. | Un layout. |
| Una pantalla compleja que en el móvil tiene que ser otra cosa. | Un diseño de móvil propio. |
| Un botón que no tiene sentido en el móvil. | El ojo de la Estructura en el dispositivo móvil. |
| Un menú distinto en el móvil. | El editor de Navegación, en el dispositivo móvil. |
| Una app que solo se va a usar en el ordenador. | Diseña solo la web y no le des más vueltas. |
¿Por qué no…?
- ¿Por qué no puedo tocar este widget? Tiene candado: viene del layout. Abre el layout y tócalo ahí — en la pantalla solo cambias propiedades, visibilidad y eventos.
- ¿Por qué no me deja elegir el layout? Hay colisión: la pantalla y el layout tienen el mismo id de widget o el mismo nombre de datastore. Renombra uno de los dos.
- ¿Por qué la pantalla no muestra los cambios que hice al layout? La pestaña de la pantalla estaba abierta. Cierra y reabre.
- ¿Por qué el móvil muestra el diseño de la web todo apretado? Esa pantalla no tiene diseño de móvil. Elige Mobile (390px) y usa Copiar del web o Empezar vacío.
- ¿Por qué toqué la web y el móvil no cambió? Porque son diseños independientes. La copia solo ocurre en el momento en que creas el dispositivo.
- ¿Por qué desapareció el marco de todas las pantallas? El layout fue eliminado. Las pantallas avisan El layout asociado ya no existe. — créalo otra vez y vuelve a elegirlo en Template de la pantalla.