From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../index.html" | 22 +++ .../fr/xslt_dans_gecko/exemple_basique/index.html | 65 +++++++ .../g\303\251n\303\251ration_de_html/index.html" | 190 +++++++++++++++++++++ files/fr/xslt_dans_gecko/index.html | 43 +++++ 4 files changed, 320 insertions(+) create mode 100644 "files/fr/xslt_dans_gecko/diff\303\251rences_entre_les_navigateurs/index.html" create mode 100644 files/fr/xslt_dans_gecko/exemple_basique/index.html create mode 100644 "files/fr/xslt_dans_gecko/g\303\251n\303\251ration_de_html/index.html" create mode 100644 files/fr/xslt_dans_gecko/index.html (limited to 'files/fr/xslt_dans_gecko') diff --git "a/files/fr/xslt_dans_gecko/diff\303\251rences_entre_les_navigateurs/index.html" "b/files/fr/xslt_dans_gecko/diff\303\251rences_entre_les_navigateurs/index.html" new file mode 100644 index 0000000000..5b5a0c99c3 --- /dev/null +++ "b/files/fr/xslt_dans_gecko/diff\303\251rences_entre_les_navigateurs/index.html" @@ -0,0 +1,22 @@ +--- +title: Différences entre les navigateurs +slug: XSLT_dans_Gecko/Différences_entre_les_navigateurs +translation_of: Web/API/XSLTProcessor/Browser_Differences +--- +

    +
  1. Introduction
    2. +
  2. Exemple basique
    3. +
  3. Génération de HTML
    4. +
  4. Différences entre les navigateurs
    5. +
  5. Ressources
    6. +

+ +

Différences entre les navigateurs

+ + + +

{{PreviousNext("XSLT dans Gecko:Génération de HTML", "XSLT dans Gecko:Ressources")}}

diff --git a/files/fr/xslt_dans_gecko/exemple_basique/index.html b/files/fr/xslt_dans_gecko/exemple_basique/index.html new file mode 100644 index 0000000000..8d78422777 --- /dev/null +++ b/files/fr/xslt_dans_gecko/exemple_basique/index.html @@ -0,0 +1,65 @@ +--- +title: Exemple basique +slug: XSLT_dans_Gecko/Exemple_basique +translation_of: Web/API/XSLTProcessor/Basic_Example +--- +

    +
  1. Introduction
    2. +
  2. Exemple basique
    3. +
  3. Génération de HTML
    4. +
  4. Différences entre les navigateurs
    5. +
  5. Ressources
    6. +

+ +

Exemple basique

+ +

Ce premier exemple présente les bases de l'utilisation d'une transformation XSLT dans un navigateur. L'exemple utilise un document XML qui contient des informations (titre, liste d'auteurs et corps de texte) à propos d'un article pour en tirer une version lisible par un humain.

+ +

La figure 1 montre le code source de l'exemple XSLT. Le document XML (exemple.xml) contient les informations à propos de l'article. En utilisant l'instruction de traitement ?xml-stylesheet?, il est lié à la feuille de style XSLT (exemple.xsl) via son attribut href.

+ +

Une feuille de style XSLT débute par l'élément xsl:stylesheet, qui contient tous les modèles utilisés pour créer le résultat final. L'exemple de la figure 1 possède deux modèles - un qui s'applique au nœud racine et un aux nœuds Author. Le modèle correspondant au nœud racine produit en sortie le titre de l'article puis déclenche le traitement de tous les autres modèles (via apply-templates) correspondant aux nœuds Author qui sont les descendants du nœud Authors.

+ +

Figure 1 : exemple XSLT simple

+ +

Document XML (exemple.xml) :

+ +
  <?xml version="1.0"?>
+  <?xml-stylesheet type="text/xsl" href="exemple.xsl"?>
+  <Article>
+    <Title>Mon article</Title>
+    <Authors>
+      <Author>M. Foo</Author>
+      <Author>M. Bar</Author>
+    </Authors>
+    <Body>Ceci est le texte de mon article.</Body>
+  </Article>
+
+ +

Feuille de style XSL (exemple.xsl) :

+ +
  <?xml version="1.0"?>
+  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+
+    <xsl:output method="text"/>
+
+    <xsl:template match="/">
+      Article - <xsl:value-of select="/Article/Title"/>
+      Auteurs : <xsl:apply-templates select="/Article/Authors/Author"/>
+    </xsl:template>
+
+    <xsl:template match="Author">
+      - <xsl:value-of select="." />
+    </xsl:template>
+
+  </xsl:stylesheet>
+
+ +

Sortie dans le navigateur :

+ +
  Article - Mon article
+  Auteurs :
+  - M. Foo
+  - M. Bar
+
+ +

{{PreviousNext("XSLT dans Gecko", "XSLT dans Gecko:Génération de HTML")}}

