Curso de OpenUI5

Entender el ciclo de vida de una aplicación OpenUI5 desde bootstrap hasta renderizado.

Revisar el papel del core, controles, librerías, módulos, componentes y recursos.

Diferenciar aplicación, componente reutilizable, control, vista, fragmento y modelo.

Analizar cómo UI5 gestiona IDs, dependencias, carga de módulos y recursos estáticos.

Comprender el patrón MVC en OpenUI5 y cómo evita mezclar lógica, vista y datos.

Revisar convenciones de carpetas, namespaces, nombres de archivos y configuración.

Identificar qué debe vivir en controlador, modelo, formatter, service, helper o componente.

Crear arquitectura base para una aplicación mantenible y escalable.

Evitar aplicaciones monolíticas donde toda la lógica queda en un único controlador.

Taller: analizar la estructura de una app UI5 y reorganizar responsabilidades.

Crear un proyecto OpenUI5 moderno con estructura clara y dependencias controladas.

Entender archivos clave: package.json, ui5.yaml, manifest.json, Component.js e index.html.

Configurar UI5 CLI para ejecutar, servir, construir y organizar recursos.

Gestionar dependencias de librerías UI5 y recursos propios.

Separar código fuente, test, mocks, recursos, estilos, i18n y documentación.

Configurar scripts npm para desarrollo, linting, testing, build y revisión.

Preparar entorno local con recarga rápida y depuración en navegador.

Resolver problemas de rutas, módulos, preload y configuración.

Evitar proyectos creados a mano sin tooling ni estructura reproducible.

Taller: crear proyecto OpenUI5 desde cero con UI5 CLI y estructura corporativa.

Configurar bootstrap de OpenUI5 con librerías, tema, idioma y compatibilidad.

Entender atributos del script bootstrap y cómo afectan a la aplicación.

Cargar librerías como sap.m, sap.ui.core, sap.ui.layout u otras necesarias.

Definir resource roots y namespaces correctamente.

Configurar async loading para mejorar rendimiento y evitar bloqueos.

Revisar diferencias entre ejecución local, CDN, servidor interno y build empaquetado.

Gestionar errores de carga de recursos, librerías o módulos.

Preparar configuración para entornos de desarrollo, pruebas y producción.

Evitar dependencias innecesarias que aumentan tamaño y tiempo de carga.

Taller: configurar bootstrap limpio y resolver errores típicos de carga.

Diseñar vistas XML orientadas a estructura visual y bindings declarativos.

Crear controladores con lógica de interacción, navegación y coordinación.

Conectar modelos a vistas sin acoplar datos de forma rígida.

Diferenciar lógica de presentación, lógica de negocio y lógica de acceso a datos.

Crear métodos de inicialización, eventos, handlers y funciones auxiliares.

Controlar el ciclo de vida de vistas y controladores.

Evitar controladores enormes con lógica duplicada.

Extraer lógica reutilizable a módulos, services, helpers y formatters.

Aplicar convenciones de naming para handlers y propiedades.

Taller: crear pantalla MVC completa con lista, detalle, eventos y modelo.

Construir vistas XML con controles, layouts, propiedades y bindings.

Usar namespaces XML para librerías y controles.

Crear interfaces legibles separando estructura, datos y comportamiento.

Controlar IDs, agregaciones, eventos y propiedades declarativas.

Diseñar vistas orientadas a mantenimiento y revisión por equipo.

Evitar XML excesivamente largo mediante fragments y componentes reutilizables.

Aplicar buenas prácticas de indentación, naming y organización.

Integrar controles responsivos de sap.m.

Crear vistas preparadas para internacionalización y accesibilidad.

Taller: construir vista XML empresarial con cabecera, filtros, tabla y acciones.

Revisar alternativas a XML Views y sus casos de uso.

Entender cuándo una vista JavaScript puede ser útil y cuándo complica mantenimiento.

Comparar legibilidad, tooling, separación de responsabilidades y reutilización.

Analizar impactos en testing, revisión de código y colaboración.

Crear pequeñas vistas programáticas cuando aportan valor.

Evitar generar interfaces completas por código sin necesidad.

Mantener consistencia de proyecto si se mezclan tipos de vista.

Documentar decisiones arquitectónicas sobre tipo de vista.

