transformer un code XML en une interface HTML

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,
SVP, je voudrais transformer ce code en XML en une interface HTML (ajoutée en dessous)

merci pour votre aide :oops:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<cuiModel><window id=‘window1'><div id=‘div1'>
<label id=‘label1’ value=‘searchPreference’/> 
<label id=‘label12’ value=‘seeFirst’/> <comboBox id=‘CB1’ name=‘criteriaCB’><item id=‘Item1’ Value=‘promotions’/>
<item id=‘item12’ Value=‘BestRated’/>
 </ComboBox></div>
<div id=‘div2'>
<label id=‘label2’ value=‘DisplayPreference’/> 
<label id=‘label21’ value=‘ResultDisplay’/> <comboBox id=‘CB2’ name=‘DispLayout’><item id=‘Item2’ Value=‘GridLayout’/>
<item id=‘item21’ Value=‘listlayout’/>
 </ComboBox></div>
<div id=‘div3'>
<label id=‘label3’ value=‘accessibilityPreference’/> 
<label id=‘label31’ value=‘contrastTheme’/> <ComboBox id=‘CB3’ name=‘CT’><item id=‘Item3’ Value=‘HighContrast’/>
<item id=‘item31’ Value=‘LowContrast’/>
 </ComboBox>
<label id=‘label4’ value=‘FontSize’/> <ComboBox id=‘CB4’ name=‘FS’><item id=‘Item4’ Value=‘larger’/>
<item id=‘item41’ Value=‘medium’/>
 </ComboBox> </div>
</window></cuiModel>

Pièce jointe 276891

18/05/2017, 14h15
thelvin

Hello,

ça risque d'être compliqué, il est mal formé ton XML. Aucun processeur n'en voudra. Il faut commencer par le corriger.

Je passe sur les apostrophes littéraires ‘ et ’ en lieu et place des apostrophes informatiques ' parce que je suppose que ce n'est qu'une histoire de copier/coller.

Mais il y a surtout une <comboBox>, c minuscule, qu'on essaie de fermer avec une </ComboBox>, C majuscule.

Ça ne va pas. Il faut commencer par avoir du XML correct.

merci bcp pour votre réponse Thelvin, j'ai corrigé les fautes et j'ai ajouté les deux derniers buttons. voilà le nouveau code:

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
<cuiModel>
<window id=‘window1'>
<div id=‘div1'>
<label id=‘label1’ value=‘searchPreference’/> 
<label id=‘label12’ value=‘seeFirst’/> 
<combobox id=‘CB1’ name=‘criteriaCB’>
<item id=‘Item1’ value=‘promotions’/>
<item id=‘item12’ value=‘BestRated’/>
</combobox>
</div>
<div id=‘div2'>
<label id=‘label2’ value=‘DisplayPreference’/> 
<label id=‘label21’ value=‘ResultDisplay’/> 
<combobox id=‘CB2’ name=‘DispLayout’>
<item id=‘Item2’ value=‘GridLayout’/>
<item id=‘item21’ value=‘listlayout’/>
</combobox>
</div>
<div id=‘div3'>
<label id=‘label3’ value=‘accessibilityPreference’/> 
 
<label id=‘label31’ value=‘contrastTheme’/> 
<combobox id=‘CB3’ name=‘CT’>
<item id=‘item3’ value=‘HighContrast’/>
<item id=‘item31’ value=‘LowContrast’/>
</combobox>
<label id=‘label4’ value=‘FontSize’/> 
<combobox id=‘CB4’ name=‘FS’>
<item id=‘item4’ value=‘larger’/>
<item id=‘item41’ value=‘medium’/>
</combobox> 
</div>
<div id='div4'>
<button id='but1'>ok</button>
<button id='but2'>cancel</button>
</div>
</window>
</cuimodel>
</window>
</cuiModel>

Le code n'est toujours pas bon (balises incongrues en double à la fin)

Corrigé ci dessous.

Ensuite, qu'as-tu déjà tenté en XSLT pour arriver à ton résultat ?

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
 
