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

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

FORMALISMES XML ET XMI

XML

XMI

parsing fichier XML

L’API JDOM

1 2

PLANTRANSFORMATION XMI

EN SVG AVEC ATL

Langage ATL

Transformation du diagramme avec ATL

3

Chapitre 1: FORMALISMES XML ET XMI

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

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 XMLreprésentant un livre et satable des matières .

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

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

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.


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

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

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

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.

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

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 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!

Structure d’une simple page SVG

Une déclaration XML standarde, par exemple

Pour un document non "standalone", il faut indiquer le DTD:


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

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>....</svg>

<svg xmlns="http://www.w3.org/2000/svg"> . . . </svg>

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

<rect x="50" y="50" rx="5" ry="5" width="200" height="100"style="fill:#CCCCFF;stroke:#000099"/><text x="55" y="90" style="stroke:#000099;fill:#000099;fontsize:24;">Bonjour Soukaina</text></svg>

SVG : Scalable Vector GraphicsElé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>”

SVG : Scalable Vector GraphicsElé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.

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

Création du diagramme de cas d’utilisation avec Visual Paradigm

Partie du fichier XMI Exporté


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) {



}

return doc;

}

Fonction pour charger la liste des éléments :


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) {



}

}

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 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);

}

}


/*

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;

}


// 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;}

Exemple pour dessiner un acteur


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.EcrireText(g, ns,-10,70,Journaliste);

}

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”);

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);

Le document SVGgénéré a partir denotre programme

Chapitre 3: TRANSFORMATION XMI EN SVG AVEC ATL

Langage ATL Transformation du diagramme avec ATL

ATL (ATLAS Transformation Language) est le langage de transformationdéveloppé dans le cadre du projet ATLAS.

ATL est basé sur le standard OCL (Object Constraint Language (OCL)).

Le langage ATL

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.

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

Section d’En-tête

Section d’Importation facultative

Ensemble de helpers

Ensemble de règles

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;

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;

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_helperamè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 :

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 :

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 {fromin_var : in_type [( condition )]?[using { var1 : var_type1 = init_exp1;

varn : var_typen = init_expn;}]?toout_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()

)}

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

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

http://www.eclipse.org/atl/atlTransformations/

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/downloads/

Installer Eclipse

http://www.eclipse.org/downloads/

Ajouter Plugin ATL et GMF

allez sur : « File » -> « new » -> « Other » : Et vérifiez si les dossiers « ATL » et « Graphical Modeling Framework » existent .

Assurer l’ajout de Plugins

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

Votre Premier Projet ATL1)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 dans ce projet.

Models : les fichiers Models.

Votre Premier Projet ATL2)Structurer votre Projet ATL

Un Méta-Modèle : est un fichier ecore

Exemple : Création de MetaModel SVG

Votre Premier Projet ATL3) Créer un Méta-Modèle

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 ATL3) Créer un Méta-Modèle


• Ajouter une classe à un Méta-Modèle

• Si Properties ne s’affiche pas ; aller à windows -> show View -> other ->

tapez properties -> cliquer sur Ok.

Ajouter un attribut une classe

Il a besoin d’un nom, un type et la multiplicité


Passer au Mode graphique

Marquer une classe abstraite :


Créer une association de type composition (one to many)

Créer par exemple d’autre classe qui s’appelle shape

Cliquer sur EReference


Votre Premier Projet ATL4) Créer un fichier ATL (Model 2 Model)

4) Votre Premier Projet ATLCréer un fichier ATL (Model 2 Model)

Votre Premier Projet ATL5) Créer un fichier ATL (Model 2 Text)

Votre Premier Projet ATL6) 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 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


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


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 xmlgé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.xmisera créé.

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

Transformation UML vers SVG

Transformation SVG vers XML

Transformation XML vers Text

5) Définir les transformations ATL

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 des fichiers ATL

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

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

Engineering

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