Les Vues de Base du Framework odoo: Vue Formulaire, Vue Liste et la vue recherche

Afin de créer les interfaces utilisateurs nécessaires à l'interaction avec la couche base de données et métier de nos déférentes applications, odoo utilise la technologie xml pour définir les vues nécessaires.

Il existe plusieurs vues à savoir la vue formulaire, la vue liste, la vue graphe, la vue pivot, la vue activité, etc. 

L'exemple de l'application d'une agence de location de bureaux et de salles: Dans l'article créer votre prière application  en utilisant odoo , nous avons commencé par la création du menu principale de l'application, et les deux options permettant de gérer les salles et les bureaux, et nous n'avons pas préparer les vues formulaire , liste et recherche, elles ont été créées automatiquement par le framework intégré d'odoo,

Dans le reste de l'article nous allons se baser sur cet exemple, et nous  l'ajoutons au fur et à mesure les changement nécessaires. 

Création de la Vue Formulaire :  Etant donné que la vue formulaire fait partie de la couche Views, nous allons créer un fichier xml, dans le répertoire précédemment créé, et on va le nommer views/agence_views.xml. 

Dans le même fichier on va définir , la vue formulaire pour les bureaux et les salles, copier /coller le code suivant dans le fichier qu'on vient de créer agence_views.xml : 

<?xml version="1.0"?>
<odoo>
    <!-- Définition de la Vue Formulaire de la salle   -->
 <record id="view_form_salle" model="ir.ui.view">
     <field name="name">Formulaire des Salles </field>
     <field name="model">agence.salle</field>
     <field name="arch" type="xml">
         <form string="Salle">
            <group>
                <field name="name" />
                <field name="isactif" />
                <field name="nbplaces" />
                <field name="prix_location" />
                <field name="description"  />
            </group>
         </form>
     </field>
 </record>
<!-- Définition de la Vue Formulaire du Bureau    -->
 <record id="view_form_bureau" model="ir.ui.view">
     <field name="name">Formulaire des Bureaux  </field>
     <field name="model">agence.bureau</field>
     <field name="arch" type="xml">
         <form string="Bureau">
            <group>
                <field name="name" />
                <field name="isactif" />
                <field name="surface" />
                <field name="prix_location" />
                <field name="description"  />
            </group>
         </form>
     </field>
 </record>
</odoo>

Pour qu'odoo reconnait , ces vues , on doit les déclarer dans le fichier __manifest__.py, on ajoutant donc la ligne en gras coloré  suivante : 

