Diseñador de vistas

El diseñador de vistas de Doggy es una herramienta visual de maquetación de páginas con soporte para diseño por arrastrar y soltar, vinculación de fuentes de datos, vista previa en tiempo real, mejora IA y gestión de versiones.

Descripción general

El sistema de vistas se basa en las siguientes entidades (src/Entity/Platform/):

• View.php: definición de la vista (configuración de diseño, fuente de datos, información de versión)
• ViewField.php: configuración de cada campo dentro de la vista

La entrada de administración está en App\Controller\Admin\Platform\ViewEditorController, y la entrada de API en ViewEditorApiController.

Estructura de la vista

View
├── Configuración de diseño (filas/columnas de cuadrícula)
├── Vinculación de campos (ViewField)
│   ├── Tabla de datos
│   ├── Formulario
│   ├── Tarjeta de estadísticas
│   └── Contenido de texto
├── Configuración de la fuente de datos
└── Catálogo de versiones (1_0/, 2_0/...)

Uso

1. Entra en Plataforma low-code → Gestión de vistas (/admin/platform/view)
2. Haz clic en Nueva vista
3. Edita el diseño de la vista (editor.html.twig)
4. Configura las propiedades de los componentes y la fuente de datos
5. Vista previa del resultado (editor_section_properties.html.twig)
6. Guarda y publica

Mejora IA

El editor de vistas está profundamente integrado con el Asistente IA:

• Panel IA flotante: se abre con el botón flotante de la esquina inferior derecha de todas las páginas
• Registro de contexto: el editor registra automáticamente el contexto view_editor
• Operaciones en lenguaje natural: "cambia este texto a estilo de título"
• Llamada a herramientas: view.getInfo, view.updateSectionConfig, view.updateFieldConfig, view.listEntityFields
• Reconocimiento de intenciones + sub-agentes: genera vistas de formularios/informes/páginas de aterrizaje con un clic (ver Mejora de vistas IA)

También admite asistente de maquetación con Tailwind CSS (basado en el runtime de Twind):

• Maquetación rápida: clases utilitarias como flex/grid/espaciado/ancho y alto
• Convive con los estilos inline existentes sin conflictos
• El frontend de producción se carga bajo demanda, sin paso de compilación

Vinculación de fuentes de datos

Las fuentes de datos de las vistas se configuran mediante la entidad DataSource.php:

• Fuente de datos de entidad: vincula los datos del modelo dinámico
• Fuente de datos API: llama a una API personalizada
• Fuente de datos estática: datos fijos

Generación de código

Al guardar una vista, el sistema genera los archivos de plantilla Twig correspondientes en el directorio templates/views/:

templates/views/
├── hello/
│   └── 1_0/
│       ├── hello.html.twig
│       └── hello.design.twig
└── organización/
    └── post_management/
        └── 1_0/
            ├── post_management.html.twig
            └── post_management.design.twig

Las plantillas generadas pueden usarse directamente o continuar su desarrollo.

Gestión de versiones

Las vistas admiten gestión de múltiples versiones (cada versión corresponde a un conjunto independiente de archivos twig):

• Cambiar de versión: activar una versión como versión actual
• Nueva versión: copiar desde la versión actual o crear una versión vacía
• Eliminar una vista la envía a la papelera (recuperable)
• El editor trabaja por versiones y puede especificar explícitamente ?version=...

Servicios relacionados

• FormFieldBuilderService.php: construcción de campos de formulario
• ViewFolderType.php, ViewType.php: definiciones de tipos de formulario
• AiChatController.php: interfaz de diálogo IA
• ViewAiTaskApiController.php: interfaz de tareas de mejora IA