Discussion :

[lamorkytu]

salut tout le monde !

Je vous explique mon problème :
Je réalise un formulaire en JSF; ce dernier est composé de 2 tableaux 'dynamiques' Javascript, un exemple du principe est ici :
Tableau dynamique JS, exemple

J'arrive parfaitement à implémenter ça sur ma page, et le résultat est le suivant :
au départ :

après quelques ajouts :


En fait chaque ligne est "personnalisée" à partir du choix de la première liste; les cellules suivantes peuvent alors être une liste de choix ou un champ de saisie etc.

Le code HTML généré par JSF est le suivant (juste pour les tableaux) :

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
<!-- TABLE DES INSTALLS-->	
<table id="tabInstalls" width="98%" border="0" style='font-family: "Microsoft Sans Serif"; font-size: 9pt' cellspacing="1">
				<!--  Header de la table -->
				<thead>
					<tr>
						<th colspan="8" style="background-color: #bad4fc">Eléments à installer</th>
					</tr>
					<tr>
						<td style="background-color: #bad4fc" align="center" width="11%">Type d'installation</td>
						<td style="background-color: #bad4fc" align="center" width="19%">Application</td>
						<td style="background-color: #bad4fc" align="center" width="12%">Version</td>
						<td style="background-color: #bad4fc" align="center" width="18%">Destination</td>
						<td style="background-color: #bad4fc" align="center" width="10%">Date souhaitée</td>
						<td style="background-color: #bad4fc" align="center" width="8%">Heure souhaitée</td>
						<td style="background-color: #bad4fc" align="center" width="157">Champ spécifique</td>
						<td style="background-color: #bad4fc" width="3%" align="center"></td>
					</tr>
				</thead>
 
				<!-- Pied de la table -->
				<!-- Zone souche du clonage de ligne -->
				<tfoot>
					<tr>
						<td>						
							<select id="formulaire:cboTypeInstall_0" name="formulaire:cboTypeInstall_0" class="selectOneMenu" size="1" onchange="func_4(this);" style="width: 100%">
								<option value="0">Choisir...</option>
								<option value="2">Intranet</option>
								<option value="7">Arcad</option>
								<option value="1">C/S</option>
								<option value="3">Job</option>
								<option value="4">Flux</option>
								<option value="5">Catmat</option>
								<option value="6">PSS</option>
							</select>
						</td>
						<td>Non requis</td>
						<td>Non requis</td>
						<td>	
							<input id="formulaire:txtDestination_0" type="text" name="formulaire:txtDestination_0" class="inputText" style="width: 100%" /></td>
						<td>	
							<input id="formulaire:txtDateSouhaitee_0" type="text" name="formulaire:txtDateSouhaitee_0" class="inputText" style="width: 100%" /></td>
						<td>	
							<input id="formulaire:txtHeureSouhaitee_0" type="text" name="formulaire:txtHeureSouhaitee_0" class="inputText" style="width: 100%" /></td>
						<td>Non requis</td>
						<td>
							<input type="button" value="Ajouter" id="formulaire:btnArray_insert_0" name="formulaire:btnArray_insert_0" style="width: 100%" class="commandExButton" onclick="func_3(this);" /></td>
					</tr>
				</tfoot>
 
 
				<!-- Corps de la table -->
				<!-- Zone de réception des clones du footer -->
				<tbody>
				</tbody>
			</table>
 
 
 
<!-- TABLE DES DOCS-->			
			<table width="98%" border="0" style='font-family: "Microsoft Sans Serif"; font-size: 9pt' cellspacing="1" id="tabDocs">
				<!--  Header de la table -->
				<thead>
					<tr>
						<th colspan="2" style="background-color: #bad4fc">Documentation	à joindre</th>
					</tr>
					<tr>
						<th style="background-color: #bad4fc" width="50%">Libellé</th>
						<th style="background-color: #bad4fc" width="50%">Emplacement</th>
					</tr>
				</thead>
 
				<!-- Pied de la table -->
				<!-- Zone souche du clonage de ligne -->
				<tfoot style="visibility: hidden">
					<tr>
						<th width="495">Manuel d'installation</th>
						<th width="496">	
						<input type="file" id="formulaire:fleUpload_0" name="formulaire:fleUpload_0" class="fileupload" style="width: 100%; margin: 0px" /></th>
					</tr>
				</tfoot>
 
				<!-- Corps de la table -->
				<!-- Zone de réception des clones du footer -->
				<tbody>
				</tbody>
 
			</table>