'data': [
'security/agence_security.xml',
'security/ir.model.access.csv',
'views/menu_location.xml',
'views/agence_views.xml',
Pour visualise les changements,  Vous devez   redémarrer le serveur parce que nous avons  fait un changement au niveau du fichier python (__manifest__.py) ,  et mettre  à jour de l'application , puisque nous avons ajouté une nouvelle vue , qui est stocké dans un fichier xml (agence_views.xml) ,  on obtiendra les formulaires salles et bureaux plus élaborés . 

Explication de la vue formulaire :

Pour définir une vue formulaire on utilise un enregistrement (record) qui va contenir des champs (fiels),  les rubriques de notre modèle vont être mises dans le champ xml, qui sera suivi par la balise form : 

<record id="view_form_bureau" model="ir.ui.view">:
L'enregistrement de notre vue formulaire , doit avoir un 
identifiant unique , ou id ici id="view_form_bureau", 
qui va être enregistré dans le modèle :  model="ir.ui.view"
field name="name">Formulaire des Bureaux  </field> 
// C'est le nom du formulaire
<field name="model">agence.bureau</field>
 // C'est le modèle  à utiliser pour la vue formulaire
    <field name="arch" type="xml">
       C'est le champ xml qui va contenir le formulaire 
         <form string="Bureau"> // début du formulaire 
            <group>  // la balise groupe permet un mieux affichage su formulaire
                <field name="name" /> // les champs du modèle 
                .............. les autres champs du modèle 
          </group> 
         </form> // fin du formulaire
     </field>
 </record> // fin de l'enregistrement 

Vous pouvez remarquer que le formulaire prend toute la largeur de page, et il sera mieux affiché s'il pend la forme d'un page de papier.

Pour se faire dans la définition de formulaire , après la balise form, on ajoute la balise sheet, qui sert à présenter le formulaire sous forma de papier , ce qui donne une vue plus élégante. 

De même on peut ajouter des boutons d'actions qui peuvent exécuter des méthodes qu'on doit défini au préalable.

A Présent nous allons ajouter un bouton d'action d'ans l'entête du formulaire, qui sera inclut dans la balise header. on peut placer le bouton dans n'importe quel emplacement , mais il est fortement recommandé de l’utiliser en haut de page pour plus de lisibilité. Vous pouvez ajouter autant  de boutons que vous le souhaitez . 

On va donc remplacer la partie form dans la vue précédente  , pour les  deux formulaires  salle et bureau, par la patrie suivante: 

<form string="Salle">
     <header>
          <button name="check_typesalle" type="object"
           string="Afficher le type de salle " />
    </header>
   <sheet>
       <group>
           <field name="name" />
           <field name="isactif" />
           <field name="nbplaces" />
           <field name="prix_location" />
           <field name="description"  />
       </group>
   </sheet>
</form>
<form string="Bureau">
    <header>
          <button name="check_typebureau" type="object"
           string="Afficher le type de Bureau " />
    </header>
    <sheet>
       <group>
           <field name="name" />
           <field name="isactif" />
           <field name="surface" />
           <field name="prix_location" />
           <field name="description"  />
       </group>
    </sheet>
</form>
Pour visualiser les changements, il suffit de faire une mise à jour due l'application, on aura comme résultat une chose qui ressemble à : 

En cliquant sur le bouton créé ( Afficher le type de la salle) , qui porte le nom de la méthode qui exécute la méthode programmer, on aura une erreur puisque nous n'avons pas encore défini la méthode à exécuter . une chose qu'on va réaliser dans la section introduction de la logique métier

La Vue Liste (tree): La vue liste permet d'afficher les informations d'un modèle sous forme d'une liste (tableau) avec des colonnes et des lignes .

Pour définir la vue relative, à un modèle donné, nous ajoutons dans notre fichier xml, agence_views , à l'intérieur de la balise odoo, le code suivant :

<!-- Définition de la Vue Liste  du modèle Salle   -->
 <record id="view_tree_salle" model="ir.ui.view">
            <field name="name">Liste des Salles </field>
            <field name="model">agence.salle</field>
            <field name="arch" type="xml">
                <tree>
                    <field name="name" />
                    <field name="isactif" />
                    <field name="nbplaces" />
                    <field name="prix_location" />
                    <field name="description"  />
                </tree>
            </field>
</record>
    <!-- Définition de la Vue Liste  du  modèle Bureau    -->
 <record id="view_tree_bureau" model="ir.ui.view">
            <field name="name">Liste des Bureaux </field>
            <field name="model">agence.bureau</field>
            <field name="arch" type="xml">
                <tree>
                    <field name="name" />
                    <field name="isactif" />
                    <field name="surface" />
                    <field name="prix_location" />
                    <field name="description"  />
                </tree>
            </field>
</record>
La Vue recherche (search_view) :  La vue recherche s'affiche à coté de la vue liste , on la trouve en haut à droite sous forme d'une  barre de recherche , avec des boutons de Filtrage, de regroupement et des favoris. 

Dans la vue search , on définit les champs qui vont être recherchés par l’utilisateur , on peut définir  une ou plusieurs, dans notre exemple on choisit la recherche par  la désignation. 

Pour le filtrage , on définit un filtrage sur les salles/Bureaux actives ou nous active . Pour définir la vue relative, à un modèle donné, nous ajoutons dans notre fichier xml, agence_views , le code suivant :  

<!-- Définition de la Vue Recherche du modèle Salle   -->
 <record id="view_search_salle" model="ir.ui.view">
    <field name="name">Filtrage des Salles </field>
    <field name="model">agence.salle</field>
    <field name="arch" type="xml">
        <search>
            <field name="name" />
            <filter name="filter_inactive"
                string="Inactive"
                domain="[('isactif','=',True)]"
            />
            <filter name="filter_active"
                    string="Active"
                domain="[('isactif','=',False)]"
            />
        </search>
    </field>
</record>
    <!-- Définition de la Vue Recherche du modèle Bureau   -->
 <record id="view_search_bureau" model="ir.ui.view">
    <field name="name">Filtrage des Bureaux  </field>
    <field name="model">agence.bureau</field>
    <field name="arch" type="xml">
        <search>
            <field name="name" />
            <filter name="filter_inactive"
                string="Inactive"
                domain="[('isactif','=',True)]"
            />
            <filter name="filter_active"
                    string="Active"
                domain="[('isactif','=',False)]"
            />
        </search>
    </field>
</record>

 Vous remarquer que c'est comme la vue formulaire, la vue liste et recherche sont présentées par un  enregistrement (record)  qui pointe  vers un modèle (salle / bureau) , au lieu de la balise form , on utilise la balise tree pur la vu liste et la baise search pour la vue recherche. 

Pour visualiser les changements faites une mise à jour de l'application , puis allez sur votre  application et ajouter quelques données pour pouvoir tester le résultat:

Voila ce que ressemble la vue liste , en haut à droite on trouve la vue recherche, et les filtres définit dans notre code (active, pas active) :

La Logique métier d'une application , regroupe les règles métier de validation et des calculs automatiques .

Dans note exemple, on va utiliser un exemple qui permet de comprendre le principe générale, Lorsqu'on clique sur le bouton vérifier le type de la salle l'application nous renvoie un message nous indiquant que la sale est une salle de conférence ou autres.

Pour cela on va introduire une méthode , en utilisant une fonction python qui contient les différentes traitements.

Pour que le bouton exécute une action, on doit lui définir une méthode, qui porte le nom du bouton (l'identifiant unique) qui est indiqué das l'attribut name du bouton , dans la vue xml.

Pour le formulaire Salle, on doit créer une méthode (une fonction python), sur la partie de la définition de la classe Salle avant la section qui décrit les champs . On va ajouter une simple fonction, qui va déterminer le type de salle de formation selon le nombre de place.

Pour qu'odoo affiche les message aux utilisateurs on doit ajouter le composant Warning du package odoo.exception, ajouter donc la ligne suivante au début du fichier pyhton agence_location.py:

from odoo import fields, models
from odoo.exceptions import Warning
Ajouter la fonction suivante juste après la définition de classe (après  la parie _description) . 

def check_typesalle(self):
    for salle in self:
        if not salle.nbplaces:
            raise Warning(' Ajouter le nombre de places pour  %s' % salle.name)
        if salle.nbplaces < 100:
            raise Warning(' C est une salle de formation ou de réunion ')
        else:
            raise Warning(' C est une salle de Conférence !  ')
    return True

Avant la version d'odoo 13, on doit ajouter le package api, puis ajouter un décorateur avant la méthode , dans la version 13  cette option est enlevé, i l suffit de  définir directement note fonction  . 

On doit redémarrer le serveur , puisque nous avons fait un changement au niveau python . 
Si on clique à nouveau sur le bouton vérifier la type de salle , un message sera affiché pour définir le type de salle . 

Nous avons vue ensemble, comment créer les vues de base d'une application en utilisant le framework technique d'odoo.

La Vue formulaire peut contenir des champs de types différents , comme les champs texte, case à cocher combo, boutons, etc , .

La vue recherche est affichée en haut à droite , et en dessus d'elle se trouve la vue liste (tree) qui permet d'afficher les information sous forme d'un tableau avec des colonnes.

Nous avons vue également comment relier ces vues avec la base de données avec une première introduction de la logique métier , en introduisant un bouton d'action.