xpi/xpi_02.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>XPath</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
  28     </style>
  29     <script type="text/javascript">
  30       <![CDATA[
  31       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
  32       SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
  33       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
  34
  35       //Ensures that we load SWS at the very end, after MathJax has
  36       //been initialized
  37
  38       $(window).load(function () {
  39        $(".inline-xml").each(function(i, elem)
  40       {
  41       var jelem = $(elem);
  42       var code = jelem.html();
  43       code = code.replace ("<![CDATA" + "[", "").replace ("]" + "]>", "");
  44       code = code.replace (/>/g, ">>>");
  45       code = code.replace (/</g, "<span class='xml-tag'>&lt;");
  46       code = code.replace (/>>>/g,"&gt;</span>");
  47
  48       jelem.html(code);
  49       });
  50   });
  51
  52       var checkSVG = function (o, i)
  53       {
  54             if (i >= 10 || SWS.Utils.isUndefined(o) || o == null) return;
  55             var svg = o.getSVGDocument();
  56             if (svg == null) {
  57               setTimeout(function() { checkSVG(o, i+1); }, 200);
  58             } else {
  59          var alltext = $(svg).find("text");
  60          alltext.css("font-family", "DIN");
  61          alltext.css("font-size", "70%");
  62
  63             };
  64       };
  65       $(window).load(function() {
  66       $("embed").ready(function() {
  67          setTimeout(function() {
  68          $("embed").each(function(i, o) { checkSVG(this,0);   });
  69 }, 1000);
  70         });
  71      });
  72       $(window).load(SWS.Presentation.init);
  73
  74         ]]>
  75
  76     </script>
  77
  78   </head>
  79   <body>
  80     <a href="xpi_01.xhtml" class="sws-previous"/>
  81     <div class="sws-slide sws-cover sws-option-nofooter">
  82       <h1>XML et Programmation Internet</h1>
  83       <h1>Cours 2</h1>
  84       <a href="mailto:kn@lri.fr">kn@lri.fr</a>
  85     </div>
  86
  87     <h1>Modèle d'arbre</h1>
  88 <div class="sws-slide">
  89
  90 <h1>XML vu comme un arbre (1/2)</h1>
  91 <ul>
  92 <li>Tout ce qui apparait dans le document correspond à un nœud de
  93   l'arbre (texte, balises, commentaires, blanc, …)</li>
  94 <li>Il existe en plus, un nœud fictif se trouvant au dessus de
  95   l'élément racine, le <a>nœud document</a></li>
  96 <li>Un couple balise ouvrante/balise fermante correspond à <a>un seul
  97     nœud</a>
  98 <li>Les principaux types de nœuds sont: élément, attribut, texte,
  99   commentaire, document</li>
 100 </li>
 101 </ul>
 102
 103 </div>
 104     <div class="sws-slide">
 105       <h1>XML vu comme un arbre (2/2)</h1>
 106       <p>Un document XML peut être vu comme un arbre:</p>
 107       <code class="inline-xml" style="font-size:80%;width:50%;position:relative;float:left;"><![CDATA[<bibliography>
 108
 109   <book>
 110     <title>Foundations of Databases</title>
 111     <author>Abiteboul</author>
 112     <author>Hull</author>
 113     <author>Vianu</author>
 114     <publisher>Addison Wesley</publisher>
 115     <year>1995</year>
 116   </book>
 117
 118   <book>
 119     <title>The Lord of the Rings</title>
 120     <author>J. R. R. Tolkien</author>
 121     <publisher>Houghton Mifflin</publisher>
 122     <year>2001</year>
 123   </book>
 124
 125 </bibliography>]]></code>
 126       <embed src="tree.svg" style="width: 10cm; height: 13cm;" />
 127     </div>
 128 <div class="sws-slide">
 129   <h1>Sérialisation d'un arbre sous forme de document</h1>
 130   <p class="sws-pause">Étant donné un arbre, comment peut ont produire
 131   le document XML correspondant ?</p>
 132   <code>       //pseudo-code
 133       void print(Node n)
 134       {
 135          if (n is text or comment) { output_text(n) }
 136          else {
 137                 output_text ("&lt;" + tag(n) + "&gt;");
 138                 for k in children(n)
 139                     print(k);
 140                 output_text ("&lt;/" + tag(n) + "&gt;");
 141          }
 142  </code>
 143  <ul style="background:white;">
 144    <li>On effectue un parcours en profondeur d'abord </li>
 145    <li>Si le nœud courant est une feuille, on l'affiche</li>
 146    <li>Sinon on affiche la balise ouvrante, puis récursivement tous
 147    les fils, puis la balise fermante</li>
 148  </ul>
 149 </div>
 150 <div class="sws-slide">
 151 <h1>Ordre du document, parcours préfixe</h1>
 152 <p>On appelle <a>ordre du document</a> un ordre <a>total</a> sur les
 153   nœuds d'un document qui correspond à leur ordre dans un fichier
 154   sérialisé. Il correspond aussi à la numérotation lors du parcours
 155   préfixe</p>
 156 <ol style="float:left; width:50%">
 157 <li>#document</li>
 158 <li>bibliography</li>
 159 <li>book</li>
 160 <li>title</li>
 161 <li>"Foundations of Databases"</li>
 162 <li>author</li>
 163 <li>"Abiteboul"</li>
 164 <li>author</li>
 165 <li>"Hull"</li>
 166 <li>author</li>
 167 <li>"Vianu"</li>
 168 </ol>
 169       <embed src="tree.svg" style="width: 10cm; height: 13cm;" />
 170
 171 </div>
 172 <div class="sws-slide">
 173 <h1>Construction d'un arbre à partir d'un fichier XML ?</h1>
 174 <p class="sws-slide">Pour simplifier on suppose un fichier sans texte, uniquement avec
 175   des balises ouvrantes/fermantes</p>
 176 <code>
 177  type Node = { label : string; children : List&lt;Node&gt; }
 178  Stack&lt;Node&gt; stack;
 179  stack.push (new Node("#document"), []));
 180  while (true) {
 181
 182   tag = read ();
 183   if end_of_file () break;
 184   if tag is opening {
 185                parent = stack.peek();
 186                node = new Node(tag, []);
 187                parent.addChild(node);
 188                stack.push(node);
 189   }
 190   if tag is closing {
 191       stack.pop();
 192   }
 193  }
 194 </code>
 195 <p class="sws-pause">En pratique, on utilise des bibliothèques toutes faites pour
 196   lire/écrire des fichiers!</p>
 197 </div>
 198 <h1>XPath, introduction</h1>
 199 <div class="sws-slide">
 200 <h1>Intérogation de documents XML</h1>
 201 <p>Les documents représentant des données (semi-) structurées, on
 202   souhaite en extraire de l'information</p>
 203 <p>On va pouvoir écrire des requêtes sur des <a>critères scalaires</a>
 204   (
 205 «&nbsp;renvoyer tous les livres publiés après 2000&nbsp;»), mais aussi sur des
 206   critères de <a>structure</a> («&nbsp;renvoyer tous les éléments qui ont
 207   un fils <tt>author</tt>&nbsp;»)</p>
 208 </div>
 209 <div class="sws-slide">
 210 <h1>XPath</h1>
 211 <p>XPath est un langage de <a>selection de nœud</a> dans un document
 212   XML. Il ne permet <a>que</a> de sélectionner des nœuds, pas d'en
 213   construire de nouveaux. C'est un langage restreint qui ne contient
 214   pas de fonctions, variables, … On peut le voir comme un équivalent
 215   du <tt>SELECT</tt> de SQL</p>
 216 </div>
 217
 218 <div class="sws-slide">
 219 <h1>XPath (exemple)</h1>
 220 <p>Sélectionner tous les titres du document (de manière compliquée)</p>
 221 <code>    <span style="color:#00f">/</span>descendant::<s>author</s>/parent::<a>book</a>/child::<span style="color:#880088">title</span></code>
 222 <embed src="tree.svg" style="position:relative;left:20%;width: 10cm; height: 13cm;"/>
 223 <script type="text/javascript">
 224 var color = function (o,e, c) {
 225    $(o).find("*[class='" + e + "']").css("fill", c);
 226 }
 227 SWS.Presentation.registerCallback(0, function (canvas) {
 228   var svg = canvas.find("embed")[0].getSVGDocument();
 229   $(svg).find("text").css({ "font-family":"DIN", "font-size":"70%"});
 230   color(svg, "author", "#ff0000");
 231   color(svg, "document", "#0000ff");
 232   color(svg, "book", "#92b938");
 233   color(svg, "title", "#880088");
 234 });
 235 </script>
 236 </div>
 237 <div class="sws-slide">
 238 <h1>XPath : syntaxe</h1>
 239 <p>La syntaxe d'une requête XPath est:</p>
 240 <code>       /axe<sub>1</sub>::test<sub>1</sub>[ pred<sub>1</sub> ]/ … /axe<sub>n</sub>::test<sub>n</sub>[ pred<sub>n</sub> ]</code>
 241 <ul>
 242 <li><a>axe</a>
 243   : <tt>self</tt>, <tt>child</tt>, <tt>descendant</tt>, <tt>parent</tt>,
 244   …
 245 </li>
 246 <li><a>test</a> : <tt>node()</tt>, <tt>text()</tt>, <tt>*</tt>, ou un
 247   nom d'élément </li>
 248 <li> <a>pred(icat)</a> : chemin XPath, expression arithmétique,
 249   comparaison, …
 250 </li>
 251 <p>exemple:</p>
 252 <code> /descendant::book[ child::year > 2000] / child::title </code>
 253 </ul>
 254
 255 </div>
 256 <div class="sws-slide">
 257 <h1>XPath : sémantique</h1>
 258 <p>Étant donné la requête: </p>
 259 <code>       /axe<sub>1</sub>::test<sub>1</sub>[ pred<sub>1</sub> ]/ … /axe<sub>n</sub>::test<sub>n</sub>[ pred<sub>n</sub> ]</code>
 260 <ol>
 261   <li>le <a>nœud contexte</a> au nœud <a>document</a></li>
 262   <li>on sélectionne l'ensemble A<sub>1</sub> <a>tous les nœuds</a> qui sont dans
 263   l'<tt>axe<sub>1</sub></tt> par rapport au nœud contexte</li>
 264   <li>on sélectionne l'ensemble T<sub>1</sub> des nœud de
 265   A<sub>1</sub> qui vérifient le test <tt>test<sub>1</sub></tt></li>
 266   <li>on sélectionne l'ensemble P<sub>1</sub> des nœud de
 267   T<sub>1</sub> qui vérifient <tt>pred<sub>1</sub></tt></li>
 268   <li>On réapplique le pas 2 sur <tt>P<sub>1</sub></tt></li>
 269   <li> … </li>
 270 </ol>
 271 </div>
 272 <div class="sws-slide">
 273 <h1>XPath : sémantique (exemple)</h1>
 274 <div style="width:50%;float:left;">
 275 <code> <span style="color:#00f">/</span>descendant::<s>author</s>/parent::<a>book</a>/child::<span style="color:#880088">title</span></code>
 276 <ol><li >On séléctionne le nœud document</li>
 277 <li >On séléctionne tous les descendants</li>
 278 <li>On filtre en ne gardant que les nœuds <s>author</s>
 279   (T<sub>1</sub> ≡ P<sub>1</sub>)</li>
 280 <li>Sur chacun des <s>author</s> on prend le parent (on n'obtient que
 281   2 parents car on garde des ensembles de noeuds)</li>
 282 <li>On filtre les parents pour ne garder que ceux qui
 283   sont <a>book</a></li>
 284 <li>On sélectionne tous les fils de chacun des <a>book</a></li>
 285 <li>On ne garde que les fils qui ont le
 286   tag <span style="color:#880088">title</span></li>
 287 </ol>
 288 </div>
 289 <embed src="tree.svg" style="width: 10cm; height: 13cm;"/>
 290 <script type="text/javascript">
 291 SWS.Presentation.registerCallback(0, function (canvas) {
 292   var svg = canvas.find("embed")[0].getSVGDocument();
 293   $(svg).find("text").css({ "font-family":"DIN", "font-size":"70%"});
 294   color(svg, "author", "#ff0000");
 295   color(svg, "document", "#0000ff");
 296   color(svg, "book", "#92b938");
 297   color(svg, "title", "#880088");
 298 });
 299 </script>
 300 </div>
 301 <div class="sws-slide">
 302 <h1>XPath : axes</h1>
 303 <p>Le standard XPath définit un grand nombre d'axes</p>
 304 <ul>
 305 <li><a>self</a> : on reste sur le nœud courant</li>
 306 <li><a>child</a> : tous les fils du nœud courant</li>
 307 <li><a>parent</a> : le parent du nœud courant. Seul le nœud document
 308   n'a pas de parent</li>
 309 <li><a>descendant</a> : les fils, les fils des fils, etc. du nœud courant</li>
 310 <li><a>ancestor</a> : le parent, et le parent du parent, etc. du nœud
 311   courant</li>
 312 <li> <a>descendant-or-self</a>, <a>ancestor-or-seld</a> : comme les
 313   précédents mais inclus le nœud courant</li>
 314 <li><a>following-sibling</a>: le frères se trouvant après</li>
 315 <li><a>preceding-sibling</a>: les frères se trouvant avant</li>
 316 <li><a>following, preceding, attributes </a> : usage avancé</li>
 317 </ul>
 318 </div>
 319 <div class="sws-slide">
 320 <h1>XPath : les tests</h1>
 321 <p>On peut sélectionner des nœuds selon les critères suivants</p>
 322 <ul>
 323   <li> <a>node()</a> : n'importe quel nœud</li>
 324   <li> <a>text()</a> : un nœud texte (<tt>"The Lord of the
 325   Rings"</tt>)</li>
 326   <li> <a>*</a> : n'importe quel élément
 327   (<tt>author</tt>, <tt>title</tt>, …)</li>
 328   <li> <a><i>nom_d_element</i></a> tous les éléments ayant ce nom</li>
 329 </ul>
 330 </div>
 331 <div class="sws-slide">
 332 <h1>XPath : prédicats (syntaxe)</h1>
 333 <code>
 334       p ::=   p or p
 335          |    p and p
 336          |    not (p)
 337          |    count(…), contains(…), position(), …
 338          |    chemin XPath
 339          |    e<sub>1</sub> op e<sub>2</sub>
 340 </code>
 341 <p><tt>e<sub>1</sub></tt> et <tt>e<sub>2</sub></tt> sont des
 342   expressions arithmétiques, <tt>op</tt> peut être <tt>&lt;</tt>, <tt>&gt;</tt>, =, !=,
 343   +, -, *, /, mod, …</p>
 344 </div>
 345 <div class="sws-slide">
 346 <h1>XPath : prédicats (sémantique)</h1>
 347 <p>On évalue le prédicat et on converti son résultat en valeur de
 348   vérité. Si la valeur vaut vrai, on garde le nœud courant, si elle
 349   vaut faux, on ne le garde pas
 350 </p>
 351 <p>XPath connait <a>4 types de données</a> pour les prédicats : </p>
 352 <ul>
 353 <li>Les booléens, valeur de vérité : vrai ou faux</li>
 354 <li>Les nombres (flottants), valeur de vérité compliquée… </li>
 355 <li>Les chaînes de caractères, chaîne vide = faux, sinon vrai</li>
 356 <li>Les ensembles de nœuds, ensemble vide = faux, sinon vrai </li>
 357 </ul>
 358
 359 </div>
 360 <div class="sws-slide">
 361 <h1>XPath : prédicats (exemples)</h1>
 362
 363 <ul><li> <tt>/descendant::book [ child::title ]</tt> : sélectionne chaque
 364     élément book pour lequel l'ensemble des fils de nom title n'est
 365     pas vide </li>
 366 <li> <tt>/descendant::book [ count(child::author) &gt; 2 ]</tt> : séléctionne
 367   chaque book qui a plus de deux fils author</li>
 368 <li> <tt>/descendant::book [ contains(child::title, "Ring") ]</tt></li>
 369 <li> <code>/descendant::book [ count(child::author) &gt; 2
 370                     or contains(child::author, "Tolk")
 371                   ]/child::title</code></li>
 372 </ul>
 373 </div>
 374 <div class="sws-slide">
 375 <h1>Caractéristiques d'XPath</h1>
 376 <ul>
 377   <li>XPath est un langage standardisé par le W3C</li>
 378   <li>Assez verbeux</li>
 379   <li>Langage de requêtes <a>monadique</a> (on ne peut renvoyer que
 380   des ensembles de nœuds. Par exemple il est impossible de renvoyer
 381   des ensembles de paires auteur/titre de livre)</li>
 382   <li>Il est assez compliqué à implémenter efficacement</li>
 383 </ul>
 384 </div>
 385   </body>
 386 </html>