Revisar compatibilidad con fragments y controles reutilizables.

Taller: comparar una misma pantalla en XML y JavaScript para decidir estándar.

Usar controles fundamentales: Text, Label, Input, Button, Select, ComboBox, CheckBox y Switch.

Diseñar formularios simples con controles adecuados al tipo de dato.

Configurar propiedades, estados, eventos, tooltips y textos.

Trabajar con Page, App, Panel, Toolbar, Dialog, Popover y MessageBox.

Aplicar patrones de interacción consistentes para aplicaciones empresariales.

Evitar abuso de controles genéricos cuando existe un control más adecuado.

Diseñar acciones primarias, secundarias, destructivas y contextuales.

Usar estados visuales para error, warning, success, information y none.

Preparar controles para data binding e internacionalización.

Taller: crear formulario empresarial con validación visual y acciones.

Usar layouts adecuados: VBox, HBox, FlexBox, Grid, SimpleForm y ResponsiveGridLayout.

Diseñar pantallas que funcionen en desktop, tablet y móvil cuando aplique.

Controlar márgenes, densidad, alineación, agrupación y jerarquía visual.

Crear formularios empresariales legibles con secciones y grupos.

Gestionar páginas con cabecera, contenido, footer y acciones persistentes.

Evitar layouts rígidos que se rompen con textos largos o diferentes idiomas.

Aplicar criterios de usabilidad a tablas, filtros, formularios y diálogos.

Revisar comportamiento responsive de controles sap.m.

Crear vistas que mantengan consistencia visual entre módulos.

Taller: rediseñar una pantalla rígida para hacerla responsive y mantenible.

Entender Component.js como punto central de inicialización.

Configurar manifest.json con modelos, routing, i18n, recursos y metadata.

Registrar dependencias, librerías, dataSources y configuración de la app.

Inicializar modelos globales y recursos compartidos.

Separar configuración de código para facilitar mantenimiento.

Gestionar rootView, async, routing y recursos internacionales.

Evitar configuración dispersa en múltiples archivos sin criterio.

Crear componentes reutilizables cuando la aplicación crece.

Documentar configuración relevante para nuevos desarrolladores.

Taller: configurar manifest completo para aplicación empresarial.

Entender data binding como vínculo entre modelo y controles.

Aplicar property binding, aggregation binding y element binding.

Usar modelos JSON para datos locales, mocks y prototipos.

Vincular textos, valores, estados, visibilidad, habilitación y listas.

Usar binding paths absolutos y relativos correctamente.

Gestionar contextos de binding en listas y detalles.

Crear bindings declarativos legibles en XML Views.

Evitar manipulación manual del DOM o de controles cuando basta binding.

Depurar problemas de rutas, contextos y modelos no asignados.

Taller: crear pantalla con lista y detalle usando JSONModel y bindings.

Crear formatters para textos, fechas, importes, estados y valores calculados.

Usar expression binding cuando simplifica la vista sin crear lógica compleja.

Aplicar tipos de datos para formateo, parseo y validación.

Gestionar fechas, números, monedas, unidades y localización.

Encadenar bindings y estados visuales según reglas de negocio.

Evitar formatters con lógica de negocio pesada.

Centralizar formatters reutilizables por dominio funcional.

Gestionar valores nulos, vacíos, desconocidos o inconsistentes.

Depurar problemas de formato entre idiomas y regiones.

Taller: crear formatters corporativos para tabla de pedidos, estados y fechas.

Diferenciar JSONModel, ResourceModel, ODataModel y otros modelos disponibles.

Decidir qué modelo usar según origen, tipo, volumen y ciclo de vida de los datos.

Configurar modelos globales, modelos nombrados y modelos locales por vista.

Gestionar actualización de modelos, refresh, setProperty y cambios en datos.

Separar modelos de UI, modelos de datos de negocio y modelos de configuración.

Usar modelos para controlar busy states, filtros, selección y visibilidad.

Evitar modelos globales desordenados con datos de múltiples responsabilidades.

Crear patrón de ViewModel para estado de pantalla.

Gestionar errores de sincronización entre vista, modelo y backend.

Taller: diseñar estrategia de modelos para una app con lista, detalle y edición.

Configurar ResourceModel y archivos i18n.

