Construire l'écran et son entrée

1. Dessinez l'écran

Le template XML décrit ce que le composant affiche. La directive t-on-click="sayHello" relie le clic à la méthode JavaScript écrite à l'étape précédente.

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="training_hello.HelloWorld">
        <div class="o_action p-4">
            <h1>Hello Odoo</h1>
            <p>Votre premier module est bien ouvert.</p>
            <button type="button"
                    class="btn btn-primary"
                    t-on-click="sayHello">
                Well, hello Odoo
            </button>
        </div>
    </t>
</templates>

Le nom training_hello.HelloWorld doit être strictement identique à la valeur de static template dans le fichier JavaScript.

2. Rendez l'application accessible depuis l'accueil

Pour que Hello Odoo apparaisse parmi les applications, Odoo doit savoir quel nom afficher et quel écran ouvrir lorsqu'on clique dessus.

Dans le fichier suivant, le bloc record crée une client action qui ouvre notre écran. Le bloc menuitem ajoute Hello Odoo au menu des applications et relie le clic à cette action.

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <record id="training_hello_action" model="ir.actions.client">
        <field name="name">Hello Odoo</field>
        <field name="tag">training_hello.hello_world</field>
    </record>

    <menuitem id="training_hello_menu_root"
              name="Hello Odoo"
              action="training_hello_action"
              sequence="10"/>
</odoo>

3. Complétez le manifeste

Les trois nouveaux fichiers existent. Avant de copier le manifeste complet, vérifiez précisément ce qui change par rapport à __manifest__.py minimal de la section 1 :

• summary : remplacez Un premier module minimal pour Odoo par Un premier écran interactif dans Odoo pour décrire le nouveau résultat.
• depends : remplacez ["base"] par ["web"] ; le module utilise le client web, ses services et son registry, et web dépend déjà de base.
• data : remplacez [] par ["views/hello_world_menus.xml"] pour demander à Odoo de charger l'action et le menu dans la base.
• assets : ajoutez le bundle web.assets_backend avec training_hello/static/src/hello_world/hello_world.js et training_hello/static/src/hello_world/hello_world.xml ; ces deux fichiers pourront alors être chargés par le client web.
• application et installable : conservez True pour les deux ; application=True classe le module dans Apps et le menuitem racine crée l'entrée de l'app switcher/accueil, tandis que installable=True autorise son installation.
• Les autres champs : gardez name, version, category, author et license tels quels pour cet exercice.

Vous pouvez ensuite remplacer le contenu par cette version complète :

{
    "name": "Hello Odoo",
    "summary": "Un premier écran interactif dans Odoo",
    "version": "19.0.1.0.0",
    "category": "Training",
    "author": "Formation Odoo",
    "license": "LGPL-3",
    "depends": ["web"],
    "data": [
        "views/hello_world_menus.xml",
    ],
    "assets": {
        "web.assets_backend": [
            "training_hello/static/src/hello_world/hello_world.js",
            "training_hello/static/src/hello_world/hello_world.xml",
        ],
    },
    "application": True,
    "installable": True,
}

web remplace base dans depends : le client web dépend déjà de base, et notre composant utilise directement ses services. web.assets_backend est le bundle chargé dans l'interface interne des utilisateurs connectés ; il ne signifie pas « réservé aux administrateurs ».

4. Vérifiez que les noms correspondent

1. Le manifeste charge les deux fichiers d'assets et views/hello_world_menus.xml.
2. Dans l'action, training_hello.hello_world est exactement le nom sous lequel le composant est enregistré en JavaScript.
3. Dans le composant, training_hello.HelloWorld est exactement le nom donné au template XML.