février
2009
Un article de azerr
Il existe à ce jour de nombreux plugins Eclipse qui permettent de gérer un fichier de configuration XML à l’aide d’un éditeur graphique.
Un exemple bien connu est celui de JSF webtools qui permet de gérer le workflow des pages d’un projet JSF (navigation-rules) du fichier XML de configuration faces-config.xml à l’aide d’un éditeur graphique.
Cet éditeur graphique s’appuie sur plusieurs projets dont GEF, EMF et WST.
Concernant GEF et EMF, il y a beaucoup de documentation, mais concernant WST? J’ai passé un temps fou à décortiquer les sources de JSF webtools pour comprendre les grands principes et je vais tenter à travers plusieurs billets, d’expliquer un exemple concret qui utilise GEF, WST et EMF ensemble pour gérer un fichier XML à partir d’un éditeur graphique GEF.
Pour suivre ces billets, le pré-requis est d’avoir des connaissances avec GEF et EMF. Concernant WST (projet faisant parti de WTP), il est découpé en une multitude de plugins, mais celui qui nous intéressera en particulier sera celui qui gère le DOM XML. Autrement dit il permet de synchroniser un éditeur (Texte, XML) avec un DOM qui est capable de déclencher des événements lorsque le contenu de l’éditeur de texte est modifié.
L’exemple choisi est celui de Shape EMF qui est basé sur EMF et GEF. L’article datant de 2005, le projet devra être modifié dans un premier temps pour le remettre à jour car à l’époque un plugin Eclipse ne suivait pas totalement l’architecture OSGI.
Pour rappel, Shapes EMF permet d’afficher sous forme graphique (avec GEF) le fichier modèle EMF *shapesemf.
Ce fichier est un fichier XML sérializer dans un format XML propre à EMF. Si vous éditer un fichier *shapesemf qui est constitué d’un rectangle et d’une ellipse, vous pourrez visualiser ce contenu XML :
<org.eclipse.gef.examples.shapes.emf.model:ShapesDiagram xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:org.eclipse.gef.examples.shapes.emf.model="http:///org/eclipse/gef/examples/shapes/emf/model.ecore">
<shapes xsi:type="org.eclipse.gef.examples.shapes.emf.model:EllipticalShape" x="57" y="32" width="80" height="76"/>
<shapes xsi:type="org.eclipse.gef.examples.shapes.emf.model:RectangularShape" x="185" y="99" width="113" height="82"/>
</org.eclipse.gef.examples.shapes.emf.model:ShapesDiagram>
Comme on peut le constater ce XML est assez difficle à lire et le but de mes billets est de pouvoir expliquer comment sérializer le diagramme EMF Shape en un XML plus simple et comment synchroniser l’instance EMF avec le DOM XML.
J’expliquerais comment modifier ce projet pour le coupler à WST, ce qui permettra de :
- sérializer l’instance ShapesDiagram EMF en un XML de son choix :
<?xml version="1.0" encoding="UTF-8"?>
<diagram>
<shapes>
<ellipse height="65" width="101" x="32" y="29"/>
<rectangle height="79" width="101" x="86" y="138"/>
<ellipse height="73" width="113" x="234" y="34"/>
</shapes>
</diagram> - Synchroniser l’instance EMF avec le DOM XML obtenu à partir d’un éditeur texte
Ceci permettra d’ouvrir 2 éditeurs à partir du fichier XML Shape :
- L’éditeur GEF qui affiche le diagramme sous forme graphique
- un éditeur Texte (en faisant Open With -> Text editor) qui affiche le contenu du XML
Ces 2 éditeurs seront synchronisés sans que l’on enregistre l’éditeur courant , autrement dit si on modifie l’éditeur GEF (ajout d’un rectangle, déplacement d’un rectangle…), l’éditeur Texte se rafraîchira avec le nouveau contenu XML. Si on modifie le contenu XML (en ajoutant un nouvel élément <rectangle /> ) l’éditeur GEF se rafraîchira en ajoutant la nouvelle figure.
Voici une copie d’écran de ce que l’on obtiendra :
Soyez indulgent s’il vous plait car je ne suis pas un expert en WST et je tenterai au mieux d’expliquer ce que j’ai compris. Si vous êtes intéréssés par le sujet, n’hesitez pas à poster vos remarques afin d’obtenir une liste de billets pertinents expliquant WST.
Enfin je remercie djo, membre de DVP et Olivier Moïses créateur de Wazaabi2 pour m’avoir aidé sur ce sujet.
7 Commentaires + Ajouter un commentaire
Articles récents
- Conception d’un client Eclipse RCP et serveur OSGI avec Spring DM [step5]
- Conception d’un client Eclipse RCP et serveur OSGI avec Spring DM [step4]
- Conception d’un client Eclipse RCP et serveur OSGI avec Spring DM [step3]
- Conception d’un client Eclipse RCP et serveur OSGI avec Spring DM [step2]
- Conception d’un client Eclipse RCP et serveur OSGI avec Spring DM [step1]
Commentaires récents
- dans Conception d’un Editeur Eclipse de workflow XML [step 0]
- dans Conception d’un Editeur Eclipse de workflow XML [step 19]
- dans Conception d’un Editeur Eclipse de workflow XML [step 7]
- dans Conception d’un Editeur Eclipse de workflow XML [step 7]
- dans Conception d’un Editeur Eclipse de workflow XML [step 7]
Bonjour Alfonso ,
>Merci beaucoup, Angelo.
De rien:)
>Je vais étudier ces articles tandis que j’attends (avec beaucoup d’envies) cette nouvelle remise
>Il est dommage que le dirty ait donné des problèmes, la série d’articles restaient très intéressants.
En fait j’ai decide de repartir d’un projet vierge pour maitriser tous les concepts et voir comment gerer aux mieu xle dirty en decortiquant les divers projets comme JSF Webtools, Spring Webflow, PDE Incubator….
>Merci de nouveau par tous ces apports,
Merci de prendre le temps de lire les billets e rédiger et de les critiquer le plus possible pour avoir des billets pertinents.
>Alfonso
Angelo
Merci beaucoup, Angelo.
Je vais étudier ces articles tandis que j’attends (avec beaucoup d’envies) cette nouvelle remise
Il est dommage que le dirty ait donné des problèmes, la série d’articles restaient très intéressants.
Merci de nouveau par tous ces apports,
Alfonso
Bonjour Alfonso,
>Salut azerr (Angelo ?),
C’est Angelo mon prénom, azerr c’est mon login DVP
>Le premier, lui dire que je ne parle pas français mais j’essaierai de m’exprimer le mieux possible (avec l’aide d’un traducteur, mais oui
Pas de souci, je connais ca lorsque je participe a des forums anglais.
>Le deuxième, le féliciter pour la série si bonne à articles que vous éditez.
Merci!
>En somme, cet article me semble très intéressant, il m’est très utile et j’apprends beaucoup avec lui.
C’est cool:)
>Cependant, je vois qu’il n’est pas achevé, qu’il manque, au moins, la partie de synchronisation.
>D’autre part, je vois dans un autre commentaire que vous ne savez pas si vous allez l’achever.
En effet je ne vais pas l’achever car j’ai décidé de partir sur une autre série d’article qui est « Conception d’un Editeur Eclipse de workflow XML »
L’idée est de partir d’un schéma XML et de générer l’éditor de Workflow avec EMF. J’ai déja rédigé 3 billets sur le sujet :
* http://blog.developpez.com/akrogen/p7496/plugin-eclipse/conception-d-un-editeur-eclipse-de-workf-0 : décortique JSF Web tools.
* http://blog.developpez.com/akrogen/p7532/plugin-eclipse/conception-d-un-editeur-eclipse-de-work-1 : initialise l’editer de workflow EMF a partir d’un schema XML.
* http://blog.developpez.com/akrogen/p7532/plugin-eclipse/conception-d-un-editeur-eclipse-de-work-2 : parle des references EMF avec les ID.
Le billet suivant (step3) parlera de la synchronisation editeur Texte et EMF (le sujet qui vous interesse). Je suis en train de le rediger et il sera publie fin de semaine ou debut de la semaien prochaine.
>Je lui demanderais humblement de s’il vous plaît l’achever, il est sûr qu’il sera utile pour une grande quantité de programmeurs puisque le sujet >que vous touchez ne s’explique pas dans aucun autre endroit.
Oui c’est pour ca que j’ai décidé de rédiger des billets dessus:) Mais ca prend du temps. Je vous conseille donc de lire les billets « Conception d’un Editeur Eclipse de workflow XML » et la partie synchronisation arrivera bientot.
>Je comprends aussi que faire des articles prend du temps (surtout s’ils sont expliqués si bien comme les siens) et peut-être ce n’est pas le >meilleur moment pour vous.
Si je suis en plein redaction en ce moement.
>Dans tout cas, s’il vous plaît: pourriez-vous me passer (le plus tôt possible) le code final, le code qui correspond à la dernière image qui se >montre comme exemple à la fin de cet article ?. Il me ferait un grand faveur.
Le probléme c’est que je en suis pas allé jusqu’au bout car j’ai eu plein de problème (dirty de l’editor…). Comme je vous ai dit j’ai decide de repartir depuis le debut pour bien maitriser tous les concepts.
>(Vous avez mon email dans mon profil)
>Merci beaucoup d’avance,
>Alfonso Muñoz.
Angelo
Salut azerr (Angelo ?),
Le premier, lui dire que je ne parle pas français mais j’essaierai de m’exprimer le mieux possible (avec l’aide d’un traducteur, mais oui
Le deuxième, le féliciter pour la série si bonne à articles que vous éditez.
En somme, cet article me semble très intéressant, il m’est très utile et j’apprends beaucoup avec lui. Cependant, je vois qu’il n’est pas achevé, qu’il manque, au moins, la partie de synchronisation.
D’autre part, je vois dans un autre commentaire que vous ne savez pas si vous allez l’achever. Je lui demanderais humblement de s’il vous plaît l’achever, il est sûr qu’il sera utile pour une grande quantité de programmeurs puisque le sujet que vous touchez ne s’explique pas dans aucun autre endroit.
Je comprends aussi que faire des articles prend du temps (surtout s’ils sont expliqués si bien comme les siens) et peut-être ce n’est pas le meilleur moment pour vous.
Dans tout cas, s’il vous plaît: pourriez-vous me passer (le plus tôt possible) le code final, le code qui correspond à la dernière image qui se montre comme exemple à la fin de cet article ?. Il me ferait un grand faveur.
(Vous avez mon email dans mon profil)
Merci beaucoup d’avance,
Alfonso Muñoz.
Effectivement je n’avais pas lu les autres articles ^^
je viens d’y jeter un coup d’oeuil rapide et beaucoup de réponses à mes questions s’y trouvent…
la lecture attentive sera pour vendredi et ce weekend,
franchement j’ai hâte!
merci
Bonjour keb83,
Je suis ravi que le sujet t’intéresse. As tu lu les autres articles? Il reste effectivement le dernier article qui permet de synchroniser l’instance EMF avec l’editeur XML sans sauvegarde qui n’a pas ete fini de rediger et ou je n’ai pas fini le code non plus. Pourquoi? Car pour gerer ceci, il faut utiliser une classe EMF2DOMSSSERenderer de WST qui est comme EMF2DOMRenderer (lire les articles) mais qui se base sur DOM-SSE. Avant de finaliser ce dernier article je me suis lance dans l’explication de DOM-SSE dans les articles Tutorial WST- DOM SSE [Step *]. je te conseille de les lire pour comprendre ce qu’est DOM-SSE.
Je vais voir si j’ai un peu de temps pour finnaliser cet article, mais je ne te promets rien.
Angelo
salut salut,
la synchro sans avoir à faire de save avant… j’ai beaucoup à apprendre ^^
je manque de temps par contre pour attendre des billets postés, serait-ce possible d’avoir le code source? histoire d’y plonger la tête la première pendant quelque jours?