Graphiti FrameWork presentation (French)

1. Graphiti
Réalisé par :
Haouzi Ameur Younés
Cherfaoui Mohamed

2. Introduction
• Graphiti est un cadre ou système ‘Framework’ pour le développement des
éditeurs graphiques basé sur ‘GEF (Graphical Editing Framework)’ et
‘Draw2D’.
• Des exemples typiques sont:
1/Editeurs des diagrammes de classe (en utilisant la notation UML).
2/Editeurs de flux de processus (en utilisant la notation BPMN).

3. Figure: exemple d’éditeur de digramme de classe

4. Figure: exemple d’éditeur de flux de processus

5. Architecture de Graphiti
• Naturellement, la communication entre un utilisateur et un outil basé
« Graphiti » se passe via l'écran ainsi que par souris et le clavier (voir figure) .
• Les utilisateurs interagissent avec un éditeur Graphiti en utilisant le
composant d'interaction ‘Interaction Component’ pour manipuler des objets
et ayant les affichés par le moteur de rendu ‘Rendering Engine’.
• Pour être plus spécifique une ‘composante d'interaction’ recevra les
demandes telles que le redimensionnement, drag-and-drop, ou la
suppression. Le traitement réel de ces demandes qui se passe dans un soi-
disant agent type de diagramme, qui sera discuté dans la section suivante plus
en détail.

6. Figure: Architecture de base

7. Agent de type de diagramme
(Diagram type agent)
• Le type diagramme Agent se compose du code de développeur-écrit et est en
charge de la création des éléments du modèle de pictogramme ‘Pictogram
model’ qui fournit une représentation graphique des éléments du modèle de
domaine. Le type diagramme Agent fournit également les moyens de créer de
nouveaux éléments du modèle de domaine ‘Domain model’ graphique et de
lier des éléments de pictogramme à des objets de domaine. Dans ce qui suit,
nous allons jeter un œil de plus près le type de diagramme Agent.

8. Modèle de domaine (Domain model)
• Le modèle de domaine contient les données qui doivent être visualisés
graphiquement. Un développeur aurait par exemple utiliser le méta modèle
« Ecore »pour un éditeur de « Ecore graphique ». Un éditeur de « BPM »
(Business Process Management) serait utiliser le « Entreprises Process
Modeling Notation ».

9. Modèle de pictogramme (Pictogram model)
• le modèle de pictogramme fournit une représentation graphique des
éléments du Modèle de domaine ‘Domain model’.
• Exemple:
 La représentation graphique d'un EClass est montré comme un rectangle
arrondi qui contient une ligne horizontale comme séparateur-dessus de
laquelle le nom de la EClass apparaît sous forme de texte. (Voir figure)

10. Exemple : une représentation graphique fournit par le modèle de pictogramme (rectangle arrondi)

11. Le modèle de liens (Link model)
• Le modèle de liens ‘Link model’ est responsable de la connexion de données
à partir du modèle de domaine et la représentation graphique (qui est, les
données du modèle pictogramme). Ces connexions sont à nouveau
nécessaires par de nombreuses actions dans l'éditeur graphique. Par exemple,
une suppression ou un mouvement d'un objet graphique doit également
l'accès à l'objet associé du modèle de domaine afin d'être en mesure
d'apporter les changements nécessaires.(Voir figure)

12. Exemple : le linkage

13. Les tâches d’agent de type de diagramme
(Diagram type agent)
• Créer un nouvel objet dans le modèle de domaine.
• Créez la visualisation graphique dans le modèle de pictogramme. Par
exemple, créer des graphiques algorithmes comme un rectangle arrondi ou
un élément de texte. Les initialiser avec des couleurs et des polices et faire la
mise en page.
• Créer le lien entre l'objet de modèle de pictogramme et l'objet de modèle de
domaine (Modèle Lien).

14. Construction d’agent type de diagramme

15. • La figure ci-dessus montre la structure interne d’agent de type de diagramme. Les
acteurs y sont indiqués doivent être fournies par le développeur. Cela signifie qu'il
doit implémenter une quantité de dites ‘Features’ qui sont similaires aux
‘opérations’. Voici quelques exemples typiques de Graphiti Features:
 Add Features:
Créer la représentation graphique d'éléments de modèle de domaine dans le
modèle de pictogramme.
 Create Features:
Produire de nouveaux objets dans le modèle de domaine ainsi que les
représentations graphiques appropriées. Ici, il est logique de réutiliser existante
Add Features.
 Remove Features:
Supprimer des représentations graphiques dans le modèle de pictogramme.

16. Delete Features:
Supprimer à la fois, un objet de modèle de domaine et de ses représentations
graphiques, dans le modèle de pictogramme.

17. La structure de liaison des artefacts

18. • La figure illustre comment le « Eclass » va ressembler dans l'éditeur (Result). La
partie supérieure de la figure montre comment les éléments du pictogramme
« Add Features », qui sont nécessaires pour la représentation graphique, sont
câblés avec l'objet de domaine.
• Dans la colonne de gauche du modèle de pictogramme une forme de conteneur «
Container shape » regroupe deux formes d'enfants, qui sont responsables de
l'étiquette de texte et la ligne de séparation. Tous les trois formes agrègent des
algorithmes graphiques spécifiques fournissant l'information complète pour
permettre le rendu de la « Eclass » dans l'éditeur. Des exemples de telles
informations sont les positions, couleurs fond et de devant ou un gradient, la
visibilité et la largeur de ligne ainsi que le style de ligne. Dans notre exemple, nous
avons un rectangle arrondi offrant un rayon d'angle supplémentaire, une « Poly
ligne » avoir défini les points finaux et de pliage, et une étiquette de texte
contenant une valeur de texte.

19. • La forme du récipient et même de la forme contenant l'étiquette de texte sont
liés à un EClass correspondante du modèle de domaine. La relation se réalise à
travers des objets de lien spécial qui contiennent deux extrémités.

20. Tutorial
Exemple de ‘Filesystem’

21. Installation de « Graphiti »
• Lancer ‘ECLIPSE’.
• Aller à « Help  Install new softwaresModelingGraphiti SDK Plus ».

22.  Modélisation de Filesystem

23. New Graphiti Plug-in Project
• Aller à « FileNewProjectPlugin DevelopmentPlugin-in Project »
et suivez les étapes.

27. Création d’un « Graphiti Diagram »
• Créer un nouveau projet vide « FileNewGeneralProject ».
• Cliquer a droite a se nouveau projet et puis « NewotherotherGraphiti
Diagram ».
• Après sa suivez les étapes.

31. Merci a tous