DocCoreX

DocCoreX Studio

El Studio es el centro de diseño visual de DocCoreX. Aquí es donde transformas tus ideas en plantillas de documentos profesionales utilizando una interfaz intuitiva de arrastrar y soltar.

Interfaz de Studio

📁 Menú Archivo

Ubicado en la esquina superior izquierda, el menú Archivo centraliza las operaciones principales de gestión del documento:

Menú Archivo

  • Nuevo: Inicia un lienzo en blanco.
  • Guardar: Almacena los cambios actuales en el servidor.
  • Importar JSON: Carga un diseño desde un archivo local.
  • Exportar JSON: Descarga el diseño actual para respaldo o transferencia.
  • Clonar: Crea una copia de la plantilla actual.

👁️ Vista Previa (Preview)

Antes de guardar o publicar, puedes visualizar cómo se verá el documento final utilizando el botón Previsualizar de la barra superior.

Vista Previa

Esto abrirá un modal donde se renderiza el PDF utilizando datos de prueba, permitiéndote verificar márgenes, fuentes y disposición de los componentes en tiempo real.

🛠️ Áreas del Editor

La interfaz del Studio está dividida en varias zonas estratégicas para facilitar el diseño:

1. Barra Superior (Topbar)

Ubicada en la parte más alta, contiene las acciones globales de la plantilla:

  • Menú Archivo: Opciones para guardar, exportar o cerrar.
  • Previsualizar PDF: Genera una vista previa real con datos de prueba.
  • Selector de Idioma: Cambia la interfaz entre Español e Inglés.
  • Gestión de Sesión: Notificaciones y perfil de usuario.

2. Panel Izquierdo (Sidebar)

Este panel lateral tiene dos pestañas principales:

  • Biblioteca de Componentes: Contiene todos los elementos disponibles para añadir al diseño (Texto, Imágenes, Tablas, etc.).
  • Historial: Muestra una lista cronológica de los cambios guardados, permitiendo volver a versiones anteriores.

Historial de Cambios

3. Barra de Herramientas (Toolbar)

Justo encima del lienzo, permite alternar la forma en que ves el trabajo:

  • Diseñador Visual: La vista predeterminada para arrastrar y soltar.
  • Plantilla JSON: Vista del código subyacente (para usuarios avanzados).
  • Fuente de Datos: Define los datos de prueba para la previsualización.
  • Controles de Visibilidad: Botones para ocultar o mostrar los paneles laterales.

4. Panel Derecho (Properties)

Se divide en dos secciones según lo que tengas seleccionado:

  • Propiedades: Muestra los ajustes específicos (estilos, contenido, mapeos) del componente seleccionado en el lienzo.
  • Configuración (Page Properties): Aparece cuando no hay componentes seleccionados. Permite editar los metadatos de la plantilla (Nombre, Versión, Autor) y el formato del documento (A4, Carta, Orientación).

Propiedades de Página

5. El Lienzo (Canvas)

El área central donde diseñas tu reporte. Se divide en tres regiones:

  • Encabezado: Se repite en la parte superior de todas las páginas.
  • Contenido: El cuerpo principal del documento.
  • Pie de Página: Se repite en la parte inferior de todas las páginas.

[!TIP] Puedes ocultar los paneles laterales usando los botones Ocultar para tener un área de diseño más amplia en pantallas pequeñas.