Définir les transitions des vues
Définir les transitions des vues
Les fichiers de transition permettent de définir les vues accessibles depuis une vue courante.
Ils sont utilisés par OIP Views Generator pour contrôler les enchaînements possibles dans un parcours, notamment lors d’une navigation vers la vue suivante ou vers la vue précédente.
Emplacement des fichiers de transition
Les fichiers de transition sont attendus dans le dossier transitions, situé à la racine du projet.
Exemple :
Convention de nommage
Par convention, le nom du fichier de transition doit correspondre à la valeur viewId de la vue associée.
Par exemple, pour une vue dont le viewId est customer, le fichier de transition attendu est :
Lors de l’exécution de la commande views generate, OIP Views Generator vérifie la présence et la conformité des fichiers de transition.
Si le fichier de transition associé à une vue est absent ou invalide, une erreur est retournée.
Rôle d’un fichier de transition
Un fichier de transition décrit les vues accessibles depuis la vue courante.
Il permet notamment de définir :
- les vues précédentes possibles ;
- les vues suivantes possibles ;
- les conditions d’accès à chaque transition ;
- les traitements optionnels à exécuter avant ou après l’évaluation des transitions.
Structure d’un fichier de transition
Un fichier de transition exporte un objet contenant au moins l’une des propriétés suivantes :
Propriété | Description |
|---|---|
next | Définit les vues suivantes possibles lors d’une action de navigation vers l’avant. |
prev | Définit les vues précédentes possibles lors d’une action de navigation vers l’arrière. |
Les propriétés next et prev sont des objets pouvant contenir les propriétés suivantes :
Propriété | Obligatoire | Description |
|---|---|---|
transitions | Oui | Liste ordonnée des transitions possibles. |
hooks | Non | Hooks de transition appelés avant ou après l’évaluation des conditions. |
Propriété transitions
La propriété transitions contient la liste ordonnée des vues accessibles depuis la vue courante.
Chaque élément de la liste est un objet qui contient :
Propriété | Description |
|---|---|
viewId | Identifiant de la vue cible. |
handler | Fonction contenant la logique d’évaluation de la transition. |
La fonction handler doit impérativement retourner un booléen :
- true : la transition est autorisée ;
- false : la transition n’est pas autorisée.
Lorsque plusieurs transitions sont définies, elles sont évaluées dans l’ordre déclaré.
Propriété hooks
La propriété hooks est optionnelle.
Elle permet de définir des traitements à exécuter autour de l’évaluation des transitions.
Elle peut contenir :
Hook | Description |
|---|---|
before | Fonction appelée avant l’évaluation des conditions de transition. |
after | Fonction appelée après l’évaluation des conditions de transition. |
Ces hooks peuvent être utilisés pour exécuter des traitements complémentaires liés au parcours, par exemple préparer des données, tracer une action ou déclencher une logique spécifique avant ou après une transition.
Exemple de fichier de transition
Exemple pour une vue customer.
const prev__home = () => { return true; }; const next__company = () => { return true; };
export default { prev: { transitions: [{ viewId: 'home', handler: prev__home }] }, next: { transitions: [{ viewId: 'company', handler: next__company }] } };
Dans cet exemple :
- la vue précédente possible est home ;
- la vue suivante possible est company ;
- la fonction prev__home autorise la navigation vers la vue home ;
- la fonction next__company autorise la navigation vers la vue company.
Exemple avec plusieurs transitions possibles
Il est possible de déclarer plusieurs transitions pour une même direction.
const next__company = () => { return false; }; const next__summary = () => { return true; };
export default { next: { transitions: [ { viewId: 'company', handler: next__company }, { viewId: 'summary', handler: next__summary } ] } };
Dans cet exemple, les transitions sont évaluées dans l’ordre :
- la transition vers company est évaluée, mais elle retourne false ;
- la transition vers summary est ensuite évaluée et retourne true ;
- la vue suivante accessible est donc summary.
Exemple avec hooks
Un fichier de transition peut également déclarer des hooks.
const beforeNext = () => { return true; }; const afterNext = () => { return true; };
const next__company = () => { return true; };
export default { next: { hooks: { before: beforeNext, after: afterNext }, transitions: [{ viewId: 'company', handler: next__company }] } };
Dans cet exemple :
- le hook before est appelé avant l’évaluation des transitions ;
- la transition vers company est évaluée ;
- le hook after est appelé après l’évaluation des transitions.
Remarques
Chaque vue doit disposer d’un fichier de transition associé dans le dossier transitions.
Le nom du fichier doit correspondre au viewId de la vue.
Les fonctions handler doivent toujours retourner true ou false.
Si un fichier de transition est absent, mal nommé ou invalide, la commande views generate retourne une erreur.
Il est recommandé de garder les fichiers de transition simples et lisibles afin de faciliter la compréhension du parcours.