Contenido del curso

La capa de vista

La capa de vista describe la interfaz de usuario. Las vistas se definen mediante XML, que es utilizado por el marco de cliente web para generar vistas HTML con datos.

Tenemos elementos de men√ļ que pueden activar acciones que pueden hacer vistas. Por ejemplo, la opci√≥n de men√ļ¬†Usuarios¬†procesa una acci√≥n tambi√©n denominada¬†Usuarios, que a su vez genera una serie de vistas. Existen varios tipos de vista disponibles, como las vistas de lista y formulario y las opciones de filtro tambi√©n dispon√≠bles, est√°n definidas por un tipo particular de vista, la vista de b√ļsqueda.

Las directrices de desarrollo de Odoo establecen que los archivos XML que definen la interfaz de usuario deben colocarse dentro de un subdirectorio¬†views /¬†subdirectorio Comencemos a crear la interfaz de usuario para nuestra aplicaci√≥n de tareas pendientes. ###Agregar elementos de men√ļ

Ahora que tenemos un modelo para almacenar nuestros datos, debemos hacerlo disponible en la interfaz de usuario.

Para ello, debemos a√Īadir una opci√≥n de men√ļ para abrir el modelo¬†Car¬†para que pueda utilizarse.

Cree el archivo¬†views / menu.xml¬†para definir un elemento de men√ļ y la acci√≥n realizada por √©l:


<?xml version="1.0" encoding="UTF-8"?>
<odoo>
<menuitem
name="Reparación de Carros" id="car_diagnostic_root_menu" />
<record
model="ir.actions.act_window" id="action_car_car">
<field
name="name">Vehículos</field>
<field
name="res_model">car.car</field>
<field
name="view_mode">tree,form,kanban</field>
</record>


<menuitem
name="Vehículos" id="car_diagnostic_car_menu"
sequence="3" action="action_car_car" parent="car_diagnostic_root_menu"/>


</odoo>

La interfaz de usuario, incluidas las opciones y las acciones de men√ļ, se almacena en las tablas de la base de datos. El archivo XML es un archivo de datos utilizado para cargar esas definiciones en la base de datos cuando el m√≥dulo se instala o actualiza. El c√≥digo anterior es un archivo de datos Odoo, que describe dos registros para a√Īadir a Odoo:

  • El elemento¬†<act_window>¬†define una acci√≥n de ventana del lado del cliente que abrir√° el modelo¬†car.car¬†con las vistas de √°rbol y formulario habilitadas, en ese orden.
  • El¬†<menuitem>¬†define un elemento de men√ļ superior que llama a la acci√≥n¬†action_car_car, que se defini√≥ anteriormente.

Ambos elementos incluyen un atributo id. Este atributo id tambi√©n llamado¬†XML ID, es muy importante: se utiliza para identificar de forma √ļnica cada elemento de datos dentro del m√≥dulo, y puede ser utilizado por otros elementos para referenciarlo. En este caso, el elemento¬†<menuitem>¬†necesita hacer referencia a la acci√≥n para procesar, y necesita hacer uso de la <act_window> ID para eso.¬†

Nuestro m√≥dulo a√ļn no conoce el nuevo archivo de datos XML. Esto se hace agreg√°ndolo al atributo de datos en el archivo¬†__manifest__.py. Este, contiene la lista de archivos a cargar por el m√≥dulo. Agregue este atributo al diccionario del manifiesto:

'data': [
'views/menu.xml',
]

Ahora necesitamos actualizar el m√≥dulo de nuevo para que estos cambios surtan efecto. Vaya al men√ļ superior de¬†Car¬†y debe ver nuestra nueva opci√≥n de men√ļ disponible:


Aunque no hemos definido nuestra vista de interfaz de usuario, al hacer clic en el men√ļ¬†Reparaci√≥n de Carros¬†se abrir√° un formulario generado autom√°ticamente para nuestro modelo, lo que nos permitir√° agregar y editar registros.

Odoo es lo suficientemente agradable como para generarlos autom√°ticamente para que podamos empezar a trabajar con nuestro modelo de inmediato.

