¡Descarga MODULO 5 IMPLEMENTAR EL MANEJO DE EVENTOS Y CADENAS DE ACCIONES y más Apuntes en PDF de Programación de Bases de Datos solo en Docsity!
MODULO 5 IMPLEMENTAR EL MANEJO DE
EVENTOS Y CADENAS DE ACCIONES
Anatomía de las Aplicaciones App UI en
Oracle Visual Builder Studio
En este documento aprenderás sobre la estructura de las aplicaciones en Oracle Visual Builder Studio (VBS), enfocándonos en: Componentes de la interfaz de usuario y eventos. Variables y tipos en App UI. Encadenamiento de acciones (Action Chains). Tipos de eventos y escuchadores (Listeners).
1. Anatomía de las Aplicaciones App UI Una aplicación en App U I se compone de elementos clave que trabajan juntos para manejar datos y lógica empresarial. Componentes de la Interfaz de Usuario (UI Components) Los componentes de UI son los elementos visuales que aparecen en la aplicación y que pueden: Mostrar datos en tablas, listas, formularios, etc. Capturar entradas del usuario mediante botones, cuadros de texto, selectores, etc. Disparar eventos para ejecutar acciones en la aplicación. Datos y Fuentes de Datos (Data Sources) Las aplicaciones pueden enviar y recibir datos desde diferentes fuentes, tales como: Fusion Applications (FA). APIs externas expuestas como servicios REST. Bases de datos u otros servicios conectados. Eventos y Encadenamiento de Acciones (Action Chains) Los eventos pueden ser generados por los componentes de UI y desencadenan acciones automáticas en la aplicación.
2. Variables y Tipos en App UI ¿Qué son las Variables? Las variables son unidades de almacenamiento de información que: Guardan estados del negocio. Se pueden enlazar a componentes de UI. Pueden almacenar valores estáticos o dinámicos. Ejemplo de Creación de una Variable en JSON { "id": "nombreCliente", "type": "string",
Ejemplo de Variable Estructurada en JSON { "id": "cliente", "type": "object", "properties": { "nombre": { "type": "string" }, "edad": { "type": "number" } } } Esta variable almacena información estructurada sobre un cliente. Ámbito de las Variables en App UI Cada variable se define dentro de un ámbito específico : Tipo de Variable Descripción Ejemplo Primitivo Número, cadena de texto, booleano string, number, boolean Objeto Conjunto de propiedades estructuradas {nombre: "Juan", edad: 30} Arreglo Lista de valores del mismo tipo [{id:1, nombre:"Producto A"}, {id:2, nombre:"Producto B"}]
Ámbito Descripción Aplicación ($application) Variables accesibles en toda la App UI Global ($global) Variables accesibles en todas las aplicaciones de Oracle Cloud Flujo ($flow) Variables disponibles dentro de un flujo específico Página ($page) Variables limitadas a una sola página Fragmento ($fragment) Variables exclusivas de un fragmento Cadena de Acciones ($chain) Variables temporales usadas en Action Chains Ejemplo de Uso de una Variable de Página { "name": "precioProducto", "scope": "page", "type": "number", "defaultValue": 100 } precioProducto solo puede ser utilizada en la página donde fue definida.
]
Este código registra un mensaje cada vez que el valor de una variable cambia.
3. Encadenamiento de Acciones (Action Chains) ¿Qué son las Action Chains? Las Action Chains son secuencias de acciones que se ejecutan en respuesta a un evento. Ejemplo de Flujo en un Action Chain 1. Un usuario hace clic en un botón. 2. Se ejecuta una acción de REST API para obtener datos. 3. Los datos se asignan a una variable. 4. Se actualiza la interfaz de usuario con los nuevos datos. Ejemplo de un Action Chain en JSON { " chain ": [ { " type ": " callRest ", " endpoint ": " /api/clientes ",
" assignTo ": "$page.variables.listaClientes " }, { " type ": " refresh ", " target ": " listaClientes " } ] } Este Action Chain obtiene datos de un API y actualiza la UI.
4. Tipos de Eventos y Listeners Los eventos pueden generarse en diferentes situaciones: Cuando un usuario interactúa con un componente ( clic, cambio de valor, envío de formulario ). Cuando se recibe una respuesta de un servicio REST. Cuando una variable cambia de valor. Enlazar Variables a Componentes Símbolo Modo Uso {{}} Lectura y escritura Permite actualizar el valor de la variable desde la UI [[ ]] Solo lectura Solo muestra el valor sin permitir cambios Ejemplo de Enlace de Variable a un Campo de Texto <oj-input-text value="{{ $page.variables.nombreCliente }}"></oj-input-text> Si el usuario escribe un nuevo nombre, la variable nombreCliente se actualizará automáticamente.
Tipos de Service Data Provider (SDP) y
Variables en Oracle Visual Builder Studio
En este documento aprenderás sobre los diferentes tipos de proveedores de datos (Data Providers) y su uso en Oracle Visual Builder Studio (VBS), incluyendo:
" type ": "ServiceDataProvider", " items ": [ { " id ": "number", " nombre ": "string", " precio ": "number" } ] } Este SDP se puede enlazar a una tabla en la interfaz de usuario para mostrar los productos.
2. Tipos de Data Providers en VBS
VBS incluye varios tipos de proveedores de datos para manejar diferentes escenarios: Tipo de Data Provider Descripción Service Data Provider (SDP) Se usa para consumir datos de un servicio REST. No almacena datos, pero permite filtrado, ordenamiento y paginación. Array Data Provider (ADP) Se usa para manejar arreglos de datos locales en la aplicación. Multi Service Data Provider Se usa cuando se necesitan combinar múltiples fuentes de datos en una sola variable. Buffering Data Provider Se usa para almacenar temporalmente cambios en los datos antes de enviarlos a la fuente de datos. Diferencias entre SDP y ADP: Característica SDP ADP Fuente de Datos REST API Arreglo local Soporta Filtrado Sí Sí
Soporta Paginación Sí No Permite Guardar Datos No Sí Usa SDP cuando los datos provienen de un servicio REST. Usa ADP cuando los datos ya están disponibles en un arreglo local.
3. Uso del Array Data Provider (ADP)
El Array Data Provider (ADP ) es útil cuando se manejan listas de datos locales en la aplicación. Ejemplo de un ADP en JSON { "id": "clientesADP", "type": "ArrayDataProvider", "items": [ { "id": 1 , "nombre": "Ana" }, { "id": 2 , "nombre": "Carlos" } ] } Este ADP se puede utilizar en una tabla o lista dentro de la interfaz de usuario. VBS Mapea Automáticamente una Colección de REST a un ADP
5. Creación de Tipos y Variables Personalizadas
Los tipos personalizados permiten definir estructuras de datos específicas para la aplicación. Creación de Tipos desde Código Puedes definir tipos personalizados en JavaScript o TypeScript dentro de VBS. Ejemplo de Tipo en Código { "id": "Cliente", "type": "object", "properties": { "id": { "type": "number" }, "nombre": { "type": "string" }, "edad": { "type": "number" } } } Este tipo se puede reutilizar en diferentes variables dentro de la aplicación.
6. Crear Tipos desde Endpoints
VBS permite generar tipos automáticamente a partir de la estructura de los datos devueltos por una API REST. Opciones al Crear Tipos desde Endpoints: Devuelve un arreglo de resultados (ejemplo: lista de productos). Devuelve un solo resultado (ejemplo: información de un cliente). Incluye los campos del objeto y los contenidos de los arreglos. Esta funcionalidad ahorra tiempo y evita errores en la definición de variables.
Conclusión Service Data Provider (SDP ) se usa para datos de servicios REST. Array Data Provider (ADP ) se usa para manejar arreglos locales. Buffering Data Provider permite almacenar cambios antes de enviarlos al servidor. Se pueden crear tipos personalizados y compartir variables entre extensiones.
Action Chains en Oracle Visual Builder Studio
(VBS)
Un Action Chain es una secuencia de acciones que se ejecutan en respuesta a un evento dentro de la interfaz de usuario (UI). Se activan siempre a partir de eventos. Se ensamblan a partir de acciones predefinidas en VBS. Pueden ejecutarse múltiples action chains en paralelo. Tienen su propio contexto de ejecución, representado por el objeto $chain. Un Action Chain puede llamar a otro Action Chain. Ejemplo de eventos que activan un Action Chain: Un usuario hace clic en un botón. Se actualiza el valor de un campo. Se recibe una respuesta de un servicio REST.
1. Alcance de un Action Chain (Scope) Los Action Chains tienen un alcance (scope ) según dónde se definan: Tipo de Action Chain Dónde se define Dónde se puede llamar App UI Action Chain A nivel de la aplicación Desde cualquier parte de la aplicación Flow Action Chain Dentro de un flujo Desde cualquier página en el flujo Page Action Chain Dentro de una página Solo desde la página donde se define Fragment Action Chain Dentro de un fragmento Solo desde el fragmento donde se define Sugerencia : Usa Action Chains de nivel alto (como en App UI o Flow) cuando necesites compartir datos entre múltiples páginas o flujos. 2. Tipos de Action Chains: JavaScript vs. JSON Los Action Chains pueden escribirse en JavaScript o en JSON. Diferencias principales Característic a JavaScript Action Chains JSON Action Chains Definición Se usa código JavaScript para definir la lógica Se construyen visualmente en VBS Flexibilidad Mayor flexibilidad para lógica compleja Más fácil de usar para configuraciones estándar Facilidad de Requiere conocimientos de No requiere código,
If Else Ejecuta diferentes acciones según una condición lógica. Call Action Chain Llama a otro Action Chain desde el actual. Raise Event Dispara un evento en la aplicación. Navigation Navega a otra página dentro de la aplicación. Ejemplo de cómo agregar acciones: Arrastrar y soltar una acción sobre el lienzo del Action Chain. Soltar una acción sobre otra (se muestra una línea verde). Configurar las propiedades necesarias en el panel lateral.
4. Uso de Variables en Action Chains Un Action Chain puede acceder a variables definidas en diferentes niveles de la aplicación. Ejemplo de Variables en Action Chains Objeto Implícito Descripción $chain Representa el contexto del Action Chain en ejecución. $variables Accede a las variables definidas en el alcance actual. $event Contiene la información del evento que activó el Action Chain. Ejemplo de $chain en un Action Chain :
" id ": "miActionChain", " type ": "ActionChain", " actions ": [ { " type ": "AssignVariables", " variable ": "$chain.resultado", " value ": " 100 " } ] } En este ejemplo, se asigna el valor 100 a la variable $chain.resultado.
5. Uso de If-Else en Action Chains Un If-Else dentro de un Action Chain permite ejecutar acciones condicionales. Ejemplo de If-Else en un Action Chain: Si un usuario está autenticado, redirigirlo a la página principal. Si no está autenticado, mostrar un mensaje de error. { " id ": "verificarLogin",