Sustituir textos hardcodeados por claves internacionalizadas.

Diseñar claves claras, agrupadas y mantenibles.

Gestionar textos con parámetros dinámicos.

Preparar vistas, diálogos, mensajes, tooltips y validaciones para varios idiomas.

Controlar formatos de fecha, número, moneda y unidades según localización.

Evitar concatenar textos que luego no traducen correctamente.

Coordinar traducciones con equipos funcionales o herramientas externas.

Detectar textos sin internacionalizar.

Taller: internacionalizar una aplicación OpenUI5 con textos y mensajes parametrizados.

Configurar routing en manifest.json con routes, targets y patrones.

Crear navegación entre vistas con parámetros.

Gestionar rutas de lista, detalle, edición, creación y páginas no encontradas.

Leer parámetros de ruta en controladores.

Usar router y targets de forma mantenible.

Gestionar historial, navegación atrás y deep links.

Diseñar rutas semánticas y comprensibles.

Evitar navegación manual frágil sin router.

Controlar carga de vistas y datos al cambiar de ruta.

Taller: construir navegación completa entre lista, detalle, edición y error 404.

Diseñar patrón lista-detalle para datos maestros y procesos.

Crear páginas de lista con filtros, búsqueda, ordenación y selección.

Crear página detalle con secciones, acciones, estados y datos relacionados.

Gestionar navegación desde tabla a detalle usando routing.

Mantener estado de selección y contexto tras volver.

Preparar vistas para pantallas grandes y dispositivos más pequeños.

Aplicar patrones de trabajo típicos: consultar, crear, editar, borrar y aprobar.

Controlar carga diferida de datos relacionados.

Evitar detalles saturados sin jerarquía visual.

Taller: construir app master-detail para gestión de entidades corporativas.

Usar Table, List, ColumnListItem y controles relacionados.

Decidir entre tablas responsivas y tablas más densas según caso.

Configurar columnas, celdas, cabeceras, estados, acciones y selección.

Aplicar sorting, filtering, grouping y growing cuando proceda.

Gestionar grandes volúmenes de datos con carga progresiva y backend filtering.

Diseñar tablas legibles para usuarios de negocio.

Evitar cargar miles de registros en cliente sin necesidad.

Añadir acciones por fila, acciones masivas y navegación contextual.

Mostrar estados, importes, fechas y textos con formatters.

Taller: crear tabla empresarial con filtros, búsqueda, selección y acciones.

Crear formularios con SimpleForm, ResponsiveGridLayout y controles adecuados.

Gestionar campos obligatorios, tipos de dato, máscaras y restricciones.

Validar datos en cliente antes de enviar.

Mostrar errores, warnings, información y mensajes de éxito.

Integrar MessageManager cuando el escenario lo requiere.

Diseñar mensajes comprensibles para usuario funcional.

Evitar validar solo en frontend cuando el backend debe confirmar reglas críticas.

Gestionar estado dirty, cambios pendientes y confirmaciones de salida.

Crear flujo de creación y edición con feedback claro.

Taller: construir formulario de alta con validaciones y gestión de mensajes.

Crear dialogs para confirmaciones, edición rápida, selección y acciones puntuales.

Usar fragments XML para reutilizar partes de interfaz.

Cargar fragments de forma controlada desde controladores.

Gestionar lifecycle, IDs, modelos y eventos en fragments.

Crear componentes visuales reutilizables sin duplicar XML.

Evitar diálogos sobrecargados o difíciles de usar.

Diseñar confirmaciones para acciones destructivas o sensibles.

Gestionar cierre, cancelación, validación y limpieza de estado.

Organizar fragments por dominio funcional o componente.

Taller: crear diálogo reutilizable para búsqueda, selección o edición.

Conectar OpenUI5 con APIs REST usando fetch, módulos service o librerías controladas.

Diseñar capa de servicios para separar acceso a datos de controladores.

Gestionar autenticación, headers, errores, timeouts y respuestas vacías.

Transformar datos de backend a modelos consumibles por la vista.

Implementar estados busy, loading, empty, error y retry.

Evitar llamadas directas dispersas en controladores.

Centralizar gestión de errores y mensajes técnicos.

Trabajar con paginación, filtros y ordenación delegada al backend.

