XML+XSL pour Html avec fichiers son

Version imprimable

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 :cry: ), je vais poser ma question plus directement :

j'ai le fichier XML suivant :
Code:

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
http://www.globalalliance.ws/nmd_alt...sound-icon.gif

Mot2
http://www.globalalliance.ws/nmd_alt...sound-icon.gif

Mot3
http://www.globalalliance.ws/nmd_alt...sound-icon.gif

Mot4
http://www.globalalliance.ws/nmd_alt...sound-icon.gif
---------------------------------

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! ;)

25/05/2011, 21h22
pwyll2

Personne ne sait? :cry:
26/05/2011, 07h56
Loceka
Je t'ai déjà répondu :
1. écris une petite page HTML de test qui fonctionne pour un son
2. é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.

Merci de ta réponse :)

Voici ma page Html :
Code:

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 :)

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:

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.

Merci!

J'ai pas capté ça :
Code:

1 2 3 4 5 6 <xsl:template match="sf">  <b><xsl:value-of select="preceding-sibling::lx[1]"/></b>  <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... :koi:

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:

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:

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>

26/05/2011, 12h05
pwyll2

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).
26/05/2011, 14h09
Loceka

Et comment tu t'y prends pour appliquer la feuille de style (XSL) au XML ?
26/05/2011, 14h12
pwyll2

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...:?
26/05/2011, 14h28
Loceka

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).
26/05/2011, 14h30
pwyll2

J'ouvre mon fichier XML avec Internet Explorer, tout simplement (clic droit, ouvrir avec). Je connais rien à Java ni à Php (faut pas me surestimer :mrgreen:).
26/05/2011, 14h39
Loceka
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:

1 2 3 <link rel="stylesheet" href="../stylesheets/lexiquepro.css" type="text/css"/> ... <img src="../images/sound-icon.png" border="0"/>
26/05/2011, 14h46
pwyll2

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...
26/05/2011, 15h00
Loceka

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 ? :roll:

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.

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:

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:

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 :cry::cry:
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? :(

26/05/2011, 15h33
Loceka

Citation:

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.
26/05/2011, 15h41
pwyll2

Citation:

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... :?

Citation:

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... :)

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

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.

26/05/2011, 19h31
pwyll2
Ok, j'ai bien fait de demander : je savais pas du tout ce qu'était un XPath avant que tu m'en parles :mrgreen:

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:

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! :)
27/05/2011, 08h57
Loceka
Citation:

Envoyé par pwyll2

Comment faire pour éviter ça?

Fais uniquement 2 templates dans ton XSL : un qui match la racine (il est déjà écrit) et qui appelle le 2ième. Le second qui match lxGroup et qui récupère tous les éléments dont il a besoin.

Citation:

Envoyé par pwyll2

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

Tu peux mais c'est pas conseillé du tout. Imagine que tu veuilles changer le nom de ton répertoire, ou son chemin. Ou pire, avoir certains sons dans un répertoire et d'autres dans un autre. La bonne pratique est d'avoir la configuration dans le XML et la transformation vers l'affichage dans le XSL. Le XSL ne doit pas modifier les données, sinon tu risques de t'arracher les cheveux dans 2 ou 3 ans quand tu ne comprendras pas pourquoi il ne va pas chercher tes fichiers à l'endroit décrit par le XML.

Avec un éditeur de texte t'as très vite fait de préfixer tous tes chemins par "audio/" (ctrl + F, "sf>", remplacer tout par "sf>audio/"). Quoi qu'il en soit ça s'écrirait comme ça en XSL (mais ne le fais pas) :
Code:

1 2 <xsl:template match="sf"> <a href="audio/{.}" ...
27/05/2011, 11h23
pwyll2

CA MAAAAAAAAAAAAAAARCHE !!!!!!!!!
:yaisse2: :chin:

Merci infiniment :ccool:
(Je reviendrai sans doute, car je vais bien finir par avoir un nouveau problème à un moment donné :mrgreen: )