¡Hasta aquí todo bien! Vamos a mejorar nuestra interfaz de usuario ahora. Trata de hacer mejoras graduales como se muestra en las próximas secciones, haciendo actualizaciones de módulos frecuentes, y no tengas miedo de experimentar. También puedes intentar la opción de servidor --dev = all. Usándolo, las definiciones de vista se leen directamente desde los archivos XML para que tus cambios puedan estar inmediatamente disponibles para Odoo sin necesidad de una actualización de módulo.

Tip

Si una actualizaci√≥n falla debido a un error de XML, no te preocupe! Comenta las √ļltimas porciones XML editadas o elimina el archivo XML de¬†__manifest__.py¬†y repita la actualizaci√≥n. El servidor debe iniciarse correctamente. Ahora lee el mensaje de error en el registro del servidor con cuidado: debe se√Īalarte d√≥nde est√° el problema.

Odoo admite varios tipos de vistas, pero las tres m√°s importantes son:¬†tree¬†(generalmente llamado vistas de lista),¬†form¬†y¬†search views. Vamos a a√Īadir un ejemplo de cada uno a nuestro m√≥dulo.

Creando la vista de formulario

Todas las vistas se almacenan en la base de datos, en el modelo¬†ir.ui.view. Para a√Īadir una vista a un m√≥dulo, declaramos un elemento¬†<record>¬†que describe la vista en un archivo XML, que se va a cargar en la base de datos cuando se instala el m√≥dulo.

Agregue este nuevo archivo views / car_view.xml para definir nuestra vista de formulario:

<odoo>

<record
id="car_car_form" model="ir.ui.view">
<field
name="name">car.car.form</field>
<field
name="model">car.car</field>
<field
name="arch" type="xml">
<form
string="Vehículo">
<group>
<field
name="name" placeholder="Nombre de Vehículo"/>
<field
name="color" placeholder="Color "/>
</group>
</form>
</field>
</record>

</odoo>

Recuerde agregar este nuevo archivo a la clave de datos en el archivo de manifiesto, de lo contrario, nuestro módulo no lo sabrá y no se cargará.

Esto agregar√° un registro al modelo¬†ir.ui.view¬†con el identificador¬†car_car_form. La vista es para el modelo¬†car.car¬†y se denomina¬†Veh√≠culo. El nombre es solo para informaci√≥n; No tiene que ser √ļnico, pero debe permitir que uno identifique f√°cilmente a qu√© registro se refiere. De hecho, el nombre puede ser totalmente omitido, en ese caso, se generar√° autom√°ticamente a partir del nombre del modelo y el tipo de vista.

El atributo más importante es arch, y contiene la definición de la vista, resaltada en el código XML anterior. La etiqueta <form> define el tipo de vista y, en este caso, contiene 2 campos. 

Vistas del formulario de documento empresarial

La sección anterior proporcionó una vista de formulario básica, pero podemos hacer algunas mejoras en ella. Para los modelos de documentos, Odoo tiene un estilo de presentación que imita una página en papel. Este formulario contiene dos elementos: <header> para contener los botones de acción y <sheet> para contener los campos de datos.

Ahora podemos reemplazar el <form> básico definido en la sección anterior por éste:

<header>
<!-- Buttons go here-->
</header>
<sheet>
<group>
<field
name="name" placeholder="Nombre de Vehículo"/>
<field
name="color" placeholder="Color "/>
        <field name="active" placeholder="Activo?"/>
</group>
</sheet>

A√Īadiendo botones de acci√≥n

Los formularios pueden tener botones para realizar acciones. Estos botones pueden ejecutar acciones de ventana como abrir otro formulario o ejecutar funciones de Python definidas en el modelo.

Pueden colocarse en cualquier lugar dentro de un formulario, pero para los formularios de estilo de documento, el lugar recomendado para ellos es la sección <header>.

Para nuestra aplicación, agregaremos dos botones para ejecutar los métodos del modelo car.car:


<header>
<button
name="desactive_all" type="object" string="Desactivar Todos" class="oe_highlight" />
</header>

Los atributos básicos de un botón comprenden lo siguiente:

  • string¬†con el texto a mostrar en el bot√≥n
  • type¬†de acci√≥n que realiza
  • name¬†es el identificador de esa acci√≥n
  • class¬†es un atributo opcional para aplicar estilos CSS, como en HTML normal

