Tutoriel GMF

Ou comment créer un éditeur graphique à partir d’un modèle

Auteurs : Date de création :

Pierre-Emmanuel BERTRAND 11/02/09
Kevin N’GUESSAN-ZEKRE

Introduction :

Ce tutoriel à pour but de faire découvrir, à partir d’un exemple simple, le fonctionnement du plugin
eclipse « GMF ».
Mais avant de se lancer tête baissée dans ce qui suit, il est important de savoir deux choses :
• Ce qu’est EMF. Si un fichier avec une extension .ecore, ça ne vous évoque rien alors c’est mal
parti pour comprendre la suite.
• A quoi ça sert GMF ? Peut-être quelques précisions à ce niveau là ne seraient pas superflues :

GMF pour « Graphical Modeling Framework » est un plugin qui permet de créer un éditeur graphique
conforme à un modèle. Autrement dit, grâce à GMF, vous allez pouvoir vous fabriquer votre propre
outil qui vous permettra d’instancier facilement votre propre modèle. Par facilement je veux dire :
graphiquement, en dessinant juste des carrés et des flèches. Intéressant, non ? Si vous n’êtes pas
convaincu, regardons tout de suite un exemple.

L’exemple qui nous servira de support tout au

long de ce tutoriel est celui (simplifié) des
bases de données relationnelles. Vous pouvez
voir plus précisément notre modèle ecore ci-
contre.

Figure 1 - le modèle
Imaginez que vous vouliez instancier ce modèle. C'est-à-dire créer une base de données. Comment
feriez-vous ? Probablement vous écririez un schéma SQL comme celui-ci :

Create table table1(

colonne1 varchar(40),
colonne2 integer,
laClefPrimaire integer,
constraint primary key (laClefPrimaire)
);
Create table table2(
colonneA integer,
colonneB integer,
clePrimaire varchar(10),
constraint primary key (clePrimaire)
);

Vous ne trouvez pas ça un peu long et laborieux ? Alors qu’il n’y a ni jointure, ni rien de compliqué!
Regardez plutôt ceci :

Figure 2 - un exemple motivant

On « pioche » dans la palette l’élément que l’on veut créer et on le fait glisser sur le dessin. Facile.
Vous êtes déjà séduit par GMF ? Alors rentrons vite dans le vif du sujet.

Structurer pour mieux régner :

Vous avez probablement remarqué sur la figure précédente (figure 2) que deux parties se distinguent
clairement dans notre éditeur :
• A gauche (avec un fond « saumon ») où l’on peut voir notre base (notre instance de modèle) se
créer.
 • A droite (fond vert) où l’on trouve les outils de création des différents éléments de notre
modèle.

Nous allons créer ces deux parties séparément, dans deux fichiers différents. Le premier fichier aura
comme extension « .gmftool », et c’est ici que l’on définira les outils de création (la palette de la figure
2). Le deuxième fichier (extension « .gmfgraph ») nous permettra de définir la partie graphique de
notre éditeur : une table, c’est un rectangle avec son nom en haut à gauche, …
Reste un problème : comment associer le carré à l’EClass table et à l’outil de création de table ? Un
troisième fichier sera nécessaire pour lier tout ça. Son extension sera « .gmfmap ».

Avantage indéniable de GMF, toute la partie création se fait sans écrire une seule ligne de code !

A vos souris :

Pas de ligne de code. Quelques clics seront tout de même nécessaires.

Etape 1
Première chose à faire : télécharger par internet le plugin (si ce n’est pas déjà fait)
Pour cela allez dans le menu Help -> Software Updates …
Une fenêtre apparaît. Cliquez sur l’onglet « Available Software »
Déroulez la ligne http://download.eclipse.org/releases/ganymede et cocher les lignes:
• Graphical Modeling Framework Runtime
• Graphical Modeling Framework SDK

Cliquez enfin sur « Install… ».

