--- /dev/null
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+>
+<html xmlns="http://www.w3.org/1999/xhtml" >
+ <head>
+ <title>XSLT</title>
+
+ <meta http-equiv="Content-Type"
+ content="text/html; charset=utf-8" />
+ <meta name="copyright"
+ content="Copyright © 2013 Kim Nguyễn" />
+
+ <!-- Load jQuery -->
+ <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+ <!-- Load the library -->
+ <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+
+ <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
+ <!-- Load a custom Theme, the class-element marks this style-sheet
+ a "theme" that can be swtiched dynamicaly -->
+ <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
+
+ <!-- Customize some templates and initialize -->
+ <style type="text/css">
+ .xml-tag { color: #00486c; }
+ </style>
+ <script type="text/javascript">
+ <![CDATA[
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+ //Ensures that we load SWS at the very end, after MathJax has
+ //been initialized
+
+ $(window).load(function () {
+ $(".inline-xml").each(function(i, elem)
+ {
+ var jelem = $(elem);
+ var code = jelem.html();
+ code = code.replace ("<![CDATA" + "[", "").replace ("]" + "]>", "");
+ code = code.replace (/>/g, ">>>");
+ code = code.replace (/</g, "<span class='xml-tag'><");
+ code = code.replace (/>>>/g,"></span>");
+
+ jelem.html(code);
+ });
+ });
+
+ var checkSVG = function (o, i)
+ {
+ if (i >= 10 || SWS.Utils.isUndefined(o) || o == null) return;
+ var svg = o.getSVGDocument();
+ if (svg == null) {
+ setTimeout(function() { checkSVG(o, i+1); }, 200);
+ } else {
+ var alltext = $(svg).find("text");
+ alltext.css("font-family", "DIN");
+ alltext.css("font-size", "70%");
+
+ };
+ };
+ $(window).load(function() {
+ $("embed").ready(function() {
+ setTimeout(function() {
+ $("embed").each(function(i, o) { checkSVG(this,0); });
+}, 1000);
+ });
+ });
+ $(window).load(SWS.Presentation.init);
+
+ ]]>
+
+ </script>
+
+ </head>
+ <body>
+ <a href="xpi_03.xhtml" class="sws-previous"/>
+ <div class="sws-slide sws-cover sws-option-nofooter">
+ <h1>XML et Programmation Internet</h1>
+ <h1>Cours 4</h1>
+ <a href="mailto:kn@lri.fr">kn@lri.fr</a>
+ </div>
+ <h1>Namespaces</h1>
+ <div class="sws-slide">
+ <h1>Utilisation des <i>namespaces</i></h1>
+ <p><a>Problème</a> : comment mélanger au sein d'un même document des
+ balises venant de deux DTDs (ou schémas) <a>différentes</a>
+ ?<br/>Exemple : mettre du SVG (images vectorielles) dans
+ du XHTML (page web)</p>
+ <code style="font-size:80%;width:50%;float:left"><![CDATA[
+ <svg width="400" height="180">
+ <rect x="50"
+ y="20"
+ rx="20"
+ ry="20"
+ width="150" height="150"
+ style="fill:red;stroke:black;
+ stroke-width:5;opacity:0.5" />
+ </svg>
+ ]]>
+ </code>
+ <code style="font-size:80%;width:50%;float:left"><![CDATA[
+ <html>
+ <head><title>Mon image</title></head>
+ <body>
+
+ <h1>Une image</h1>
+ <!-- contenu de l'image -->
+
+ </body>
+ </html>
+ ]]>
+ </code>
+ <p>Comment spécifier que certains éléments doivent êtres
+ <a>interprétés</a> ? (par exemple par le navigateur web) et que
+ d'autres font parties des données ?</p>
+ </div>
+ <div class="sws-slide">
+ <h1>L'attribut <tt>xmlns</tt></h1>
+ <p>On peut utiliser un <a>attribut</a> spécial, <tt>xmlns</tt>
+ qui est autorisé dans <a>tous les documents XML</a>
+ sur <a>n'importe quel élément</a>. La valeur de ce dernier est
+ un lien identifiant la DTD et indique tous les descendants de
+ l'élément en question sont valides par rapport à la
+ DTD.<br/>Exemple:
+ </p>
+ <code style="font-size:80%;background:white;"><![CDATA[
+ <html ]]><s>xmlns="http://www.w3.org/1999/xhtml"</s><![CDATA[>
+ <head><title>Mon image</title></head>
+ <body>
+ <h1>Mon image</h1>
+ <svg width="400" height="180" ]]><s>xmlns="http://www.w3.org/2000/svg"</s><![CDATA[>
+ <rect x="50"
+ y="20"
+ rx="20"
+ ry="20"
+ width="150" height="150"
+ style="fill:red;stroke:black;
+ stroke-width:5;opacity:0.5" />
+ </svg>
+ </body>
+ </html>
+ ]]>
+ </code>
+
+ </div>
+ <div class="sws-slide">
+ <h1>L'attribut <tt>xmlns</tt></h1>
+ <p>On peut aussi donner <a>un nom</a> à un namespace particulier
+ et réutiliser ce nom dans les balises:</p>
+ <code style="font-size:80%;background:white;"><![CDATA[
+ <html ]]><s>xmlns="http://www.w3.org/1999/xhtml"</s>
+ <a>xmlns:svg="http://www.w3.org/2000/svg"</a><![CDATA[>
+ <head><title>Mon image</title></head>
+ <body>
+ <h1>Mon image</h1>
+ <svg:svg width="400" height="180"
+ <svg:rect x="50"
+ y="20"
+ rx="20"
+ ry="20"
+ width="150" height="150"
+ style="fill:red;stroke:black;
+ stroke-width:5;opacity:0.5" />
+ </svg:svg>
+ </body>
+ </html>]]> </code>
+<p style="background:white;">en utilisant l'attribut <tt>xmlns:toto="..."</tt> alors toutes la
+ balises de la forme <tt><toto:nombalise></tt> appartiennent au
+ namespace <tt>toto</tt>. Il ne faut pas oublier le namespace sur la
+ balise fermante !</p>
+ </div>
+ <div class="sws-slide">
+ <h1>Digression</h1>
+ <p>L'exemple précédent ressemble à ça :</p>
+ <div style="border: 1pt solid gray;margin: 10pt">
+ <h1 style="font-family:Serif;color:black;text-align:left">Mon image</h1>
+ <svg width="400" height="180" xmlns="http://www.w3.org/2000/svg">
+ <rect x="50"
+ y="20"
+ rx="20"
+ ry="20"
+ width="150" height="150"
+ style="fill:red;stroke:black;
+ stroke-width:5;opacity:0.5" />
+ </svg>
+ </div>
+ </div>
+ <h1>XSLT, principes</h1>
+ <div class="sws-slide">
+ <h1>XSLT</h1>
+ <p><a>eXtensible Stylesheet Language Transformations</a> : est
+ un langage de transformation de documents XML. Il permet
+ d'extraire (au moyen d'XPath) des nœuds d'un <a>document d'entrée</a>
+ et de les ré-organiser et de les copier dans un <a>document de
+ sortie</a>.
+ Le document de sortie est souvent du XML lui-même mais peut
+ être aussi du texte, du PDF, …
+ </p>
+ <ul>
+ <li>XSLT est standardisé par le W3C</li>
+ <li>Les programmes XSLT sont écrit eux-même en XML</li>
+ <li>Il existe plusieurs versions du standard (1.0, 2.0,
+ 3.0). Ce cours fait juste une introduction aux fonctionalités
+ les plus simples (1.0)</li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Un exemple simple</h1>
+ <p>On réutilise un document de recette de cuisine
+ du <a href="xpi_01.xhtml">cours 01</a>. La DTD est:</p>
+<code style="color:black;position:relative;left:10%;"><![CDATA[<!ELEMENT recette (title,ingredients,duree,etapes)>
+<!ATTLIST recette difficulte (facile|normal|difficile) #REQUIRED>
+<!ELEMENT title #PCDATA >
+<!ELEMENT ingredients (ingredient+) >
+<!ELEMENT duree #PCDATA >
+<!ELEMENT etapes (e*) >
+<!ELEMENT ingredient #PCDATA>
+<!ELEMENT e #PCDATA>
+<!ATTLIST e num CDATA>
+]]></code>
+ </div>
+ <div class="sws-slide">
+ <h1>Un exemple simple (suite)</h1>
+ <p>Un document valide par rapport à la DTD est le suivant</p>
+ <code style="color:black;font-size:80%;position:relative;left:10%;"><![CDATA[
+<!DOCTYPE recette SYSTEM "recette.dtd">
+<recette difficulte="facile">
+<title>Tiramisú</title>
+<ingredients>
+ <ingredient>mascarpone</ingredient>
+ <ingredient>oeufs</ingredient>
+ <ingredient>sucre</ingredient>
+ <ingredient>café</ingredient>
+ <ingredient>biscuits</ingredient>
+</ingredients>
+<duree>2h</duree>
+<etapes>
+ <e num="1">Séparer les blancs des jaunes</e>
+ <e num="2">…</e>
+ …
+</etapes>
+</recette>
+]]></code>
+ </div>
+<div class="sws-slide">
+ <h1>Un exemple simple (suite)</h1>
+ <p>On va extraire des informations du document et en faire une
+ page web :</p>
+<code style="color:black;font-size:80%;position:relative;"><![CDATA[ <xsl:stylesheet version="1.0"
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+ <xsl:template match="/">
+ <html>
+ <head>
+ <title>Ingrédients du ]]><u><xsl:value-of select="descendant::title" /></u><![CDATA[ </title>
+ </head>
+ <body>
+ <h1>Ingrédients du ]]><u><xsl:value-of select="descendant::title" /></u><![CDATA[ </h1>
+ <ul>
+ ]]><u><xsl:for-each select="descendant::ingredient"></u><![CDATA[
+ <li> ]]><u><xsl:value-of select="child::text()" /></u><![CDATA[ </li>
+ ]]><u></xsl:for-each></u><![CDATA[
+ </ul>
+ </body>
+ </html>
+ </xsl:template>
+ </xsl:stylesheet>
+]]></code>
+</div>
+<div class="sws-slide">
+<h1>Comment exécuter un programme XSLT</h1>
+<ul>
+ <li>En utilisant un moteur XSLT comment le
+ programme <tt>xsltproc</tt> </li>
+ <li>En référençant la feuille de style et en ouvrant le document XML
+ avec Firefox :
+ <code>
+ <![CDATA[<!-- fichier recette.xml -->]]>
+ <u><?xml-stylesheet type="text/xsl" href="prog.xsl"?></u><![CDATA[
+ <recette difficulte="facile">
+ <title>Tiramisú</title>
+ <ingredients>
+ ...]]></code>
+ </li>
+ <li>En Java grace à la classe <tt>Transformer</tt> du package <tt>javax</tt></li>
+</ul>
+</div>
+<div class="sws-slide">
+<h1>Structure d'un programme XSLT</h1>
+<p>Un programme XSLT commence par la balise :<code><u><![CDATA[ <xsl:stylesheet version="1.0"
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">]]></u></code>
+et fini par la balise : <code><u><![CDATA[ </xsl:stylesheet>]]></u></code>
+Le texte ainsi que les éléments qui ne sont pas dans
+ le <i>namespace</i> « <tt><a>xsl:</a></tt> » sont copiés à
+ l'identique dans la sortie.<br/>
+ Dans la balise principale <tt><xsl:stylesheet></tt> on trouve
+ un certain nombre de balises <u><tt><xsl:template match="…"
+ ></tt></u>.<br/>
+ Les <i>templates</i> vont jouer le rôle de fonctions et vont être
+ appelées pour transformer des nœuds du document en nœuds de sortie.
+</p>
+</div>
+<h1>Les templates XSLT</h1>
+<div class="sws-slide">
+ <h1>Templates</h1>
+<p>Un template est délimité par une balise <u><tt><xsl:template match="…"
+ ></tt></u> où le « … » est une expression XPath. Il peut y avoir
+ plusieurs templates dans un fichier XSLT. <br/>
+ Un template est appliqué à un ensemble de nœuds. Parmi cet
+ ensemble, tous les nœuds qui vérifient l'expression XPath de
+ l'attribut <tt>match</tt> sont passés en argument au template.<br/>
+ Initialement, tous les templates existants sont appliqués au nœud
+ fictif document.
+ </p>
+</div>
+<div class="sws-slide">
+ <h1>Retour sur l'exemple</h1>
+ <code style="color:black;font-size:80%;position:relative;"><![CDATA[ <xsl:stylesheet version="1.0"
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+ <xsl:template match="/">
+ <html>
+ <head>
+ <title>Ingrédients du ]]><u><xsl:value-of select="descendant::title" /></u><![CDATA[ </title>
+ </head>
+ <body>
+ <h1>Ingrédients du ]]><u><xsl:value-of select="descendant::title" /></u><![CDATA[ </h1>
+ <ul>
+ ]]><u><xsl:for-each select="descendant::ingredient"></u><![CDATA[
+ <li> ]]><u><xsl:value-of select="child::text()" /></u><![CDATA[ </li>
+ ]]><u></xsl:for-each></u><![CDATA[
+ </ul>
+ </body>
+ </html>
+ </xsl:template>
+ </xsl:stylesheet>
+]]></code>
+<ol><li>Initialement tous les templates (il n'y en a qu'un ici) sont
+ appliqués à la racine du document</li>
+<li>Pour chacun d'entre eux, l'expression XPath dans
+ le <tt>match</tt> est contrôlée. Si elle réussit, alors le template
+ est appliqué au nœud</li>
+</ol>
+</div>
+<div class="sws-slide">
+<h1>Deuxième exemple, 2 templates</h1>
+<p>
+ <code style="color:black;font-size:80%;position:relative;"><![CDATA[ <xsl:stylesheet version="1.0"
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+ <xsl:template match="/">
+ <html>
+ <head>
+ <title>Ingrédients du ]]><u><xsl:value-of select="descendant::title" /></u><![CDATA[ </title>
+ </head>
+ <body>
+ <h1>Ingrédients du ]]><u><xsl:value-of select="descendant::title" /></u><![CDATA[ </h1>
+ <ul>
+ ]]><u><xsl:apply-templates select="descendant::ingredient" /></u><![CDATA[
+ </ul>
+ </body>
+ </html>
+ </xsl:template>
+ <xsl:template match="ingredient">
+ <li> ]]><u><xsl:value-of select="child::text()" /></u><![CDATA[ </li>
+ </xsl:template>
+ </xsl:stylesheet>]]></code></p>
+<ol style="background:white;"><li>On applique tous les templates à la racine. Le
+ template <tt>match="/"</tt> réussit, le
+ template <tt>match="ingredient"</tt> échoue.</li>
+<li>L'expression
+ <tt><![CDATA[<xsl:apply-templates select="…" />]]></tt>
+ réapplique <a>tous</a> les templates à tous les nœuds sélectionnés
+ par l'expression XPath.</li>
+</ol></div>
+<div class="sws-slide">
+<h1>Priorité des templates</h1>
+<p>Que se passe-t-il si deux templates peuvent s'appliquer à un même
+ élément ? On applique les règles de priorité suivantes
+ (simplifiées) :
+</p>
+<ol>
+<li>Si le <tt>match</tt> d'un template contient un <tt>|</tt> entre
+ plusieurs chemins, la priorité la plus élevée de ces chemins est choisie
+</li>
+<li>si le <tt>match</tt> est de la forme : <tt>child::foo</tt>
+ ou <tt>attribute:foo</tt>, sa priorité est 0 </li>
+<li>si le <tt>match</tt> est de la forme : <tt>child::*</tt> ou
+ ou <tt>attribute:*</tt>, sa priorité est -0.25 </li>
+<li>si le <tt>match</tt> est de la form : <tt>child::text()</tt>
+ ou <tt>child::node()</tt> (idem avec <tt>attribute</tt>), sa
+ priorité est -0.5</li>
+<li>sinon (test complexe, par exemple <tt>foo[ count(child::bar) <
+ 4]</tt>), la priorité est 0.5</li>
+</ol>
+<p>Le template ayant la priorité la plus élevée est choisi. On peut
+ donner explicitement à un template une priorité avec
+ l'attribut <tt>priority="…"</tt><br/>Le moteur XSLT <s>lève une
+ erreur</s> d'exécution si deux templates ont exactement la même
+ priorité.</p>
+</div>
+<div class="sws-slide">
+<h1>Templates par défaut</h1>
+<p>Il existe 3 templates <a>par défaut</a> qui sont toujours
+ définis :</p>
+<code><![CDATA[ <xsl:template match="*|/">
+ <xsl:apply-templates/>
+ </xsl:template>
+
+ <xsl:template match="text()|@*">
+ <xsl:value-of select="."/>
+ </xsl:template>
+
+ <xsl:template match="processing-instruction()|comment()"/>
+]]>
+</code>
+<p>Ils ont des priorités inférieures aux templates présents dans le
+ fichier donc ne sont appliqués
+ que si aucun templates ne fonctionne. Ils permettent de « descendre
+ dans l'arbre » (jusqu'aux textes), si aucun template ne s'applique à
+ la racine.
+</p>
+</div>
+ </body>
+</html>
projects / hacks / simpleWebSlides.git / blobdiff