Techniques d'affichage des documents XML

Transcription

1 SESSION 21 Techniques d'affichage des documents XML Programme de la session Appliquer des formats aux documents XML Utiliser XSLT et XPath pour la publication Web Introduction aux feuilles de styles CSS Comparaison entre XSLT/XPath et CSS Utilisation des CSS avec XSLT XML est un langage très souple qui peut être employé pour de nombreuses applications professionnelles. Des entreprises l'utilisent comme format d'échange d'informations commerciales. Il est également employé pour réaliser des fichiers de configuration. De nouveaux domaines d'utilisation apparaissent chaque jour. Toutefois, une grande partie des informations est destinée à la publication. Les données XML peuvent être publiées sur le Web, imprimées, ou diffusées vers des terminaux mobiles tels que téléphones ou assistants numériques personnels (PDA Personal Digital Assistant). Elles peuvent également être transmises à des terminaux non conventionnels, présentant, par exemple, des interfaces en langage naturel. Peut-être avez-vous choisi XML pour être en mesure de publier vos données sur différents médias. Dans ce cas, XML permet une diffusion des données optimisant l'adéquation entre forme et contenu.

2 212 XML Web Training Réunir le contenu et la forme L'avantage principal de XML en matière de réutilisation des données est que ce langage permet de séparer totalement la forme et le contenu. Dans un document XML, les métadonnées sont constituées des noms et attributs d'éléments. Ces noms et ces attributs permettent de manipuler les données contenues dans le document. Une fois les données traitées, il est nécessaire de réunir le contenu et la forme. Nous avons déjà consacré plusieurs sessions à l'utilisation des feuilles de styles XSLT, qui nous ont permis de sélectionner et de trier les données XML, et de les transformer en pages HTML. Au cours de cette session, nous présenterons un autre mécanisme de mise en forme : les CSS (Cascading Style Sheets ou feuilles de styles en cascade). Les CSS ont été créées pour mettre en forme les éléments HTML. Elles se sont ensuite avérées tout à fait adaptées pour spécifier la façon dont les éléments XML devaient être affichés par un navigateur. Hélas, XSLT et CSS sont deux technologies très différentes. Leur modèle de fonctionnement, leurs possibilités et leur complexité ne pourraient être plus dissemblables. Dans cette session, nous comparerons ces deux technologies de façon que vous soyez en mesure de choisir celle qui convient le mieux à votre projet. Nous verrons également comment les combiner pour profiter du meilleur de chacune. Introduction aux CSS À son apparition, HTML était très simple. Pour les titres, il suffisait d'utiliser des balises telles que <h1> et <h2>. La balise <p> introduisait chaque paragraphe, l'italique était représenté par <i> et le gras par <b> (pour bold). Chaque navigateur représentait ces éléments du mieux qu'il pouvait. Une des raisons pour lesquelles HTML était d'un apprentissage si facile était que le soin de représenter les divers éléments était entièrement laissé aux navigateurs. Personne ne s'en préoccupait vraiment ; les utilisateurs étaient satisfaits avec ce qu'ils avaient et le Web se développait très rapidement. Plus le nombre d'utilisateurs croissait, plus certains d entre eux souhaitaient contrôler l'aspect qu'avaient leurs pages Web dans les navigateurs. Il ne leur suffisait plus de savoir que le titre <h1> serait affiché avec la plus grosse taille de caractère, le titre <h2> un peu plus petit, et

