Présenté Par : ABOUNASR MERYEM
BOUJADI SOUKAINA
Transformation des fichiers XMI en fichiers
SVG avec JAVA et ATL
TRANSFORMATION XMI EN SVG
EN JAVA
 SVG : Scalable Vector
Graphics
 Exemple transformation
XML en SVG avec JAVA
FORMALISM...
Chapitre 1: FORMALISMES XML ET XMI
 Le formalisme XML (Extended Markup Language) permet la
représentation structurée d'informations dans un format texte.
 ...
Extensible Markup Language : XML
<?xml version="1.0" ?>
<!DOCTYPE Livre "Livre.dtd">
<Livre Auteur="Michel Nakhlé et Charl...
 XMI est le langage d’échange entre le monde des modèles et le monde
XML (eXtensible Markup Language).
 C’est le format ...
 Dans un document XML, mais aussi, à partir de document XML il est
possible de reconstruire des méta modèles.
 Les méta-...
 Objectif: permettre l'échange de méta données entre outils de
modélisation basés sur UML et la communication des réperto...
XML Metadata Interchange : XMI
 Ile est essentiel pour le receveur d’un document XML de pouvoir extraire les
données du document. Cette opération est po...
Parsing fichier XML
ceux-ci construisent une structure
hiérarchique contenant des objets
représentant les éléments du docu...
 JDOM est une API open source Java dont le but est de représenter
et manipuler un document XML de manière intuitive pour ...
API Jdom
 JDOM n'est pas un parseur : il a d'ailleurs besoin d'un parseur externe
de type SAX ou DOM pour analyser un doc...
API Jdom
Chapitre 2: Transformation XMI en SVG avec java
 Le graphisme sur le web :
 Images souvent conséquentes en taille,
 Résolution fixe,
 Impossible de rajouter des infor...
 Qu'apporte le graphique vectoriel ?
 Indépendant de la résolution,
 Le client interprète le contenu du document,
 Le ...
SVG : Scalable Vector Graphics
SVG est l'acronyme de Scalable Vector
Graphics, un langage de description des
graphiques bi...
Structure d’une simple page SVG
 Une déclaration XML standarde, par exemple
 Pour un document non "standalone", il faut ...
