Affichage des fichiers XML

Afficher des fichiers XML

Les fichiers XML peuvent être affichées dans tous les navigateurs principaux.
Cela signifie que vous pouvez afficher des documents (fichiers) XML bruts, non stylisés, directement dans les navigateurs Web, avec des résultats variables.
Mais les fichiers XML ne s’affichent pas comme des pages HTML.
Exemple : teste.xml

Exemple :      Copier le code

  <?xml version="1.0" encoding="UTF-8"?>
  <listelivres>
    <livre categorie="COOKING">
      <titre lang="en">Everyday Italian</titre>
      <auteur>Giada De Laurentiis</auteur>
      <année>2005</année>
      <prix>30.00</prix>
    </livre>
    <livre categorie="CHILDREN">
      <titre lang="en">Harry Potter</titre>
      <auteur>J K. Rowling</auteur>
      <année>2005</année>
      <prix>29.99</prix>
    </livre>
    <livre categorie="WEB">
      <titre lang="en">Learning XML</titre>
      <auteur>Erik T. Ray</auteur>
      <année>2003</année>
      <prix>39.95</prix>
    </livre>
  </listelivres>

Editez cet exemple dans votre éditeur préféré et affichez le dans votre explorateur.
Le fichier XML s’affichera avec l’élément racine et les éléments enfants en couleur.
et cela selon l'explorateur:

Avec le signe plus (+) ou le signe moins (-) à gauche des éléments ou un petit triangle, ce qui va nous permetre de développer ou réduire la structure de l’arbre des l'éléments.
Pour afficher la source XML brute comme vous l’avez écrit, sélectionnez « Afficher la Page Source » ou « Afficher la Source » dans le menu du navigateur.
Une ligne est affiché en haut de la page comme suit :

 Affichage d'un fichier XML non valide

Si un fichier XML erroné est ouvert, le navigateur signale l'erreur.
Pour voir ce qui sera affiché, faite une erreur dans le code de l’exemple ci-dessus (oublier par exemple la balise fermante d’un élément ou les apostrophes au tour d’un attribut ) et afficher le le fichier.

Pourquoi cet affichage pour le fichier XML ?

Parce que le document XML ne contient pas  d'information sur la maniére d'afficher les données.
Étant donné que les balises XML sont « inventés » par l'auteur du document XML, les navigateurs ne savent pas si une balise comme <table> décrit un tableau HTML ou une table à manger.
Sans information sur la façon d'afficher les données, les navigateurs afficheront juste le document XML comme il est.
Dans les prochains chapitres, nous verrons les différentes solutions pour résoudre ce problème d'affichage, à l'aide de CSS, XSLT et JavaScript.

Affichage XML avec CSS

Avec CSS (Cascading Style Sheets), vous pouvez ajouter des informations d'affichage dans un document XML.
Voici un exemple de comment utilisant une feuille de style CSS pour mettre en forme un document XML :
Exemple :

Exemple :      Copier le code

  <?xml version="1.0" encoding="UTF-8"?>
  <?xml-stylesheet type="text/css" href="livres.css"?>
  <listelivres>
    <livre categorie="COOKING">
      <titre lang="en">Everyday Italian</titre>
      <auteur>Giada De Laurentiis</auteur>
      <année>2005</année>
      <prix>30.00</prix>
    </livre>
    <livre categorie="CHILDREN">
      <titre lang="en">Harry Potter</titre>
      <auteur>J K. Rowling</auteur>
      <année>2005</année>
      <prix>29.99</prix>
    </livre>
    <livre categorie="WEB">
      <titre lang="en">Learning XML</titre>
      <auteur>Erik T. Ray</auteur>
      <année>2003</année>
      <prix>39.95</prix>
    </livre>
  </listelivres>

La deuxième ligne relie le fichier XML au  fichier CSS (livres.css ) que voici le code css , enregisstrez le dans le même dossier que le fichier XML :
Exemple :

Exemple :      Copier le code

 listelivres
{
background-color: #ffffff;
width: 100%;
}
livre
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
titre
{
color: #FF0000;
font-size: 20pt;
}
auteur
{
color: #0000FF;
font-size: 20pt;
}
année,prix
{
display: block;
color: #000000;
margin-left: 20pt;
}

Affichez le fichier XML pour voir le résultat.
Cette fois nous avons un affichage plus propre avec des couleur et un style , une mise en forme ou quoi ?
Mais la mise en forme XML avec CSS n'est pas la méthode la plus courante.
W3C recommande XSLT Qui est un style tout spécialement créer pour afficher des fichier XML . Que nous allons Voir dans  le chapitre suivant.