Crear mocks para desarrollo sin backend disponible.

Taller: consumir API REST, poblar tabla y gestionar errores de servicio.

Entender OData como protocolo habitual en aplicaciones empresariales y entornos SAP.

Diferenciar consumo OData V2 y V4 según servicios y compatibilidad del proyecto.

Configurar dataSources y ODataModel en manifest.

Leer entidades, colecciones, navegación y metadatos.

Aplicar filtros, ordenación, selección y expansión de datos.

Gestionar creación, edición, borrado y operaciones de negocio.

Controlar batch, cambios pendientes, submit y errores.

Mostrar mensajes de backend y validaciones de servicio.

Evitar lecturas excesivas o expand innecesarios.

Taller: construir pantalla CRUD con servicio OData y gestión de errores.

Crear mock server para desarrollar sin backend real.

Definir metadata, datos de prueba y respuestas simuladas.

Simular errores, retardos, validaciones y escenarios límite.

Desarrollar UI y pruebas funcionales con datos controlados.

Evitar bloquear frontend por dependencias de backend no disponible.

Mantener mocks alineados con contrato real del servicio.

Usar mocks para demos, tests y pruebas de regresión.

Separar configuración mock de configuración productiva.

Documentar datasets de prueba y casos cubiertos.

Taller: configurar mock server para servicio OData o API simulada.

Diseñar estrategia común de errores técnicos, funcionales, validación y permisos.

Mostrar mensajes útiles al usuario sin exponer detalles internos sensibles.

Gestionar busy indicators a nivel app, vista, tabla, formulario o acción concreta.

Crear estados empty, no data, no results, loading, error y success.

Centralizar tratamiento de errores de backend.

Registrar errores para diagnóstico técnico.

Evitar pantallas bloqueadas sin feedback.

Diseñar retry, cancelación y recuperación cuando sea posible.

Integrar errores con MessageManager y modelos de UI.

Taller: implementar gestión robusta de errores y estados en una pantalla crítica.

Entender límites de seguridad en frontend y qué debe validarse siempre en backend.

Evitar exposición de secretos, tokens, endpoints sensibles o datos internos en cliente.

Gestionar autenticación y autorización desde el contexto corporativo correspondiente.

Controlar visibilidad de acciones según permisos sin confiar solo en la UI.

Prevenir problemas habituales de XSS mediante controles y escapado adecuado.

Revisar CORS, cookies, headers, sesiones y comunicación segura.

Evitar almacenamiento inseguro de datos sensibles en localStorage o sessionStorage.

Gestionar logs frontend sin datos personales o confidenciales innecesarios.

Coordinar seguridad con backend, IAM, API gateway y arquitectura.

Taller: revisar una app UI5 desde perspectiva de seguridad frontend.

Aplicar criterios de accesibilidad en formularios, tablas, navegación y mensajes.

Usar labels, tooltips, textos descriptivos, estados y estructura semántica.

Revisar navegación por teclado y foco.

Diseñar errores comprensibles y asociados al campo correcto.

Controlar contraste, tamaño, densidad visual y legibilidad.

Evitar interfaces que dependen solo del color para transmitir información.

Preparar aplicaciones para usuarios con distintas necesidades.

Revisar accesibilidad de diálogos, tablas y acciones masivas.

Integrar validación de accesibilidad en QA.

Taller: mejorar accesibilidad y usabilidad de una pantalla OpenUI5.

Entender temas UI5 y cómo afectan a controles, densidad y experiencia visual.

Aplicar estilos propios con CSS de forma controlada.

Evitar sobrescrituras agresivas que rompen controles o futuras actualizaciones.

Usar clases CSS para ajustes específicos y mantenibles.

Adaptar aplicaciones a identidad visual corporativa cuando procede.

Revisar compact mode, cozy mode y densidad de interfaz.

Crear componentes visuales consistentes entre pantallas.

Gestionar imágenes, iconos, estados visuales y espaciado.

Evitar personalizaciones que perjudican accesibilidad o mantenimiento.

Taller: aplicar ajustes visuales corporativos sin romper el framework.

Crear módulos JavaScript reutilizables para lógica común.

Separar servicios de datos, helpers, formatters, validators y constantes.

Diseñar APIs internas claras entre módulos.

