¡Descarga MODULO 4 DESARROLLAR FLUJOS, PÁGINAS Y FRAGMENTOS y más Apuntes en PDF de Programación de Bases de Datos solo en Docsity!
MODULO 4 DESARROLLAR FLUJOS, PÁGINAS Anatomía de las Aplicaciones App UI en Oracle Visual Builder Studio En arquitectura de cargan dinámicamente en una estructura central. Este documento cubre Oracle Visual Builder Studio (VBS), Single Page Application (SPA), Y FRAGMENTOS : las aplicaciones donde las páginas y flujos se App U I siguen una
1. Las aplicaciones en Visual Builder se componen de tres partes principales:^ ^ ^ ^ Anatomía de una Aplicación App UI^ Estructura de una aplicación App UI.Páginas, flujos y navegación.Introducción a los fragmentos.Uso de fragmentos con extensiones. 1. Las fuentes de datos pueden ser Los datos se exponen mediante peticiones y recibir respuestas. Datos (Data Sources) Oracle Fusion Applications (FA) → Oracle. Fuentes Externas → API REST endpoints REST : de terceros o bases de datos externas. Datos de aplicaciones en la nube de, permitiendo a la UI enviar
2. Los componentes visuales de la interfaz incluyen: Características de los componentes UI: Componentes de la UI (UI Components) BotonesTablas y listasFormularios y campos de entradaSe colocan en páginas. 3. Los eventos en la UI pueden activar procesos como^ ^ Eventos y Cadenas de Acción (Events & Action Chains) ^ Pueden disparar eventos y cadenas de acción (Action Chains).Se pueden conectar a servicios de datos para mostrar información en^ tiempo real.Navegación entre páginas. : Ejemplo: Un botón que guarda información puede activar una cadena de acción que:^ ^ 1. 2. 3.^ Llamadas a servicios REST.Actualización de datos en tiempo real.Valida los datos.Llama a una API para guardar la información.Muestra un mensaje de confirmación. 2. Trabajar con Páginas y Flujos L Ejemploas aplicaciones en VBS están organizadas en flujos y páginas: Páginas, Flujos y Navegación Páginas (Pages):Flujos (Flows): Un flujo de "Clientes" puede contener páginas como "Lista de Clientes" y: Contienen un conjunto de páginas relacionadas. Representan una pantalla en la aplicación. "Detalles del Cliente".
Ejemplo de Navegación: Un botón "Ver Detalles" en una lista de clientes puede llevar a la página de detalles con el ID del cliente seleccionado.^ ^ ^ Ir a otra página dentro del mismo flujo.Ir a otro flujo dentro de la aplicación.Volver a la página anterior.
Retorno en la Navegación Cuando el usuario navega entre páginas, es importante gestionar la opción de volver correctamente. Opciones de retorno en la navegación: Regresar a la página anteriorRegresar al flujo principalMantener el estado de la página información ingresada. en caso de cancelación. sin perder datos. para que el usuario no pierda
3. ¿Qué son los Fragmentos? Los fragmentos son componentes reutilizables dentro de Visual Builder Studio. Características Introducción a los Fragmentos Facilitan la reutilización de código.Permiten una mejor organización de la UI.Pueden recibir y enviar datos desde la página contenedora.: Ejemplo de uso: Un páginas como "Clientes" y "Proveedores". 4. Los fragmentos pueden extender la funcionalidad de una aplicación sin modificar el código original. (^) Uso de Fragmentos con Extensionesformulario de dirección puede ser un fragmento reutilizable en múltiples Cómo usar fragmentos en extensiones: Ejemplo: Un fragmento de " 1. 2. 3. 4. Crear un fragmentoDefinir los parámetrosIncluir el fragmentoProbar la integración correctamente. Resumen de Cliente con los componentes necesarios.en una página o flujo. para asegurar que los datos se transmiten de entrada y salida para comunicar datos." puede ser agregado a distintas secciones de la aplicación sin duplicar código.
2. Los subflujos permiten organizar mejor una aplicación dividiendo la lógica en pequeños módulos reutilizables. ¿Qué es un Subflujo? Es un conjunto de páginas agrupadas dentro de un flujo mayor. Ejemplo Un flujo " Incrustar un Subflujo dentro de una Página : Pedidos " puede tener un subflujo para " Detalles del Pedido " con múltiples páginas como: Cómo Incrustar un Subflujo dentro de una Página 1. 2. 3. Información general del pedido.Lista de productos comprados.Estado de envío.Crear un nuevo flujo en Visual Builder.Definir las páginas del subflujo.Agregar un contenedor de subflujo en la página principal. Consejo asistente de múltiples pasos.^ 4.^ Pasar parámetros al subflujo si es necesario.: Usa subflujos cuando varias páginas compartan lógica común, como un
3. Diagram View es una herramienta visual en Visual Builder que permite ver y gestionar la estructura de una aplicación App UI. ¿Qué es la Vista de Diagrama (Diagram View)? Es una representación gráfica de los flujos y páginas de la aplicación. Beneficios de Diagram View: Gestionar Flujos y Navegación con Diagram View Facilita la visualización de la navegación entre páginas. Cómo Usar Diagram View Consejo^ ^ 1. 2. 3. 4.^ Permite reorganizar flujos y conexiones de manera intuitiva.Muestra errores y advertencias en la configuración. AbrirExplorarAgregarHacer : Usa Diagram View para optimizar la navegación y corregir errores en la la Vista de Diagrama desde el menú de navegación. clic en un nodo para ver sus propiedades en el panel lateral. nuevas páginas o enlaces de navegación directamente.los flujos y páginas representados como nodos conectados. estructura de tu aplicación.
Si necesitas un puedes crearlo como un fragmento y reutilizarlo en cada página sin necesidad de duplicar código. formulario de contacto que se usa en varias páginas,
2. Pasos para Crear un Fragmento 1. 2. 3. 4. (^) Crear y Usar un Fragmento Ir al menú de Fragmentos en VBS.Seleccionar "Asignarle un nombre descriptivo (ej. "Elegir su propósito ( Página completaSección de página Nuevo FragmentoUsed For ): ". FormularioContacto ").
- Insertar un Fragmento en una Página Agregar los componentes necesarios (botones, formularios, texto, etc.).Configurar las propiedades y eventos del fragmento.Guardar y habilitar el fragmento para su uso en otras extensiones. 1. 2. 3.^ Elemento de listaAbrir la página donde se usará el fragmento.Buscar el fragmento en la paleta de componentes.Arrastrar y soltar el fragmento en la página. Ejemplo Si tienes un fragmento llamado " de tu aplicación sin necesidad de copiar y pegar código.^ 4.^ Configurar las propiedades del fragmento según sea necesario.: Header ", puedes insertarlo en todas las páginas
3. Un fragmento puede recibir datos de su contenedor (página principal) y también enviar datos de vuelta. Tipos de Intercambio de Datos: Cómo Pasar Datos a un Fragmento Pasar Datos entre un Fragmento y su Contenedor 1. 2. Entrada (Input)Salida (Output) → Datos que recibe el fragmento desde la página.→ Datos que envía el fragmento a la página. Ejemplo: Si el fragmento es un de usuario al fragmento para que lo muestre prellenado. { "fragmentProps^ 1.^ 2.^ Definir una variable en la página contenedora.Enlazar la variable con la propiedad del fragmento.": { formulario , la página contenedora puede enviar un nombre } Cómo Pasar Datos desde un Fragmento a la Página^ }^ "userName 1. 2. 3. CrearDispararConfigurar una variable dentro del fragmento.": " Juan Pérezun evento o actualizar una variable global. la página para escuchar los cambios del fragmento."
Definir Propiedades Descriptivas para los Slots del Fragmento Asignar nombres claros a las propiedades del fragmento. Usar descripciones detalladas para que otros desarrolladores entiendan su uso.
Ejemplo Si un fragmento tiene un campo " diseñador: { "fragmentProps "title "type": {:": "string": {", Título ", puedes definirlo así en la UI del } Con esto, al insertar el fragmento en una página, el Panel de Propiedades mostrará un campo editable llamado "Título del Fragmento".^ }^ }^ "^ "labeldescription": "Título del Fragmento": "Texto que aparecerá como título", "
Creación y Uso de Fragmentos en Oracle Visual Builder Studio Los fragmentos en Oracle Visual Builder Studio (VBS) permiten modularizar la aplicación dividiendo la interfaz de usuario en componentes reutilizables. En este documento aprenderás: CómoCómoCómo crearpasaremitir e insertar un fragmento en una página. datos entre un fragmento y su contenedor.eventos desde un fragmento hacia su contenedor.
Cómo diferir la renderización de un fragmento para mejorar el rendimiento.
1. Creación de un Fragmento
} Explicación "^ }fragmentProps^ "nombreUsuario La página contenedora pasa el nombre "Juan Pérez" al fragmento.El fragmento usa esa información para mostrar el nombre en la UI.: ": {": "Juan Pérez"
3. El fragmento puede enviar datos de vuelta a la página contenedora de dos maneras: Opción 1: Write Back to Container Si se activa esta opción, los cambios en el fragmento se reflejan automáticamente en la página contenedora sin necesidad de eventos adicionales. Enviar Datos del Fragmento al Contenedor Sintaxis Ejemplo de Vinculación con "Write Back to Container" { {{ variable }} → contenedor. [[ variable ]] → contenedor.: Solo lectura, no permite modificar la variable en elPermite que el fragmento modifique el valor en el "fragmentProps": {
} Si el usuario cambia su edad dentro del fragmento, el valor en la página principal también se actualizará.^ }"edadUsuario": "{{^ edad^ }}"
Opción 2: Emitir un Evento desde el Fragmento Si no se usa " cambios a la página contenedora. Pasos para Emitir un Evento desde el Fragmento 1. 2. 3. Crear un evento dentro del fragmento (ejemplo: eventoCambioEdad).Configurar el evento para enviar datos al contenedor.En la página contenedora, capturar el evento y ejecutar una acción. Write Back to Container ", se puede emitir un evento para notificar Ejemplo de Código JSON para Emitir un Evento { "events "eventoCambioEdad "parameters "nuevaEdad": { ": {": "number": { " }
{ } El fragmento se carga velocidad de carga de la aplicación. " }fragmentProps "lazyLoad": true": { solo cuando el usuario lo necesita , mejorando la
Comportamiento de los Fragmentos en Extensiones de Oracle Visual Builder Studio Los fragmentos en Oracle Visual Builder Studio (VBS) pueden ser reutilizados dentro de una extensión o a través de diferentes extensiones dentro del entorno. En este documento aprenderás: Cómo configurar fragmentos como referenciables o extensibles.Cómo agregar un fragmento desde una dependencia.Cómo administrar variables, eventos y componentes dinámicos dentro de
1. Los fragmentos pueden configurarse para que sean accesibles y reutilizables dentro de otras extensiones. ¿Cómo se Comportan los Fragmentos en Extensiones?^ un fragmento.
Variables, tipos, eventos y componentes dinámicos pueden ser configurados para: Al marcar un fragmento como disponible para otras extensiones, este se puede: SoloLectura y escrituraReferenciarExtender lectura para personalizar su comportamiento. en otras extensiones sin modificarlo.(read-only). (read/write). Ejemplo de Configuración de Variables en un Fragmento { "fragmentProps "clienteID " "typeaccess": "number": "": {read/write": {", " }^ },^ "^ }nombreCliente^ "^ "typeaccess": "string": "read-only",": { " } En este ejemplo, nombreCliente solo puede ser leído. clienteID es modificable en otras extensiones, mientras que
2. ¿Qué Son los Fragmentos Referenciables y Extensibles?
