SELFHTML/Aides à la navigation XML/DTD Représentation de données XML| SELFHTML/Aides à la navigation XML/DTD Représentation de données XML |
 |
Représentation XML avec des feuilles de style CSS |
|
|
 | |
Les 
feuilles de style CSS sont conçues à vrai dire un langage de complément pour HTML. À l'aide de feuilles de style, il est possible de formater à souhait des éléments HTML qu'un navigateur affiche avec ses formatages par défaut. Cette possibilité est toujours offerte, selon le navigateur aussi, pour formater des données XML. Exactement comme vous pouvez formater des éléments HTML comme blockquote, h1 ou div avec les CSS, vous pouvez le faire avec vos propres éléments XML, peu importe que ce soit annuaire, description ou le nom qu'il peuvent avoir.
Pour que la combinaison de XML et de CSS fonctionne, trois conditions doivent être remplies dans le navigateur:
1. Le navigateur doit pouvoir traiter XML.
2. Le navigateur doit connaître les CSS.
3. Le navigateur doit permettre la mise en œuvre des CSS en relation avec XML.
Ces conditions préalables sont remplies par l'Explorer Internet MS à partir de la version 5.0 et par Netscape à partir de la version 6.0. Une DTD n'y est même pas indispensable. Il suffit qu'un 
fichier XML conforme existe. Vous pouvez formater les éléments d'un tel fichier avec les CSS.
XML en relation avec les CSS a l'avantage de suffire sans connaissance de XSL/XSLT dans les navigateurs où cela fonctionne. Étant donné que le traitement se fait complètement dans le navigateur, même une connexion au serveur ou autre n'est pas indispensable. En ce qui concerne les inconvénients voir les limites et problèmes pour la représentation avec les CSS.
|
Exemple lié au contexte: un tableau d'horaires de trainsLe tableau d'horaires des trains d'une gare, est un document structuré typique, pour lequel il n'existe pour ainsi dire pas d'éléments appropriés en HTML. Ce n'est certes pas un problème de créer un beau tableau en HTML pour y représenter le tableau d'horaires. Toutefois, d'un "point de vue sémantique" les données perdent de leur teneur. Car un tableau HTML est constitué de cellules de tableau mais celles-ci ne dévoilent rien sur leur contenu respectif. À l'aide d'une structure XML, les données du tableau d'horaires peuvent être décrites de telle façon que les différentes données figurent dans des éléments "significatifs".
L'exemple suivant montre une telle structure XML. Il comprend trois parties:
1. la DTD pour la validation des données,
2. une application XML de cette DTD, à savoir un document exemple qui incorpore un fichier CSS séparé, et
3. ce fichier CSS séparé et ses définitions.
Exemple d'affichage: aperçu (un navigateur XML affiche par exemple le fichier formaté)
<!ELEMENT plan_route (gare)> <!ELEMENT gare (nom,(evenement)*)> <!ELEMENT nom (#PCDATA)> <!ELEMENT evenement (depart | arrivee)> <!ELEMENT depart (heure,type_train,numero_train,route)> <!ELEMENT arrivee (heure,type_train,numero_train,route)> <!ELEMENT heure (#PCDATA)> <!ELEMENT type_train (#PCDATA)> <!ELEMENT numero_train (#PCDATA)> <!ELEMENT route (#PCDATA | demarrage | destination)*> <!ELEMENT demarrage (#PCDATA)> <!ELEMENT destination (#PCDATA)> |
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE plan_route SYSTEM "plan_route.dtd">
<?xml-stylesheet type="text/css" href="plan_route.css" ?>
<plan_route>
<gare>
<nom>Marseille Saint Charles</nom>
<evenement>
<depart>
<heure>16.17</heure>
<type_train class=ter"ter">TER</type_train>
<numero_train>234</numero_train>
<route>Arles 17.02, Nīmes 17.28
<destination>Montpellier 17.55</destination>
</route>
</depart>
</evenement>
<evenement>
<arrivee>
<heure>16.44</heure>
<type_trainclass=ic>IC</type_train>
<numero_train>20392</numero_train>
<route><demarrage>Miramas ą 17.24</demarrage>
Arles 09.16, Arles 17.41, Tarascon 17.52, Nīmes 18.08, Lunel 18.28, Montpellier 18.42
</route>
</arrivee>
</evenement>
<evenement>
<depart>
<heure>17.03</heure>
<type_train classe=ic>IC</type_train>
<numero_train>58483</numero_train>
<route>Arles 17.59, Avignon-Centre 18.20
<destination>Lyon-Part-Dieu ą 20.43</destination>
</route>
</depart>
</evenement>
<evenement>
<arrivee>
<heure>18.38</heure>
<type_train class="tgv">TGV</type_train>
<numero_train>23</numero_train>
<route><demarrage>Nīmes 19.40</demarrage>
Montpellier 20.07
</route>
</arrivee>
</evenement>
</gare>
</plan_route>
|
gare
{ position:absolute;
top:10px;
left:40px;
background-color:#C0C0C0;
padding:10px;
}
nom
{ position:relative;
display:block;
width:600px;
background-color:#808080;
color:#FFFFFF;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-size:36pt;
padding:5px;
}
depart
{ position:relative;
display:block;
width:600px;
background-color:#FFFF80;
color:#000000;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-size:12pt;
padding:2px;
}
arrivee
{ position:relative;
display:block;
width:600px;
background-color:#FFFFFF;
color:#000000;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-size:12pt;
padding:2px;
}
heure
{ position:relative;
width:70px;
vertical-align:top;
}
type_train
{ position:relative;
width:50px;
vertical-align:top;
}
numero_train
{ position:relative;
width:70px;
vertical-align:top;
}
route
{ position:relative;
width:350px;
}
destination,demarrage,heure
{ font-weight:bold;
color:0000E0;
}
.ic, .ter, .tgv
{ font-weight:bold;
color:E00000;
}
|
Dans l'exemple de DTD, qui est sauvegardée séparément dans un fichier nommé plan_route.dtd, la structure désirée d'éléments de données est définie. Sous l'élément document plan_route il y a un élément qui englobe nommé gare, qui comprend un nom pour la gare (élément nom) et un nombre souhaité d'événements (élément evenement). Un événement comprend soit un départ, soit une arrivée (Éléments depart et arrivee). Les deux sortes d'événements ont la même structure interne. Ils se composent d'un horaire (Élément heure), d'une désignation du type de train (Élément type_train), D'un numéro de train (Élément numero_train) et d'une description de l'itinéraire (route). L'élément route peut contenir encore des éléments intérieurs, à savoir pour l'appellation de la gare d'origine pour les trains à l'arrivée (Élément demarrage, et pour la gare terminus pour les trains en partance (Élément destination).
Vous trouverez des détails sur ces définitions dans la partie sur les éléments et règles d'imbrication.
Dans le fichier d'application XML il est fait référence à la déclaration de type de document DTD établie préalablement. Tout de suite après la déclaration de type de fichier et avant même les données d'utilisation proprement dites du fichier, suit l'instruction à l'aide de laquelle le fichier CSS est incorporé:
<?xml-stylesheet type="text/css" href="plan_route.css" ?>
Il s'agit ici d'une instruction de traitement. Par la notation xml-stylesheet le navigateur sait que les attributs qui suivent incorporent un fichier de feuilles de style séparées dans lequel des mentions de formatage pour les différents éléments XML se trouvent. avec l'attribut href le fichier est référencé. L'attribut type est lui aussi important, en particulier quand toute l'application est appelée par l'intermédiaire d'un serveur. Pour l'utilisation de CSS cet attribut reçoit la valeur text/css.
Le reste du fichier XML est composé des données d'utilisation proprement dites. Là sont utilisés les éléments définis dans la DTD et les règles d'imbrication sont respectées. L'exemple ci-dessus se limite pour simplifier à quatre "événements" du tableau d'horaires de trains.
Le fichier CSS séparé qui dans l'exemple s'appelle plan_route.css définit pour les différents éléments les propriétés CSS souhaitées. On n'entrera pas ici dans le détail des différentes propriétés. Mais il faut connaître ici un principe fondamental: un élément XML n'a a priori aucune propriété pour le navigateur. Le navigateur ne sait même pas si un élément doit créer un bloc distinct à l'affichage ou s'il ne doit n'être placé que dans le cours du texte (incorporé). Par défaut, tout cela est affiché dans le cours du texte non comme un texte complètement non-structuré. C'est pourquoi il vous faut toujours mentionner la mention correspondante lors des définitions CSS d'éléments XML qui doivent créer un bloc distinct. Celle-ci s'appelle display:block.
Dans l'exemple ci-dessus l'élément gare qui englobe le tableau d'horaires de trains complet, est positionné de façon absolue (position:absolute). Les éléments intérieurs sont positionnés par rapport à leur point de départ relatif (position:relative). Ces mentions en relation avec des mentions sur la largeur des éléments (width:...) font en sorte que la sortie apparaisse formatée proprement comme dans un tableau.
La dernière définition du fichier CSS représente une particularité. Là sont définies deux classes. Ces classes peuvent normalement être adressées dans des éléments HTML avec l' attribut universel class="nom_classe". L'Explorer Internet interprète ces attributs universels même dans des éléments XML en relation avec les CSS. Dans les données du fichier XML de l'exemple ci dessus, il est fait référence à ces classes à trois endroits par exemple dans l'instruction <type_train class="ic">IC</type_train>.
L'Explorer Internet interprète même l'attribut style dans les repères d'ouverture XML. Cela vous permet de formater individuellement des éléments XML distincts, par exemple: <anniversaire style="font-family:Modern; font-size:14pt; color:blue">.
Toutefois, plus les données d'application XML "se relâcheront" par l'emploi d'attributs issus de HTML comme class= ou style=, plus vous vous éloignerez du dogme pur de XML qui veut séparer strictement les données et le formatage l'un de l'autre et ne vise à formater que des parties constitutives bien définies de la DTD.
|
|
Les CSS sont certainement pour les utilisateurs qui se risquent en XML avec des connaissances préalables en HTML plus faciles à comprendre et à utiliser dans un premier temps. Pourtant Les CSS en relation avec XML présentent des inconvénients que vous devez connaître:
alignement avec comme valeurs permises définies gauche, droite et centre, ce n'est qu'à partir des CSS 2.0 qu'il vous est possible d'établir la relation entre une telle mention d'attribut et un formatage de texte correspondant. Vous trouverez des détails à ce sujet dans la partie expliquant comment définir des formats liés à l'attribut. Ne perdez cependant pas de vue que tous les navigateurs ne soutiennent pas ces formats CSS.|
| |
 |
Bases de XSL/XSLT
|
 |
Notations pour données référencées
|
| SELFHTML/Aides à la navigation XML/DTD Représentation de données XML |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org