Création éditeur graphique avec sirius (pas à pas) - Sofiane-13/tutorialXtextSirius GitHub Wiki

Pourquoi Sirius ?

La création d'éditeurs graphiques (éditeurs UML, représentation de processus, éditeurs de concepts métier, etc.) est difficile à intégrer dans un cycle itératif court avec le client, car coûteuse en temps et nécessitant souvent l'apprentissage de technologies ou frameworks complexes. Le projet Eclipse Sirius se propose de faciliter la création d'éditeurs en se basant sur la représentation d'un DSL au sein d'un modèle EMF (Eclipse Modeling Framework). Sirius est un projet Open Source de la Fondation Eclipse. Cette technologie permet de concevoir un atelier de modélisation graphique sur-mesure en s'appuyant sur les technologies Eclipse Modeling, en particulier EMF et GMF. L'atelier de modélisation créé est composé d'un ensemble d'éditeurs Eclipse (diagrammes, tables et arbres) qui permettent aux utilisateurs de créer, éditer et visualiser des modèles EMF.[source wikipedia ] Le site officiel : http://www.eclipse.org/sirius/ .

Commencer avec sirius

Dans la pratique deux manières possible pour arriver à votre nouvelle atelier : Méthode 1 : Utiliser le projet de type « Empty EMF Project » pour créer le modèle . Méthode 2 : Utiliser les outils Xtext (syntaxe textuelle ) ou bien GMF (syntaxe graphique) pour la création d’une syntaxe et générer le modèle . Nous allons détailler les deux méthodes dans la suite de se tutoriel .

Méthode 1: Syntaxe abstraite avec Ecore

le langage ECORE est un langage de métamodélisation qui repose sur des notions issues de l'orienté-objet et ne devrait donc pas dérouter les ingénieurs habitués à la programmation par objet et à UML. l’exemple qui illustre se tutoriel est un site web (exemple de base) .

Création d’un fichier Ecore :

Tout d’abord commencez par créer un nouveau projet EMF vide (File → new→ other → EMF → Empty Emf Project ) , puis dotez le d’une nature Xtext (Clic droit sur le projet→ Configure → Add Xtext Nature/Convert to Xtext Project).

Dans le dossier model, créez un fichier Ecore (New→ Other→ EMF→ Ecore model), nommé Wdl.ecore. N'oubliez surtout pas de renseigner les propriétés de votre langage, du genre name:website, nsPrefix:website et nsUri:http://WDL/1.0. Désormais, cet URI servira d'identifiant unique à chaque version de votre langage à travers la plateforme EMF. octocat

A partir de là, vous avez le choix entre une édition graphique de votre fichier Ecore, ou bien une édition textuelle.

Métamodélisation Via éditeur graphique :

Lancez l'éditeur graphique de diagramme Ecore (clic droit sur le fichier → Initialize Ecore Diagram).

Vous choisissez une représentation, dans notre cas nous avons choisi Design (Entities).

octocat

Ensuite vous devez spécifier la racine website :

octocat

En fin de processus, vous obtenez un fichier Wdl.aird. Double clique dessus et vous verrez apparaître une palette d'outils « à la UML ». La métamodélisation graphique du domaine des sites web est alors triviale :

octocat

L’élément racine est webSite , il est décrit par deux Attributs.Il est composé d’une ou plusieurs pages.Une page est décrite par deux attributs aussi et par des références à d’autres pages. #Métamodélisation Via éditeur textuelle: L’utilisation d’éditeur textuelle nécessite l'installation d’un composant supplémentaire dans eclipse qui est OCL Tools . Vous pouvez l’installer comme tout autre composant (Help → Install Modeling Components) . Une fois l’installation est terminé , vous pouvez éditer votre fichier de manière textuelle. Il vous suffit juste de lancer l'éditeur (clic droit sur le fichier → Open with → OCLinEcore Editor).

MétaModélisation graphique ou textuelle ?

Chacunes des deux types de MétaModélisation présentés possèdent ses avantages et inconvénients. L'avantage majeur de la vue textuelle est de pouvoir exprimer des contraintes OCL directement au niveau du métamodèle.

