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