<cuiModel>
<window id='window1'>
<div id='div1'>
<label id='label1' value='searchPreference'/> 
<label id='label12' value='seeFirst'/> 
<combobox id='CB1' name='criteriaCB'>
<item id='Item1' value='promotions'/>
<item id='item12' value='BestRated'/>
</combobox>
</div>
<div id='div2'>
<label id='label2' value='DisplayPreference'/> 
<label id='label21' value='ResultDisplay'/> 
<combobox id='CB2' name='DispLayout'>
<item id='Item2' value='GridLayout'/>
<item id='item21' value='listlayout'/>
</combobox>
</div>
<div id='div3'>
<label id='label3' value='accessibilityPreference'/> 
 
<label id='label31' value='contrastTheme'/> 
<combobox id='CB3' name='CT'>
<item id='item3' value='HighContrast'/>
<item id='item31' value='LowContrast'/>
</combobox>
<label id='label4' value='FontSize'/> 
<combobox id='CB4' name='FS'>
<item id='item4' value='larger'/>
<item id='item41' value='medium'/>
</combobox> 
</div>
<div id='div4'>
<button id='but1'>ok</button>
<button id='but2'>cancel</button>
</div>
</window>
</cuiModel>

18/05/2017, 16h41
thouraya24

merci beaucoup Caballo, non j'ai pas testé avec XSLT. il n'y a pas d'outils pour le faire automatiquement?
18/05/2017, 16h46
caballo

"Automatiquement" c'est beaucoup dire...

Tu peux regarder des outils comme Altova StyleVision si tu ne veux pas mettre la souris dans le code. C'est un choix.
18/05/2017, 17h03
thouraya24

j'ai un problème de temps Caballo, j'espère que ça pourrait aller vite avec l'XSLT
19/05/2017, 10h55
caballo

"Vite" c'est relatif. Cela dépendra de ta vitesse d'appréhension du langage XSLT.
19/05/2017, 10h59
thelvin

Et du HTML et du CSS, et vu que ça a l'air d'être pour mobile, du HTML/CSS pour mobile aussi.

En gros il y a pas de contrainte de temps qui tienne. Embauche un dev dans une agence d'intérim si tu veux que ce soit fait vite.
19/05/2017, 15h18
thouraya24
Bonjour Caballo et Thelvin,

je voudrais selectionner tous les noeuds "label" du documents, donc je mets comme code :
Code:

1 2 3 4 5 <xsl:for-each select="label"> <label> <xsl:value-of select='label'> </label> </xsl:for-each>
toutefois, j'obtiens l'affichage des deux premières labels seulement ("searchpreferences", "seefirst")
20/05/2017, 16h32
thelvin

Hello,

ce code ne suffit pas, mets le reste aussi. En l'état il ne récupère aucun label, ni les premiers, ni les derniers, ni rien.

Bonjour Thelvin,

j'ai pu afficher les labels et aussi les combo box, toutefois j'ai pas su les imbriquer. voici les codes correspondants:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<xsl:template match="/">
<html>
<head>
<title/>
</head>
<body>
<xsl:apply-templates/>
 
</xsl:template>
</body>
</html>
</xsl:template >
 
<xsl:template match="div" >
 
    <label> <xsl:value-of select="label"/> 
	</label>
 
 
</xsl:template>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<xsl:template match="/"> 
 <html> 
 <body> 
<select>
<xsl:for-each select="combobox">
<option>
<xsl:value-of select="item"/>
</option>
</xsl:for-each>
</select>
 </body> 
 </html>
</xsl:template>

Bonjour,

voilà ma dernière version du fichier XSLT, mais il n'affiche toujours rien.

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
 
<?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> 
<body> 
<xsl:for-each select="div">
<xsl:for-each select="label">
<label>
<xsl:value-of select=".">
</label>
 
<select>
<xsl:for-each select="combobox">
<option>
<xsl:value-of select="item"/>
</option>
</xsl:for-each>
</select>
</xsl:for-each>
</xsl:for-each>
 </body> 
 </html>
</xsl:template>
</xsl:stylesheet>

23/05/2017, 11h18
tsuji
Avec match="/", cela veut dire la racine du xml est le contexte pour le template. Directement sous elle, on ne trouve pas les éléments div. On les trouve par contre sous cuiModel/Window. C'est le raisonnement qu'on fait.
Code:

1 2 3 4  <xsl:for-each select="cuiModel/Window/div">
Comme ça, on arrive à quelque chose au moins. On peut l'améliorer à partir de là si on veut.

Bonjour Tsuji,

meme avec cette modification, il m'affiche toujours une page vide, j'essaye de tester le rendu de la page en utilisant ce site http://xslttest.appspot.com/

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
<?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="cuimodel/window/div"> 
<html> 
<body> 
 
<xsl:for-each select="label">
<label>
<xsl:value-of select="."/>
</label>
<select>
<xsl:for-each select="combobox">
<option>
<xsl:value-of select="item"/>
</option>
</xsl:for-each>
</select>
</xsl:for-each>
<xsl:for-each select="button">
<button>
<xsl:value-of select="."/>
</button>
</xsl:for-each> 
</body> 
</html>
</xsl:template>
</xsl:stylesheet>

23/05/2017, 16h42
tsuji
C'est bien satisfaisant qu'on continue d'inventer des choses qu'on puisse réclamer de soi-même, mais il faut le faire après on maîtrise le sujet. Maintenant, voyez-vous, vous réécrivez le template qui est différent de celui présenté auparavant. Vous ne voulez pas tester la version précedant?! Soit!
Code:

1 2 3 4  <xsl:template match="/cuiModel/window/div">
cuimodel ou cuiModel, c'est comme vous décidez, je ne vois pas de consistance.

Mais si vous fait ça, il se peut qu'il produit nombreux de html-body, donc, c'est mal. Dans le cas où il n'y a qu'un div là, ça va passer: mais théoriquement, loin d'être acceptable.
23/05/2017, 17h27
tsuji
J'ai regardé un peu plus,
[1] ça aussi
Code:

1 2 3 4  <xsl:for-each select="../combobox">
[2] Et puis, pour label
Code:

1 2 3 4  <xsl:value-of select="@value">
[3] Pour combobox
Code:

1 2 3 4  <xsl:value-of select="item/@value">
Et tous les quotes sont à revoir sur leur encodage. On dirait, il faut un peu de sérénité dans le travail.

MERCI TSUJI, merci tout le monde pour votre aide. j'ai apporté les modifs mais le code est toujours pas fonctionnel :(

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
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
<xsl:template match="cuimodel/window/div"> 
<html> 
<body> 
 
<xsl:for-each select="label">
<label>
<xsl:value-of select="@value"/>
</label>
 
<select>
<xsl:for-each select="../combobox">
<option>
<xsl:value-of select="item/@value"/>
</option>
</xsl:for-each>
</select>
</xsl:for-each>
 
 
 </body> 
 </html>
</xsl:template>
</xsl:stylesheet>

30/05/2017, 09h54
caballo

Premièrement, au delà de l'analyse de ton code, et comme l'évoquait Tsuji, tu sais que le nom des balises XML est case-sensitive ? si tu ne nommes pas les balises avec le même nom entre le XML et le XSLT ca ne risque pas de fonctionner.

Bonjour Caballo, bonjour à tous,

ils sont bien conformes les noms de balises..., voilà le fichier XML

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
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="rt.xsl" ?>
<cuimodel>
<window >
<div>
<label id='label1'> searchPreference </label> 
<label id='label12'> seeFirst </label> 
<combobox id='CB1' name='criteriaCB'>
<item> promotions </item>
<item> bestrated </item>
</combobox>
</div>
 
<div>
<label id='label2'> mon </label> 
<label id='label21'> second  </label> 
<combobox id='CB2' name='DispLayout'>
<item> GridLayout </item>
<item> listlayout </item>
</combobox>
</div>
 
<div>
<label id='label13'> Preference </label> 
<label id='label122'> see </label> 
<combobox id='CB3' name='CT'>
<item> HighContrast </item>
<item> LowContrast </item>
</combobox>
</div>
 
<button>cancel</button>
<button>ok</button>
 
</window>
</cuimodel>

30/05/2017, 11h58
thouraya24

1 pièce(s) jointe(s)

voilà un premier affichage avec des combobox vides et les labels sont absents

Pièce jointe 280703
30/05/2017, 12h59
caballo

oui forcément ce n'est plus le même XML qu'au début.
Pour que ce soit plus clair il faut que tu nous donnes chaque fois exactement quel XML et quel XSL tu utilises.