Comme compromis , vous pouvez prendre le meilleur des deux mondes : commencez le travail avec l'éditeur graphique puis attaquez les finitions avec l'éditeur textuel. Veillez juste à ne pas être contradictoire entre ces deux points de vues sur le même fichier Ecore.

Génération du modèle

Dans cette étapes, vous allez créer un fichier avec l’extension « .genmodel » ,à partir de l'assistant « EMF Generator Model » pour notre fichier « Wdl.ecore » . Sur la deuxième page « Select Model importer », sélectionnez « Ecore model » ,puis sur la page suivante, sélectionnez votre modèle « .ecore » .

octocat

Sélectionnez ensuite le package «website » pour la génération :

octocat

Une fois le fichier est généré , vous pouvez obtenir les trois plugins, « website », « website.edit » et « website.editor ». Maintenant tout est près pour créer votre éditeur graphique avec sirius , cette étapes sera détaillé après avoir parler de la deuxième méthode.

Méthode 2 Génération du modèle à partir d’une syntaxe concrète.

La deuxième méthode consiste à utiliser des outils basé sur les méta modèles comme Xtext et GMF pour la création d’une syntaxe concrète et générer le modèle. Dans le monde actuelle, l’outil Xtext est le framework le plus utilisé pour le développement de langages de programmation et de DSL (Domain-Specific programming Language), surtout quand il s’agit de décrire et d’éditer des détails . Dans le tutoriel précédent ‘ Définir une grammaire DSL avec xtext ‘ nous avons déjà présenté les étapes à suivre pour la création d’un projet Xtext . Après avoir créé votre projet xtext vous aurez qu’à définir votre grammaire Xtext. Dès que vous terminez cette étapes , vous pouvez générer l’infrastructure associée à la grammaire.

Génération de l’infrastructure associée à la grammaire .

Fichier “.mwe2”

Le fichier « GenerateWdl.mwe2 » situé dans le même dossier que le fichier « Wdl.Xtext » définit la liste des fragments qui vont être utilisés par Xtext pour la génération de l'éditeur. Pour plus de détails vous pouvez consulter le lien suivant : https://eclipse.org/Xtext/documentation/306_mwe2.html .

#Génération du modèle

La génération de votre grammaire peut se faire de deux façons différentes: Soit par clic droit sur le fichier Xtext → « Run As → Generate Xtext Artifacts » Soit par clic droit sur le fichier MWE2→ « Run As → MWE2 Workflow » Cette action va lancer la génération de tous les éléments nécessaires à votre éditeur.

