Tutorial - Navigation Model (French)

Modèle de Navigation

Pour une application web, il est intéressant de connaître comment les pages sont reliées entre elles. Cela signifie que nous avons besoin d'un diagramme qui comporte des noeuds et des liens.

Les noeuds sont des unités navigables connectées par des liens. Ils sont affichés sur différentes pages ou sur une même page. UWE propose des stéréotypes différents, par exemple pour les noeuds et pour les liens les stéréotypes sont respectivement «navigationClass» et «navigationLink». Nous avons généré le diagramme ci-dessous avec l'action Content to Navigation - Transformation, qui se base sur le diagramme de classe précèdent.

Voulez-vous vraiment modéliser la navigation du contact vers Adress, Phone et Picture?. Non, car ses informations ne sont pas pertinentes à la navigation. Supprimer les de l'arborescence.

AdressBook doit être notre page d'accueil, c'est pour cela qu'il est inscrit {isHome}.

Pouvez vous imaginer un site sur les carnets d'adresses avec tous les contacts dans la même page? Ce n'est pas ce que nous voulons.

Ce que nous voulons c'est une application où nous avons accès aux opérations décrites dans le diagramme de cas d'utilisation. Pour cette raison nous avons besoin d'une page d'accueil avec plusieurs noeuds :

1. ContactList : nous voulons atteindre chaque contact avec un lien à partir de l'accueil.
2. Search(Contact) : recherche pour un contact
3. ContactCreation : créer un nouveau contact et l'afficher après.

Dans UWE, vous pouvez utiliser des «menu», si vous voulez naviguer dans des classes différentes. Insérez en un nommé MainMenu.

1. De la même manière on peut insérer ContactList. Le stéréotype « index » est utilisé pour lister des objets d'un même type.

Nous devons ajouter deux autres classes avec MagicUWE toolbar:
2. La classe pour la recherche doit avoir le stéréotype «query». Une recherche exécute du code, donc nous avons besoin de l'association «processLink».

3. ContactCreation est aussi une procédure, mais elle n'est pas prédéfini, par conséquent nous utiliserons le stéréotype «processClass» ( nous modéliserons l'action associée plus tard).

Si un nouveau contact est créé, il sera bien d'afficher sa fiche par la suite, et dans le cas de la recherche on voudrais l'affichage du résultat via ContactList. Nous utiliserons le stéréotype «processLink» pour ces associations «dirigées» (pour interdire le «retour» dans la navigation et ainsi éviter de dupliquer les contacts lors d'une création par exemple).

Modèle de Navigation - stéréotypes
navigationClass	menu
index	query
guidedTour	processClass
externalNode

(Dans ce tutoriel, seulement quelques aspects des stéréotypes ont été utilisés. Pour plus d'informations : User Guide and Reference pour tous les stéréotypes de UWE.)

Pour compléter notre modèle de navigation, nous devons ajouter les fonctionnalités ContactDelete et ContactUpdate (comme modélisé sur le diagramme de cas d'utilisation). Ces deux classes sont accessibles par Contact, donc nous avons besoin d'un menu (et nous l'appellerons ContactMenu, il sera présent sur chaque page d'un contact).

Lire la suite