diff --git "a/files/fr/xslt_dans_gecko/g\303\251n\303\251ration_de_html/index.html" "b/files/fr/xslt_dans_gecko/g\303\251n\303\251ration_de_html/index.html" new file mode 100644 index 0000000000..ca333bb2ac --- /dev/null +++ "b/files/fr/xslt_dans_gecko/g\303\251n\303\251ration_de_html/index.html" @@ -0,0 +1,190 @@ +--- +title: Génération de HTML +slug: XSLT_dans_Gecko/Génération_de_HTML +translation_of: Web/API/XSLTProcessor/Generating_HTML +--- +

    +
  1. Introduction
    2. +
  2. Exemple basique
    3. +
  3. Génération de HTML
    4. +
  4. Différences entre les navigateurs
    5. +
  5. Ressources
    6. +

+ +

Génération de HTML

+ +

Une application courante de XSLT dans les navigateurs est la transformation de code XML en HTML du coté du client. Le second exemple va transformer un document d'entrée (example2.xml), qui contient des informations à propos d'un article, en un document HTML.

+ +

L'élément <body> de l'article contient maintenant des éléments HTML (des balises <strong> et <em>, voir la figure 2). Le document XML contient à la fois des éléments HTML et éléments XML, mais un seul espace de nommage est nécessaire, pour les éléments XML. Comme il n'existe pas d'espace de nommage HTML, et que l'utilisation de l'espace de nommage XHTML forcerait le XSL à créer un document XML qui pourrait ne pas se comporter comme un document HTML, le nœud xsl:output de la feuille de style assure que le document résultant sera bien traité comme du HTML. Pour les éléments XML, nous avons besoin de notre propre espace de nommage, http://devedge.netscape.com/2002/de, à qui nous donnons le préfixe myNS (xmlns:myNS="http://devedge.netscape.com/2002/de").

+ +

Figure 2 : fichier XML (example2.xml)voir l'exemple | voir le source Document XML (example2.xml): <div style="background: #EEE; font-size: 1.1em; line-height: 1.1em; border: dashed #666 1px; padding: 15px 20px 15px 20px; overflow: auto;">

+ +
<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="example.xsl"?>
+  <myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de">
+    <myNS:Title>Mon article</myNS:Title>
+    <myNS:Authors>
+      <myNS:Author company="Foopy Corp.">M. Foo</myNS:Author>
+      <myNS:Author>M. Bar</myNS:Author>
+    </myNS:Authors>
+    <myNS:Body>
+      En <em>Espagne</em>, les <strong>pluies</strong> se concentrent
+      principalement dans les plaines.
+    </myNS:Body>
+  </myNS:Article>
+
+ +

La feuille de style XSL utilisée aura besoin de deux espaces de nommage - un pour les éléments XSLT et un pour nos propres éléments XML utilisés dans le document XML. La sortie de la feuille de style XSL est définie à HTML à l'aide de l'élément xsl:output. En définissant la sortie comme étant du code HTML et en n'ayant pas d'espace de nommage pour les éléments résultants (coloré en bleu), ces éléments seront traités comme des éléments HTML.

+ +

Figure 3 : feuille de style XSL avec 2 espaces de nommage (example2.xsl) feuille de style XSL (example2.xsl):

+ +
  <?xml version="1.0"?>
+  <xsl:stylesheet version="1.0"
+                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                           xmlns:myNS="http://devedge.netscape.com/2002/de">
+
+    <xsl:output method="html"/>
+    ...
+  </xsl:stylesheet>
+
+ +

Un modèle s'appliquant au nœud racine du document XML est créé et utilisé pour créer la structure de base de la page HTML.

+ +

Figure 4 : Création du document HTML de base feuille de style XSL (example2.xsl):

+ +
  ...
+  <xsl:template match="/">
+  <html>
+
+    <head>
+
+      <title>
+        <xsl:value-of select="/myNS:Article/myNS:Title"/>
+      </title>
+
+      <style type="text/css">
+        .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+      </style>
+
+    </head>
+
+    <body>
+      <p class="myBox">
+        <span class="title">
+          <xsl:value-of select="/myNS:Article/myNS:Title"/>
+        </span> <br />
+
+        Auteurs :   <br />
+          <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
+      </p>
+
+      <p class="myBox">
+        <xsl:apply-templates select="//myNS:Body"/>
+      </p>
+
+    </body>
+
+  </html>
+  </xsl:template>
+  ...
+
+ +

Nous avons besoin de trois xsl:template supplémentaires pour parachever l'exemple. Le premier xsl:template est utilisé pour les nœuds Author, alors que le deuxième traite le nœud body. Le troisième possède une règle de correspondance générale qui lui permet de s'appliquer à chaque nœud et chaque attribut. Cela est nécessaire afin de préserver les éléments HTML présents dans le document XML : il s'appliquant à tous, et les recopie dans le document HTML créé par la transformation.

+ +

Figure 5 : Les 3 modèles finaux feuille de style XSL (example2.xsl):

+ +
  ...