Structure d’une simple page SVG
 La racine d’un contenu SVG est "svg":
 Il faut déclarer un namespace dans la racine (si...
SVG : Scalable Vector Graphics
<?xml version="1.0" =encoding"UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http...
SVG : Scalable Vector Graphics
Eléments graphiques de base
 SVG définit un certain nombre d’éléments graphiques de base. ...
SVG : Scalable Vector Graphics
Eléments graphiques de base
 Chaque élément graphique est représenté par un élément XML qu...
 Dans cette partie onmontrer comment parser un ficher XMI avec le
langage JAVA utilisant L’API jdom2 .
 Pour cela on va ...
Création du diagramme
de cas d’utilisation avec
Visual Paradigm
Partie du fichier XMI Exporté
Exemple transformation XML en SVG avec JAVA
 Fonction pour parser le fichier XMI avec SaxBuilder :
Exemple transformation XML en SVG avec JAVA
Parsing avec Java pour...
 Fonction pour charger la liste des éléments :
Exemple transformation XML en SVG avec JAVA
Parsing avec Java pour extrair...
 Maintenant on va parcourir la liste des éléments pour récupérer
la liste des Acteurs, cas d’utilisations et associations...
 Dans cette étape on va dessiner notre diagramme de cas d’utilisation avec
SVG .
Exemple transformation XML en SVG avec J...
Exemple transformation XML en SVG avec JAVA
Transformation du diagramme en SVG
/*
cette fonction écrit du code XML dans le...
Exemple transformation XML en SVG avec JAVA
Transformation du diagramme en SVG
/*
Fonction pour créer la balise SVG dans l...
Exemple transformation XML en SVG avec JAVA
Transformation du diagramme en SVG
// Fonction pour dessiner un ellipse
public...
Exemple pour dessiner un acteur
Exemple transformation XML en SVG avec JAVA
String[] data=new String[4];
data[0]="font-siz...
Exemple transformation XML en SVG avec JAVA
Exemple pour dessiner un cas d’utilisation
String[] data=new String[4];
data[0...
Exemple transformation XML en SVG avec JAVA
Exemple pour dessiner une association
String[] data={ "stroke-linejoin","round...
Le document SVG
généré a partir de
notre programme
Chapitre 3: TRANSFORMATION XMI EN SVG AVEC ATL
 Langage ATL
 Transformation du diagramme avec ATL
 ATL (ATLAS Transformation Language) est le langage de transformation
développé dans le cadre du projet ATLAS.
 ATL est ...
Le langage ATL
Une transformation de modèles définit la façon de générer un modèle Mb,
conforme au méta-modèle MMb, à part...
 Transformation Modèle vers Modèle : module
 Transformation Modèle vers Texte : requete
Exemples de transformations
 La structure d’un module ATL est composée par :
Exemples de transformationsTransformation
Modèle vers Modèle : module
Se...
 La section d’en-tête définit le nom du module de transformation ainsi
que le nom des variables correspondantes aux modèl...
 Cette section est optionnelle, elle permet de déclarer les
bibliothèques ATL qui doivent être importées.
 Sa syntaxe:
L...
 Les helpers sont les fonctions de ATL d’après le standard OCL.
 OCL définit deux sortes de helpers : opération et attri...
Exemple
Les Helpers
helper [context type_du_contexte]? def : nom_du_helper :
type_de_retour = expression;
La syntaxe d’un ...
 Les règles standards (Matched rules) : Ils constituent le noyau
de la transformation déclarative.
 Elles permettent de ...
 une requête (query) est une transformation d’un modèle vers un type primitif .
 Ces règles ont le format suivant :
quer...
 Vous trouvez dans ce site des bons exemples concernant les
transformations ATL (le code source et la documentation).
htt...
 Installer Eclipse Modeling
 Ajouter Plugin ATL
Installation d’environnement de travail
 Téléchargez l’IDE environnement de développement intégré Eclipse
depuis l’adresse suivante : http://www.eclipse.org/down...
Ajouter Plugin ATL et GMF
 allez sur : « File » -> « new » -> « Other » : Et vérifiez si les dossiers
« ATL » et « Graphical Modeling Framework » e...
Objectifs :
 Créer un projet ATL
 Structurer votre projet ATL
 créer un Meta-Model ecore (ajouter une classe , un attri...
Votre Premier Projet ATL
1)Créer un projet ATL
• New -> Other
• Donner un nom à votre Projet ATL
Créer trois dossiers
 Transformations : les fichiers ATL.
 Metamodels : les fichiers Metamodels que vous avez besoin dan...
 Un Méta-Modèle : est un fichier ecore
 Exemple : Création de MetaModel SVG
Votre Premier Projet ATL
3) Créer un Méta-Mo...
 Vous avez deux méthodes pour manipuler votre méta-modèle :
Méthode 1 : avec Sample Ecore Model Editor
Méthode 2 :Ecore D...
Méthode 1 : avec Sample Ecore Model Editor
• Ajouter une classe à un Méta-Modèle
• Si Properties ne s’affiche pas ; aller ...
 Ajouter un attribut une classe
 Il a besoin d’un nom, un type et la multiplicité
Méthode 1 : avec Sample Ecore Model Ed...
 Passer au Mode graphique
 Marquer une classe abstraite :
Méthode 2 :Ecore Diagram Editing
 Créer une association de type composition (one to many)
 Créer par exemple d’autre classe qui s’appelle shape
 Cliquer...
Votre Premier Projet ATL
4) Créer un fichier ATL (Model 2 Model)
4) Votre Premier Projet ATL
Créer un fichier ATL (Model 2 Model)
Votre Premier Projet ATL
5) Créer un fichier ATL (Model 2 Text)
Votre Premier Projet ATL
6) Exécuter un fichier ATL
 Objectif : la transformation De XML vers SVG avec ATL.
 Les étapes à suivre pour réaliser ce projet :
 Créer les Méta ...
 Voici un schéma explicatif, qui montre les trois étapes pour transformer
un Model UML de diagramme de use case à un fich...
1) Méta-Modèle de Diagramme de Use case
2) Méta-Modèle de SVG
3) Méta-Modèle de XML
 Pour bien savoir l’entête que vous devez mettre dans le fichier xml
généré par le logiciel Visual Paradigm vous devez su...
 Dans notre cas, voici ce qui est généré
 Ajouter ces attribus au fichier XML généré par Visual Paradigm
4) Un exemple d...
 Transformation UML vers SVG
 Transformation SVG vers XML
 Transformation XML vers Text
5) Définir les transformations ...
Transformation UML vers SVG
Transformation SVG vers XML
Transformation XML vers Text
 Il faut exécuter dans l’ordre :
 Le fichier ATL UML2SVG
 Le fichier ATL SVG2XML
 Le fichier ATL XML2TEXT
6) Exécution...
Exécuter le fichier UML2SVG
Génération du fichier
svgModel.xml
Exécuter le fichier SVG2XML
Génération du fichier svgModel_XML.xml
Exécuter le fichier XML2TEXT
Génération du fichier
DiagramUseCase.svg
Fichier DiagramUseCase.svg généré
Merci pour votre attention

Prochain SlideShare
Chargement dans…5
×

Présentation - Transformation d'un fichier XMI vers SVG (JAVA et ATL)

1 097 vues

Publié le

Cette présentation présente en bref ce qu’est décrit dans le rapport http://fr.slideshare.net/nasr20/transformation-dun-fichier-xmi-vers-svg-java-et-atl (la démarche de transformation d'un fichier XMI vers SVG en utilisant les deux langage JAVA et ATL)
.

Publié dans : Ingénierie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 097
Sur SlideShare
0
Issues des intégrations
0
Intégrations
28
Actions
Partages
0
Téléchargements
45
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Formalisme XMI
    XMI est le langage d’échange entre le monde des modèles et le monde XML (eXtensible Markup Language). C’est le format d’échange standard entre les outils compatibles MDA. XMI décrit comment utiliser les balises XML pour représenter un modèle UML en XML. Cette représentation facilite les échanges de données (ou métadonnées) entre les différents outils ou plates-formes de modélisation. En effet, XMI définit des règles permettant de construire des DTD* (Document Type Definition) et des schémas XML à partir de méta-modèle, et inversement. Ainsi, il est possible d’encoder un méta-modèle
    Dans un document XML, mais aussi, à partir de document XML il est possible de reconstruire des méta modèles. Les méta-modèles MOF et UML sont décrits par des DTD et les modèles traduits dans des documents XML conformes à leur DTD correspondante. XMI a l’avantage de regrouper les métadonnées et les instances dans un même document ce qui permet à une application de comprendre les instances grâce à leurs méta-données. Ceci facilite les échanges entre applications.
  • Les parseurs utilisant une approche hiérarchique : ceux-ci construisent une structure hiérarchique contenant des objets représentant les éléments du document, et dont les méthodes permettent d’accéder aux propriétés. La principale API utilisant cette approche est DOM (Document Object Model).

    Les parseurs basés sur un mode événementiel permettent de réagir à des événements (comme le début d’un élément, la fin d’un élément) et de renvoyer le résultat à l’application interface utilisant l’aspect événementiel.
  • JDOM est donc un modèle de documents objets open source dédié à Java pour encapsuler un document XML. JDOM propose aussi une intégration de SAX, DOM, XSLT et XPath.
     
    JDOM n'est pas un parseur : il a d'ailleurs besoin d'un parseur externe de type SAX ou DOM pour analyser un document et créer la hiérarchie d'objets relative à un document XML. L'utilisation d'un parseur de type SAX est recommandée car elle consomme moins de ressources que DOM pour cette opération. Par défaut, JDOM utilise le parseur défini via JAXP.
     
    Un document XML est encapsulé dans un objet de type Document qui peut contenir des objets de type Comment, Processing Instruction et l'élément racine du document encapsulé dans un objet de type Element.
  •  
    Malgré la similitude de nom entre JDOM et DOM, ces deux API sont très différentes. JDOM est une API uniquement Java car elle s'appuie sur un ensemble de classes de l'API Java notamment celles de l'API Collection.

    JDOM n'est pas un parseur : il a d'ailleurs besoin d'un parseur externe de type SAX ou DOM pour analyser un document et créer la hiérarchie d'objets relative à un document XML. L'utilisation d'un parseur de type SAX est recommandée car elle consomme moins de ressources que DOM pour cette opération. Par défaut, JDOM utilise le parseur défini via JAXP.
     
    Un document XML est encapsulé dans un objet de type Document qui peut contenir des objets de type Comment, Processing Instruction et l'élément racine du document encapsulé dans un objet de type Element.
  •  
    Malgré la similitude de nom entre JDOM et DOM, ces deux API sont très différentes. JDOM est une API uniquement Java car elle s'appuie sur un ensemble de classes de l'API Java notamment celles de l'API Collection.

    JDOM n'est pas un parseur : il a d'ailleurs besoin d'un parseur externe de type SAX ou DOM pour analyser un document et créer la hiérarchie d'objets relative à un document XML. L'utilisation d'un parseur de type SAX est recommandée car elle consomme moins de ressources que DOM pour cette opération. Par défaut, JDOM utilise le parseur défini via JAXP.
     
    Un document XML est encapsulé dans un objet de type Document qui peut contenir des objets de type Comment, Processing Instruction et l'élément racine du document encapsulé dans un objet de type Element.
  • Cette Schéma ci-dessus montre les exemples de transformations d’UMl vers SVG.
    Par exemple chaque Généralisation dans le Modele de diagramme de Use case sera transformer en SVG par une Line et un Polygon.
  • Pourquoi on a pensé d’ajouter les 2 dernières transformations ?
    Il y a deux problèmes que nous avons rencontrés dans la 1ère transformation. Elle ne permet pas d’afficher la valeur de text par exemple <text> bonjour </text>.
    Le message bonjour ne peut pas être affiché par la 1er transformation, mais avec XMl il y a une classe qui s’appelle Text , qui permet par un traitement dans la 3eme transformation d’écrire le message .
    Le 2ème problème il y a des attributs qui contient – ou _  qui génère une erreur de compilation dans un fichier ATL, par exemple l’attribut stroke-width. Pour éviter ce problème on doit nommer cet attribut par un autre nom dans le meta Modele de SVG , et dans la transformation de SVG 2 Xml on va le nommer comme on veut.
    .
    Dans le Shéma au-dessus , il montre que SVG sera le Root du fichier Xml généré.
    Ainsi chaque classe, son correspandant en XML est un Element.
    Chaque attribut d’une classe de SVG, sera remplacer par Attribute en XML.
    Et chaque value de la classe Text de SVG , son correspandant en XML est un Text .
  • Présentation - Transformation d'un fichier XMI vers SVG (JAVA et ATL)

    1. 1. Présenté Par : ABOUNASR MERYEM BOUJADI SOUKAINA Transformation des fichiers XMI en fichiers SVG avec JAVA et ATL
    2. 2. TRANSFORMATION XMI EN SVG EN JAVA  SVG : Scalable Vector Graphics  Exemple transformation XML en SVG avec JAVA FORMALISMES XML ET XMI  XML  XMI  parsing fichier XML  L’API JDOM 1 2 PLAN TRANSFORMATION XMI EN SVG AVEC ATL  Langage ATL  Transformation du diagramme avec ATL 3
    3. 3. Chapitre 1: FORMALISMES XML ET XMI
    4. 4.  Le formalisme XML (Extended Markup Language) permet la représentation structurée d'informations dans un format texte.  Il peut par conséquent être utilisé comme format syntaxique de transport de modèles et de méta-modèles.  La structure de l'information est alors définie dans un fichier annexe au format DTD (Document Type Description).  L'avantage d'un tel formalisme est de permettre l'échange d'informations dès lors que l'on base celle-ci sur une DTD normalisée. Extensible Markup Language : XML
    5. 5. Extensible Markup Language : XML <?xml version="1.0" ?> <!DOCTYPE Livre "Livre.dtd"> <Livre Auteur="Michel Nakhlé et Charles Modiguy"> <Titre>Rapport</ Titre > <Chapitre id="1"> Premier Chapitre. Introduction. </Chapitre > <Chapitre id="2"> Second Chapitre. Glossaire. </Chapitre > </Livre>  Exemple de document XML représentant un livre et sa table des matières .
    6. 6.  XMI est le langage d’échange entre le monde des modèles et le monde XML (eXtensible Markup Language).  C’est le format d’échange standard entre les outils compatibles MDA.  XMI décrit comment utiliser les balises XML pour représenter un modèle UML en XML.  Cette représentation facilite les échanges de données (ou métadonnées) entre les différents outils ou plates-formes de modélisation XML Metadata Interchange : XMI
    7. 7.  Dans un document XML, mais aussi, à partir de document XML il est possible de reconstruire des méta modèles.  Les méta-modèles MOF et UML sont décrits par des DTD et les modèles traduits dans des documents XML conformes à leur DTD correspondante. XML Metadata Interchange : XMI XMI a l’avantage de regrouper les métadonnées et les instances dans un même document ce qui permet à une application de comprendre les instances grâce à leurs méta-données. Ceci facilite les échanges entre applications
    8. 8.  Objectif: permettre l'échange de méta données entre outils de modélisation basés sur UML et la communication des répertoires de méta données basés sur le MOF deux standards de l'OMG.  XMI se fonde sur les trois standards XML, UML et MOF :  UML est un formalisme orienté objet de conception et de documentation d'applications.  MOF est une technologie de définition et de représentation de méta données en tant qu'objets CORBA. XML Metadata Interchange : XMI
    9. 9. XML Metadata Interchange : XMI
    10. 10.  Ile est essentiel pour le receveur d’un document XML de pouvoir extraire les données du document. Cette opération est possible à l’aide d’un outil appelé parseur.  Le parseur permet de créer une structure hiérarchique contenant les données contenues dans le document XML.  On en distingue deux types selon l’approche qu’ils utilisent pour traiter le document Les parseurs utilisant une approche hiérarchique Les parseurs basés sur un mode événementiel Parsing fichier XML
    11. 11. Parsing fichier XML ceux-ci construisent une structure hiérarchique contenant des objets représentant les éléments du document, et dont les méthodes permettent d’accéder aux propriétés. La principale API utilisant cette approche est DOM (Document Object Model). Les parseurs utilisant une approche hiérarchique permettent de réagir à des événements (comme le début d’un élément, la fin d’un élément) et de renvoyer le résultat à l’application interface utilisant l’aspect événementiel. Les parseurs basés sur un mode événementiel
    12. 12.  JDOM est une API open source Java dont le but est de représenter et manipuler un document XML de manière intuitive pour un développeur Java sans requérir une connaissance pointue de XML.  JDOM est donc un modèle de documents objets open source dédié à Java pour encapsuler un document XML. JDOM propose aussi une intégration de SAX, DOM, XSLT et XPath. API Jdom
    13. 13. API Jdom  JDOM n'est pas un parseur : il a d'ailleurs besoin d'un parseur externe de type SAX ou DOM pour analyser un document et créer la hiérarchie d'objets relative à un document XML.  Un document XML est encapsulé dans un objet de type Document qui peut contenir des objets de type Comment, Processing Instruction  l'élément racine du document encapsulé dans un objet de type Element.
    14. 14. API Jdom
    15. 15. Chapitre 2: Transformation XMI en SVG avec java
    16. 16.  Le graphisme sur le web :  Images souvent conséquentes en taille,  Résolution fixe,  Impossible de rajouter des informations,  Difficile d'adapter un environnement de visualisation,  Les données sont statiques et il n'y a pas d'interactions possibles (gifs animés),  Solutions propriétaires. SVG : Scalable Vector Graphics
    17. 17.  Qu'apporte le graphique vectoriel ?  Indépendant de la résolution,  Le client interprète le contenu du document,  Le contenu est « recherchable »,  Facile à éditer,  Langage XML qui s'intègre facilement à XHTML. SVG : Scalable Vector Graphics
    18. 18. SVG : Scalable Vector Graphics SVG est l'acronyme de Scalable Vector Graphics, un langage de description des graphiques bidimensionnels en XML. Puisque les images sont générées “en code” à base de formes géométriques et non de pixels, elles sont “zoomables” à l’infini et on peut les redimensionner sans perte de qualité SVG inclut un rendement de qualité, des possibilités de zoom et de panoramique, les filtres sur les objets, le remplissage des formes avec des textures et des gradients, les masques, les animations et l'interactivité et bien d'autres choses encore!
    19. 19. Structure d’une simple page SVG  Une déclaration XML standarde, par exemple  Pour un document non "standalone", il faut indiquer le DTD: SVG : Scalable Vector Graphics <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
    20. 20. Structure d’une simple page SVG  La racine d’un contenu SVG est "svg":  Il faut déclarer un namespace dans la racine (si ce n’était pas fait dans un parent): SVG : Scalable Vector Graphics <svg>....</svg> <svg xmlns="http://www.w3.org/2000/svg"> . . . </svg>
    21. 21. SVG : Scalable Vector Graphics <?xml version="1.0" =encoding"UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="460" height="552"> <!-- un petit rectangle avec des coins arroundis --> <rect x="50" y="50" rx="5" ry="5" width="200" height="100" style="fill:#CCCCFF;stroke:#000099"/> <!-- un texte au meme endroit --> <text x="55" y="90" style="stroke:#000099;fill:#000099;fontsize:24;"> Bonjour Soukaina </text> </svg>
    22. 22. SVG : Scalable Vector Graphics Eléments graphiques de base  SVG définit un certain nombre d’éléments graphiques de base. Voici la liste des éléments les plus importants:  “Rectangles <rect>”  “Le cercle <circle> et l’ellipse <ellipse>”  “Lignes <line> et poli-lignes <polyline>”  “Polygones”  “Formes arbitraires avec <path>”
    23. 23. SVG : Scalable Vector Graphics Eléments graphiques de base  Chaque élément graphique est représenté par un élément XML qui est paramétrable avec des attributs XML et qui hérite d’attributs de ses parents.  Comme dans d’autres langages vectoriels (par ex. VRML), il existe des formes géométriques de base (rectangle, ellipse, cercle, lignes, poly-lignes et polygone). Ensuite il existe une construction pour produire des formes complexes.
    24. 24.  Dans cette partie onmontrer comment parser un ficher XMI avec le langage JAVA utilisant L’API jdom2 .  Pour cela on va :  Créer un diagramme de cas d’utilisation avec Visual Paradigm  Exporter le diagramme sous format XMI  Parser avec Java pour extraire les données nécessaires  Redessiner le diagramme avec SVG Exemple transformation XML en SVG avec JAVA
    25. 25. Création du diagramme de cas d’utilisation avec Visual Paradigm
    26. 26. Partie du fichier XMI Exporté Exemple transformation XML en SVG avec JAVA
    27. 27.  Fonction pour parser le fichier XMI avec SaxBuilder : Exemple transformation XML en SVG avec JAVA Parsing avec Java pour extraire les données nécessaires public Document GetDocument(File file) { Document doc=null; try { doc= saxBuilder.build(file); } catch (JDOMException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } return doc; }
    28. 28.  Fonction pour charger la liste des éléments : Exemple transformation XML en SVG avec JAVA Parsing avec Java pour extraire les données nécessaires public void parser(Document doc) { try { // Obtenir la racine de l’élément racine = doc.getRootElement(); model = racine.getChild("Model", umlNS); // Obtenir les Acteurs ,cas d’utilisation et Association Lelements=model.getChildren("ownedMember"); // Les propriétés pour dessiner les éléments diagram=racine.getChild("Diagram", umlNS); diagram=diagram.getChild("Diagram.element", umlNS); Lpropriete=diagram.getChildren("DiagramElement", umlNS); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } }
    29. 29.  Maintenant on va parcourir la liste des éléments pour récupérer la liste des Acteurs, cas d’utilisations et associations Exemple transformation XML en SVG avec JAVA Parsing avec Java pour extraire les données nécessaires
    30. 30.  Dans cette étape on va dessiner notre diagramme de cas d’utilisation avec SVG . Exemple transformation XML en SVG avec JAVA Transformation du diagramme en SVG
    31. 31. Exemple transformation XML en SVG avec JAVA Transformation du diagramme en SVG /* cette fonction écrit du code XML dans le document qui va être générer */ public static void writeFile(String fname, Document doc){ try{ FileOutputStream out = new FileOutputStream(fname); XMLOutputter xmlOut =new XMLOutputter(Format.getCompactFormat()); xmlOut.output(doc,out); out.flush(); out.close(); } catch (IOException e){ System.err.println(e); } }
    32. 32. Exemple transformation XML en SVG avec JAVA Transformation du diagramme en SVG /* Fonction pour créer la balise SVG dans le document */ public static Element makeSvg( String ns,//namespace URI int svgWidth,// largeur de la fenêtre int svgHeight,// Hauteur de la fenêtre ){ Element svg = new Element("svg",ns); //Les valeurs par défaut des attributs svg.setAttribute("version","1.1"); svg.setAttribute("preserveAspectRatio","none"); svg.setAttribute("width",""+svgWidth); svg.setAttribute("height",""+svgHeight); svg.setAttribute("viewBox", vbMinX + vbMinY + ""+vbWidth + " "+vbHeight); return svg; }
    33. 33. Exemple transformation XML en SVG avec JAVA Transformation du diagramme en SVG // Fonction pour dessiner un ellipse public static Element DessinerEllipse( Element parent, String namespace, int cx,//Abscisse Centre int cy,//Ordonnée Centre int rx,//Rayon Horizontal int ry //Rayon Vertical ){ Element ellipse = new Element("ellipse",namespace); parent.addContent(ellipse); //valeurs par défauts ellipse.setAttribute("fill","rgb(122,207,245)"); ellipse.setAttribute("stroke","black"); ellipse.setAttribute("stroke-width","1"); //les coordonnées de l’ellipse. ellipse.setAttribute("cx",""+cx); ellipse.setAttribute("cy",""+cy); ellipse.setAttribute("rx",""+rx); ellipse.setAttribute("ry",""+ry) ; return ellipse;}
    34. 34. Exemple pour dessiner un acteur Exemple transformation XML en SVG avec JAVA String[] data=new String[4]; data[0]="font-size"; data[1]="14"; data[2]="transform"; int trans=y; data[3]="translate(42,"+trans+")"; Element g = JdomSvg.AjouterNode(svg,//parent ns,//namespace "g", data ); JdomSvg.dessinerCircle(g, ns,14.5,7.5,7.5); JdomSvg.dessinerLine(g, ns,15,15,15,40); JdomSvg.dessinerLine(g, ns,0,24,30,24); JdomSvg.dessinerLine(g, ns,15,40,0,60); JdomSvg.dessinerLine(g, ns,15,40,30,60); JdomSvg.EcrireText(g, ns,-10,70,Journaliste); }
    35. 35. Exemple transformation XML en SVG avec JAVA Exemple pour dessiner un cas d’utilisation String[] data=new String[4]; data[0]="font-size"; data[1]="14"; data[2]="transform"; data[3]="translate("+transX+","+transY+")"; Element g = JdomSvg.ajouterNode(svg,//parent ns,//namespace "g", data ); Element ellipse=JdomSvg.dessinerEllipse(g,ns,Rx1,Ry1,Rx2,Ry2); JdomSvg.ecrireText(g, ns, x ,y ,”Rediger Article”);
    36. 36. Exemple transformation XML en SVG avec JAVA Exemple pour dessiner une association String[] data={ "stroke-linejoin","round"}; Element g= JdomSvg.ajouterNode(svg, ns , "g",data ); JdomSvg.dessinerLine(g, ns, as.getX1(), as.getY1()+10, as.getX2(), as.getY2() ); int[] points={x1,y1,x2,y2,x3,y3}; JdomSvg.dessinerPolygon(g, ns, points);
    37. 37. Le document SVG généré a partir de notre programme
    38. 38. Chapitre 3: TRANSFORMATION XMI EN SVG AVEC ATL  Langage ATL  Transformation du diagramme avec ATL
    39. 39.  ATL (ATLAS Transformation Language) est le langage de transformation développé dans le cadre du projet ATLAS.  ATL est basé sur le standard OCL (Object Constraint Language (OCL)). Le langage ATL
    40. 40. Le langage ATL Une transformation de modèles définit la façon de générer un modèle Mb, conforme au méta-modèle MMb, à partir du modèle Ma conforme au méta-modèle MMa.
    41. 41.  Transformation Modèle vers Modèle : module  Transformation Modèle vers Texte : requete Exemples de transformations
    42. 42.  La structure d’un module ATL est composée par : Exemples de transformationsTransformation Modèle vers Modèle : module Section d’En-tête Section d’Importation facultative Ensemble de helpers Ensemble de règles
    43. 43.  La section d’en-tête définit le nom du module de transformation ainsi que le nom des variables correspondantes aux modèles sources et cibles.  Sa syntaxe:  Exemple : La section d’en-tête module MMa2MMb; Create Mb : MMb [from|refining] Ma : MMa;
    44. 44.  Cette section est optionnelle, elle permet de déclarer les bibliothèques ATL qui doivent être importées.  Sa syntaxe: La section d’importation uses nom_bibliothèque;
    45. 45.  Les helpers sont les fonctions de ATL d’après le standard OCL.  OCL définit deux sortes de helpers : opération et attribut. Exemple Les Helpers helper [context type_du_contexte]? def : nom_du_helper (nom_parhelper [context type_du_contexte]? def : nom_du_helper amètre1 :type_paramètre1 , nom_paramètre2 : type_paramètre2): type_de_retour = expression; La syntaxe d’un helper opération est définie comme suit :
    46. 46. Exemple Les Helpers helper [context type_du_contexte]? def : nom_du_helper : type_de_retour = expression; La syntaxe d’un helper attribut est définie comme suit :
    47. 47.  Les règles standards (Matched rules) : Ils constituent le noyau de la transformation déclarative.  Elles permettent de spécifier, pour quels éléments sources, les éléments cibles sont générés, ainsi que, la façon dont ces éléments cibles sont initialisés. Ces règles ont le format suivant Exemple: Les Règles rule rule_name { from in_var : in_type [( condition )]? [using { var1 : var_type1 = init_exp1; varn : var_typen = init_expn;}]? to out_var1 : out_type1 (bindings1), ... out_varn : out_typen (bindingsn) [do { action_block }]? } rule Book2Publication { from b : Book!Book to out : Publication!Publication ( title <- b.title, nbPages <- b.getSumPages() )}
    48. 48.  une requête (query) est une transformation d’un modèle vers un type primitif .  Ces règles ont le format suivant : query query_name = exp;  Exemple classique : construire une chaîne de caractères.  Comme un module, une requête peut définir des helpers et des attributs Exemples de transformationsTransformation Transformation Modèle vers Texte : requête
    49. 49.  Vous trouvez dans ce site des bons exemples concernant les transformations ATL (le code source et la documentation). http://www.eclipse.org/atl/atlTransformations/ Des exemples de Transformations ATL
    50. 50.  Installer Eclipse Modeling  Ajouter Plugin ATL Installation d’environnement de travail
    51. 51.  Téléchargez l’IDE environnement de développement intégré Eclipse depuis l’adresse suivante : http://www.eclipse.org/downloads/ Installer Eclipse
    52. 52. Ajouter Plugin ATL et GMF
    53. 53.  allez sur : « File » -> « new » -> « Other » : Et vérifiez si les dossiers « ATL » et « Graphical Modeling Framework » existent . Assurer l’ajout de Plugins
    54. 54. Objectifs :  Créer un projet ATL  Structurer votre projet ATL  créer un Meta-Model ecore (ajouter une classe , un attribut à une classe, marquer une classe abstraite, faire une association de type composition)  Créer un fichier ATL (Model 2 Model )  Créer un fichier ATL (Model 2 Text)  Exécuter un fichier ATL) Votre Premier Projet ATL
    55. 55. Votre Premier Projet ATL 1)Créer un projet ATL • New -> Other • Donner un nom à votre Projet ATL
    56. 56. Créer trois dossiers  Transformations : les fichiers ATL.  Metamodels : les fichiers Metamodels que vous avez besoin dans ce projet.  Models : les fichiers Models. Votre Premier Projet ATL 2)Structurer votre Projet ATL
    57. 57.  Un Méta-Modèle : est un fichier ecore  Exemple : Création de MetaModel SVG Votre Premier Projet ATL 3) Créer un Méta-Modèle
    58. 58.  Vous avez deux méthodes pour manipuler votre méta-modèle : Méthode 1 : avec Sample Ecore Model Editor Méthode 2 :Ecore Diagram Editing Votre Premier Projet ATL 3) Créer un Méta-Modèle
    59. 59. Méthode 1 : avec Sample Ecore Model Editor • Ajouter une classe à un Méta-Modèle • Si Properties ne s’affiche pas ; aller à windows -> show View -> other -> tapez properties -> cliquer sur Ok.
    60. 60.  Ajouter un attribut une classe  Il a besoin d’un nom, un type et la multiplicité Méthode 1 : avec Sample Ecore Model Editor
    61. 61.  Passer au Mode graphique  Marquer une classe abstraite : Méthode 2 :Ecore Diagram Editing
    62. 62.  Créer une association de type composition (one to many)  Créer par exemple d’autre classe qui s’appelle shape  Cliquer sur EReference Méthode 2 :Ecore Diagram Editing
    63. 63. Votre Premier Projet ATL 4) Créer un fichier ATL (Model 2 Model)
    64. 64. 4) Votre Premier Projet ATL Créer un fichier ATL (Model 2 Model)
    65. 65. Votre Premier Projet ATL 5) Créer un fichier ATL (Model 2 Text)
    66. 66. Votre Premier Projet ATL 6) Exécuter un fichier ATL
    67. 67.  Objectif : la transformation De XML vers SVG avec ATL.  Les étapes à suivre pour réaliser ce projet :  Créer les Méta Modèles (SVG , Diagramme Use Case).  Créer un exemple de Modèle de diagramme de use case au format xml  Définir Les transformations ATL.  Exécution les fichiers ATL Transformation du diagramme avec ATL
    68. 68.  Voici un schéma explicatif, qui montre les trois étapes pour transformer un Model UML de diagramme de use case à un fichier Text d’extension .svg ). Transformation du diagramme avec ATL
    69. 69. 1) Méta-Modèle de Diagramme de Use case
    70. 70. 2) Méta-Modèle de SVG
    71. 71. 3) Méta-Modèle de XML
    72. 72.  Pour bien savoir l’entête que vous devez mettre dans le fichier xml généré par le logiciel Visual Paradigm vous devez suivre ces étapes : 4) Un exemple de Modèle de diagramme de use case au format xml Un fichier project.xmi sera créé.
    73. 73.  Dans notre cas, voici ce qui est généré  Ajouter ces attribus au fichier XML généré par Visual Paradigm 4) Un exemple de Modèle de diagramme de use case au format xml
    74. 74.  Transformation UML vers SVG  Transformation SVG vers XML  Transformation XML vers Text 5) Définir les transformations ATL
    75. 75. Transformation UML vers SVG
    76. 76. Transformation SVG vers XML
    77. 77. Transformation XML vers Text
    78. 78.  Il faut exécuter dans l’ordre :  Le fichier ATL UML2SVG  Le fichier ATL SVG2XML  Le fichier ATL XML2TEXT 6) Exécution des fichiers ATL
    79. 79. Exécuter le fichier UML2SVG Génération du fichier svgModel.xml
    80. 80. Exécuter le fichier SVG2XML Génération du fichier svgModel_XML.xml
    81. 81. Exécuter le fichier XML2TEXT Génération du fichier DiagramUseCase.svg
    82. 82. Fichier DiagramUseCase.svg généré
    83. 83. Merci pour votre attention 

    ×