Ici tu appelle dans ton XSL un attribut 'value' -> Où est-ce que tu vois un attribut value dans ton xml ?

Bonjour Caballo,

pour le "@value", c'est la valeur du label sinon concernant les codes, les voilà

le XML

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
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="rt.xsl" ?>
<cuimodel>
<window >
<div>
<label id='label1'> searchPreference </label> 
<label id='label12'> seeFirst </label> 
<combobox id='CB1' name='criteriaCB'>
<item> promotions </item>
<item> bestrated </item>
</combobox>
</div>
 
<div>
<label id='label2'> mon </label> 
<label id='label21'> second  </label> 
<combobox id='CB2' name='DispLayout'>
<item> GridLayout </item>
<item> listlayout </item>
</combobox>
</div>
 
<div>
<label id='label13'> Preference </label> 
<label id='label122'> see </label> 
<combobox id='CB3' name='CT'>
<item> HighContrast </item>
<item> LowContrast </item>
</combobox>
</div>
 
<button>cancel</button>
<button>ok</button>
 
</window>
</cuimodel>

le XSLT

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:template match="/cuimodel/window/div"> 
<html> 
<body> 
 
<xsl:for-each select="label">
<label>
<xsl:value-of select="@value"/>
</label>
 
<select>
<xsl:for-each select="../combobox">
<option>
<xsl:value-of select="item/@value"/>
</option>
</xsl:for-each>
</select>
</xsl:for-each>
</xsl:for-each>
 </body> 
 </html>
</xsl:template>
</xsl:stylesheet>

30/05/2017, 16h12
caballo

non @value ne veut pas dire valeur du label. @value veut dire qu'un noeud dans ton XML possède un attribut nommé "value". Est-ce le cas ? A priori non.

Il faut absolument que tu regarde les bases du XSLT/XPATH. La on a l'impression que tu fait un peu au hasard.
30/05/2017, 16h15
thouraya24
pas du tout Caballo,

à la base voilà mon code,
Code:

1 2 3 4 <xsl:for-each select="label"> <label> <xsl:value-of select="."/> </label>
mais suite à la Suggestion de Tsuji, j'ai remplacé le "." par le "@value"
30/05/2017, 16h26
caballo

et bien comme tu veux... bonne continuation et bonne chance !

@thouraya24
Voyons, caballo plutôt a raison d'être agacé...
Il était une fois (avec les symbols ' déjà corrigés)
Citation:
Code:

1 2 <label id='label1' value='searchPreference'/> <label id='label12' value='seeFirst'/>
et maintenant vous écrivez
Citation:
Code:

1 2 <label id='label1'> searchPreference </label> <label id='label12'> seeFirst </label>
Ce ne sont plus la même chose. Le même pour combobox etc etc... Chaque fois on change la source xml, il faut s'adapter l'écriture dans xslt selon la source. Logique non?

Comme je vois que vous vous êtes beaucoup égaré, je écris un simple rendement complet: comme ça, vous devrez avoir une référence pour retomber dessus et commencez à relire les documentations ou les tutos pour remplir les lacunes d'incompréhension. Il se peut qu'il ne correspond pas tout à fait à ce que vous voulez au final, au moins, vous avez quelque chose de "correct" pour recommencer la lecture et réécrire le xslt.
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 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html" omit-xml-declaration="yes" indent="yes" encoding="iso-8859-1" /> <xsl:template match="/"> <html> <head> <title>quelque titre</title> </head> <body> <xsl:apply-templates select="cuimodel/window/div" /> </body> </html> </xsl:template> <xsl:template match="/cuimodel/window/div"> <xsl:for-each select="label"> <label>  <xsl:value-of select="."/> </label> <select>  <xsl:for-each select="../combobox/item"> <option>  <xsl:value-of select="."/> </option> </xsl:for-each> </select> </xsl:for-each>  </xsl:template> </xsl:stylesheet>

02/06/2017, 11h46
thouraya24

Bonjour Tsuji,

je m'excuse de ne pas avoir collée le fichier XML suite à chaque changement. je vous remercie pour votre coup de main et je remercie également Thelvin et Caballo.

merci beaucoup