Figure 3 – installation du plugin

Pour la suite, vous devez vous placez dans le
projet contenant votre modèle. Généralement il
s’agit d’un projet EMF contenant un genmodel
et un ecore. N’oubliez pas de générez une
bonne fois pour toute le Model Code, l’Edit
Code et l’Editor Code.
Vous devriez avoir une arborescence de ce
type :

Figure 4 - notre arborescence avant de commencer

Etape 2
Créons maintenant nos trois fichiers :
Cliquez droit sur model: new -> other -> Graphical Modeling Framework -> Default -> GMFTool
Model puis cliquer sur « next ». (Voir figure 5).
Préciser ici le nom à donner à votre fichier (par exemple: basesRel.gmftool) puis cliquer sur « finish ».

Figure 5 - créer un fichier GMF

De même, cliquez droit sur model: new -> other -> Graphical Modeling Framework -> Default ->
GMFGraph Model puis cliquer sur « next ».
Préciser ici le nom à donner à votre fichier (par exemple: basesRel.gmfgraph) puis cliquer sur
« finish ».

Enfin : cliquez droit sur model: new -> other -> Graphical Modeling Framework -> GMFMap Model
puis cliquer sur « next ».
Préciser ici le nom à donner à votre fichier (par exemple: basesRel.gmfmap) puis cliquer sur next.

Ici sélectionnez en haut de la fenêtre le modèle

ecore correspondant à ce que vous voulez faire.

Puis précisez l’élément racine de ce modèle. Ici

cet élément sera « base ». C’est l’élément qui
servira de « fond » à notre éditeur. Autrement
dit quand on voit notre éditeur, on a sous les
yeux une base. Bien sûr une base ne contient
pas directement de colonne par exemple. Il sera
donc impossible de rajouter une colonne
directement dans notre éditeur. Il faudra
d’abord créer une table (bien contenue dans une
base) puis des colonnes dans cette table.

Puis cliquez sur « Next ». (Et pas sur

« Finish »)
Figure 6 - Précisez le modèle
Les deux étapes qui suivent servent à préciser les fichiers .gmfgraph puis .gmftool qui sont associés à
votre travail. Il est important de mettre les deux fichiers que vous venez de créer (basesRel.gmfgraph
et basesRel.gmftool).
Une fois ceci fait vous pouvez cliquer sur finish.

Voici notre nouvelle arborescence avec les

fichiers que l’on vient de créer.

Figure 7 - notre nouvelle arborescence

Etape 3
Remplissons notre fichier basesRel.gmftool.
En l’ouvrant vous trouverez quelque chose de ce style
(cf. figure 8, ci-contre).
En cliquant droit sur « Tool Registry » un menu
contextuel apparaît. En choisissant « New Child » puis
« Palette » vous pouvez créer une palette comme cela a
été fait dans l’exemple de la figure 2. Bien entendu, vous
pouvez aussi faire un « Context Menu » (menu
contextuel en français) ou un « Main Menu »… Les
possibilités de GMF sont très riches et nous ne pourrons
pas toutes les explorer ici. Figure 8 - basesRel.gmftool vide

Figure 9 - création d'un enfant-palette

De la même manière, dans votre palette vous pouvez créer un « Creation Tool ». Il servira à créer une
table dans notre éditeur. A l’aide d’un clic droit puis de « Show Properties View » vous pouvez
afficher les propriétés de l’élément que vous venez de créer. Il est fortement conseillé de donner des
noms explicites.

Figure 10 - propriétés d'un outil de création

Voila à quoi ressemble maintenant notre fichier :

Figure 11 - basesRel.gmftool, en travaux