Uso de grupos para organizar formularios

La etiqueta¬†<group>¬†te permite organizar el contenido del formulario. Colocar elementos¬†<group>¬†dentro de un elemento¬†<group>¬†crea un dise√Īo de dos columnas dentro del grupo externo. Se aconseja que los elementos del grupo tengan un atributo de nombre para que sea m√°s f√°cil para otros m√≥dulos extenderlos.

Usaremos esto para organizar mejor nuestro contenido. Cambiemos el contenido <sheet> de nuestro formulario para que coincida con este:

<sheet>
<group
name="group_top">
<group
name="group_left">
<field
name="name" placeholder="Nombre de Vehículo"/>
</group>
<group
name="group_right">
<field
name="color" placeholder="Color "/>
        <field name="active" placeholder="Activo?"/>
</group>
</group>
</sheet>

La vista de formulario completa

En este punto, nuestro formulario todo.task debe verse así:

<record id="car_car_form" model="ir.ui.view">
<field
name="name">car.car.form</field>
<field
name="model">car.car</field>
<field
name="arch" type="xml">
<form
string="Vehiculos">
<header>
<button
name="desactive_all" type="object" string="Desactivar Todos" class="oe_highlight" />
</header>
<sheet>
<group
name="group_top">
<group
name="group_left">
<field
name="name" placeholder="Nombre de Vehículo"/>
</group>
<group
name="group_right">
<field
name="color" placeholder="Color "/>
                    <field name="active" placeholder="Activo?"/>
</group>
</group>
</sheet>
</form>
</field>
</record>

Tip

Recuerda que para que los cambios se carguen en nuestra base de datos Odoo, se necesita una actualizaci√≥n del m√≥dulo. Para ver los cambios en el cliente web, el formulario debe ser recargado: haz clic de nuevo en la opci√≥n de men√ļ que lo abre o vuelve a cargar la p√°gina del navegador (F5¬†en la mayor√≠a de los navegadores).

Los botones de acci√≥n no funcionar√°n a√ļn, ya que todav√≠a necesitamos agregar su l√≥gica de negocio.

Adici√≥n de vistas de lista y de b√ļsqueda

Cuando se visualiza un modelo en modo de lista, se utiliza una vista <tree>. Las vistas de árbol son capaces de mostrar líneas organizadas en jerarquías, pero la mayoría de las veces, se utilizan para mostrar listas sin formato.

Podemos agregar la siguiente definición de vista tree a car_view.xml:

<record id="view_car_car_tree" model="ir.ui.view">
<field
name="name">car.car.tree</field>
<field
name="model">car.car</field>
<field
name="arch" type="xml">
<tree
string="Vehículo">
<field
name="name" placeholder="Nombre de Vehículo"/>
<field
name="color" placeholder="Color "/>
<field
name="active" placeholder="Activo? "/>
</tree>
</field>
</record>

Esto define una lista con sólo 3 columnas: name, color yactive.   

En la esquina superior derecha de la lista, Odoo muestra un cuadro de b√ļsqueda. Los campos que busca y los filtros disponibles se definen mediante una vista¬†<search>.

Como antes, agregamos esto a car_view.xml:

<record id="view_car_car_filter" model="ir.ui.view">
<field
name="name">car.car.select</field>
<field
name="model">car.car</field>
<field
name="arch" type="xml">
<search
string="Buscar Vehiculos">
<field
name="name" placeholder="Nombre de Vehículo"/>
<filter
string="Archivado" name="inactivo" domain="[('active','=',False)]"/>
</search>
</field>
</record>

Los elementos¬†<field>¬†definen campos que tambi√©n se buscan al escribir en el cuadro de b√ļsqueda. Los elementos¬†<filter>¬†a√Īaden condiciones de filtro predefinidas, que se pueden alternar con un clic de usuario, definido mediante el uso de una sintaxis espec√≠fica.

Vistas
124 N√ļmero de vistas
3 Vistas de miembros
121 Vistas p√ļblicas
Acciones
0 Gustos
0 No me gusta
0 Comentarios
Compartir en redes sociales
Compartir enlace
Usar un enlace permanente para compartir en redes sociales
Compartir por correo

Por favor iniciar sesión para compartir esto webpage por correo.