Evitar duplicar lógica de filtros, fechas, estados o mensajes.

Crear capa de acceso a backend desacoplada de controladores.

Organizar código por dominio funcional o responsabilidad.

Gestionar dependencias con sap.ui.define de forma correcta.

Evitar ciclos de dependencia y módulos excesivamente acoplados.

Documentar módulos compartidos y ejemplos de uso.

Taller: refactorizar una app con servicios, helpers y validators.

Entender el papel de QUnit en pruebas unitarias de módulos UI5.

Crear pruebas para formatters, helpers, validators y lógica de controlador aislable.

Preparar fixtures y datos de prueba.

Escribir asserts claros y casos límite.

Evitar pruebas frágiles acopladas a detalles visuales innecesarios.

Ejecutar tests localmente y desde scripts npm.

Integrar pruebas unitarias en el flujo de desarrollo.

Medir cobertura útil sin perseguir porcentajes vacíos.

Documentar qué lógica debe probarse de forma unitaria.

Taller: crear suite QUnit para formatters, validators y servicios.

Entender OPA5 como herramienta para probar flujos de usuario en UI5.

Diseñar journeys funcionales: abrir app, buscar, navegar, editar, guardar y validar mensajes.

Crear page objects para reducir duplicación en tests.

Esperar controles, estados y cambios de datos de forma estable.

Probar navegación, filtros, tablas, formularios y diálogos.

Usar mocks para pruebas reproducibles.

Evitar tests end-to-end frágiles por tiempos o selectores inestables.

Integrar OPA5 en estrategia de QA.

Generar evidencia de pruebas funcionales automatizadas.

Taller: crear prueba OPA5 para flujo master-detail con edición.

Definir estándares de código JavaScript, XML, CSS, nombres y estructura.

Usar linting y formateo cuando el proyecto lo permita.

Revisar pull requests con criterios de UI5, arquitectura, datos y seguridad.

Detectar controladores grandes, duplicidad, bindings confusos y XML difícil de mantener.

Crear checklist de revisión para aplicaciones OpenUI5.

Gestionar deuda técnica de frontend de forma visible.

Documentar decisiones arquitectónicas relevantes.

Evitar estilos personales incompatibles dentro del equipo.

Integrar validaciones en CI/CD.

Taller: auditar una app UI5 y generar plan de mejora de calidad.

Medir tiempos de carga, renderizado, consultas, bindings y navegación.

Optimizar carga de módulos y librerías.

Usar async loading y build adecuado.

Reducir llamadas innecesarias a backend.

Gestionar tablas grandes con paginación, growing y filtros en servidor.

Evitar formatters pesados ejecutados demasiadas veces.

Optimizar modelos, refresh y actualización de bindings.

Analizar impacto de controles complejos y vistas demasiado grandes.

Preparar preload y build para producción.

Taller: diagnosticar y optimizar una aplicación OpenUI5 lenta.

Ejecutar build de aplicación con UI5 CLI.

Entender preload, recursos optimizados y estructura de distribución.

Preparar artefactos para servidor web, portal interno, BTP, contenedor o entorno corporativo.

Configurar rutas relativas y recursos para despliegue real.

Separar configuración por entorno sin modificar código fuente.

Gestionar cache, versionado, invalidación y recursos estáticos.

Integrar build en pipeline CI/CD.

Validar aplicación desplegada con pruebas mínimas.

Resolver problemas comunes de rutas, MIME types, caché o dependencias.

Taller: preparar build productivo y estrategia de despliegue.

Entender escenarios habituales de OpenUI5 en ecosistemas SAP y no SAP.

Consumir servicios OData expuestos por backends empresariales.

Diseñar frontends para procesos, datos maestros, aprobaciones y consultas.

Integrar autenticación corporativa según arquitectura definida.

Considerar despliegue en portal, launchpad, servidor web o plataforma interna.

Gestionar diferencias entre OpenUI5 y SAPUI5 cuando el entorno lo requiere.

Coordinar contratos de servicio con equipos backend, ABAP, CAP o integración.

Preparar mocks y datos de prueba para desarrollo desacoplado.

Revisar restricciones de seguridad, red, CORS y proxies corporativos.

Taller: diseñar arquitectura de app UI5 conectada a servicios empresariales.

