Article complet: Tutorial WST- DOM SSE

Le projet Structured Source Editing (SSE) Component est un sous projet de WTP. SSE regroupe un ensemble de plugins Eclipse qui permet de gérer du contenu XML, JSP, HTML, CSS, DTD, Javascript...à travers des editors Eclipse. Beaucoup de plugins sont basés sur SSE, mais aucune documentation développeur SSE n'existe vraiment. Je vais tenter à travers plusieurs billets d'expliquer les grands principes de SSE avec XML. Nous nous appuierons sur le projet que nous appelerons DOM-SSE Shapes qui propose un editeur Eclipse qui permet d'éditer le contenu d'un fichier XML via un éditor constitué d'une interface SWT.

Vous pouvez télécharger le projet org.eclipse.wst.xml.examples.shapes_1.0.0.zip expliqué dans ce billet.

[Suite:]

Plus exactement le fichier XML du fichier shapesExample1.xml :

<diagram title="My shapes diagram" > 
  <shapes> 
  <rectangle x="10" y="20" width="100" height="100" /> 
  <ellipse x="15" y="25" width="80" height="50" /> 
  </shapes> 
</diagram> 


pourra être édité à l'aide de l'éditeur DOM-SSE Shapes et qui permettra de mettre à jour le contenu XML via l'interface SWT :

Pour suivre cette série de billets, il faut que vous ayez un Eclipse qui a les plugins WST correctement installés. Dans la page de téléchargement d'Eclipse, je vous conseille de télécharger la distribution Eclipse IDE for Java EE Developers.

Pour tester le plugin, dézipper org.eclipse.wst.xml.examples.shapes_1.0.0.zip et importez le plugin org.eclipse.wst.xml.examples.shapes_1.0.0 dans votre workspace Eclipse (via Import, Existing projects into workspace). Ouvrez le fichier MANIFEST.MF puis cliquez sur le lien Testing/Launch an Eclipse in Debug Mode.

Cette action, ouvre un deuxième Eclipse qui charge le plugin DOM-SSE Shapes. Pour créer un fichier diagram shape XML dans un projet Eclipse, vous devez :

• Créer un projet TestDOMSSEShapes(Empty, Java...)
• Sélectionner le projet TestDOMSSEShapes puis accéder au menu New/Example

Ceci ouvre le wizard suivant :

Sélectionner Examples/Shapes DOM-SSE Diagram puis Next, puis Finish. Ce wizard génère un fichier shapesExample1.xml et ouvre l'éditeur Shapes DOM-SSE. Vous pouvez modifier le DOM via l'interface SWT. Si vous éditer shapesExample1.xml avec l'editeur XML de WST (avec Open With/XML Editor), vous pourrez remarquer que les 2 editeurs sont synchronisés.

Si vous modifier le contenu du XML dans l'editeur XML, l'editeur DOM-SSE se rafraichit et inversement. L'editeur DOM-SSE permet de modifier le DOM via l'interface SWT :

• La widget SWT Text (Title) permet de mettre à jour l'attribut title de l'élement XML diagram.
• La widget SWT Table (Shapes) permet de mettre à jour les attributs (x, y, width, height) des élements XML rectangle/ellipse. Les boutons Add et Remove permettent d'ajouter supprimer des élements rectangle/ellipse.