Un éditeur XML en JavaScript

L'objectif de ce TP est de réaliser un éditeur XML avec HTML et JavaScript.

Soit le fichier XHTML "editor.html" ci-après.

1
<html>
2
<!--editor.html-->
3
<head>
4
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5
  <title>Éditeur de document</title>
6
  <script type="text/javascript" src="lib.js"></script>
7
</head>
8
<body id="body">
9
  <h1>Édition</h1>
10
  <form>
11
    <p>Ajouter un paragraphe</p>
12
    <input type="text" size="50" id="text"/>
13
    <input type="button" onclick="addPara(document.getElementById('text').value);" value="ajouter"/>
14
    <br/>
15
    <input type="button" onclick="alertXml(document);" value="Afficher DOM"/>
16
    <br/>
17
    <input type="button" onclick="saveXml();" value="Sérialiser XML"/>
18
  </form>
19
  <hr>
20
  <div id="visu">
21
    <h1>Visualisation</h1>
22
    <script type="text/javascript">
23
    //ouvre le fichier XML sur le serveur
24
    var xml = loadXml("src.xml");
25
    //ouvre le fichier XSLT sur le serveur
26
    var xsl = loadXml("xml2html.xsl");
27
    //exécute le XSLT sur le XML
28
    res=execXslt(xml,xsl);
29
    //afficher le résultat
30
    document.getElementById("visu").appendChild(res);
31
</script>
32
</div>
33
</body>
34
</html>

Question

Expliquer le fonctionnement de "editor.html".

Solution

  1. Après avoir affiché les éléments statiques, le script charge un fichier XML situé sur le serveur (src.xml).

  2. Il lui applique une XSLT située sur le serveur pour le transformer en HTML (xml2html.xsl).

  3. Il affiche le résultat dans un div de la page (<div id="visu">).

  4. Le formulaire propose de :

    1. modifier le DOM du HTML en JavaScript (function addPara()) ;

    2. afficher le code HTML correspondant au DOM courant (function alertXml(document)) ;

    3. sérialiser le DOM sur le serveur, à la place du fichier XML source (function saveXml ()) :

      1. en appliquant une XSLT inverse de la première (html2xml.xsl),

      2. puis en postant le flux XML obtenu à une page PHP (saveXml.php),

      3. qui écrase le fichier src.xml avec la nouvelle sérialisation du DOM.

Question

Créer un fichier XML avec un élément racine document contenant des éléments paragraphe. Le placer sur un serveur Web et le rendre accessible en lecture/écriture.

Indice

1
<?xml version="1.0" encoding="UTF-8"?>
2
<document>
3
<paragraphe>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit ametlibero ac mauris egestas venenatis nec vitae sapien. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere cubilia Curae; Ut commodo, neque at auctortincidunt, turpis quam molestie augue, sit amet mattis nibh neque eget felis.</paragraphe>
4
<paragraphe>Donec a lectus sed augue pellentesque accumsan eu ac justo. Etiam est urna, sagittisac cursus nec, placerat quis velit.</paragraphe>
5
</document>

Question

Écrire les XSLT xml2html.xsl et html2xml.xsl, puis les déposer sur le serveur à côté du fichier XML.

Solution

html2xml.xsl
1
<?xml version="1.0" encoding="UTF-8"?>
2
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
3
<xsl:output method="xml"/>
4
<xsl:template match="div">
5
  <document>
6
    <xsl:apply-templates select="p"/>
7
  </document>
8
</xsl:template>
9
<xsl:template match="p">
10
  <paragraphe><xsl:value-of select="."/></paragraphe>
11
</xsl:template>
12
</xsl:stylesheet>
xml2html.xsl
1
<?xml version="1.0" encoding="UTF-8"?>
2
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
3
<xsl:output method="html"/>
4
<xsl:template match="document">
5
  <div id="srcXml">
6
    <xsl:apply-templates select="paragraphe"/>
7
  </div>
8
</xsl:template>
9
<xsl:template match="paragraphe">
10
  <p><xsl:value-of select="."/></p>
11
</xsl:template>
12
</xsl:stylesheet>

Question

Écrire les fonctions loadXml et alertXml (la seconde permettant de tester la première).

Indice

Solution

1
function loadXml (pPath){
2
var vXhr = new XMLHttpRequest();
3
vXhr.open("GET", pPath, false);
4
vXhr.send(null);
5
return rXml = vXhr.responseXML;
6
}
7
function alertXml (pDom) {
8
var xmlString = new XMLSerializer().serializeToString(pDom);
9
alert(xmlString);
10
}

Question

Écrire la fonction execXslt.

Indice

Exécuter une XSLT

Solution

1
function execXslt (pXml, pXsl) {
2
var proc = new XSLTProcessor();
3
proc.importStylesheet(pXsl);
4
return proc.transformToFragment(pXml,document);
5
}

Question

Écrire la fonction addPara.

Solution

1
function addPara (pText) {
2
vNewP = document.createElement("p");
3
vNewP.appendChild(document.createTextNode(pText));
4
document.getElementById("srcXml").appendChild(vNewP);
5
}

Question

Écrire la fonction saveXml permettant d'exécuter le fichier PHP ci-après.

1
<?php
2
//saveXml.php
3
$xml= $_POST["xml"];
4
$dom = new DomDocument();
5
$dom->loadXML($xml);
6
$dom->save('src.xml');
7
?>

Solution

1
function saveXml () {
2
var xsl = loadXml("html2xml.xsl");
3
var xml = document.getElementById("srcXml");
4
var proc = new XSLTProcessor();
5
proc.importStylesheet(xsl);
6
var res = proc.transformToDocument(xml);
7
var resTxt = (new XMLSerializer()).serializeToString(res);
8
var data = "xml=" + encodeURIComponent(resTxt);
9
var vXhr = new XMLHttpRequest();
10
vXhr.open("POST", "saveXml.php", false);
11
vXhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
12
vXhr.send(data);
13
}