Le principe du tableau dynamique est de cloner le tfoot dans le tbody côté navigateur, c'est pour ça que le tbody est vide.

Seulement voilà, lorsque je passe à la page suivante en validant mon formulaire, je fais un affichage de tous les paramètres (via une boucle) et j'obtiens :


Génant, car je n'obtiens que les champs du tfoot ! Mes éléments clonés ne sont pas là ! Je précise que pour chaque ligne clonée, je fais en sorte que les champs de saisie et listes qui lui sont associées aient un attribut id différent de ceux des autres lignes, pareil pour l'attribut name.

La seule explication que j'ai trouvé pour l'instant est que, dans le code source java de la page du formulaire, chaque champ correspond à un attribut et que les éléments clonés eux, ne correspondent à aucun attribut de la page.
En php, le traitement de ce type de tableau s'effectue correctement.

alors, limitation technologique de JSF ou incompétence de ma part ? Je débute en JSF ...
Pour info, j'utilise WDSC7, une plateforme de développement web d'IBM pour développer.

Merci de vos explications éventuelles

[tchize_]

PHP ne gère que le formulaire de base, JSF gère tout le cycle de vie du formulaire (validation, convertion, actions, navigation). JSF n'acceptera, à ce titre, que les paramètres correspondant à des composants JSF existant coté serveur. On ne peux pas changer, en javascript, la liste des composants JSF, car cette liste est maintenue coté serveur. Si tu veux faire du JSF + des pages qu'on change à coup de javascript, t'as cependant plusieurs possiblités:

1) créer un composant custom qui accepte des paramètres supplémentaires choisis par le client (ce qui n'est pas le cas du datatable qui, lui, itére sur un bean coté serveur). C'est un peu long à faire, çà se justifie uniquement si t'as vraiment besoin de composants spécialisés, car tu va devoir gérer le parsing des paramètres toi même ainsi que l rendu du composant. PAr exemple, j'ai chez moi une série de composant persos qui utilise les paramètres en quantité variable tels que définit dans les webfoprms 2 (combiné à un javascript qui gère les webforms 2 :p)
2) Plus simple, te baser sur un framework qui gère des contenus variables en ajax, tels que ajax4jsf, richfaes, etc. Ces composant vont, en javascript, envoyer une requete au serveur pour "ajouter une ligne" (action jsf à coder par toi) et ensuite renvoyer au client le nouveau rendu du datatable. C'est plus rapide que faire toute la page, mais çà nécessite quand même des aller-retour serveur
3) si tu veux un comportement à la php (gestion brute des paramètres), écrit simplement une servlet qui fait ton travaille et utilise pas JSF

[romaintaz]

Bonjour,

Pourrais-tu nous montrer ton code JSF, ça nous aiderait sans doute plus que le code HTML généré.

[lamorkytu]

Merci tchize_ pour tes conseils avisés, c'est donc bien ce que je pensais


Je pense opter pour la solution n°2, à savoir l'utilisation d'un framework type Ajax.
J'ai cherché à télécharger Ajax4jsf afin d'apprendre son fonctionnement, mais la page des téléchargements sur JBoss est vide ; enfin bon c'est pas un problème j'ai pu récupérer le .jar ailleurs.


Je vais donc de ce pas étudier cet outil, en espérant résoudre mon problème grâce à ça, merci encore

[nathieb]

Bonjour,

Je suis sur le même sujet, il a raison de te dire que ta gestion d'un tableau dynamique en javascript pas possible de l'utiliser en JSF.

Par contre tu as le framework Jmaki qui intègre des bibliothèques AJax.

Il te faudra en plus jsf-extension pour la partie communication Javascript -> UI -> JSF pas simple mais pas impossible je suis dessus pour l'instant mais cela peux être une info
olivier.

[tchize_]

nathieb: richfaces fait déjà toute l'intégration ajax / jsf et permet meme de rendre ajax les composant de base par l'ajout de listener