Affichage des fichiers XML

Afficher des fichiers XML


XML cours tutorial

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

Sélectionner 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 :

Aucune information de style ne semble associée à ce fichier XML. L'arbre du document est affiché ci-dessous.

 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 :

Sélectionner 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 :

Sélectionner 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.




Cours precedent:
cours precedent  Comment on utilise XML
    Sommaire de :
Le langage XML
 Cours suivant:
XSL tutoriel   cours suivant
Par carabde 10 mai 2014

  • Trafic Booster
    hebergement web


    HTML5, CSS3, JavaScript pour débutants Tome 1
    HTML5, CSS3, JavaScript
    pour débutants Tome 1

    Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    XPATH syntaxe

    XPATH syntaxe

    fonction chop, chop

    Alias de rtrim

    Les événements en javascript

    Les événements en js : Les événements (clic ou survol de souris, focus, chargement, etc.) sont des actions qui peuvent être détectées par js.



    Rentabilisez efficacement votre site