3 Session 21 - Techniques d'affichage des documents XML 213 ainsi de suite. Les nouveaux utilisateurs souhaitaient un contrôle plus précis sur le dessin, la taille et la couleur des caractères, alors même que la simplicité de HTML reposait sur le fait que ces aspects étaient laissés à la discrétion des concepteurs de navigateurs. Les premières possibilités de contrôle de la mise en forme reposaient sur un ensemble d'attributs des éléments HTML. En HTML, la mise en forme d'un élément peut être exprimée de la manière suivante : <FONT SIZE="18" FACE="ARIAL, VERDANA, HELVETICA" COLOR="RED"> Ce code n'est pas seulement difficile à saisir sans erreur. Il est également peu lisible et difficile à modifier. Si vous souhaitez changer l'affichage de tous les titres pour utiliser un caractère de 15 points, vous devrez en localiser toutes les occurrences pour y apporter cette modification. Origine des CSS Les CSS sont un moyen de séparer les instructions de mise en forme des données HTML. Cette technologie apporte les avantages suivants : Le code HTML redevient facile à lire, car il ne contient plus les instructions de mise en forme. Le code est plus facilement modifiable. Pour modifier la mise en forme de tous les éléments, il n'est plus nécessaire de localiser chacun d'eux pour changer ses attributs. Les bases de la syntaxe des CSS Une feuille de styles CSS consiste en une série de règles. Chaque règle est constituée d'un sélecteur et d'une déclaration. La déclaration est une liste de paires propriété:valeur. Voici un exemple de règle CSS : selector {propriété1: valeur1, propriété2: valeur2;} Un élément <h1>, par exemple, peut être mis en forme par la règle suivante : h1 {font-size: 18; font-weight: bold; font-color: red}

4 214 XML Web Training Comparaison entre CSS et XSLT/XPath Avant de s'enthousiasmer pour les possibilités des CSS avec XML, il est utile de comparer cette technologie avec XSLT, le langage de feuilles de styles que nous avons utilisé jusqu'ici. CSS et XSLT présentent des différences importantes. Leur connaissance vous guidera dans le choix d'une technologie pour l'affichage des données XML. Fonctionnalités et limites de XSLT/XPath Utilisé avec XPath, XSLT vous permet d'appliquer à vos données XML les traitements suivants : Sélection d'un contenu spécifique. Il est fréquent de ne souhaiter publier qu'une partie d'un document, de la même façon qu'il n'est généralement pas souhaitable d'afficher le contenu entier d'une base de données. Manipulation et tri du contenu d'un document. Combinaison de contenus provenant de plusieurs documents. Conversion d'un document d'un vocabulaire vers un autre (XML vers HTML, ou XML vers WML, par exemple). XSLT présente également certaines limitations : XSLT ne propose aucune syntaxe pour spécifier la mise en forme. Celle-ci ne peut être indiquée qu'en effectuant une conversion vers un autre langage, comme HTML, capable de spécifier la mise en forme. Aucune instruction XSLT, par exemple, ne peut indiquer qu'un texte doit être affiché en Helvetica gras, 18 points. XSLT et XPath sont des langages complexes et d'un apprentissage difficile. XSLT requiert un programme spécial, appelé processeur XSLT, ou transformateur XSLT. Peu nombreux sont les navigateurs équipés d'un tel programme. Fonctionnalités et limites des CSS Les CSS présentent un avantage important : elles permettent de spécifier de manière très simple la mise en forme des éléments HTML ou XML. Elles souffrent aussi de certaines limitations :

5 Session 21 - Techniques d'affichage des documents XML 215 Elles ne peuvent pas manipuler des éléments XML (sauf, éventuellement, pour les supprimer). Les CSS ne peuvent pas sélectionner ou trier des éléments. Le document XML est affiché en totalité, ou pas du tout. Les CSS reposent entièrement sur la capacité du navigateur à les exploiter. Le support des CSS varie largement en fonction des navigateurs. Les CSS ne permettent pas de spécifier une mise en forme variant en fonction des attributs des éléments. Combiner les CSS et XSLT XSLT est un langage de programmation riche et puissant, utile pour convertir un document XML d'un vocabulaire vers un autre, comme HTML, en vue de son affichage. Les CSS offrent de leur côté une syntaxe simple pour spécifier la façon dont les éléments doivent être affichés. Pourquoi ne pas réunir le meilleur des deux mondes? Vous pouvez employer XSLT pour trier et sélectionner les éléments XML, puis les CSS pour spécifier la manière dont le résultat doit être affiché. Nous allons en montrer un exemple en reprenant notre arbre généalogique. Nous créerons tout d'abord une feuille de styles CSS simple. Elle contiendra deux classes : l'une appelée masculin et l'autre féminin. Les éléments de la première seront affichés en gras et ceux de la seconde en italique. Cette feuille de styles sera nommée genealogie.css et contiendra le code suivant :.masculin {font-weight:bold;}.feminin {font-style:italic;} N'utilisez pas de caractères accentués dans vos feuilles de styles CSS. Dans le cas contraire, les styles ne seront pas reconnus par Microsoft Internet Explorer. Nous créerons ensuite une feuille de styles XSLT pour extraire les données qui nous intéressent à partir du fichier généalogie.xml. Ce faisant, nous placerons les éléments dans une ligne d'un tableau. Cette ligne sera de la classe masculin ou féminin, en fonction de l'attribut genre de l'élément enfant. Nous utiliserons <xsl:choose> pour tester cet attribut et créer l'élément correspondant dans le document résultant :