+  <xsl:template match="myNS:Author">
+     --   <xsl:value-of select="." />
+
+    <xsl:if test="@company">
+     ::   <strong>  <xsl:value-of select="@company" />  </strong>
+    </xsl:if>
+
+    <br />
+  </xsl:template>
+
+  <xsl:template match="myNS:Body">
+    <xsl:copy>
+      <xsl:apply-templates select="@*|node()"/>
+    </xsl:copy>
+  </xsl:template>
+
+  <xsl:template match="@*|node()">
+    <xsl:copy>
+      <xsl:apply-templates select="@*|node()"/>
+    </xsl:copy>
+  </xsl:template>
+  ...
+
+ +

La feuille de style XSLT finale est donc :

+ +

Figure 6 : feuille de style XSLT finale voir l'exemple | voir le source feuille de style XSL :

+ +
  <?xml version="1.0"?>
+  <xsl:stylesheet version="1.0"
+                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                           xmlns:myNS="http://devedge.netscape.com/2002/de">
+
+    <xsl:output method="html" />
+
+    <xsl:template match="/">
+      <html>
+
+        <head>
+
+          <title>
+            <xsl:value-of select="/myNS:Article/myNS:Title"/>
+          </title>
+
+          <style type="text/css">
+            .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+          </style>
+
+        </head>
+
+        <body>
+          <p class="myBox">
+            <span class="title">
+              <xsl:value-of select="/myNS:Article/myNS:Title"/>
+            </span> <br />
+
+            Authors:   <br />
+              <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
+            </p>
+
+          <p class="myBox">
+            <xsl:apply-templates select="//myNS:Body"/>
+          </p>
+
+        </body>
+
+      </html>
+    </xsl:template>
+
+    <xsl:template match="myNS:Author">
+       --   <xsl:value-of select="." />
+
+      <xsl:if test="@company">
+       ::   <b>  <xsl:value-of select="@company" />  </b>
+      </xsl:if>
+
+      <br />
+    </xsl:template>
+
+    <xsl:template match="myNS:Body">
+      <xsl:copy>
+        <xsl:apply-templates select="@*|node()"/>
+      </xsl:copy>
+    </xsl:template>
+
+    <xsl:template match="@*|node()">
+        <xsl:copy>
+          <xsl:apply-templates select="@*|node()"/>
+        </xsl:copy>
+    </xsl:template>
+  </xsl:stylesheet>
+
+ +

{{PreviousNext("XSLT dans Gecko:Exemple basique", "XSLT dans Gecko:Différences entre les navigateurs")}}

diff --git a/files/fr/xslt_dans_gecko/index.html b/files/fr/xslt_dans_gecko/index.html new file mode 100644 index 0000000000..05ad63a567 --- /dev/null +++ b/files/fr/xslt_dans_gecko/index.html @@ -0,0 +1,43 @@ +--- +title: XSLT dans Gecko +slug: XSLT_dans_Gecko +tags: + - XSLT +translation_of: Web/API/XSLTProcessor +--- +

 

+ +
    +
  1. Introduction
    2. +
  2. Exemple basique
    3. +
  3. Génération de HTML
    4. +
  4. Différences entre les navigateurs
    5. +
  5. Ressources
    6. +
+ +

 

+ +

Introduction

+ +

Une des tendances notables dans les standards du W3C a été l'effort de séparation du contenu et du style. Cela permet de réutiliser un même style pour de multiple contenus, mais également de simplifier le travail de maintenance et de permettre une modification rapide (en ne modifiant qu'un seul et unique fichier) de la charte graphique du contenu.

+ +

CSS (Cascade Style Sheets) a été l'un des premiers moyens proposés par le W3C. CSS est un moyen simple d'appliquer des règles de style à un document Web. Ces règles de style définissent de quelle façon le document (le contenu) doit s'afficher. Cependant, CSS a plusieurs limitations, telles l'absence de structures de programmation et l' impossibilité de créer des modèles de rendu complexes. CSS possède également un support limité des changements de position d'un élément.

+ +

Les transformations XSL (eXtensible Stylesheet Language) sont composées de deux parties : les éléments XSL, qui permettent la transformation d'un arbre XML en un arbre possédant un balisage différent, et XPath, un langage de sélection pour les arbres. XSLT traite un document XML (le contenu) et crée un nouveau document basé sur les règles contenues dans une feuille de style XSL. Ceci permet à XSLT d'ajouter, d'enlever, de réorganiser les éléments du document XML original et permet ainsi un contrôle plus fin de la structure du document résultant.

+ +

Les transformations XSLT sont basées sur des règles qui sont constituées de modèles. Chaque modèle détermine à quels fragments du document XML d'entrée il applique (à l'aide de XPath) les règles de substitution qu'il contient pour créer le nouveau document en sortie.

+ +

{{Next("XSLT dans Gecko:Exemple basique")}}

+ +
+

Informations sur le document original

+ + +
+ +

Interwiki Languages Links

-- cgit v1.2.3-54-g00ecf