xpi/xpi_04.xhtml

   1 <?xml version="1.0" encoding="utf-8" ?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   3           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
   4 >
   5 <html xmlns="http://www.w3.org/1999/xhtml" >
   6   <head>
   7     <title>XSLT</title>
   8
   9     <meta http-equiv="Content-Type"
  10           content="text/html; charset=utf-8" />
  11     <meta name="copyright"
  12           content="Copyright &#169; 2013 Kim Nguyễn" />
  13
  14     <!-- Load jQuery -->
  15     <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
  16     <!-- Load the library -->
  17     <script src="../simpleWebSlides.js" type="text/javascript" ></script>
  18
  19     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"  media="all" />
  20     <!-- Load a custom Theme, the class-element marks this style-sheet
  21       a "theme" that can be swtiched dynamicaly -->
  22     <link class="sws-theme" rel="stylesheet"  title="U-Psud style"  href="../themes/uPsud.css" type="text/css" />
  23
  24     <!-- Customize some templates and initialize -->
  25     <style type="text/css">
  26       .xml-tag { color: #00486c; }
  27     </style>
  28     <script type="text/javascript">
  29       <![CDATA[
  30       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
  31       SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
  32       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
  33
  34       //Ensures that we load SWS at the very end, after MathJax has
  35       //been initialized
  36
  37       $(window).load(function () {
  38        $(".inline-xml").each(function(i, elem)
  39       {
  40       var jelem = $(elem);
  41       var code = jelem.html();
  42       code = code.replace ("<![CDATA" + "[", "").replace ("]" + "]>", "");
  43       code = code.replace (/>/g, ">>>");
  44       code = code.replace (/</g, "<span class='xml-tag'>&lt;");
  45       code = code.replace (/>>>/g,"&gt;</span>");
  46
  47       jelem.html(code);
  48       });
  49   });
  50
  51       var checkSVG = function (o, i)
  52       {
  53             if (i >= 10 || SWS.Utils.isUndefined(o) || o == null) return;
  54             var svg = o.getSVGDocument();
  55             if (svg == null) {
  56               setTimeout(function() { checkSVG(o, i+1); }, 200);
  57             } else {
  58          var alltext = $(svg).find("text");
  59          alltext.css("font-family", "DIN");
  60          alltext.css("font-size", "70%");
  61
  62             };
  63       };
  64       $(window).load(function() {
  65       $("embed").ready(function() {
  66          setTimeout(function() {
  67          $("embed").each(function(i, o) { checkSVG(this,0);   });
  68 }, 1000);
  69         });
  70      });
  71       $(window).load(SWS.Presentation.init);
  72
  73         ]]>
  74
  75     </script>
  76
  77   </head>
  78   <body>
  79     <a href="xpi_03.xhtml" class="sws-previous"/>
  80     <div class="sws-slide sws-cover sws-option-nofooter">
  81       <h1>XML et Programmation Internet</h1>
  82       <h1>Cours 4</h1>
  83       <a href="mailto:kn@lri.fr">kn@lri.fr</a>
  84     </div>
  85     <h1>Namespaces</h1>
  86     <div class="sws-slide">
  87       <h1>Utilisation des <i>namespaces</i></h1>
  88       <p><a>Problème</a> : comment mélanger au sein d'un même document des
  89       balises venant de deux DTDs (ou schémas) <a>différentes</a>
  90       ?<br/>Exemple : mettre du SVG (images vectorielles) dans
  91       du XHTML (page web)</p>
  92       <code style="font-size:80%;width:50%;float:left"><![CDATA[
  93       <svg width="400" height="180">
  94          <rect x="50"
  95                y="20"
  96                rx="20"
  97                ry="20"
  98                width="150" height="150"
  99                style="fill:red;stroke:black;
 100                       stroke-width:5;opacity:0.5" />
 101       </svg>
 102  ]]>
 103       </code>
 104       <code style="font-size:80%;width:50%;float:left"><![CDATA[
 105       <html>
 106        <head><title>Mon image</title></head>
 107        <body>
 108
 109          <h1>Une image</h1>
 110          <!-- contenu de l'image -->
 111
 112        </body>
 113       </html>
 114  ]]>
 115       </code>
 116       <p>Comment spécifier que certains éléments doivent êtres
 117       <a>interprétés</a> ? (par exemple par le navigateur web) et que
 118       d'autres font parties des données ?</p>
 119     </div>
 120     <div class="sws-slide">
 121       <h1>L'attribut <tt>xmlns</tt></h1>
 122       <p>On peut utiliser un <a>attribut</a> spécial, <tt>xmlns</tt>
 123       qui est autorisé dans <a>tous les documents XML</a>
 124       sur <a>n'importe quel élément</a>. La valeur de ce dernier est
 125       un lien identifiant la DTD et indique tous les descendants de
 126       l'élément en question sont valides par rapport à la
 127       DTD.<br/>Exemple:
 128       </p>
 129       <code style="font-size:80%;background:white;"><![CDATA[
 130       <html ]]><s>xmlns="http://www.w3.org/1999/xhtml"</s><![CDATA[>
 131        <head><title>Mon image</title></head>
 132        <body>
 133        <h1>Mon image</h1>
 134            <svg width="400" height="180" ]]><s>xmlns="http://www.w3.org/2000/svg"</s><![CDATA[>
 135              <rect x="50"
 136                    y="20"
 137                    rx="20"
 138                    ry="20"
 139                    width="150" height="150"
 140                    style="fill:red;stroke:black;
 141                           stroke-width:5;opacity:0.5" />
 142            </svg>
 143      </body>
 144      </html>
 145  ]]>
 146       </code>
 147
 148     </div>
 149     <div class="sws-slide">
 150       <h1>L'attribut <tt>xmlns</tt></h1>
 151       <p>On peut aussi donner <a>un nom</a> à un namespace particulier
 152       et réutiliser ce nom dans les balises:</p>
 153       <code style="font-size:80%;background:white;"><![CDATA[
 154       <html ]]><s>xmlns="http://www.w3.org/1999/xhtml"</s>
 155             <a>xmlns:svg="http://www.w3.org/2000/svg"</a><![CDATA[>
 156        <head><title>Mon image</title></head>
 157        <body>
 158        <h1>Mon image</h1>
 159            <svg:svg width="400" height="180"
 160              <svg:rect x="50"
 161                    y="20"
 162                    rx="20"
 163                    ry="20"
 164                    width="150" height="150"
 165                    style="fill:red;stroke:black;
 166                           stroke-width:5;opacity:0.5" />
 167            </svg:svg>
 168      </body>
 169      </html>]]> </code>
 170 <p style="background:white;">en utilisant l'attribut <tt>xmlns:toto="..."</tt> alors toutes la
 171   balises de la forme <tt>&lt;toto:nombalise&gt;</tt> appartiennent au
 172   namespace <tt>toto</tt>. Il ne faut pas oublier le namespace sur la
 173   balise fermante !</p>
 174     </div>
 175     <div class="sws-slide">
 176       <h1>Digression</h1>
 177       <p>L'exemple précédent ressemble à ça :</p>
 178       <div style="border: 1pt solid gray;margin: 10pt">
 179         <h1 style="font-family:Serif;color:black;text-align:left">Mon image</h1>
 180               <svg width="400" height="180" xmlns="http://www.w3.org/2000/svg">
 181          <rect x="50"
 182                y="20"
 183                rx="20"
 184                ry="20"
 185                width="150" height="150"
 186                style="fill:red;stroke:black;
 187                       stroke-width:5;opacity:0.5" />
 188       </svg>
 189       </div>
 190     </div>
 191     <h1>XSLT, principes</h1>
 192     <div class="sws-slide">
 193       <h1>XSLT</h1>
 194       <p><a>eXtensible Stylesheet Language Transformations</a> : est
 195         un langage de transformation de documents XML. Il permet
 196         d'extraire (au moyen d'XPath) des nœuds d'un <a>document d'entrée</a>
 197         et de les ré-organiser et de les copier dans un <a>document de
 198         sortie</a>.
 199         Le document de sortie est souvent du XML lui-même mais peut
 200         être aussi du texte, du PDF, …
 201       </p>
 202       <ul>
 203         <li>XSLT est standardisé par le W3C</li>
 204         <li>Les programmes XSLT sont écrit eux-même en XML</li>
 205         <li>Il existe plusieurs versions du standard (1.0, 2.0,
 206         3.0). Ce cours fait juste une introduction aux fonctionalités
 207         les plus simples (1.0)</li>
 208       </ul>
 209     </div>
 210     <div class="sws-slide">
 211       <h1>Un exemple simple</h1>
 212       <p>On réutilise un document de recette de cuisine
 213       du <a href="xpi_01.xhtml">cours 01</a>. La DTD est:</p>
 214 <code style="color:black;position:relative;left:10%;"><![CDATA[<!ELEMENT recette (title,ingredients,duree,etapes)>
 215 <!ATTLIST recette difficulte (facile|normal|difficile) #REQUIRED>
 216 <!ELEMENT title #PCDATA >
 217 <!ELEMENT ingredients (ingredient+) >
 218 <!ELEMENT duree #PCDATA >
 219 <!ELEMENT etapes (e*) >
 220 <!ELEMENT ingredient #PCDATA>
 221 <!ELEMENT e #PCDATA>
 222 <!ATTLIST e num CDATA>
 223 ]]></code>
 224     </div>
 225     <div class="sws-slide">
 226       <h1>Un exemple simple (suite)</h1>
 227       <p>Un document valide par rapport à la DTD est le suivant</p>
 228     <code style="color:black;font-size:80%;position:relative;left:10%;"><![CDATA[
 229 <!DOCTYPE recette SYSTEM "recette.dtd">
 230 <recette difficulte="facile">
 231 <title>Tiramisú</title>
 232 <ingredients>
 233   <ingredient>mascarpone</ingredient>
 234   <ingredient>oeufs</ingredient>
 235   <ingredient>sucre</ingredient>
 236   <ingredient>café</ingredient>
 237   <ingredient>biscuits</ingredient>
 238 </ingredients>
 239 <duree>2h</duree>
 240 <etapes>
 241   <e num="1">Séparer les blancs des jaunes</e>
 242   <e num="2">…</e>
 243   …
 244 </etapes>
 245 </recette>
 246 ]]></code>
 247     </div>
 248 <div class="sws-slide">
 249       <h1>Un exemple simple (suite)</h1>
 250       <p>On va extraire des informations du document et en faire une
 251       page web :</p>
 252 <code style="color:black;font-size:80%;position:relative;"><![CDATA[  <xsl:stylesheet version="1.0"
 253    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 254    <xsl:template match="/">
 255      <html>
 256        <head>
 257           <title>Ingrédients du ]]><u>&lt;xsl:value-of select="descendant::title" /&gt;</u><![CDATA[ </title>
 258        </head>
 259        <body>
 260          <h1>Ingrédients du ]]><u>&lt;xsl:value-of select="descendant::title" /&gt;</u><![CDATA[ </h1>
 261          <ul>
 262            ]]><u>&lt;xsl:for-each select="descendant::ingredient"&gt;</u><![CDATA[
 263              <li> ]]><u>&lt;xsl:value-of select="child::text()" /&gt;</u><![CDATA[ </li>
 264            ]]><u>&lt;/xsl:for-each&gt;</u><![CDATA[
 265          </ul>
 266        </body>
 267      </html>
 268    </xsl:template>
 269   </xsl:stylesheet>
 270 ]]></code>
 271 </div>
 272 <div class="sws-slide">
 273 <h1>Comment exécuter un programme XSLT</h1>
 274 <ul>
 275   <li>En utilisant un moteur XSLT comment le
 276   programme <tt>xsltproc</tt> </li>
 277   <li>En référençant la feuille de style et en ouvrant le document XML
 278   avec Firefox :
 279     <code>
 280     <![CDATA[<!-- fichier recette.xml -->]]>
 281     <u>&lt;?xml-stylesheet type="text/xsl" href="prog.xsl"?&gt;</u><![CDATA[
 282     <recette difficulte="facile">
 283        <title>Tiramisú</title>
 284         <ingredients>
 285         ...]]></code>
 286   </li>
 287   <li>En Java grace à la classe <tt>Transformer</tt> du package <tt>javax</tt></li>
 288 </ul>
 289 </div>
 290 <div class="sws-slide">
 291 <h1>Structure d'un programme XSLT</h1>
 292 <p>Un programme XSLT commence par la balise :<code><u><![CDATA[  <xsl:stylesheet version="1.0"
 293    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">]]></u></code>
 294 et fini par la balise : <code><u><![CDATA[  </xsl:stylesheet>]]></u></code>
 295 Le texte ainsi que les éléments qui ne sont pas dans
 296    le <i>namespace</i> « <tt><a>xsl:</a></tt> » sont copiés à
 297    l'identique dans la sortie.<br/>
 298    Dans la balise principale <tt>&lt;xsl:stylesheet&gt;</tt> on trouve
 299    un certain nombre de balises <u><tt>&lt;xsl:template match="…"
 300    &gt;</tt></u>.<br/>
 301    Les <i>templates</i> vont jouer le rôle de fonctions et vont être
 302    appelées pour transformer des nœuds du document en nœuds de sortie.
 303 </p>
 304 </div>
 305 <h1>Les templates XSLT</h1>
 306 <div class="sws-slide">
 307   <h1>Templates</h1>
 308 <p>Un template est délimité par une balise <u><tt>&lt;xsl:template match="…"
 309    &gt;</tt></u> où le «&nbsp;…&nbsp;» est une expression XPath. Il peut y avoir
 310    plusieurs templates dans un fichier XSLT. <br/>
 311    Un template est appliqué à un ensemble de nœuds. Parmi cet
 312    ensemble, tous les nœuds qui vérifient l'expression XPath de
 313    l'attribut <tt>match</tt> sont passés en argument au template.<br/>
 314    Initialement, tous les templates existants sont appliqués au nœud
 315    fictif document.
 316   </p>
 317 </div>
 318 <div class="sws-slide">
 319   <h1>Retour sur l'exemple</h1>
 320   <code style="color:black;font-size:80%;position:relative;"><![CDATA[  <xsl:stylesheet version="1.0"
 321    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 322    <xsl:template match="/">
 323      <html>
 324        <head>
 325           <title>Ingrédients du ]]><u>&lt;xsl:value-of select="descendant::title" /&gt;</u><![CDATA[ </title>
 326        </head>
 327        <body>
 328          <h1>Ingrédients du ]]><u>&lt;xsl:value-of select="descendant::title" /&gt;</u><![CDATA[ </h1>
 329          <ul>
 330            ]]><u>&lt;xsl:for-each select="descendant::ingredient"&gt;</u><![CDATA[
 331              <li> ]]><u>&lt;xsl:value-of select="child::text()" /&gt;</u><![CDATA[ </li>
 332            ]]><u>&lt;/xsl:for-each&gt;</u><![CDATA[
 333          </ul>
 334        </body>
 335      </html>
 336    </xsl:template>
 337   </xsl:stylesheet>
 338 ]]></code>
 339 <ol><li>Initialement tous les templates (il n'y en a qu'un ici) sont
 340     appliqués à la racine du document</li>
 341 <li>Pour chacun d'entre eux, l'expression XPath dans
 342   le <tt>match</tt> est contrôlée. Si elle réussit, alors le template
 343   est appliqué au nœud</li>
 344 </ol>
 345 </div>
 346 <div class="sws-slide">
 347 <h1>Deuxième exemple, 2 templates</h1>
 348 <p>
 349   <code style="color:black;font-size:80%;position:relative;"><![CDATA[  <xsl:stylesheet version="1.0"
 350    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 351    <xsl:template match="/">
 352      <html>
 353        <head>
 354           <title>Ingrédients du ]]><u>&lt;xsl:value-of select="descendant::title" /&gt;</u><![CDATA[ </title>
 355        </head>
 356        <body>
 357          <h1>Ingrédients du ]]><u>&lt;xsl:value-of select="descendant::title" /&gt;</u><![CDATA[ </h1>
 358          <ul>
 359            ]]><u>&lt;xsl:apply-templates select="descendant::ingredient" /&gt;</u><![CDATA[
 360          </ul>
 361        </body>
 362      </html>
 363    </xsl:template>
 364    <xsl:template match="ingredient">
 365      <li> ]]><u>&lt;xsl:value-of select="child::text()" /&gt;</u><![CDATA[ </li>
 366    </xsl:template>
 367   </xsl:stylesheet>]]></code></p>
 368 <ol style="background:white;"><li>On applique tous les templates à la racine. Le
 369     template <tt>match="/"</tt> réussit, le
 370     template <tt>match="ingredient"</tt> échoue.</li>
 371 <li>L'expression
 372   <tt><![CDATA[<xsl:apply-templates select="…" />]]></tt>
 373   réapplique <a>tous</a> les templates à tous les nœuds sélectionnés
 374   par l'expression XPath.</li>
 375 </ol></div>
 376 <div class="sws-slide">
 377 <h1>Priorité des templates</h1>
 378 <p>Que se passe-t-il si deux templates peuvent s'appliquer à un même
 379   élément&nbsp;? On applique les règles de priorité suivantes
 380   (simplifiées) :
 381 </p>
 382 <ol>
 383 <li>Si le <tt>match</tt> d'un template contient un <tt>|</tt> entre
 384   plusieurs chemins, la priorité la plus élevée de ces chemins est choisie
 385 </li>
 386 <li>si le <tt>match</tt> est de la forme : <tt>child::foo</tt>
 387   ou <tt>attribute:foo</tt>, sa priorité est 0 </li>
 388 <li>si le <tt>match</tt> est de la forme : <tt>child::*</tt> ou
 389   ou <tt>attribute:*</tt>, sa priorité est -0.25 </li>
 390 <li>si le <tt>match</tt> est de la form : <tt>child::text()</tt>
 391   ou <tt>child::node()</tt> (idem avec <tt>attribute</tt>), sa
 392   priorité est -0.5</li>
 393 <li>sinon (test complexe, par exemple <tt>foo[ count(child::bar) &lt;
 394     4]</tt>), la priorité est 0.5</li>
 395 </ol>
 396 <p>Le template ayant la priorité la plus élevée est choisi. On peut
 397   donner explicitement à un template une priorité avec
 398   l'attribut <tt>priority="…"</tt><br/>Le moteur XSLT <s>lève une
 399   erreur</s> d'exécution si deux templates ont exactement la même
 400   priorité.</p>
 401 </div>
 402 <div class="sws-slide">
 403 <h1>Templates par défaut</h1>
 404 <p>Il existe 3 templates <a>par défaut</a> qui sont toujours
 405   définis :</p>
 406 <code><![CDATA[  <xsl:template match="*|/">
 407      <xsl:apply-templates/>
 408   </xsl:template>
 409
 410   <xsl:template match="text()|@*">
 411     <xsl:value-of select="."/>
 412   </xsl:template>
 413
 414   <xsl:template match="processing-instruction()|comment()"/>
 415 ]]>
 416 </code>
 417 <p>Ils ont des priorités inférieures aux templates présents dans le
 418  fichier donc ne sont appliqués
 419   que si aucun templates ne fonctionne. Ils permettent de « descendre
 420   dans l'arbre » (jusqu'aux textes), si aucun template ne s'applique à
 421   la racine.
 422 </p>
 423 </div>
 424   </body>
 425 </html>