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

Transcription

1 Tutoriel GMF Ou comment créer un éditeur graphique à partir d un modèle Auteurs : Pierre-Emmanuel BERTRAND Kevin N GUESSAN-ZEKRE Date de création : 11/02/09 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 cicontre. Figure 1 - le modèle

2 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.

3 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 et cocher les lignes: Graphical Modeling Framework Runtime Graphical Modeling Framework SDK Cliquez enfin sur «Install». Figure 3 installation du plugin

4 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».

5 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. Figure 6 - Précisez le modèle Puis cliquez sur «Next». (Et pas sur «Finish») 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

6 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

7 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

8 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

9 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

10 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"

11 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

12 Vous pouvez alors lancer une nouvelle application eclipse contenant votre éditeur. Pour cela cliquezdroit 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

13 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

14 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».

15 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.