XML+XSL pour Html avec fichiers son

**pwyll2** · 25/05/2011, 11h38

Bonjour,

Etant donné que j'ai posé des questions ici et là et que malgré tous les conseils je n'arrive pas à m'en sortir (parce que je suis nul

), je vais poser ma question plus directement :

j'ai le fichier XML suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="mafeuilledestyle.xsl"?>
<database>
 
<lx>Mot1</lx>
<sf>../Exemple_1.mp3</sf>
 
<lx>Mot2</lx>
<sf>../Exemple_2.mp3</sf>
 
<lx>Mot3</lx>
<sf>../Exemple_3.mp3</sf>
 
<lx>Mot4</lx>
<sf>../Exemple_4.mp3</sf>
 
</database>

(au final j'aurai des milliers de mots et de petits extraits, mais pour l'exemple j'en ai mis que 4).
Je veux obtenir au final un document html comme ça :

-------------------------------------------
Mot1

Mot2

Mot3

Mot4

---------------------------------

Et que quand on clique sur ces petites icônes, ça joue à chaque fois le fichier son correspondant (en gardant visible la page Html, donc le lecteur de son peut être dans un pop-up séparé, par exemple).

Que dois-je mettre dans ma feuille de style XSL ? (sachant que je dois absolument utiliser une feuille de style XSL car j'aurais d'autres éléments de texte dans le vrai document, avec une mise en forme précise que je veux pouvoir modifier, donc XSL s'impose).

Merci d'avance!

**pwyll2** · 25/05/2011, 21h22

Personne ne sait?

**Loceka** · 26/05/2011, 07h56

Je t'ai déjà répondu :

écris une petite page HTML de test qui fonctionne pour un son
écris une feuille XSL qui génère le même code que dans ta page de test pour tous les sons présents dans ton XML

Si tu ne sais pas quoi mettre dans ta page HTML, tu n'es pas dans le bon forum (va plutôt voir côté HTML ou Javascript selon ce dont tu as besoin).

Une fois que tu sauras à quoi doit ressembler ta page HTML, tu n'auras normalement pas de soucis à écrire le XSL permettant de la générer. Cependant si tu as du mal à le faire à ce moment-là, tu pourras revenir ici, mais pas avant.

**pwyll2** · 26/05/2011, 11h21

Merci de ta réponse

Voici ma page Html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
  <link rel="stylesheet" href="../stylesheets/lexiquepro.css" type="text/css">
 
  <script src="../javascript/hi.js" type="text/javascript"></script>
  <script src="../javascript/BatmoAudioPop.js" type="text/javascript"></script>
</head>
 
 
<body>
 
<b>test</b>
<a href="../audio/4.wav" target="_blank" onclick="javascript:BatmoAudioPop('Audio_file',this.href,'1'); return false"><img src="../images/sound-icon.png" border="0"></a>
</body>
</html>

Le problème, depuis le début, c'est que je sais pas comment faire pour que ça marche quand je mets "javascript:BatmoAudioPop..." dans une feuille XSL. Je sais pas où mettre le truc qui renverra à tous mes fichiers son, ni comment l'écrire. Je sais que l'adresse de mes fichiers son est entre les balises <sf> </sf> en XML, c'est tout.

Et en plus je sais pas comment faire pour que ma feuille de style génère du Html, jusqu'à présent elle ne fait que générer une page de Xml où mon texte mis en forme apparaît.
Merci de votre aide

**Loceka** · 26/05/2011, 11h35

En partant du principe que ta page HTML fonctionne en l'état et que ton XML est comme tu l'as écrit alors il te suffit "d'itérer" sur les <sf> de ton document :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" version="4.0" encoding="iso-8859-1" indent="yes"/>
 
  <xsl:template match="/">
    <html>
      <head>
        <link rel="stylesheet" href="../stylesheets/lexiquepro.css" type="text/css"/> 
        <script src="../javascript/hi.js" type="text/javascript"></script>
        <script src="../javascript/BatmoAudioPop.js" type="text/javascript"></script>
      </head>
      <body>
        <xsl:apply-templates select="database/sf"/>
      </body>
    </html>
  </xsl:template>
 
  <xsl:template match="sf">
    <!-- Récupération du contenu du premier "lx" avant le "sf" actuel -->
    <b><xsl:value-of select="preceding-sibling::lx[1]"/></b>
    <!-- Récupération du contenu du "sf" actuel -->
    <a href="{.}" target="_blank" onclick="javascript:BatmoAudioPop('Audio_file',this.href,'1'); return false"><img src="../images/sound-icon.png" border="0"/></a>
  </xsl:template>
</xsl:stylesheet>

Si le code HTML que tu as écrit fonctionne et que les fichiers XML et XSL sont situés au même endroit que ton fichier HTML, il n'y a aucune raison que ça ne fonctionne pas.

**pwyll2** · 26/05/2011, 11h41

Merci!

J'ai pas capté ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<xsl:template match="sf">
    <!-- Récupération du contenu du premier "lx" avant le "sf" actuel -->
    <b><xsl:value-of select="preceding-sibling::lx[1]"/></b>
    <!-- Récupération du contenu du "sf" actuel -->
    <a href="{.}" target="_blank" onclick="javascript:BatmoAudioPop('Audio_file',this.href,'1'); return false"><img src="../images/sound-icon.png" border="0"></a>
  </xsl:template>

Pourquoi il y a un truc avec le "lx" dans le paragraphe sur le "sf"?
Normalement <xsl:template match="sf"> et <xsl:template match="lx"> (et les autres) sont au même niveau dans l'arborescence...

**Loceka** · 26/05/2011, 11h51

Parce que ton XML est mal ordonné. Idéalement un fichier XML devrait regrouper toutes les données liées à un objet dans une balise dédiée à cet objet.

Ici par exemple, ton fichier son est décrit par un nom (balise lx) et un chemin (balise sf). Idéalement ces deux balises devraient être regroupée dans une seule :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<database>
  <son>
    <lx>Mot1</lx>
    <sf>../Exemple_1.mp3</sf>
  </son>
</database>

Au lieu de ça, elles sont toutes au même niveau, ce qui n'est pas pratique.

Si elles étaient comme dans mon exemple, on pourrait écrire un template qui match la balise son pour en extraire les infos utiles (lx et sf).

Actuellement avec la structure de ton XML on est obligé de faire un template qui match la balise sf (ou lx) et de récupérer la balise lx (resp. sf) associée. Mais c'est vrai que c'est moche.

Si tu faisais 2 templates, une qui match lx et l'autre qui match sf, tu aurais d'abord tous tes titres et ensuite tous tes liens dans le HTML généré. Exemple de résultat avec 2 templates :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<b>Mot1</b>
<b>Mot2</b>
<b>Mot3</b>
<b>Mot4</b>
<a href="../Exemple_1.mp3" target="_blank" onclick="javascript:BatmoAudioPop('Audio_file',this.href,'1'); return false"><img src="../images/sound-icon.png" border="0"></a>
<a href="../Exemple_2.mp3" target="_blank" onclick="javascript:BatmoAudioPop('Audio_file',this.href,'1'); return false"><img src="../images/sound-icon.png" border="0"></a>
<a href="../Exemple_3.mp3" target="_blank" onclick="javascript:BatmoAudioPop('Audio_file',this.href,'1'); return false"><img src="../images/sound-icon.png" border="0"></a>
<a href="../Exemple_4.mp3" target="_blank" onclick="javascript:BatmoAudioPop('Audio_file',this.href,'1'); return false"><img src="../images/sound-icon.png" border="0"></a>

**pwyll2** · 26/05/2011, 12h05

Ok.
Alors comme je disais, comment faire pour générer une page Html à partir de mon XML et de ma feuille de style? Chez moi ça génère seulement une page XML avec ma mise en forme.
(et j'ai pas compris pourquoi apparemment dans la page html que tu as générée, il change l'ordre des éléments, alors que dans la page XML que ça génère chez moi, les éléments sont dans le mm ordre que dans la page XML d'origine).

**Loceka** · 26/05/2011, 14h09

Et comment tu t'y prends pour appliquer la feuille de style (XSL) au XML ?

**pwyll2** · 26/05/2011, 14h12

Ben en haut de ma page XML je mets qu'il être mis en forme par telle feuille de style XSL. Mais ça ne répond pas à ma question concernant le html, ou alors y a encore qch qui m'échappe...

**Loceka** · 26/05/2011, 14h28

Non, décris tout le process :

Tu le lances avec Java ? PHP ? (quel code ?)
Avec un navigateur ? Lequel ? De quel façon ?

EDIT :
Personnellement ça marche parfaitement chez moi (en lançant via Firefox).

**pwyll2** · 26/05/2011, 14h30

J'ouvre mon fichier XML avec Internet Explorer, tout simplement (clic droit, ouvrir avec). Je connais rien à Java ni à Php (faut pas me surestimer

).

**Loceka** · 26/05/2011, 14h39

Alors ça devrait marcher. Essaye avec Firefox pour être sûr mais normalement IE sait interpréter ça.

Vérifie que tes fichiers XML et XSL (mafeuilledestyle.xsl) sont dans le même répertoire. Je ne vois que ça qui puisse empêcher la feuille XSL de s'éxecuter.

EDIT :
Fais bien attention à fermer toutes tes balises, sinon ça ne fonctionne pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<link rel="stylesheet" href="../stylesheets/lexiquepro.css" type="text/css"/>
...
<img src="../images/sound-icon.png" border="0"/>

**pwyll2** · 26/05/2011, 14h46

Ben, quand j'ouvre un fichier XML (lié à une feuille de style XSL) avec IE, ça n'en fait pas un fichier html... C'est juste mon fichier XML mis en forme, mais dans la barre d'adresse y a écrit xml, et même si je veux enregistrer le document, je peux l'enregistrer qu'en xml ou xsl... alors je sais pas

EDIT : heu, dans le code que tu viens de recopier, y a un lien vers une feuille de style CSS, c'est normal? parce que dans ma feuille XML je fais pas de lien vers une feuille CSS, seulement vers une feuille XSL...

**Loceka** · 26/05/2011, 15h00

Le code que j'ai recopié se trouve dans le XSL...

Tu peux montrer le contenu (complet) de ton fichier XML et de ton fichier XSL ?

Sinon c'est tout à fait normal que la barre d'adresse contienne le .xml. Seul l'affichage dans le navigateur est du HTML, les données de départ sont toujours le XML, idem quand tu veux enregistrer la page, ça t'enregistre le contenu, pas ce qui est affiché.

Il n'y a pas de moyen simple d'enregister le code HTML généré. Mais tu peux le faire avec Firefox et son plugin firebug si tu veux.

**pwyll2** · 26/05/2011, 15h18

Ok. Une question avant de continuer : est-ce que tous les navigateurs savent lire le XML avec feuille de style XSL? Parce que si oui, j'ai pê pas besoin de générer du Html finalement.

Bon, à part ça, j'ai essayé de refaire un test avec un document XML et une feuille de style etc. Quelque chose de proche du document que je veux traiter au final (jusqu'à présent j'avais simplifié pour gagner de la place dans mes messages)

Ca donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="feuilledestyle.xsl" type="text/xsl"?>
 
 
<database>
<lxGroup>
<lx>AR</lx>
<dn>sur.</dn>
<sf>./5.wav</sf>
<xvGroup>
<xv>X a thabhairt ar dh.i.</xv>
<xn>Appeler qn X, donner le nom de X à qn.</xn>
</xvGroup>
<dt>11/May/2011</dt>
</lxGroup>
</database>

Et la feuille de style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<xsl:stylesheet version = "1.0"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
 
 
<xsl:template match="/">
    <html>
      <head>
 
        <script src="./javascript/hi.js" type="text/javascript"></script>
        <script src="./javascript/BatmoAudioPop.js" type="text/javascript"></script>
      </head>
 
 
      <body>
        <xsl:apply-templates select="database/sf"/>
      </body>
    </html>
  </xsl:template>
 
 
 
 
<xsl:template match="lx">
 
          <br/><br/><b>
               <xsl:value-of select="."/>
          </b><xsl:text> </xsl:text>
 
</xsl:template>
 
<xsl:template match="nt">
     <i>
          <xsl:value-of select="."/> 
     </i><xsl:text> </xsl:text>
</xsl:template>
 
 
<xsl:template match="xv">
 
          <b>
               <xsl:value-of select="."/> 
          </b><xsl:text> </xsl:text>
 
</xsl:template>
 
 
<xsl:template match="ps">
 
          <i>
               <xsl:value-of select="."/> 
          </i><xsl:text> </xsl:text>
 
</xsl:template>
 
<xsl:template match="mr">
 
          <b>
               <xsl:value-of select="."/> 
          </b><xsl:text> </xsl:text>
 
</xsl:template>
 
 
 
<xsl:template match="sn">
 
<br/>
          <b>
               <xsl:value-of select="."/> 
          </b><xsl:text> </xsl:text>
 
</xsl:template>
 
 
 
<xsl:template match="sd">
 
          <i>
               <xsl:value-of select="."/> 
          </i><xsl:text> </xsl:text>
 
</xsl:template>
 
 
<xsl:template match="hm">
 
                         <xsl:value-of select="."/> 
          <xsl:text> </xsl:text>
 
</xsl:template>
 
 
 
<xsl:template match="mn">
 
          Cf. <b>
               <xsl:value-of select="."/> 
          </b><xsl:text> </xsl:text>
 
</xsl:template>
 
 
 
<xsl:template match="ph">
 
          <span style="font-family: Times New Roman;">
               <xsl:value-of select="."/> </span>
          <xsl:text> </xsl:text>
 
</xsl:template>
 
 
<xsl:template match="vo">
 
 
               <xsl:value-of select="."/> 
          <xsl:text> </xsl:text>
 
</xsl:template>
 
 
 
<xsl:template match="cf">
 
 
             Cf. <b><xsl:value-of select="."/> 
          <xsl:text> </xsl:text></b>
 
</xsl:template>
 
 
 
 
 
<xsl:template match="dn">
 
 
               = <xsl:value-of select="."/> 
         <xsl:text> </xsl:text>
 
</xsl:template>
 
 
<xsl:template match="lt">
 
 
               <xsl:value-of select="."/> 
          <xsl:text> </xsl:text>
 
</xsl:template>
 
 
<xsl:template match="so">
 
 
               <xsl:value-of select="."/> 
          <xsl:text> </xsl:text>
 
</xsl:template>
 
 
<xsl:template match="va">
 
 
<xsl:text>(Var : </xsl:text><b>
               <xsl:value-of select="."/> 
          </b><xsl:text> </xsl:text>
 
</xsl:template>
 
 
<xsl:template match="xn">
 
 
               <xsl:value-of select="."/> 
          <xsl:text> </xsl:text>
 
</xsl:template>
 
 
 
<xsl:template match="xp">
 
 
               <br/><xsl:text> </xsl:text><xsl:text> </xsl:text><xsl:text> </xsl:text>
<xsl:value-of select="."/> 
          <xsl:text> </xsl:text>
 
</xsl:template>
 
<xsl:template match="pe">
 
 
               <xsl:value-of select="."/> 
          <xsl:text> </xsl:text>
 
</xsl:template>
 
 
 
 
<xsl:template match="dt">
 
 
               <xsl:value-of select="."/> 
          <xsl:text> </xsl:text>
<p/>
 
</xsl:template>
 
 
 
<xsl:template match="sf">
 
    <a href="{.}" target="_blank" onclick="javascript:BatmoAudioPop('Audio_file',this.href,'1'); return false"><img src="sound-icon.png" border="0"/></a>
  </xsl:template>
 
 
 
</xsl:stylesheet>

Mais ça marche pas

Quand j'ouvre mon fichier XML dans IE, ça n'affiche rien du tout, page blanche.
Je précise que j'ai un dossier dans lequel j'ai:
- le document XML
- la feuille de style
- l'icône "sound-icon.png
- un dossier "audio" dans lequel se trouve mon fichier son
- un dossier javascript dans lequel se trouvent les 2 documents JS mentionnés dans ma feuille de style

Qu'est-ce qui manque?

**Loceka** · 26/05/2011, 15h33

Envoyé par pwyll2

Qu'est-ce qui manque?

La compréhension de XML/XSL ?

Première chose : indente correctement ton XML
Deuxième chose : regarde les XPath présents dans ton XSL et constate qu'ils ne correspondent pas du tout à ton XML.

Accessoirement, prends l'habitude de tester avec Firefox qui t'indique généralement où sont les erreurs, contrairement à IE.

Sinon la plupart des navigateurs gèrent un peu le XML/XSL (pour ce que tu veux faire ça devrait être suffisant) malheureusement pas forcément de façon très poussée.

**pwyll2** · 26/05/2011, 15h41

La compréhension de XML/XSL ?

Si je maîtrisais parfaitement le XML et le XSL, je n'aurais pas besoin de demander de l'aide sur les forums...

Deuxième chose : regarde les XPath présents dans ton XSL et constate qu'ils ne correspondent pas du tout à ton XML.

Je ne constate rien, c'est pour ça que je pose la question à des gens qui s'y connaissent mieux que moi...
Merci d'avance et à tout à l'heure...

**Loceka** · 26/05/2011, 17h11

Possible mais ça se voit tout de suite en indentant correctement le XML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<database>
	<lxGroup>
		<lx>AR</lx>
		<dn>sur.</dn>
		<sf>./5.wav</sf>
		<xvGroup>
			<xv>X a thabhairt ar dh.i.</xv>
			<xn>Appeler qn X, donner le nom de X à qn.</xn>
		</xvGroup>
		<dt>11/May/2011</dt>
	</lxGroup>
</database>

=> XPath = database/lxGroup/sf.

Il faudra aussi adapter le code pour que les autres templates soient appellées mais là je te laisse faire.

**pwyll2** · 26/05/2011, 19h31

Ok, j'ai bien fait de demander : je savais pas du tout ce qu'était un XPath avant que tu m'en parles

EDIT : j'ai fait comme tu as dit avec les templates. Mais le blème c'est que dans mon fichier XML généré, les éléments ne se retrouvent plus dans l'ordre du fichier XML d'origine. Comment faire pour éviter ça?

Autre question : mes fichiers son sont dans un dossier "audio" (lequel est au meme niveau que mon fichier XML et mon fichier XSL).

Est-ce que je peux changer quelque chose dans le XSL ici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<xsl:template match="sf">
 
    <a href="{.}" ...

au lieu d'avoir un chemin plus long (genre <sf>audio/Extrait1.mp3</sf>) indiqué dans mon XML d'origine?
Entre les accolades du "href", est-ce que je peux changer qch, afin qu'en XML, mon <sf>...</sf> se limite au simple nom du fichier mp3?

Merci!

XML+XSL pour Html avec fichiers son

XSL/XSLT/XPATH XML

Discussions similaires

Partager

Partager