Curso Odoo OWL 2026

Objetivo: Dominar los principios de OWL de manera aislada y pura antes de abordar la complejidad del cliente web de Odoo.

Sesión 1: Arquitectura, Componentes y Reactividad Básica

• Introducción y Filosofía de OWL: Contexto histórico y evolución desde el antiguo sistema de Widgets hacia OWL. Ventajas del Virtual DOM ligero de Odoo frente a frameworks genéricos (React, Vue).
• Estructura y Sintaxis de Plantillas QWeb en OWL: Definición de componentes (Component). Directivas esenciales: t-if, t-elif, t-else, t-foreach, t-as, t-key. Manejo declarativo de eventos del DOM mediante t-on-*.
• Estado Reactivo y Ciclo de Vida: Reactividad profunda con el hook useState. Métodos del ciclo de vida: setup, onWillStart, onMounted, onWillUpdateProps, onWillDestroy. Referencias directas al DOM con useRef y t-ref.
• Taller Práctico 1: Creación de un componente interactivo autónomo con lista filtrable y contadores reactivos en memoria.

Sesión 2: Props, Comunicación y Hooks Avanzados

• Validación y Contrato de Componentes (props): Tipado estricto, propiedades obligatorias y opcionales (type, optional). Componentes reutilizables y slots (t-slot).
• Comunicación entre Componentes: Comunicación descendente (props down) y notificación ascendente mediante eventos personalizados (dispatchEvent). Comunicación transversal mediante el Event Bus para componentes desacoplados.
• Inyección de Dependencias y Custom Hooks: Contexto ambiental de OWL (useSubEnv, env). Diseño e implementación de Custom Hooks para encapsular y reutilizar lógica reactiva.
•  Taller Práctico 2: Construcción de una interfaz maestro-detalle con sincronización reactiva entre listas y fichas mediante eventos y bus.

Objetivo: Integrar componentes OWL de forma nativa en el Web Client, creando acciones cliente, widgets de campo y consumiendo servicios corporativos.

Sesión 3: Arquitectura JavaScript de Odoo, Assets y Servicios

• Gestión de Assets en Odoo Moderno: El bundle web.assets_backend y la directiva @web/.... Carga de módulos ESM (ECMAScript Modules) y empaquetado.
• El Sistema de Registries: Concepto y funcionamiento de registry.category. Categorías clave: actions, services, fields, views.
• Inyección y Consumo de Servicios del Core: Acceso a servicios mediante el hook useService: orm, notification, dialog, action, router. Llamadas seguras al backend (métodos ORM: search_read, call, unlink).
• Creación de un Servicio Propio: Definición y registro de un servicio personalizado en el cliente web.
• Taller Práctico 3: Implementación de un servicio de telemetría / notificaciones contextuales para el usuario.

Sesión 4: Acciones Cliente (Client Actions) y Dashboards

• Anatomía de una Client Action: Declaración de la acción en XML (ir.actions.client) y asociación con el tag JS en el registry. Estructura: controlador JS, plantilla QWeb y estilos SCSS.
• Integración con el ControlPanel Nativo: Componente ControlPanel: botones de acción, migas de pan (breadcrumbs) y barra de búsqueda.
• Diseño de un Dashboard Interactivo: Carga de datos asíncrona mediante onWillStart. Refresco reactivo sin recargar la página.
• Taller Práctico 4: Desarrollo de un cuadro de mando operativo con tarjetas métricas interactivas y botones de acción que ejecutan flujos del backend.

Sesión 5: Componentes de Campo (Field Components / Widgets)

• Arquitectura de las Vistas de Formulario y Campos: El registro fields y la definición de un standardFieldProps. Lectura de valores y notificación de cambios al modelo (record.update).
• Construcción de un Campo Personalizado desde Cero: Manejo de estados (edición vs solo lectura). Soporte para parámetros configurables en la vista XML (options="{'...'}").
• Taller Práctico 5: Creación de un widget visual para formularios (selector avanzado de prioridad o escala interactiva) con persistencia directa en base de datos.

Sesión 6: Modales, Vistas y Técnicas de Parcheo (Patching)

• Diálogos Modales y Popovers: Uso del servicio dialog para lanzar modales estándar y modales construidos con componentes OWL personalizados.
• Mecanismo de Extensión (Patching en Odoo): Uso de la función utilitaria patch para extender componentes existentes del núcleo. Manejo de la función super en componentes parcheados. Buenas prácticas para evitar colisiones y asegurar compatibilidad entre versiones.
• Taller Práctico 6: Modificación limpia de la barra superior (NavBar) o inyección de un botón con diálogo modal interactivo en una vista estándar de Odoo.

Objetivo: Asegurar la mantenibilidad y calidad del código frontend mediante pruebas automatizadas y estándares de código de la comunidad. 

Sesión 7: Testing Frontend Moderno con Hoot

• Introducción al Framework Hoot: Contexto de Hoot en Odoo: reemplazo y evolución frente al modelo clásico de QUnit. Entorno de ejecución de pruebas frontend en el navegador.
• Anatomía de un Test en Hoot: Montaje de componentes en el DOM de pruebas mediante mount(). Simulación de eventos del usuario (clics, pulsaciones de teclas, foco) con asistentes de Hoot. Aserciones y verificación de estado.
• Mocks de Servicios y Backend: Simulación de respuestas ORM y llamadas RPC en entornos aislados.
• Taller Práctico 7: Creación de una batería completa de pruebas automáticas para el Dashboard y el widget desarrollados en los bloques anteriores.

Sesión 8: Optimización, Buenas Prácticas, OWL 3 y Proyecto Integrador

• Depuración y Rendimiento: Herramientas de depuración de OWL (OWL DevTools). Detección de fugas de memoria (memory leaks): limpieza correcta de listeners y temporizadores en onWillDestroy. Optimización de re-renderizados innecesarios.
• Organización del Código y Directrices de Calidad: Estructura de directorios recomendada en módulos Odoo. Convenciones de nombrado, tipado y directrices promovidas por AEOdoo y OCA.
• OWL 3: Cambios principales con respecto a OWL 2.
• Proyecto Integrador y Cierre: Revisión integradora de la solución completa generada a lo largo del curso. Turno abierto de resolución de consultas técnicas avanzadas.