Etape 4
Remplissons notre fichier basesRel.gmfgraph.
Comme précédemment, nous allons créer des enfants à partir de menus contextuels. Tout d’abord un
« Figure Gallery ». Cela contiendra tous les éléments graphiques que l’on voudra dessiner
(principalement des rectangles, des cercles, …). Commençons par un seul élément graphique : celui
pour représenter une table.
Pour cela il nous faut, comme enfant de « Figure Gallery », un « Figure Descriptor », ayant lui-même
un enfant « Rectangle », ayant lui-même un enfant « Grid Layout ».
Vous devez préciser le nom du « Figure Descriptor », à l’aide de sa fenêtre des propriétés.
Voila ce qu’on a obtenu :

Figure 12 - basesRel.gmfgraph en travaux

Deuxième élément essentiel et enfant de « Canvas », il s’agit d’un « Node ». Cet élément sera utile
pour faire le lien entre un « Figure Descriptor » et une EClass de notre modèle. Dans certain cas
particulier une EClass pourra être représentée de plusieurs manières, ou inversement plusieurs EClass
pourront être représentées de la même manière. Donc un « Node » ne correspond pas toujours à un
« Figure Descriptor ».
Arrêtez-vous un instant sur les propriétés du « Node » que nous venons de créer. Encore une fois, vous
devez préciser le nom de cet élément. La case « Figure » doit également être remplie avec le nom du
« Figure Descriptor » correspondant (ici nous n’avons pour l’instant pas le choix : ce sera
« tableFigureDescriptor »).

Figure 14 - Les propriétés du node de table

Figure 13 - basesRel.gmfgraph, on avance

Etape 5
Remplissons notre fichier basesRel.gmfmap.
« Mapping » doit avoir comme enfant un « Top Node Reference ». Ce dernier doit lui-même avoir un
enfant « Node Mapping ».
Les propriétés du Node Mapping sont très importantes :
• « Element » désigne l’élément du modèle Ecore que l’on veut mapper. (en l’occurrence
« Table »).
• « Diagram Node » désigne le Node de basesRel.gmfgraph que l’on veut mapper. (En
l’occurrence : « tableNode »).
• « Tool » désigne l’outil de création du basesRel.gmftool. (Ici « Créer une table »).

Les propriétés du Top Node Reference sont également à compléter :

• « Child » désigne les nodes enfants possibles. En l’occurrence, à partir de l’élément racine
« base » on ne peut avoir que des enfants « table ». Seul le « node table » que l’on vient de
créer conviendra donc.
• « Children Feature » et « Containment Feature » désignent la référence du modèle liant
l’élément racine à ses enfants (ici il s’agit de « possède »).

Figure 15 - basesRel.gmfmap, en travaux

Figure 16 - Propriétés du Top Node Reference

Figure 17 - Propriétés du Node Mapping

Etape 6
Voyons tout de suite ce que cela donne. Pour cela clic droit dans l’arborescence sur basesRel.gmfmap,
puis cliquez sur « Create generator model … ».

Une fenêtre apparaît ou vous devez préciser un nom. Par exemple ici nous dirons basesRel.gmfgen.

Figure 18 - création du "générateur"

Les deux écrans suivants permettent de préciser
le gmfmap et le gmfgen à utiliser. Puis vous
pouvez cliquer sur « Finish ».
Un fichier basesRel.gmfgen a été rajouté dans
votre arborescence. Cliquez dessus avec le
bouton droit de votre souris et sélectionnez
« Generate diagram code ». Après quelques
secondes d’intense réflexion de la part de votre
ordinateur, un nouveau dossier est créé dans
votre arborescence. Ici il s’agit du dossier
« BD.diagram ».

Figure 19 - L'arborescence finale

Vous pouvez alors lancer une nouvelle application eclipse contenant votre éditeur. Pour cela cliquez-
droit sur le dossier BD.diagram puis « Run As » puis « Eclipse Application ».

Figure 20 - Bientôt le moment de vérité

Dans la nouvelle application qui se lance créez un nouveau projet (de type General, Project) :

Figure 21 - Un nouveau projet

Et dans se projet, créez un nouvel « Example » :

