Discussion :

[thouraya24]

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

merci pour votre aide

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

[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.

[thouraya24]

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 :

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

[caballo]

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 :

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

[thouraya24]

merci beaucoup Caballo, non j'ai pas testé avec XSLT. il n'y a pas d'outils pour le faire automatiquement?

[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.

[thouraya24]

j'ai un problème de temps Caballo, j'espère que ça pourrait aller vite avec l'XSLT

[caballo]

"Vite" c'est relatif. Cela dépendra de ta vitesse d'appréhension du langage XSLT.

[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.

[thouraya24]

Bonjour Caballo et Thelvin,

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

Code :

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

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

[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.

[thouraya24]

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 :

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

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

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>

[thouraya24]

Bonjour,

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

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

[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 xslt :

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

1
2
3
4
<!--
<xsl:for-each select="div">
-->
<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.

[thouraya24]

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 :

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

[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 xsl :

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

1
2
3
4
<!--
<xsl:template match="cuimodel/window/div">
-->
<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.

[tsuji]

J'ai regardé un peu plus,
[1] ça aussi

Code :

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

1
2
3
4
<!--
<xsl:for-each select="combobox">
-->
<xsl:for-each select="../combobox">

[2] Et puis, pour label

Code :

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

1
2
3
4
<!--
<xsl:value-of select=".">
-->
<xsl:value-of select="@value">

[3] Pour combobox

Code :

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

1
2
3
4
<!--
<xsl:value-of select="item">
-->
<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.

[thouraya24]

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

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

[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.

[thouraya24]

Bonjour Caballo, bonjour à tous,

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

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