Nexus – Screens

Las Screens (pantallas) son las vistas individuales que componen una aplicación en Nexus. Cada aplicación puede tener múltiples screens, construidas mediante un editor visual de tipo “arrastrar y soltar”.

1. Gestión de Screens

La sección Screens muestra el listado de pantallas existentes, con opción de crear una nueva. También hay un apartado de Deleted screens, con botón Restore para recuperarlas.

Cada screen en el listado muestra nombre, slug, fecha de última edición, y tres acciones:

  • Ícono de casa: convierte a esa screen en la pantalla principal (Home Screen) de la app.
  • Ícono de lápiz: editar la screen.
  • Ícono de tacho: eliminar la screen.

2. Crear una nueva Screen

Al hacer clic en “+ New Screen” se abre un formulario:

  • Screen Name: nombre de la pantalla.
  • Slug: identificador único (autogenerado, editable).
  • Set as default screen: define esta pantalla como principal desde su creación.
  • Initial Template: permite partir de una plantilla en vez de un lienzo vacío:

    • None (empty canvas): lienzo vacío.
    • Analytics Dashboard: pantalla de ejemplo con filtros, tarjetas de estadísticas (Revenue, Orders, Conversion) y gráfico de barras.
    • Admin CRUD: pantalla de ejemplo con buscador/filtros, tabla de administración con acciones por fila y paginación.
    • Landing + CTA: pantalla tipo landing, con título, texto, botón de acción e imagen/preview.

3. El Editor de Screens

El editor se divide en tres áreas:

  • Izquierda – Components: panel con todos los elementos disponibles para arrastrar al lienzo, organizados por categorías (Layout, Display, Form, Data).
  • Centro – Lienzo (Canvas): área de diseño donde se arma la pantalla.
  • Derecha – Propiedades: al no haber nada seleccionado, muestra Screen Settings (ancho, padding, grid overlay, color de fondo, comportamiento de borrado, CSS personalizado). Al seleccionar un componente del lienzo, muestra las propiedades específicas de ese componente.

Herramientas de la barra superior:

  • History: deshacer/rehacer cambios.
  • Reference: panel con funciones, queries, variables y componentes disponibles ($fn, $query, $var, $comp).
  • Preview: vista previa de la pantalla.
  • Save: guardar cambios.
  • Ícono sol/luna: alterna modo claro/oscuro del editor.
  • Ícono circular rojo (estrella): abre un asistente de IA (chatbot) dentro del editor.

4. Componentes disponibles

Cada componente, al arrastrarse al lienzo, despliega en el panel derecho sus propias propiedades de configuración (y en muchos casos, la opción de Events & Actions para definir comportamientos interactivos). El detalle de configuración de cada uno se documenta por separado.

Layout

Display

Form

Data