Figure 22 - Un nouvel "Example"

Cet exemple sera de type BasesRel.Diagram :

Figure 23 - un BasesRel.Diagram
Précisez ensuite le nom de votre base. Voila ce que vous êtes censé avoir obtenu :

Figure 24 - Mon premier modeler

Si c’est le cas, alors félicitations : vous venez de créer votre premier modeler graphique. Si ce n’est pas
le cas, retournez voir les propriétés de tous les éléments que l’on a créés jusqu’à présent. Tous les
détails comptent.
Attardons-nous un peu sur notre modeler. On retrouve bien notre palette sur la droite. Le nom « Créer
une table » apparaît directement ici. D’où l’importance de mettre des noms explicites. Si vous essayez
de créer une table vous verrez qu’un rectangle apparaît bien. Vous vous apercevrez vite que les
« caractéristiques » de notre modèle sont respectées : par exemple il est impossible ici de rajouter une
table dans une table puisque qu’une table ne contient que des colonnes dans notre modèle.

Etape 7

Il nous suffit maintenant de reprendre les étapes 3 à 6 pour ajouter petit à petit tous les éléments de
notre modèle que l’on veut représenter dans notre modeler graphique. Vous êtes invité à découvrir par
vous-même l’ensemble des possibilités de GMF, car il serait trop long de tout lister ici. Nous allons
tout de même voir ensemble quelques éléments spécifiques qu’il est très utile de connaître.

Les Child Access

Ces éléments sont présents dans les « .gmfgraph ». Ils servent à faire appel, au sein d’un descripteur de
figure, à une figure spécifique. Par exemple si on veut que les colonnes apparaissent dans les tables, il
nous faut un Child Access dans le descripteur de figure de table qui pointera vers la représentation de
colonne. Les propriétés de cet élément sont assez simples :
• Accessor : c’est en fait le nom du Child Access.
• Figure : il faut préciser ici le nom de la figure vers laquelle on veut « pointer ».

Les compartiments
Pour qu’une figure (un rectangle par exemple) puisse contenir plusieurs autres figures, il faut qu’il soit
compartimenté. Pour cela il suffit de créer, de la même manière que l’on a créé un node ou un
descripteur de figure, un « Compartment ».
Il suffira ensuite « d’appeler » (à l’aide d’un Child Access) ce compartiment dans la figure que l’on
veut compartimenter.
Les propriétés importantes du compartment sont :
• Name : vous aurez deviné !
• Figure : il faut préciser ici la figure que l’on veut compartimenter.
• Accessor : on précisera ici le Child Access qui fera le lien entre la figure et le compartiment.

Les labels
Pour décrire un élément de notre modèle, on peut faire autrement que de le représenter par une figure
(rectangle, rond, …). On peut aussi le représenter par un label, c'est-à-dire par une zone de texte. Dans
ce cas, c’est très simple : plutôt que de créer un nouveau descripteur de figure, on créera un nouveau
« Diagram Label ». Bien entendu, si l’on veut que ce label s’affiche dans une figure, il faudra, dans la
figure en question, créer un Child Access qui fera le lien entre la figure et le label.
Les propriétés des labels ressemblent beaucoup à celles des compartiments : il vous faudra préciser un
nom, une figure et un accesseur.

Les Child Reference :

C’est dans le mapping que ces éléments vont apparaître. En effet, dans un fichier de type .gmfmap, un
élément (Node Mapping) ne peut pas contenir d’autres éléments. Il faut passer par un Child Reference
qui lui pourra contenir un Node Mapping.
Les propriétés essentielles du Reference Child :
• Referenced Child : précise quel élément sera référencé.
• Containment Feature : précise l’élément du modèle ecore qui sera contenu.
• Compartment : on a vu que pour qu’une figure contienne d’autres figures, il faut qu’elle soit
compartimentée. On précise ici le compartiment en question.