[Débutant] Mise en forme avec XSL

Version imprimable

20/09/2007, 02h17
sidahmed

[Débutant] Mise en forme avec XSL

Bonjour,

où je peux trouver les propriétes de mise en forme d'un document XML à l'aide de XSL, à l'instar du CSS, permettant de colorer des titres, souligner, mettre en gras, mettre en boîte des blocs, insérer des images background, ...etc.

Merci d'avance.

en faite le xsl va permettre de transformer ton fichier xml en fichier xhtml (par exemple) donc soit:
* tu ajoutes dans ton xsl les balises couleurs ...
* tu génères un fichier html et dans lequel tu fait référence à un fichier css

exemple
fichier xml

Code:

1
2
3
4
5
6
7
 
<a>
<tutu>titi</tutu>
<tutu>titi</tutu>
<tutu>titi</tutu>
<toto>titi</toto>
</a>

fichier xsl

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:output 
  		encoding="ISO-8859-15"
  		method="xml"
  		indent="yes" />
 
	<xsl:template match="/">
               <html><body>
			<xsl:apply-templates select="*"/>
		</body></html>
	</xsl:template>
 
	<xsl:template match="tutu">
               <h1 style="color:olive"><xsl:value-of select="."/></h1>
	</xsl:template>
 
	<xsl:template match="toto">
               <h2 style="color:red"><xsl:value-of select="."/></h1>
	</xsl:template>
</xsl:stylesheet>

et la tu obtiens un fichier avec des styles différents
soit

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:output 
  		encoding="ISO-8859-15"
  		method="xml"
  		indent="yes" />
 
	<xsl:template match="/">
               <html><head>
 
	       <link rel="StyleSheet" href="essai.css" type="text/css">
               </head><body>
			<xsl:apply-templates select="*"/>
		</body></html>
	</xsl:template>
 
	<xsl:template match="tutu">
               <h1 style="color:olive"><xsl:value-of select="."/></h1>
	</xsl:template>
 
	<xsl:template match="toto">
               <h2 style="color:red"><xsl:value-of select="."/></h1>
	</xsl:template>
</xsl:stylesheet>

et tu as un fichier essai.css

Code:

1
2
3
4
5
6
7
8
 
 
h1 { 
color: olive;
}
h2 { 
color: red;
}

je préfère personnellement la deuxième solution (avec css) car comme cela je différencie la mise en forme du contenu (en faite un designer de site peux par la suite intervenir sans modifier la feuille xsl)

Merci fraoustin,

est-ce que je peux utiliser uniquement du XSL pour la mise en forme d'un document XML ? Positionner des blocs, insérer des images background ? Car le travail qui m'a été confié exige le XSL et pas de CSS, je ne crois pas que c'est une bonne solution !!!

Juste une question de validité Xhtml 1.0 : le code écrit, en bleu, est-il obligatoire ?
Code:

1 2 3 4 5 6 7 8 9 Document XSL <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> ... </html> <xsl:template> <xsl:stylesheet>
À bientôt.

20/09/2007, 15h32
Swoög

A savoir :

XSLT n'est pas là pour faire de la mise en page... à la base, XSLT est là pour transformer un arbre XML (un document XML) en un autre OU en texte OU en HTML.

Ensuite, pour tout ce qui est mise en page/mise en forme, le CSS est en général nettement mieux adapté ;)

Sinon au niveau du XHTML, oui, le code en bleu est obligatoire d'un point de vue validation, cf la norme XHTML ^^
20/09/2007, 15h52
sidahmed

Merci Swoög,

donc, comment peut-on inclure les deux fichiers XSL et CSS à un document XML ?
20/09/2007, 15h57
Swoög

Pour le CSS, il te suffit d'utiliser :

Code:

<?xml-stylesheet type="text/css" href="cd_catalog.css"?>

Pour XSLT :

Code:

<?xml-stylesheet type="text/xsl" href="simple.xsl"?>

Il te suffit de mettre la balise qui t'intéresse juste après le prologue XML :

Code:

<?xml version="1.0" ... ?>

Par contre, je doute qu'il soit possible d'utiliser ET un CSS ET un XSLT dans le même XML... (logique puisque les deux ont un impact non compatible sur l'affichage du XML ;) )

Bonne Continuation
20/09/2007, 16h37
sidahmed
Bonsoir,

on peut écrire ce code ?
Code:

1 2 3 4 5 Document XML <?xml version="version" encoding="ISO-5988-1" ?> <?xml-stylesheet type="text/xsl" href="style.xsl"?> <?xml-stylesheet type="text/css" href="style.css"?> ...
style.xsl : transformer le document XML en XHTML,
style.css : mise en page du document (couleur, mise en valeur, positionnement, mise en boîte, ...etc.)

Sinon, comment dois-je procéder pour réaliser un petit site web statique avec XML en utilisant impérativement le XSL ?

Merci de votre patience.
21/09/2007, 02h16
sidahmed

Bonjour,

pour clore ce sujet, je voudrais savoir une chose : est-il possible de positionner des blocs <div></div> uniquement avec XSL / XSLT ?

Merci d'avance.
21/09/2007, 09h14
fraoustin

oui, il suffit de l'ajouter dans ton code xsl
sinon pour le css si tu as interdiction de l'utiliser ne l'utilise pas , mais sache que ton code sera par la suite plus difficile à maintenir
21/09/2007, 15h49
sidahmed
Bonsoir,

Citation:

Envoyé par fraoustin

oui, il suffit de l'ajouter dans ton code xsl
sinon pour le css si tu as interdiction de l'utiliser ne l'utilise pas , mais sache que ton code sera par la suite plus difficile à maintenir

Donc, c'est possible d'écrire ça :
Code:

1 2 3 4 5 Document XML <?xml version="version" encoding="ISO-5988-1" ?> <?xml-stylesheet type="text/xsl" href="style.xsl"?> <?xml-stylesheet type="text/css" href="style.css"?> ...
24/09/2007, 09h44
fraoustin

en faite en même temps je ne pense pas que oui, mais si tu as un process qui génère ton fichier html rien ne t'empêche d'utiliser par la suite un css
24/09/2007, 09h53
fraoustin

je corrige ma réponse (j'ai chercher car cela me préoccupait)
donc tu a un fichier xml que tu transforme en html (par la naviguateur) via une feuille de style. Dans ta transformation tu génère la balise <link rel="StyleSheet" href="style.css" type="text/css"/> permettant par la suite d'appliquer une feuille de style au html générer
24/09/2007, 12h17
Morbo

J'ai eu pas mal de pb de compatibilité avec les feuilles de style css dans ce cas de figure (en générant la baliser link), notamment avec IE. J'ai pas trouvé de solution élégante.
24/09/2007, 14h57
sidahmed

O.K., merci à vous deux:king:

c'était la balise <link> et non pas <xsl:stylesheet>.

Amicalement.