¡Descarga MEJORAR LAS INTERFACES DE USUARIO DE LAS APLICACIONES y más Apuntes en PDF de Programación de Bases de Datos solo en Docsity!
MODULO 7 MEJORAR LAS INTERFACES DE
USUARIO DE LAS APLICACIONES
Uso de VBCookbook en Oracle Visual Builder
VBCookbook es una colección de ejemplos y soluciones prácticas para implementar funcionalidades en Oracle Visual Builder. Aunque no sigue estrictamente los principios de Redwood , proporciona una guía útil para construir aplicaciones visuales utilizando recetas listas para usar.
Creación de una Aplicación Visual con VBCookbook
Pasos para crear una aplicación en Visual Builder usando VBCookbook:
- Crear una nueva aplicación visual en Oracle Visual Builder.
- Importar las recetas desde VBCookbook.
- Utilizar componentes y consultas predefinidas en la aplicación.
- Personalizar y optimizar la interfaz con Redwood y JET Components. Ventajas de usar VBCookbook: Acelera el desarrollo al reutilizar soluciones probadas. Facilita la implementación de consultas avanzadas Permite aprender buenas prácticas con ejemplos funcionales.
Uso de VBCookbook en Oracle Visual Builder
¿Cómo se usan las recetas de VBCookbook en Visual Builder? Son fragmentos de código o configuraciones listas para ser reutilizadas. Se pueden integrar en aplicaciones visuales para realizar consultas, gestionar datos o mejorar la UI. Ejemplo de Receta: Crear un filtro en una tabla con un campo de entrada (Input Text). Usar un RowKey como filtro en una consulta detalle. Cargar variables con datos seleccionados en una tabla. Beneficios de las recetas: Ahorra tiempo en el desarrollo. Mejora la calidad del código con soluciones optimizadas. Facilita la integración con fuentes de datos REST.
Uso de RowKey como Filtro en una Consulta Detalle
¿Qué es RowKey? Es el valor de clave primaria de la fila seleccionada en una tabla. Se usa como criterio de filtro para obtener detalles de un registro. Se almacena en una variable y se pasa como parámetro a un REST endpoint. Ejemplo: Un usuario selecciona un cliente en una tabla (Master). El PartyNumber del cliente se almacena en una variable. Se usa para filtrar los pedidos asociados a ese cliente en una segunda tabla (Detail). Beneficios de usar RowKey en consultas: Relación Maestro-Detalle fácil de implementar. Optimiza la carga de datos mostrando solo lo necesario. Funciona con variables para gestionar filtros dinámicos.
Población de Variables con Datos Seleccionados
(rowData)
¿Cómo llenar variables con datos de una fila seleccionada? Se puede capturar toda la información de una fila y almacenarla en una variable. Esto permite mostrar detalles en formularios o utilizar valores en otras consultas. Pasos para poblar variables con rowData: Crear un tipo de datos en Visual Builder. Hacer clic derecho sobre el tipo y seleccionar "Crear Variable". Enlazar la variable a la selección de la tabla.
Modificar Columnas y Encabezados en una Tabla
¿Cómo personalizar las columnas y encabezados de una tabla? Se pueden agregar, eliminar o modificar columnas según los datos que se deseen mostrar. Se puede cambiar el nombre del encabezado y la formato de los datos dentro de cada celda. Se permite aplicar estilos y personalizar el diseño con clases CSS o JET Styles. Pasos para modificar columnas y encabezados:
- Seleccionar la tabla en la vista de diseño de Visual Builder.
- En la pestaña Propiedades , acceder a la configuración de columnas.
- Modificar el nombre del encabezado o asignar un alias si los datos provienen de un REST endpoint.
- Ajustar el tipo de dato (texto, número, imagen, fecha, etc.).
- Aplicar formato condicional para resaltar valores específicos. Ejemplo: Una columna de estado puede mostrar colores diferentes según el valor (Aprobado, Pendiente, Rechazado). Se puede agregar una columna calculada para mostrar un total basado en otros valores de la fila.
Deseleccionar Filas en una Tabla
¿Cómo deseleccionar filas en una tabla mediante propiedades del componente?
Oracle Visual Builder permite controlar la selección de filas mediante variables y eventos. Se puede agregar un botón que deseleccione filas al hacer clic. Método 1: Usando propiedades del componente
- En la tabla, establecer la propiedad selectionMode en " none ".
- Configurar una variable para manejar la selección de filas.
- Limpiar la variable cuando se desee deseleccionar una fila. Método 2: Usando un Action Chain 1. Agregar un botón con un evento de clic.
- Enlazar el botón a un Action Chain que borre la selección.
- Ejecutar un evento fireDataProviderEvent para actualizar la tabla. Beneficio: Permite mayor control sobre la interacción del usuario con la tabla. Evita que queden filas seleccionadas cuando no deberían estarlo.
Disparar un Evento para Refrescar un Proveedor de
Datos (SDP)
¿Cómo refrescar los datos de una tabla cuando cambia la fuente? Cuando se actualiza la fuente de datos, es necesario refrescar el Service Data Provider (SDP) para reflejar los cambios. Se usa el evento fireDataProviderEvent en un Action Chain. Pasos para refrescar los datos automáticamente:
1. Crear un Action Chain que incluya un evento fireDataProviderEvent.
- Configurar el Data Provider (SDP) de la tabla como objetivo del evento.
Una lista desplegable de productos puede mostrar Código - Descripción en la etiqueta, pero almacenar solo el código como valor.
Uso de Listas de Selección en Cascada (Cascading
LOVs)
¿Qué son las listas de selección en cascada? Son listas dependientes donde la selección en la primera lista filtra los valores de la segunda. Ejemplo: Un usuario selecciona un país y la segunda lista solo muestra ciudades de ese país. Pasos para configurar listas de selección en cascada: Crear dos listas de selección en la interfaz (ejemplo: País y Ciudad). Enlazar la primera lista a una fuente de datos de países. Crear una variable para almacenar la selección del usuario en la primera lista. Configurar la segunda lista para filtrar ciudades en base a la selección del país. Refrescar la segunda lista cuando cambie el valor de la primera. Beneficio: Mejora la experiencia del usuario mostrando solo opciones relevantes. Reduce la cantidad de datos cargados en la aplicación.
Parámetros de Prueba en Endpoints REST: ¿Qué
significan y cómo se usan?
¿Qué son los Query Params en una API REST? Son valores opcionales agregados a la URL de un endpoint para filtrar o modificar la respuesta. Ejemplo: Sin parámetros: https://api.empresa.com/clientes Con parámetros: https://api.empresa.com/clientes?pais=Mexico&activo=true Esto devuelve solo los clientes de México que están activos. ¿Cómo usar Query Params en Visual Builder?
- Enlazar un campo de entrada (Input Text ) o un filtro de selección a una variable.
- Pasar esa variable como parámetro en la llamada REST.
- Refrescar la consulta cuando la variable cambie de valor. Ejemplo : Un usuario escribe un nombre de cliente y la API devuelve solo los registros que coincidan.
Resumen y Beneficios Modificar columnas y encabezados permite personalizar tablas según las necesidades del usuario. El evento fireDataProviderEvent refresca automáticamente los datos de una tabla. Las listas de selección en cascada filtran valores de manera dinámica. Los Query Params permiten personalizar las consultas a servicios REST. Se pueden mostrar u ocultar campos de manera selectiva según la lógica del negocio.
Configuración de Campos, Navegación y Uso
de JavaScript en Oracle Visual Builder
Oracle Visual Builder permite habilitar campos selectivamente, manejar la navegación de botones y personalizar la funcionalidad con JavaScript. También facilita la gestión de archivos de recursos y la integración con bibliotecas de terceros.
Habilitar un Campo de Forma Selectiva
¿Cómo habilitar o deshabilitar un campo según una condición? Se puede controlar la propiedad disabled del campo usando una expresión condicional o una variable de estado.
Esto permite que los campos solo sean editables cuando se cumplan ciertas condiciones. Ejemplo: Un campo " Comentarios " debe estar habilitado solo cuando el estado es " Rechazado ". Pasos para habilitar un campo de forma condicional:
- Crear una variable llamada estado que almacene el valor seleccionado.
- Enlazar la propiedad disabled del campo a la expresión: [[ $variables.estado !== 'Rechazado' ]]
- Si el estado cambia a " Rechazado ", el campo se habilita automáticamente. Beneficio : Mejora la experiencia del usuario al evitar la edición de campos innecesarios. Evita errores en la captura de datos.
Manejar la Navegación con Botones
¿Cómo manejar la navegación entre páginas usando botones? Se pueden usar Action Chains para ejecutar la navegación cuando un usuario presiona un botón. También se pueden validar condiciones antes de permitir la navegación. Ejemplo: Un botón "Siguiente " solo debe estar activo si un campo obligatorio ha sido llenado.
Uso de JavaScript en Visual Builder
¿Cómo agregar una función JavaScript personalizada? Visual Builder permite definir funciones personalizadas en JavaScript para extender la funcionalidad de la aplicación. ¿Dónde se puede escribir código JavaScript?
- A nivel de aplicación.
- Dentro de una página o flujo.
- En fragmentos de UI específicos. Pasos para crear una función JavaScript:
- Abrir el Editor de Código en la pestaña JavaScript.
- Escribir una función personalizada , por ejemplo: function calcularDescuento(precio, porcentaje) { return precio - (precio * porcentaje / 100 ); }
- Llamar la función desde un Action Chain o un evento de componente. Beneficio : Permite agregar lógica avanzada sin modificar el diseño visual. Facilita el mantenimiento del código y la reutilización de funciones.
Integración con Bibliotecas de JavaScript de Terceros
¿Cómo usar librerías externas en Visual Builder? Se pueden incluir bibliotecas JavaScript externas para ampliar las capacidades de la aplicación. Ejemplos: Lodash, Moment.js, Chart.js para manipulación de datos y gráficos. Pasos para incluir una biblioteca de terceros:
- Descargar el archivo .js de la biblioteca.
- Agregarlo en la sección Resources de Visual Builder.
- Incluir el script en el JavaScript Editor y llamar las funciones necesarias. Ejemplo : Usar Moment.js para formatear fechas en Visual Builder: var fechaFormateada = moment().format('DD/MM/YYYY'); console.log(fechaFormateada); Beneficio: Permite utilizar herramientas avanzadas sin desarrollar código desde cero. Mejora la capacidad de personalización y rendimiento de la aplicación.
Resumen y Beneficios Habilitar campos de manera selectiva mejora la experiencia del usuario. La navegación con validaciones evita errores en los flujos de trabajo. Los archivos de recursos optimizan la reutilización de información. JavaScript permite personalizar y extender la funcionalidad de la aplicación. Las bibliotecas externas agregan capacidades avanzadas a Visual Builder. El depurador y la consola facilitan la solución de errores en el código.
Funciones Avanzadas en Oracle Visual
Builder
Oracle Visual Builder permite mejorar la experiencia de usuario en aplicaciones móviles y web mediante gestos táctiles, traducciones, auditorías y opciones de vista previa y compartición.
Agregar Gestos de Deslizamiento (Swipe) en
Aplicaciones Móviles
¿Qué es un gesto de deslizamiento? Es una acción táctil donde el usuario desliza un dedo en la pantalla para realizar una acción, como navegar entre páginas o eliminar un elemento.
En Visual Builder, se usa en componentes como Tile List para activar un Action Chain automáticamente. Pasos para configurar Swipe Motion en una Tile List:
- Agregar un Tile List en la página.
- En la pestaña de Propiedades , activar la opción Swipe Tile is Default.
- Crear un Action Chain para manejar el evento de deslizamiento.
- Asociar el Action Chain a la acción de swipe, por ejemplo, para navegar a otra página o eliminar un registro. Beneficio: Mejora la usabilidad en dispositivos móviles. Agiliza acciones comunes con gestos intuitivos.
Trabajar con Traducciones en Visual Builder
¿Cómo funciona la traducción en Visual Builder? Las aplicaciones pueden admitir múltiples idiomas mediante archivos de recursos de traducción. Se almacenan en formato JSON dentro del proyecto. Pasos para agregar traducciones:
- Acceder al menú Settings > Translations.
- Crear un archivo de traducción en formato JSON.
- Definir claves de texto y sus respectivas traducciones. { "app.title" : "Mi Aplicación",