La première fois que vous lancez la génération, le message suivant apparaît dans la console Eclipse : ATTENTION It is recommended to use the ANTLR 3 parser generator (BSD licence - http://www.antlr.org/license.html). Do you agree to download it (size 1MB) from 'http://download.itemis.com/antlr-generator-3.2.0.jar'? (type 'y' or 'n' and hit enter)

Il vous suffit de répondre par ‘y’ et le processus de génération continue. À la fin de la génération, tous les dossiers « src-gen » de vos plugins devraient être fournis avec un certain nombre de classes. Et maintenant vous arriver à l'étape de création de votre éditeur graphique avec sirius que nous allons la détailler dans le titre suivant .

#Création de l’éditeur . // peut etre inséré dans le chapitre de la solution // Parmi les points forts de sirius est que le rendu peut être observé en temps réel Parallèlement à la spécification, à partir de l'instanciation du modèle que vous voulez le représenter. Nous allons voir maintenant toutes les étapes pour la construction d’une atelier sous sirius .

Les étapes

Étape 1: lancer un Eclipse avec vos plugins

Cette étape consiste à lancer un Eclipse avec nos plugins. Pour cela, ouvrez d'abord le panneau « Run configurations » via le menu « Run→ Run configurations », puis créez une nouvelle configuration de type « Eclipse Application ».

octocat

Puis appuyez sur “Run” , une nouvelle instance d’eclipse s’apparaitre , et vous allez travailler uniquement dans cette dernière .

Étape 2: Instanciation du modèle

Pour instancier le modèle , vous devez créer un projet de type modeling, donnez un nom au projet par exemple “WebSite.example” .

Dans le projet créé, on peut identifier un fichier appelé « representations.aird ». Ce dernier permettra à Sirius de stocker l'agencement des éléments dans l'éditeur que l'on va créer, de manière indépendante du modèle lui-même. Notez qu'il existe un seul fichier « .aird » par « Modeling Project », mais chaque fichier peut stocker plusieurs représentations. Créez ensuite une instance de votre modèle , pour cela existe deux manières : Si vous avez utilisé la méthode 1 ‘Syntaxe abstraite avec Ecore ’ Créez une instance du modèle grâce au menu ( New → Example EMF Model Creation Wizards → Website model ). Donnez un nom à votre modèle, puis sélectionnez comme objet racine. Si vous avez utilisé la méthode 2 ‘Génération du modèle à partir d’une syntaxe concrète’ Créez une instance du modèle comme suit : (New → File ) et donnez un nom à votre nouveau fichier qui va prendre obligatoirement l’extension donnée dans la création du projet Xtext , exemple : ‘.Wdl’. Vous pouvez ensuite créer les éléments du votre modèle.

Étape 3: Initialisation de l’éditeur

La création des éditeurs de Sirius se fait au travers des projets que l'on nomme « Viewpoint Specification Project ». Vous devez créez un projet de type ‘Viewpoint Specification Project’ (File→ new → other → Sirius → Viewpoint Specification Project).

octocat

Enfin de processus vous trouverez un fichier avec l’extension ‘.odesign’ dans lequel vous allez définir vos éléments .

octocat

La première étape est de créer une ‘Viewpoint’, avec un clic droit sur l'élément « Projet », créez un viewpoint.Comme son nom l'indique, un viewpoint sert à définir une manière de représenter un modèle.

octocat

Dans les propriétés, vous donnez un Id et un label , et Dans le champ ‘Model File Extension’, mettez l'extension des fichiers de modèle que vous voulez associer à votre viewpoint. Vous devez ensuite associer une représentation à votre Viewpoint afin d'indiquer à Sirius quel type d'éditeur vous voulez créer. Il faut noter qu’il existe plusieurs types d’éditeur : des éditeurs sous forme d'arbre, de tableau, de diagramme ou encore de diagramme de séquence. Pour se faire, clic droit sur ‘viewpoint’, puis choisissez (New Representation → Diagram Description ), et dans les propriétés , renseignez un Id , un label et l'objet de base représenté par le diagramme dans le champ ‘Domain class’.

Étape 4: Visualisation en temps réel

Spécification des éléments et la création de la palette .

Spécification des éléments :

Cette section décrit comment spécifier les éléments graphiques qui devraient apparaître sur votre diagramme et comment les organiser. Notez que tous les éléments graphiques et les outils sur un diagramme de Sirius font partie d'une couche, chaque diagramme doit avoir une couche par défaut , cette couche par défaut est créée lors de la création du diagramme. Lorsqu'une couche est activée, tous les éléments graphiques et outils qu'il définit sont également activés. Pour plus de détails : https://www.eclipse.org/sirius/doc/specifier/diagrams/Diagrams.html#layers_graphical_elements

Les noeuds & les conteneurs:

Les diagrammes de Sirius peuvent contenir plusieurs types d'éléments graphiques, qui sont décrits dans les éléments de la couche . les plus utilisées sont: les noeuds et les conteneurs . Mais avant de choisir une représentation aux éléments, vous devez d’abord spécifier un “Layer” . Le “Layer” permettra à l'utilisateur d'afficher ou non certains éléments à la volée grâce au bouton idoine dans la barre d'outils de l'éditeur généré.

octocat

Pour le créer , sélectionnez votre diagramme ,:

Nœuds pour les éléments qui ne peuvent contenir d'autres éléments.

Contenants pour éléments pouvant contenir d'autres éléments, y compris d'autres conteneurs.