Bonjour marc.suisse
Tu commences à comprendre XML, le fichier que tu montres est effectivement XML.
Tu peux aussi visiter ce site (en anglais)
www.w3schools.com/xml/default.asp
Pour t'aider dans ta compréhension je te propose aussi les quelques lignes suivantes, fruit de mon expérience. C'est peu en comparaison de ce que XML permet.
Bonne lecture et bons tests.
XML par l'exemple.
L'intérêt de XML
Les applications qui peuvent prétendre à utiliser XML sont si nombreuses qu'il est impossible de toutes les décrire en quelques pages, cela tient à la multitude des cas possibles. XML est déjà utilisé par certaines applications pour créer des fichiers d'échange. La suite "Libre Office" qui remplace Open Office, fait déjà largement appel à XML pour stocker les fichiers de texte ou de tableur, mais cela est tout à fait transparent pour l'utilisateur. De même un logiciel comme
Itunes décrit l'ensemble des fichiers de musique (ou autres) à l'aide de XML, mais là aussi l'utilisateur n'en voit rien. Parions que les applications de type "sitemap" que l'on trouve dans certains CMS utilisent aussi XML pour décrire l'arborescence d'un site.
Mais il est des situations plus nombreuses encore qui seraient redevables de l'utilisation de XML et de ses langages dérivés.
On trouve maintenant dans le domaine de la linguistique par exemple, de nombreuses applications telles que des dictionnaires qui reposent sur l'utilisation de XML. L'intéraction de ce langage avec HTML notamment en rend la publication aisée dans des applications standard et offre des fonctionnalités très puisssantes et cela avec un minimum de lignes de programmation (hormis le ou les fichiers de données qui eux peuvent être très volumineux.) Nous allons le démontrer à l'aide d'un exemple, facile à mettre en oeuvre sur n'importe quelle machine pourvue d'un éditeur de texte simplissime comme un bloc-note et d'un vieux navigateur comme Internet Explorer 6 voire 5.
Représentation d'un carnet d'adresse
Nous allons représenter et afficher le contenu d'un carnet d'adresses, composées de noms, de numéros de téléphone, de la situation géographique des individus et de leur adresse postale. Nous aurions pu ajouter l'adresse électronique et les liens correspondants. Les données sont encapsulées dans des éléments eux mêmes délimités par des balises (au sens de XML). Nous utilisont pour cela deux fichiers :
-
carnet.xml considéré comme une base de données (BD) ;
-
carnet.xsl qui assure l'affichage dans un navigateur.
La base de données
Le prologue du fichier indique l'encodage du contenu ici on suit la norme
iso-8859-1, on pourrait si l'on désire s'affranchir des règles d'accentuation propres à la francophonie militante et utiliser l'encodage UTF-8.
L'élément racine du carnet (obligatoire) est encadré par les balises ouvrantes et fermantes
<carnet>....</carnet>
, chaque adresse est constituée d'un élément
<adresse></adresse>
<et de sous éléments, dont nous ne considérons à ce stade qu'un seul niveau. Nous aurions pu simplifier l'écriture en plaçant certains informations dans des attributs. Mais pour la simplicité de la démonstration nous nous sommes limités à l'usage d'éléments uniquement.
La relation entre la BD et la feuille de style
carnet.xsl est assurée grâce à la 2e ligne du prologue du fichier
carnet.xml soit :
<?xml-stylesheet type="text/xsl" href="carnet.xsl">
.
L'affichage, les styles
La manipulation et l'affichage des éléments de cette BD sont faits dans le fichier
carnet.xsl, qui contient des séquences d'instructions en langage XSL principalement et des inclusions HTML.
Le fichier
carnet.xsl est lui aussi un fichier XML, il doit donc obligatoirement en repecter toutes les contraintes : un prologue, un élément racine unique, ouverture et fermeture des balises, interdiction d'utiliser des caractères réservés, non chevauchement des éléments, sous peine d'afficher une page blanche ou une bordée de paroles désagréables de la part du navigateur (FireFox notamment) mais avec l'avantage d'indiquer les lignes fautives et le type de faute.
Nous n'affichons que le contenu total du carnet dans l'ordre ou les adresses apparaissent dans la BD. Il serait possible de n'afficher qu'une partie des adresses suivant des critères de sélection : nom ou ville par exemple, triés dans l'ordre ascendant suivant une clef de tri choisie par le lecteur, ceci à l'aide des requêtes d'un formulaire.
La liste de chaque fichier est donnée dans les annexes. Ces listes peuvent être copiées pour faire des tests.
Règles d'affichage des éléments : les templates
Le contenu de la BD affichée grâce à des
templates.
Le premier template
<xsl:template match="/">...</xsl:template>
organise la page à afficher grace au bloc Html dont la liste est données ci-après.
C'est lui qui assure la mise en page, il contient un sous bloc de styles CSS (ce sous bloc pourrait très bien être externalisé, on aurait à créer alors un fichier
carnet.css par exemple et poser un lien dans la balise <head></head> :
<link type="text/css" rel="stylesheet" href="carnet.css"/>
.
L'instruction <xsl:apply-templates/> déclenche tous les templates présents dans la feuille de style. On dit que les éléments sont
matchés. Si un élément n'est pas matché, il est affiché, mais sans, on pourrait aussi me matcher sans l'afficher, pour cela il suffirait d'omettre l'instruction d'affichage dans le template correspondant (voir ci-dessous).
Des templates particuliers sont appliqués à chaque élément de la BD pour leur imposer une mise en page particulière, gouvernée ici par les styles CSS, chaque template peut intègrer des blocs de code html ou des appels à fonction : familles de fontes, couleur, graisse, marges, rembourage, ancres et liens en tout genre pour afficher des images, pointer vers d'autres pages ou afficher des documents externes, bref tout ce que l'on peut faire avec html.
Dans les templates, la valeur des éléments matchés (ici =balise) est affichée grâce à l'élément <xsl:value-of select="balise"/> qui est en fait une instruction XSL soit :
<xsl:template match="balise">
<xsl:value-of select="."/>
</xsl:template>
Le bloc HTML du template principal
<html>
<head>
<style>
body {
}
h1 {
text-align:center;
}
#wrapper
{
margin-left:200px;
margin-top:40px;
width:300px;
background-color:#def;
border-style:solid;
border-width:1px;
border-color:red;
padding:10px;
}
.nom {
display:inline;
color:blue;
font-weight:bold;
font-family:verdana;
}
.prenom
{dislpay:inline;
}
.voie {
display:block;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Mon carnet d'adresses</h1>
<xsl:apply-templates/><!--parcourt le fichier carnet.xml et applique les templates aux balises rencontrées-->
</div>
</body>
</html>
Conseils
Pour créer des fichiers xml ou xsl,utiliser l'éditeur gratuit,
notepad++ , en effet cet éditeur active la coloration syntaxique et numérote les lignes, ce qui est très pratique pour chercher des erreurs. Eviter autant que faire se peut d'utiliser des éditeurs html de type
Dreamweaver ou
Frontpage qui barboulllent les pages de balises inutiles. Si vous êtes riches vous pourrez utiliser
Oxygen ou
XMLSpy, si vous êtes curieux parions que vous pourrez trouver sur la Toile des étiteurs gratuits. Les deux proposent une version d'évaluation gratuite pendant 30 jours, mais il vaut mieux les utiliser en ayant déjà quelques notions pour profiter au mieux de ces versions.
Utilisation des exemples : marche à suivre
1. Copier les deux contenus dans un bloc-note et enregistrer chaque fichier avec son extension
.xml pour l'un,
.xsl pour l'autre) dans le même répertoire ;
2. Ouvrir le fichier xml avec un navigateur (n'importe lequel), les navigateurs reconnaissent l'extension
.xml
3. Vous pouvez ajouter, supprimer des adresses, modifier les styles...
====================================================================
Annexes
Annexe 1 : Liste du fichier carnet.xml
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="carnet.xsl"?>
<carnet>
<adresse>
<nom>Dupont</nom>
<prenom>Jean</prenom>
<tel>0754889900</tel>
<numero>32</numero>
<voie>rue de la gare</voie>
<code_postal>87879</code_postal>
<ville>Saint Machin</ville>
</adresse>
<adresse>
<nom>Martin</nom>
<prenom>Monique</prenom>
<tel>012347608</tel>
<numero>49</numero>
<voie>Place de la Marne</voie>
<code_postal>37987</code_postal>
<ville>Beau village</ville>
</adresse>
<adresse>
<nom>Durand</nom>
<prenom>Pierre</prenom>
<tel>0854993200</tel>
<numero>6</numero>
<voie>impasse de paquerettes</voie>
<code_postal>45909</code_postal>
<ville>Saint Chose</ville>
</adresse>
</carnet>
Annexe 2 : Liste du fichier carnet.xsl
<?xml version="1.0" encoding="ISO-8859-1"?>
<!--entête obligatoire-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:fn="http://www.w3.org/2005/xpath-functions" xmlns:xdt="http://www.w3.org/2005/xpath-datatypes">
<xsl:output method="html" version="1.0" encoding="ISO-8859-1" indent="yes"/>
<!--applique le modèle à l'ensemble du fichier (match="/")-->
<!--match signifie : appliquer le template à la balise qui suit entre les doubles cotes (ou simple)-->
<xsl:template match="/">
<html>
<head>
<style>
body {
}
h1 {
text-align:center;
}
#wrapper
{
margin-left:200px;
margin-top:40px;
width:300px;
background-color:#def;
border-style:solid;
border-width:1px;
border-color:red;
padding:10px;
}
.nom {
display:inline;
color:blue;
font-weight:bold;
font-family:verdana;
}
.prenom
{dislpay:inline;
}
.voie {
display:block;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Mon carnet d'adresses</h1>
<xsl:apply-templates/><!--parcourt le fichier carnet.xml et applique les templates aux balises rencontrées-->
</div>
</body>
</html>
</xsl:template>
<!--applique le template ci dessous chaque fois qu'il rencontre la balise nom (match="nom")-->
<xsl:template match="nom">
<hr />
<span class="nom"><xsl:value-of select="."/></span>
</xsl:template>
<!--applique le template ci dessous chaque fois qu'il rencontre la balise prenom etc.-->
<xsl:template match="prenom">
<span class="prenom"><xsl:value-of select="."/></span>
</xsl:template>
<xsl:template match="voie">
<xsl:value-of select="."/>
</xsl:template>
<xsl:template match="code_postal">
<br /><xsl:value-of select="."/>
</xsl:template>
<xsl:template match="ville">
<xsl:value-of select="."/>
</xsl:template>
<xsl:template match="tel">
<br />téléphone : <xsl:value-of select="."/><br />
</xsl:template>
</xsl:stylesheet>
Modifié par rimousky (14 Jun 2011 - 12:49)
