Uso de Componentes en Oracle Visual Builder Studio (VBS)
Oracle Visual Builder Studio (VBS) permite construir aplicaciones web utilizando componentes de interfaz gráfica (UI) basados en Oracle JET (JavaScript Extension Toolkit) y el diseño Redwood.
Los componentes son elementos reutilizables que facilitan la creación de interfaces dinámicas, atractivas y flexibles.
¡Descarga DESARROLLAR INTERFACES DE USUARIO DE APLICACIONES CON COMPONENTES REDWOOD y más Apuntes en PDF de Programación de Bases de Datos solo en Docsity!
MODULO 6 DESARROLLAR INTERFACES DE
USUARIO DE APLICACIONES CON
COMPONENTES REDWOOD
Uso de Componentes en Oracle Visual Builder
Studio (VBS)
Oracle Visual Builder Studio (VBS ) permite construir aplicaciones web utilizando componentes de interfaz gráfica (UI ) basados en Oracle JET (JavaScript Extension Toolkit) y el diseño Redwood. Los componentes son elementos reutilizables que facilitan la creación de interfaces dinámicas, atractivas y flexibles.
1. Uso de Componentes en Visual Builder En Visual Builder , los componentes se organizan en una paleta de componentes y pueden ser arrastrados y configurados en las páginas. Ejemplos de Componentes ComunesCategoría Ejemplo deComponentesUso Entrada de datos Input Text, Checkbox, Radio Button Capturar información del usuario. Navegación Button, Link, Navigation Drawer Moverse entre páginas de la aplicación. Visualización de datos Table, List View, Chart, Gauge Mostrar información en diferentes formatos. Estructura de página Panel, Card, Accordion Organizar contenido dentro de la UI. Cómo agregar un componente a una página 1. Abre la página en el Page Designer. 2. Arrastra un componente desde la paleta de componentes. 3. Configura sus propiedades en el Properties Pane. 4. Vincula el componente a una fuente de datos o variable. Ejemplo : Agregar un botón y configurarlo para navegar a otra página. 2. Uso de Redwood Patterns para Construir Páginas
Redwood es el diseño estándar de Oracle para aplicaciones modernas y escalables. Se basa en los principios de simplicidad, accesibilidad y rendimiento. Características del Diseño Redwood Interfaz limpia y moderna. Componentes optimizados para dispositivos móviles. Compatibilidad con Oracle JET y Visual Builder. Cómo aplicar Redwood a una página en VBS
Selecciona una plantilla de página Redwood al crear una nueva página.
Usa componentes compatibles con Redwood ( por ejemplo, oj-buttonen lugar de HTML
Sigue los patrones de diseño Redwood para alineación, espaciado y colores. Ejemplo : Crear una página de detalles con tarjetas y gráficos. 3. Agregar Componentes a las Páginas Puedes agregar y personalizar componentes en una página de Visual Builder utilizando el Properties Pane. Opciones del Properties Pane Pestaña "All " → Muestra todas las propiedades del componente. Pestaña "Data " → Permite enlazar el componente con una fuente de datos. Pestaña "Events " → Define qué acciones se ejecutarán cuando el usuario interactúe con el componente. Ejemplo de Configuración de un Componente Un campo de entrada ( oj-input-text ) puede configurarse para: Tener un valor predeterminado. Mostrar un mensaje de validación si está vacío. Ejecutar un Action Chain cuando el usuario cambia su valor. Ejemplo : Configurar un oj-input-text para capturar el nombre del usuario y almacenarlo en una variable. 4. Visualización de Datos con Charts y Gauges
Basados en Web Components y HTML. Soportan eventos, métodos y propiedades personalizables. Se pueden extender mediante JavaScript. JET Cookbook: Biblioteca de Componentes JET Cookbook proporciona: Documentación detallada de cada componente. Ejemplos de uso y personalización. Código listo para copiar y pegar en Visual Builder. Ejemplo : Consultar el JET Cookbook para ver cómo personalizar una tabla con paginación.
7. Uso del Component Exchange ¿Qué es el Component Exchange? Es un repositorio de componentes compartidos en Visual Builder Studio , donde los desarrolladores pueden: Descargar componentes listos para usar. Compartir sus propios componentes con otros equipos. Ahorrar tiempo en el desarrollo. Cómo instalar componentes desde el Component Exchange 1. Abre el Component Exchange en Visual Builder. 2. Busca un componente específico. 3. Haz clic en Instalar. 4. Usa el componente en tus páginas. Ejemplo : Descargar un componente de oj-avatar para mostrar imágenes de usuario en una aplicación. 8. Contrato de Componentes: Propiedades, Eventos y Métodos Cada componente en Visual Builder tiene un contrato de 4 aspectos : Aspecto Descripción Properties (Propiedades) Definen valores como tamaño, color, visibilidad, etc. Events (Eventos) Permiten ejecutar acciones cuando ocurre una interacción. Child Slots (Espacios para hijos) Determinan qué contenido puede anidarse dentro del componente.
Methods (Métodos) Permiten ejecutar funciones específicas en el componente. Ejemplo : Configurar un botón con una propiedad de color y un evento ojAction que llame a un Action Chain. Conclusión Oracle Visual Builder Studio facilita la construcción de interfaces modernas y dinámicas mediante componentes JET y Redwood. Puedes usar componentes estáticos o dinámicos según tu necesidad. Los gráficos y gaug es permiten visualizar información de manera efectiva. El Component Exchange ahorra tiempo en el desarrollo. JET Cookbook es una referencia clave para explorar los componentes disponibles.
Uso de Patrones Redwood para Construir
Páginas en Oracle Visual Builder
¿Qué es Redwood?
Redwood es el diseño de experiencia de usuario (UX) de última generación de Oracle , enfocado en: Interfaces modernas y atractivas. Consistencia en todas las aplicaciones de Oracle. Accesibilidad y usabilidad optimizadas. Diseño responsivo para adaptarse a diferentes dispositivos. Internacionalización para soportar múltiples idiomas. Aplicaciones seguras y fáciles de actualizar. Principio clave: En Redwood, todo es un componente. Esto significa que cada parte de la interfaz está diseñada como un bloque reutilizable.
Los patrones de Redwood se organizan en diferentes categorías según su funcionalidad: Categoría Descripción Ejemplo de Componente Plantillas de Página Diseñadas para objetivos específicos del usuario. oj-sp-dashboard-landing-page Analíticas Visualización de datos en gráficos y tableros. oj-chart, oj-gauge Colecciones Listas, tablas y rejillas de datos. oj-table, oj-list-view Controles y Navegación Botones, menús y navegación. oj-button, oj-menu Formularios e Inputs Campos de entrada y validaciones. oj-input-text, oj-select-one Diseños y Estructuras Tarjetas, paneles, diálogos. oj-panel, oj-dialog Mensajes Notificaciones, banners e indicaciones de estado. oj-message, oj-notification Ejemplo : Para mostrar un tablero con datos, usaríamos la plantilla oj-sp-dashboard-grid junto con gráficos como oj-chart.
Creación de Páginas con Redwood en Visual Builder
Pasos para Crear una Nueva Página con Redwood
1. Seleccionar una plantilla de página
En Visual Builder , al crear una nueva página, se puede elegir una plantilla de Redwood. Ejemplo: oj-sp-dashboard-landing-page para una página de inicio de tablero.
2. Agregar componentes Redwood a la página Desde la paleta de componentes , arrastrar y soltar elementos como botones, gráficos o formularios. Configurar sus propiedades en el Properties Pane. 3. Vincular la página con datos y eventos Usar variables y fuentes de datos (Service Data Provider, Array Data Provider). Definir eventos y Action Chains para manejar la lógica. 4. Prueba y ajuste Verificar que la página sea responsiva y accesible. Ajustar colores, fuentes y distribución según las necesidades del usuario.
Ejemplo: Construcción de una Página Redwood con un
Tablero de Ventas
Escenario : Crear una página con un tablero de ventas , que muestre un gráfico de ventas, una tabla con detalles y botones de navegación. Seleccionar una plantilla de página En Visual Builder, elegir oj-sp-dashboard-landing-page. Agregar Componentes
Las plantillas de páginas con patrones comunes en Oracle Visual Builder permiten construir interfaces de usuario estructuradas y optimizadas para la experiencia del usuario en aplicaciones Redwood. Estas plantillas incluyen configuraciones predefinidas que facilitan la integración de contenido, acciones y eventos. Configuración General de una Página con un Patrón Común Al utilizar una plantilla basada en un patrón común, Visual Builder proporciona los siguientes elementos preconfigurados: Títulos y subtítulos → Para describir el propósito de la página. Acciones primarias y secundarias predefinidas → Botones y opciones de interacción. Eventos, Listeners y Action Chains → Para manejar la lógica de negocio y la interacción del usuario. Slots para otros componentes → Espacios donde se pueden insertar elementos adicionales como contenedores de datos ( Collection Container ). Tipos y variables → Definiciones preconfiguradas para almacenar datos dentro de la página. Bind If → Código que permite condicionar la visibilidad de los elementos en función de una variable o expresión lógica. Ejemplo : Una página de detalles de producto puede incluir un título con el nombre del producto, una tabla con especificaciones técnicas y botones para editar o eliminar el producto. Plantillas de Página y sus Funcionalidades Oracle Visual Builder ofrece varias plantillas predefinidas para distintos escenarios de uso.
1. Welcome y Overview Pages: Muestra Contenido y Permite Tomar Acción Títulos Acciones y eventos Ranuras para componentes
Objetivo : Facilitar la interacción del usuario al proporcionar un punto de entrada con información clave y acciones relevantes. Plantilla Función Características Principales Welcome Page Página de bienvenida con contenido principal Se usa para realizar acciones o búsquedas, pero no ambas. Contiene un slot predeterminado para contenido. Item Overview Page Vista detallada de un elemento Permite visualizar información sobre un ítem específico y realizar acciones sobre él. Facilita la navegación entre distintos ítems. General Overview Page Resumen general de información Muestra información no transaccional. Incluye un slot opcional para contenido adicional. Ejemplo : Una Welcome Page en una aplicación de recursos humanos podría permitir a los empleados ver sus tareas pendientes o acceder a una búsqueda rápida de información.
2. Smart Search: Búsqueda Inteligente, Resultados y Acciones Objetivo : Permitir al usuario buscar información de manera eficiente y tomar decisiones basadas en los resultados. Contiene un slot predeterminado para mostrar resultados de búsqueda, generalmente dentro de un Collection Container. Puede configurarse para incluir : Avatar → Mostrar la foto del usuario en contexto.
4. Horizontal Foldout: Mostrar Detalles de Forma Desplegable Objetivo : Mostrar información adicional sin sobrecargar la interfaz, utilizando un panel desplegable. Paneles dinámicos para mostrar detalles adicionales cuando el usuario los necesite. Ideal para formularios o tablas con información detallada. Ejemplo : En una aplicación de gestión de órdenes, un usuario puede hacer clic en un pedido para desplegar un panel con información detallada sobre el cliente y los productos comprados. 5. Panels: Contenido, Resumen y Acciones Adicionales
Objetivo : Organizar la información de manera clara y estructurada. Permiten dividir una página en secciones funcionales. Útiles para agrupar contenido en un tablero de control (Dashboard ). Ejemplo : En una página de análisis financiero, los Panels pueden organizar gráficos de ventas, métricas clave y reportes en una sola vista. Configuración de Action Chains en una Página con Patrón Un Action Chain es un conjunto de acciones que se ejecutan en respuesta a un evento. Ejemplo: Configurar una acción de "Guardar" en una página de edición Definir el evento que dispara la acción → Ejemplo: Clic en un botón "Guardar". Asignar el Action Chain → Un flujo que valida los datos, llama a un servicio REST para guardar cambios y muestra un mensaje de éxito. Encadenar acciones → Agregar validaciones, navegación y notificaciones según sea necesario. Tip : Los Action Chains pueden personalizarse según el recurso que se está editando. Por ejemplo, la lógica de guardado de un cliente puede ser diferente a la de un pedido. Consideraciones Finales sobre Patrones de Página en Visual Builder Las plantillas y patrones comunes permiten crear aplicaciones de forma rápida y eficiente. Los componentes preconfigurados ayudan a mantener la coherencia visual y funcional en la aplicación. Las acciones y eventos pueden personalizarse para adaptar el comportamiento de la página a las necesidades del negocio. Las aplicaciones construidas con estos patrones son más fáciles de mantener y actualizar.
Diseño Responsivo y Estilización en Plantillas
Redwood de Oracle Visual Builder
Soporte de Plantillas Redwood para Diseños
Responsivos en Móviles
Las aplicaciones construidas con Redwood Templates soportan automáticamente diseños optimizados para dispositivos móviles. Reordenamiento de elementos → Los componentes se reorganizan en función del ancho de la pantalla. Menús y navegación adaptable → Se convierten en menús de hamburguesa en pantallas pequeñas. Uso de contenedores fluidos → Asegura que el contenido se ajuste sin desbordarse fuera de la pantalla. Tipografía y botones escalables → Se ajustan para mejorar la accesibilidad y usabilidad. Ejemplo : Un formulario de inicio de sesión podría mostrar los campos en una línea horizontal en escritorio, pero en móvil los organizaría en una columna vertical para facilitar su uso con una mano.
Estilización para un Control más Preciso del Diseño
Aunque las plantillas Redwood son responsivas por defecto, Oracle Visual Builder permite un mayor control sobre la apariencia mediante estilos personalizados. Uso de CSS y Redwood Tokens → Para definir colores, fuentes y tamaños de manera consistente. Personalización de la disposición con clases de diseño → Se pueden usar oj-flex, oj-panel, oj-button para modificar la estructura. Adaptación con media queries → Permite aplicar estilos diferentes según el tamaño de pantalla. Personalización en el "Properties Pane" → Modificación de estilos sin necesidad de escribir código.
Ejemplo : Se puede definir un botón de acción principal con un color específico en la versión de escritorio y otro en móvil, asegurando que siempre sea visible y accesible.
Estilización de Componentes con JET Styles
Oracle JET (JavaScript Extension Toolkit) es el conjunto de componentes en el que está basado Visual Builder. Usa clases predefinidas para mantener la consistencia visual. Soporta Redwood Theme para alinearse con el diseño de Oracle Cloud. Permite la personalización mediante CSS variables y temas dinámicos. Compatible con diseño accesible para usuarios con necesidades especiales. Ejemplo : Un campo de entrada de texto (oj-input-text ) hereda los estilos de Redwood, pero puede personalizarse para cambiar su color, tamaño o comportamiento en distintas pantallas.
Ejemplo : Agregar un botón de búsqueda que al hacer clic dispare un Action Chain para consultar datos en un servicio REST. Consideraciones Finales Las plantillas Redwood son responsivas por naturaleza , adaptándose automáticamente a distintos dispositivos. Se pueden personalizar los estilos utilizando JET Styles y Redwood Themes para lograr un diseño más refinado. El uso de contenedores y componentes de diseño facilita la construcción de interfaces organizadas y flexibles. Agregar componentes a las páginas es un proceso visual e intuitivo en Visual Builder Studio.
Uso de la Paleta de Componentes en Oracle
Visual Builder
La paleta de componentes en Oracle Visual Builder es una herramienta que permite a los desarrolladores agregar elementos visuales a sus aplicaciones sin necesidad de escribir código. A través de esta paleta, se pueden insertar, organizar y enlazar componentes con datos para crear interfaces interactivas y funcionales.
Insertar un Componente de Interfaz Gráfica (GUI) en el
Panel de Estructura
Para agregar un componente en Visual Builder Studio, hay dos opciones principales: Opción 1: Menú contextual Hacer clic derecho en el lienzo (canvas) dentro del diseñador de páginas. Seleccionar " Insert Component " para agregar un nuevo componente. Opción 2: Vista de estructura (Structure View) Abrir el panel de estructura en la interfaz de diseño. Seleccionar el nodo donde se quiere agregar un componente. Usar la opción " Insert Component " disponible en el menú. Ventaja : Permite agregar componentes de manera rápida sin necesidad de arrastrarlos desde la paleta.
