¡Descarga CREAR COMPONENTES DINÁMICOS EN VISUAL BUILDER STUDIO y más Apuntes en PDF de Programación de Bases de Datos solo en Docsity!
MODULO 8 CREAR COMPONENTES
DINÁMICOS EN VISUAL BUILDER STUDIO
Componentes Dinámicos en Oracle Visual
Builder
¿Qué son los Componentes Dinámicos?
Los componentes dinámicos en Oracle Visual Builder permiten mostrar u ocultar elementos de la interfaz de usuario de forma automática según ciertas reglas definidas. Características Claves: Definen la lógica de visualización mediante conjuntos de reglas y reglas de negocio. No renderizan contenido estático, es decir, su estructura puede cambiar dinámicamente. Se pueden representar como Tablas, Formularios o Contenedores dependiendo del diseño requerido. Las reglas de visualización se pueden definir con: Conjuntos de reglas (Rule Sets): Se evalúan primero y tienen prioridad. Reglas de negocio (Business Rules): Aplican condiciones adicionales de visualización.
Trabajar con Diseños (Layouts) en una Extensión
El diseño de una página o sección en Visual Builder se compone de varios elementos clave: Elementos de un Layout:
- Objeto de Datos (Data Object): La fuente de datos que alimenta la UI.
- Campos y Configuraciones (Fields & Settings): Los atributos que se muestran en la UI.
- Conjuntos de Reglas (Rule Sets): Determinan cuándo y cómo mostrar ciertos campos o secciones.
- Reglas de Negocio (Business Rules): Agregan lógica adicional a la visualización de los componentes.
- Validaciones: Reglas que aseguran que los datos ingresados sean correctos.
- Plantillas (Templates): Estructuras reutilizables para mantener un diseño consistente. Ejemplo de Uso: En un formulario de registro, si el usuario selecciona "Empresa" como tipo de cliente, se muestran campos adicionales para Razón Social y RFC. Si elige "Particular", se ocultan esos campos y solo se muestra el campo Nombre Completo.
Explorar un Layout en Visual Builder
Para ver y modificar un diseño en Visual Builder, sigue estos pasos:
- Abrir la Extensión: Navegar hasta la sección de diseño en la aplicación.
- Seleccionar el Layout: Elegir la vista donde se desean agregar componentes dinámicos.
- Configurar Reglas de Visualización:
Creación y Configuración de Diseños
(Layouts) en Oracle Visual Builder
En Oracle Visual Builder, los layouts (diseños) definen la estructura visual de una aplicación y cómo los datos se presentan a los usuarios.
Tres Maneras de Crear un Diseño (Layout)
- Diseño Manual (Layout) Se crea desde cero y permite total personalización. Ideal cuando se necesita un diseño específico y altamente personalizado. Se pueden definir los campos, reglas y configuraciones de forma detallada.
- Diseño con Quick Start (Inicio Rápido) Opción más rápida para generar un diseño básico con estructura predefinida. Se pueden modificar posteriormente las propiedades del diseño. Útil para prototipos o interfaces estándar.
- Diseño Basado en Servicios (Service-Based Layout) Se genera a partir de un servicio de datos, como una tabla de base de datos o un endpoint REST. Se extraen automáticamente los campos y configuraciones desde el servicio. Facilita la creación de formularios y tablas que se actualizan con datos en tiempo real. Beneficio: Permite seleccionar el método más adecuado según las necesidades del proyecto, equilibrando rapidez y personalización.
Creación de un Conjunto de Reglas (Rule Set) en un
Diseño
Los Rule Sets (Conjuntos de Reglas) permiten definir condiciones dinámicas para mostrar u ocultar elementos dentro de un diseño. Pasos para Crear un Rule Set:
- Abrir el Editor de Diseño: Ir a la sección de Layouts dentro de Visual Builder.
- Agregar un Rule Set: Seleccionar la opción para crear un nuevo conjunto de reglas.
- Definir Condiciones: Seleccionar el campo que activará la regla. Definir la condición (Ejemplo: Si el campo "Tipo de Cliente" = "Empresa", mostrar campo "RFC").
- Aplicar la Regla al Diseño: Asignar la regla a los campos o secciones que deben verse afectados.
- Guardar y Probar el Rule Set: Validar que las condiciones se apliquen correctamente en la vista previa. Ejemplo de Uso:
Terminología Clave: Modelo de Datos vs Capa de
Presentación
En Oracle Visual Builder, la estructura de datos y la interfaz de usuario están separadas en dos capas principales:
- Modelo de Datos (Data Model) Define la estructura de los datos y cómo se almacenan. Incluye: Objetos de Datos (Data Objects): Representan tablas o entidades de negocio. Diseños (Layouts): Estructuras que organizan los datos dentro de la aplicación. Campos de Datos (Data Fields): Atributos individuales de cada objeto de datos. Ejemplo: Un objeto de datos "Clientes" puede tener campos como "Nombre", "Correo", "Teléfono".
- Capa de Presentación (Presentation Layer) Define cómo se muestran los datos en la interfaz de usuario. Incluye: Reglas de Negocio (Business Rules): Controlan la lógica de presentación y validación. Conjuntos de Reglas (Rule Sets): Agrupan múltiples reglas que determinan qué se muestra y cuándo. Reglas Individuales (Rules): Definen condiciones específicas de visualización.
Diseños Dinámicos (Dynamic Forms): Formularios que cambian en función de reglas o condiciones. Ejemplo: Un campo "Descuento" solo se muestra si el "Total de Compra" es mayor a 500. Un formulario de "Datos de Envío" aparece solo si el usuario selecciona "Entrega a Domicilio". Resumen y Beneficios Oracle Visual Builder permite crear diseños flexibles con datos dinámicos. Los layouts pueden crearse de forma manual, rápida o basada en servicios. Los conjuntos de reglas (Rule Sets) permiten personalizar la visualización de datos. Es posible modificar propiedades de los campos sin afectar la estructura original del objeto de datos. Separar el Modelo de Datos y la Capa de Presentación mejora la modularidad y mantenimiento de la aplicación.
Uso de Componentes Dinámicos en Oracle
Visual Builder
En Oracle Visual Builder, los componentes dinámicos permiten que la interfaz de usuario se adapte en tiempo real según condiciones específicas, como reglas de negocio, tamaño de pantalla o interacciones del usuario.
Agregar un Formulario Dinámico a una Página
Un formulario dinámico ajusta los campos mostrados en función de condiciones como permisos, valores previos o selección de datos. Pasos para Agregar un Formulario Dinámico:
- Agregar el Componente de Formulario Dinámico Desde la paleta de componentes, seleccionar "Dynamic Form" y colocarlo en la página.
- Vincular el Formulario a una Fuente de Datos Seleccionar un objeto de datos o un servicio REST. Configurar la estructura del formulario con los campos que se deben mostrar.
- Definir la Lógica Dinámica con Rule Sets Aplicar reglas para mostrar u ocultar campos según condiciones.
- Configurar Validaciones y Acciones Agregar validaciones (campos obligatorios, formatos, etc.). Definir eventos, como guardar datos al presionar un botón.
- Guardar y Probar el Formulario Dinámico Verificar que los campos cambian de acuerdo con la lógica definida. Ejemplo de Uso: Un formulario de "Registro de Clientes" muestra el campo "RFC" solo si el tipo de cliente es "Empresa".
Un formulario de "Solicitud de Permiso" habilita el campo "Motivo" solo si el usuario elige "Permiso Especial".
Controlar el Contenido Mostrado en Tiempo de Ejecución
con Rule Sets
Los Rule Sets permiten modificar dinámicamente qué elementos aparecen en la interfaz según condiciones predefinidas. Pasos para Crear un Rule Set:
- Crear una Nueva Regla Ir al editor de Rule Sets dentro del diseño. Hacer clic en "+ Rule" para agregar una nueva regla.
- Definir la Condición de la Regla Introducir un identificador único para la regla. Especificar una condición (Ejemplo: Usuario.Tipo == "Administrador").
- Asignar un Diseño a la Regla Seleccionar o crear un diseño específico para cuando la regla se active.
- Duplicar y Ajustar Reglas Según Necesidad Se pueden duplicar reglas y modificarlas para optimizar la configuración. Ejemplo de Uso: Un dashboard muestra métricas diferentes si el usuario es "Gerente" o "Empleado".
Crear un Rule Set Dinámico Basado en el Tamaño de
Pantalla
Es posible modificar el diseño de la aplicación en función del tamaño de la pantalla del usuario (desktop, tablet, móvil). Pasos para Crear un Rule Set Basado en Tamaño de Pantalla:
- Ir al Editor de Rule Sets
- Definir una Nueva Regla Basada en la Resolución de Pantalla if (window.innerWidth < 768) { aplicar diseño móvil } if (window.innerWidth > 1024) { aplicar diseño de escritorio }
- Crear Diseños Alternativos para Cada Condición Definir layouts optimizados para móvil y escritorio.
- Probar la Adaptabilidad de la Aplicación Usar la vista previa y ajustar la pantalla para verificar el comportamiento.
- Ejemplo de Uso: En dispositivos móviles, se muestra un diseño con tarjetas en lugar de una tabla. En pantallas grandes, se activan paneles adicionales con información extra.
Resumen y Beneficios Las tablas y formularios dinámicos permiten adaptar la interfaz en tiempo real. Los Rule Sets controlan qué se muestra en función de condiciones predefinidas. Es posible modificar la interfaz según el tamaño de pantalla, mejorando la experiencia de usuario. Oracle Visual Builder facilita la personalización sin necesidad de escribir código complejo.
Configuración Avanzada de Reglas y
Plantillas en Oracle Visual Builder
En Oracle Visual Builder, las reglas y plantillas permiten personalizar la apariencia y el comportamiento de los componentes dinámicos, adaptándolos a diferentes roles de usuario, contextos y necesidades específicas.
Crear una Condición de Regla Basada en el Rol del
Usuario
En muchas aplicaciones, la información visible y las acciones disponibles dependen del rol del usuario. Pasos para Configurar una Regla Basada en el Rol del Usuario:
- Acceder a la Configuración de Rule Sets
- Identificar el Contexto de la Regla Puede ser el estado de un pedido, la sección de la aplicación, el dispositivo utilizado, etc.
- Definir la Condición en Rule Sets Evaluar el contexto con una condición: if (Pedido.Estado == "Pendiente") { mostrarBotonCancelar(); } Usar variables globales o parámetros de URL para identificar el contexto.
- Aplicar Diferentes Diseños Según el Contexto Un usuario en móvil ve una interfaz simplificada. En una solicitud en estado "Aprobado", deshabilitar botones de edición. Ejemplo de Uso: En la página de detalle de órdenes, si el pedido está "Entregado", se oculta el botón "Cancelar". Si el usuario accede desde móvil, se muestra un diseño con menos elementos para mejorar la experiencia.
Previsualizar Diferentes Diseños
Antes de aplicar cambios en producción, es útil ver cómo se comportan los diferentes diseños según las reglas definidas. Métodos para Previsualizar Diseños:
- Usar la Vista Previa de Oracle Visual Builder
Hacer clic en "Preview" para abrir la aplicación en una nueva pestaña. Simular diferentes condiciones cambiando variables de prueba.
- Modificar Parámetros para Simular Roles o Contextos Desde la consola del navegador, cambiar valores de variables. Usar herramientas como localStorage o sessionStorage para simular diferentes estados.
- Utilizar la Opción "Toggle Rule Set" En el editor de reglas, activar/desactivar diferentes Rule Sets para ver cómo afectan el diseño. Ejemplo de Uso: Simular la interfaz como Administrador y luego como Usuario Estándar para comparar la diferencia. Ver cómo cambia la pantalla cuando el estado del pedido es "Pendiente" vs "Aprobado".
Uso de Plantillas de Campos y Formularios
Las plantillas de campos permiten definir cómo se renderizan los datos en formularios y otros componentes dinámicos. Controlar la Renderización de un Campo con Plantillas
- Editar un Diseño para Agrupar Campos En la configuración de un formulario, seleccionar un grupo de campos relacionados. Definir su apariencia en una plantilla.
- Aplicar Plantillas a un Campo Específico Seleccionar un campo en la configuración de diseño.
En la sección de plantillas, elegir la plantilla creada.
- Sobrescribir una Plantilla Existente (Opcional) Si se necesita un cambio puntual, se puede modificar una plantilla sin afectar el resto de la aplicación. Ejemplo de Uso: Un campo de "Número de Identificación" puede aplicar una máscara de formato automático (XXX-XXX-XXX). Un campo de "Dirección" puede incluir un autocompletado basado en Google Maps.
Iniciar una Cadena de Acciones desde un Campo
Una Action Chain permite ejecutar acciones cuando un usuario interactúa con un campo en un formulario. Pasos para Vincular un Campo con una Action Chain:
- Seleccionar el Campo en la Página Elegir el campo en el diseño donde se quiere activar la acción.
- Definir un Evento en el Campo Configurar un evento como onValueChanged o onBlur.
- Asignar una Action Chain al Evento En la pestaña de Eventos, seleccionar "Create New Action Chain". Agregar acciones como validaciones, llamadas a servicios REST o navegación. Ejemplo de Uso: Al cambiar el campo "Código Postal", la acción autocompleta la ciudad y el estado. Al seleccionar un "Tipo de Pago", se actualiza la lista de opciones disponibles en otro campo. Resumen y Beneficios Las reglas permiten personalizar la experiencia del usuario según su rol o el contexto de la aplicación.