Crear flujo completo de consulta, alta, edición, borrado y detalle.

Gestionar estados de datos: nuevo, modificado, guardado, cancelado, borrado y error.

Validar formularios antes de enviar y gestionar errores de backend.

Implementar confirmaciones para acciones destructivas.

Controlar navegación si existen cambios pendientes.

Diseñar listas con filtros, ordenación, búsqueda y acciones contextuales.

Preparar mensajes de éxito, advertencia y error.

Añadir autorización visual de acciones según rol.

Crear pruebas unitarias y OPA5 para flujos críticos.

Taller: construir aplicación CRUD completa sobre mock u OData.

Diseñar pantallas para tareas, aprobaciones, estados y comentarios.

Modelar acciones de proceso: aprobar, rechazar, delegar, solicitar cambios o cerrar.

Mostrar historial, responsable, fecha, estado y próximos pasos.

Gestionar formularios con campos condicionales según etapa del proceso.

Integrar acciones con backend o motor de workflow.

Diseñar mensajes claros para usuario funcional.

Controlar permisos por rol, estado y acción.

Registrar evidencias de acción y respuesta.

Evitar interfaces donde el usuario no sabe qué está pendiente ni qué ocurrirá después.

Taller: crear pantalla de aprobación empresarial con estados y acciones.

Traducir requisitos funcionales en vistas, controles, modelos y flujos.

Crear wireframes sencillos antes de implementar pantallas complejas.

Alinear diseño con patrones de usuario empresarial.

Revisar textos, etiquetas, mensajes y ayudas contextuales.

Documentar decisiones de UX que afectan a procesos críticos.

Crear guías para pantallas repetidas: listas, detalles, formularios y diálogos.

Coordinar con analistas funcionales, negocio, QA y backend.

Evitar construir exactamente lo pedido si empeora la experiencia de usuario.

Validar prototipos con usuarios antes de cerrar arquitectura.

Taller: transformar un requisito funcional en diseño UI5 implementable.

Analizar aplicaciones UI5 existentes para detectar deuda técnica y riesgos.

Revisar versiones, dependencias, librerías, controles obsoletos y prácticas antiguas.

Planificar actualización de framework y tooling.

Migrar estructura manual hacia UI5 CLI cuando aporta valor.

Refactorizar controladores, vistas, models y servicios de forma gradual.

Crear pruebas antes de tocar funcionalidades críticas.

Documentar cambios y riesgos de migración.

Mantener compatibilidad con entornos corporativos.

Priorizar mejoras por impacto, riesgo y esfuerzo.

Taller: crear plan de modernización para una aplicación OpenUI5 heredada.

Diseñar aplicaciones UI5 grandes con módulos funcionales y responsabilidades claras.

Separar dominios, componentes, servicios, helpers, vistas y pruebas.

Crear patrones de comunicación entre componentes sin acoplamiento excesivo.

Gestionar estado de aplicación de forma controlada.

Diseñar convenciones para routing, modelos, i18n, errores y mensajes.

Preparar estructura para equipos paralelos.

Evitar dependencia de conocimiento tribal en pantallas críticas.

Crear documentación técnica para onboarding.

Revisar arquitectura con criterios de rendimiento, seguridad y mantenimiento.

Taller: diseñar arquitectura para una suite OpenUI5 multi-módulo.

Definir una aplicación empresarial OpenUI5 con lista, detalle, edición, filtros, navegación y consumo de datos.

Crear proyecto con UI5 CLI, estructura de carpetas, bootstrap, Component.js, manifest.json y configuración inicial.

Diseñar vistas XML, controladores, modelos, formatters, services, validators y recursos i18n.

Implementar routing entre lista, detalle, creación, edición y página de error.

Conectar datos mediante JSONModel, mock server, API REST u OData según el escenario elegido.

Crear tabla con búsqueda, filtros, ordenación, estados visuales y acciones contextuales.

Implementar formulario con validaciones, mensajes, estados de carga, errores de backend y confirmaciones.

Añadir pruebas QUnit y OPA5 para lógica crítica y flujo funcional principal.

Optimizar build, rendimiento, accesibilidad, estructura, documentación y preparación para despliegue.

Presentar la solución justificando arquitectura, patrones, datos, pruebas, seguridad, rendimiento y próximos pasos.