2. Programmer le composant

1. Créez le composant JavaScript

Un composant rassemble une petite partie de l'écran et son comportement. Ici, la classe HelloWorld relie le futur bouton à une méthode appelée sayHello.

custom_addons/training_hello/static/src/hello_world/hello_world.js

import { Component } from "@odoo/owl";
import { _t } from "@web/core/l10n/translation";
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";

export class HelloWorld extends Component {
    static template = "training_hello.HelloWorld";

    setup() {
        this.notification = useService("notification");
    }

    sayHello() {
        this.notification.add(_t("Welcome to Odoo"), {
            type: "success",
        });
    }
}

registry.category("actions").add(
    "training_hello.hello_world",
    HelloWorld
);

2. Suivez le trajet du clic

Component fournit les capacités d'un composant Owl, la bibliothèque d'interface utilisée par Odoo.
static template indique quel template XML dessinera l'écran.
useService("notification") demande à Odoo son service d'affichage des messages.
sayHello() envoie le texte Welcome to Odoo à ce service.
Le registry associe le nom technique training_hello.hello_world à notre composant afin qu'une action Odoo puisse l'ouvrir.

Pourquoi écrire le texte en anglais dans _t() ?

_t() marque cette chaîne comme traduisible et recherche sa traduction pour la langue active. Sans traduction chargée, le texte anglais reste affiché.

La traduction et l'internationalisation seront traitées plus tard. Ce travail est prévu pour le jour 5, « Consolider et aller plus loin ».

À ce stade

Le comportement est prêt, mais aucun bouton ne l'appelle encore. L'étape suivante créera le template visible, l'action et l'entrée de l'application.