PROGRAMACIÓN ODOO: ⌨️ Crear VISTA XML tipo Formulario y Lista | Interfaz usuario 🖼️ form & tree view

Cómo crear vistas XML para aplicaciones Odoo

Estructura de una aplicación en Odoo

• La estructura de una aplicación en Odoo consiste en una carpeta principal que contiene dos archivos Python y varias subcarpetas.

• Los archivos XML para las vistas se colocan dentro de las carpetas views y wizards.

• La carpeta data también contiene archivos XML, pero no son utilizados para crear vistas.

Arquitectura y componentes de Odoo

• La arquitectura de Odoo es similar al modelo MVC (Modelo-Vista-Controlador), donde el modelo representa la estructura de datos y el controlador la lógica del negocio.

• Los archivos XML apuntan a los modelos Python, definiendo campos, botones y pantallas que conforman la interfaz gráfica.

Definición y tipos de vistas

• Las vistas en Odoo se definen mediante archivos XML, que son interpretados como vistas HTML por el marco web del cliente.

• Es crucial referenciar cada vista en el archivo manifest, específicamente en la sección data, para que sea reconocida por Odoo.

• Un mismo modelo puede tener múltiples vistas; existen varios tipos: lista, formulario, pivote, kanban y búsqueda.

Ejemplos de diferentes tipos de vistas

• Vista tipo lista: Muestra registros con columnas organizadas; permite agregar widgets para mejorar la visualización.

• Vista tipo formulario: Permite ingresar información con etiquetas y valores; incluye pestañas para organizar mejor los datos.

• Vista tipo pivote: Presenta datos en forma tabular, facilitando cruces entre columnas y filas para análisis estadísticos.

• Vista tipo kanban: Organiza información visualmente mediante tarjetas; útil para presentaciones más atractivas al usuario.

Estructura básica de un archivo XML

• Para iniciar una vista en XML se debe comenzar con el tag <xml> seguido del encoding UTF8; todas las vistas deben incluir esto.

• Se utiliza el tag <odoo> donde se declara la vista usando <record>, especificando un ID único que sigue un formato estandarizado (View_nombreModelo_tipoVista).

Declaración de campos en una vista

• En el archivo XML se declaran los campos utilizando tags <field>, indicando su relación con el modelo correspondiente.

• Se presenta un código básico que muestra cómo estructurar una vista desde su declaración hasta los campos necesarios dentro del archivo XML.

Encabezado y botones en formularios

• Para declarar un formulario se usa el tag <form>, permitiendo incluir un título y botones dentro del encabezado (<header>).

Estructura de un Formulario en XML

Declaración del Widget de Barra de Estado

• Se utiliza el widget de barra de estado para mostrar el campo de estatus, declarando que es solo lectura.

• En la línea 12 se abre el formulario y se cierra en la línea 17; se incluye un botón con texto "texto de botón" en el header.

Organización del Contenido del Formulario

• Se puede utilizar la etiqueta Group para organizar los campos dentro del formulario, creando dos columnas.

• Cada campo y su respectiva etiqueta ocuparán dos columnas; al agregar más grupos, se pueden crear múltiples columnas con etiquetas correspondientes.

Estructura Completa del Formulario

• La agrupación principal divide el contenido en dos columnas, permitiendo una organización clara entre los campos.

• Se visualiza un espacio principal (Group) a la izquierda y otro a la derecha, cada uno conteniendo etiquetas y valores.

Uso del Elemento Notebook

Implementación de Pestañas

• El elemento Notebook organiza campos por tema mediante pestañas llamadas páginas.

• Para agregar una página se utiliza la etiqueta page, donde el atributo String define el título.

Contenido Dentro de las Páginas

• Cada página puede contener diferentes elementos; al hacer clic en una pestaña, se muestra su contenido específico.

Creación de Vistas en XML

Estructura Básica para Listas

• La vista inicia con xml encoding utf8, utilizando la estructura básica que incluye tags como record y fields.

• Para listas tipo tabla, se usa el tag tree, donde cada elemento representa una columna mediante etiquetas field.

Detalles sobre Campos y Modelos