6 216 XML Web Training <?xml version="1.0" encoding="iso "?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html> <head> <title> Généalogie de la famille <xsl:value-of select="//père/nom"/> </title> <link rel="stylesheet" href="genealogie.css" type="text/css"/> </head> <body> <table width="100%"> <tbody> <tr bgcolor="silver"> <td width="33%"><b>fille ou garçon</b></td> <td width="33%"><b>nom</b></td> <td width="33%"><b>lieu de naissance</b></td> </tr> <xsl:for-each select="//enfant"> <xsl:choose> <xsl:when <tr class="masculin"> <td><xsl:apply-templates <td><xsl:apply-templates select="./prénom"/></td> <td> <xsl:apply-templates select="./lieu_de_naissance"/> </td> </tr> </xsl:when> <xsl:otherwise> <tr class="feminin"> <td><xsl:apply-templates <td><xsl:apply-templates select="./prénom"/></td> <td> <xsl:apply-templates select="./lieu_de_naissance"/> </td> </tr> </xsl:otherwise> </xsl:choose> </xsl:for-each> </tbody> </table> </body> </html> </xsl:template> </xsl:stylesheet>

7 Session 21 - Techniques d'affichage des documents XML 217 La Figure 21-1 montre le résultat obtenu. Notez que les garçons sont affichés en gras et les filles en italique. Figure 21-1 Résultat de la combinaison de feuilles de styles CSS et XSLT pour afficher des données XML. Combiner des feuilles de styles CSS et XSLT offre plusieurs avantages. Les feuilles de styles XSLT restent aussi simples que possible. Les informations de mise en forme sont placées uniquement dans les feuilles de styles CSS. Cela simplifie la maintenance et la portabilité. (Il est plus fréquent de modifier la présentation que la logique.) Pour changer la présentation, il suffit de modifier le contenu de la feuille de styles CSS, sans avoir à intervenir dans le code XSLT, plus complexe. Dans cette session, nous avons présenté les feuilles de styles CSS, qui sont un moyen simple, bien que moins puissant que XSLT, de spécifier les instructions de mise en forme des données XML. Au cours des sessions suivantes, nous approfondirons nos connaissances de ces deux langages pour améliorer la présentation des données. RÉVISION Les feuilles de styles CSS ont été conçues comme un moyen de simplifier la mise en forme des documents HTML. Les CSS permettent de définir la présentation des éléments HTML et XML. Les CSS sont beaucoup plus simples, mais moins puissantes que XSLT. Il est possible de combiner les CSS et XSLT.

8 218 XML Web Training TESTEZ VOS CONNAISSANCES 1. Citez un inconvénient de l'utilisation d'attributs HTML pour spécifier la mise en forme des éléments. (Voir Introduction aux CSS.) 2. Quel est le nom du premier élément d'une règle de CSS? (Voir Les bases de la syntaxe des CSS.) 3. Quels sont les deux composants d'une déclaration CSS? (Voir Les bases de la syntaxe des CSS.) 4. Vrai ou faux? Les CSS sont compatibles avec tous les navigateurs. (Voir Fonctionnalités et limites des CSS.) 5. Vrai ou faux? Les CSS peuvent être employées pour manipuler du contenu XML. (Voir Comparaison entre CSS et XSLT/XPath.)