Décider ce que l'on envoie avec a4j

**demanghonj** · 16/04/2009, 10h19

Bonjour,

J'ai une page qui contient plusieurs tableaux. J'ai un bouton "+" qui me permet d'ajouter une ligne. Cette action ce fait en en Ajax avec a4j. J'ai mis une région autour de mon tableau pour ne décoder que les informations nécessaires. Cependant la requête Ajax envoi toutes les informations de la page. Ma page étant assez lourde la durée de la phase APPLY_REQUEST_VALUES du cylce est assez longue (< 3s).

Peux t-on limiter les informations envoyé dans la requête Ajax?

Voici le code de ma page:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:t="http://myfaces.apache.org/tomahawk"
	xmlns:s="http://myfaces.apache.org/sandbox"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:a="http://www.astek.fr/jsfComponents">
 
<ui:composition>
	<a4j:region id="ajaxRegion" selfRendered="true" renderRegionOnly="true">
		<a4j:outputPanel id="panelTableauFDS" ajaxRendered="true"> 
			<t:dataTable value="#{datas.lignes}" var="row" id="tableauFDS"
				styleClass="tableau_fiche" style="width:100%" rowClasses="ligneImpaire,lignePaire">
					<t:columns value="#{datas.colonnes}" var="question"
						styleClass="conteneurInputTableau"
						width="#{question.tailleHtml}"
						headerstyleClass="#{(datas.colonnes.rowCount == question.ordre 
												and (clos or forceDisable or (not forceEnable 
														and not cm and datas.disableForUserRole)))?'lastTh':''}"
						>
						<f:facet name="header" >
								<h:outputText value="#{question.libelle}"/>
						</f:facet>
						<a:question reponse="#{datas.columnValue}"
							export="#{export}"
							inactif="#{empty  ficheController.model.formulaire
											or ficheController.model.formulaire.idForm != datas.idForm
											or ficheController.model.numLigne != row
											or (clos or forceDisable or (not forceEnable and not cm and datas.disableForUserRole))}"
							tableau="true" />
 
						<f:facet name="footer">
							<!-- Ajouter la ligne-->
							<t:div rendered="#{not question.firstColumn and (not (clos or forceDisable or 
											(not forceEnable and not cm and datas.disableForUserRole)))}">
								<a4j:commandButton	
									id="ajoutLigne"
									image="/images/common/add.gif"
									title="Ajouter une nouvelle ligne"
									styleClass="bntAjoutFds"
									actionListener="#{ficheController.ajoutLigne}" 
									rendered="#{not(clos or forceDisable or (not forceEnable and not cm and datas.disableForUserRole))}"
									style="display:block;text-align:left;"
									reRender="tableauFDS"
									ajaxSingle="true"
								>
									<a4j:actionparam name="idFormulaire" value="#{paragraphe.idForm}"
													assignTo="#{ficheController.model.idForm}"/>
								</a4j:commandButton>
							</t:div>
						</f:facet>
					</t:columns>
 
					<t:column rendered="#{not (clos or forceDisable or (not forceEnable and not cm and datas.disableForUserRole))}"
									style="text-align:center" 
									width="1px">
						<!-- Edition de la ligne -->
						<t:commandButton 
							id="editerLigne"
							image="/images/common/modif.gif"
							title="Editer"
							actionListener="#{ficheController.editerLigne}"
							rendered="#{empty  ficheController.model.formulaire
										and ficheController.model.formulaire.idForm != datas.idForm
										and ficheController.model.numLigne != row
										and not (clos or forceDisable or (not forceEnable and not cm and datas.disableForUserRole))}"
							>
							<t:updateActionListener
								property="#{ficheController.model.formulaire}"
								value="#{paragraphe}" />
							<t:updateActionListener
								property="#{ficheController.model.numLigne}" value="#{row}" />
						</t:commandButton>
 
						<!-- enreg de la ligne  -->
						<t:commandButton  
							id="modifierLigne"
							image="/images/common/save15.png"
							title="Enregistrer"
							action="#{ficheController.enregistreReponsesTableau}"
							rendered="#{ficheController.model.formulaire.idForm == datas.idForm
										and ficheController.model.numLigne == row
										and not (clos or forceDisable or (not forceEnable and not cm and datas.disableForUserRole))}">
						</t:commandButton>
					</t:column>
					<t:column rendered="#{not (clos or forceDisable or (not forceEnable and not cm and datas.disableForUserRole))}"
								headerstyleClass="lastTh"
								style="text-align:center" 
								width="1px">
						<!-- Suppression de la ligne -->
						<t:commandButton
							id="supprimerLigne"
							title="Supprimer"
							image="/images/common/button_cancel.gif"
							rendered="#{empty  ficheController.model.formulaire
										and ficheController.model.formulaire.idForm != datas.idForm
										and ficheController.model.numLigne != row
										and not (clos or forceDisable or 
										(not forceEnable and not cm and datas.disableForUserRole))}"
							actionListener="#{ficheController.SupprLigneTableau}">
							<t:updateActionListener
								property="#{ficheController.model.formulaire}"
								value="#{paragraphe}" />
							<t:updateActionListener
								property="#{ficheController.model.numLigne}" value="#{row}" />
						</t:commandButton>
						<!-- annulation des modifications de la ligne  -->
						<t:commandButton  
							image="/images/common/cancel_16x16.gif"
							title="Annuler"
							action="#{ficheController.annulerModification}"
							rendered="#{ficheController.model.formulaire.idForm == datas.idForm
										and ficheController.model.numLigne == row
										and not (clos or forceDisable or (not forceEnable and not cm and datas.disableForUserRole))}">
						</t:commandButton>
					</t:column>
			</t:dataTable>
		</a4j:outputPanel>
	</a4j:region>
</ui:composition>
</html>

Merci d'avance

**Sniper37** · 16/04/2009, 10h31

Envoyé par demanghonj

Bonjour,

Peux t-on limiter les informations envoyé dans la requête Ajax?

ouii en utilisant l'un des attributs:
ajaxSingle: limite le passage par les phases JSF seulement au composant qui fait l'appel ajax.

process : pour définir les composants qui seront traités dans les phases JSF.

tu peux aussi utiliser immediate (meme principe pour les composants JSF) ou bypassUpdates pour sauter la phase update model..

si tu utilise a4j:region tous les composants dans la region passent par le traitement des phases JSF.

**tchize_** · 16/04/2009, 10h42

on peux limiter la quantité de composant impliqués dans le apply request value via un a4j:region. Par contre, avec çà, le client envoie quand même la totalité des données, donc si t'as une connection lente (56k) + beaucoup de données (100k) , ca peux prendre du temps.

**demanghonj** · 16/04/2009, 11h37

Sniper37

ajaxSingle: limite le passage par les phases JSF seulement au composant qui fait l'appel ajax.
process : pour définir les composants qui seront traités dans les phases JSF.
tu peux aussi utiliser immediate (meme principe pour les composants JSF) ou bypassUpdates pour sauter la phase update model..
si tu utilise a4j:region tous les composants dans la region passent par le traitement des phases JSF.

a4j:region,process et ajaxSingle concerne les phases de decode, c'est à dire la conversion et la validation. La phase apply_request_value traite les données envoyé par la requête HTTP. Donc le seul moyen de limiter cette phase est de limité le nombre de données envoyées dans la requête HTTP (ici en Ajax)
bypassUpdates concerne la phase de update_model (comme tu le dis) et la phase qui m'intéresse est apply_request_value

tchize_

on peux limiter la quantité de composant impliqués dans le apply request value via un a4j:region.

Non, on limite le nombre de composant traité dans les phase de decode (process_validation et update_model).
La phase apply_request_value traite les données envoyé par la requête HTTP. Donc le seul moyen de limiter cette phase est de limité le nombre de données envoyées dans la requête HTTP (ici en Ajax)

Il faut donc que je limite le nombre de données envoyer par la requête Ajax.

**tchize_** · 16/04/2009, 11h47

merci de la correction (et c'est évident, puisque les request value sont nécessaire au render qui lui n'est pas nécessairement limité à la region ^^)

Par contre, 3 secondes pour effectuer un apply request value, je suis assez étonné, le boulot du apply request value étant normalement de simplement faire des get dans la map de la requete pour le stocker sous forme brute dans chaque composant, il ne devrait y avoir aucun traitement lourd là, et java dois etre capable de faire plusieurs dixaines de milliers de get sur une map en moins d'une seconde, c'est une opération banale :/

**Sniper37** · 16/04/2009, 11h50

Envoyé par demanghonj

Sniper37

a4j:region,process et ajaxSingle concerne les phases de decode, c'est à dire la conversion et la validation. La phase apply_request_value traite les données envoyé par la requête HTTP. Donc le seul moyen de limiter cette phase est de limité le nombre de données envoyées dans la requête HTTP (ici en Ajax)
bypassUpdates concerne la phase de update_model (comme tu le dis) et la phase qui m'intéresse est apply_request_value

ça concerne: decoding, conversion/validation, value applying

**demanghonj** · 16/04/2009, 11h51

Je suis d'accord avec sur ce sujet, seulement je ne sait pas pourquoi ce traitement prend autant de temps, surtout que sur cette page le traitement de ma phase render_response est très longue (parfois > 5s).

Actuellement j'ai mis un listenner sur les phase qui compte la durée mais c'est tout.

C'est tu comment peut-on visualiser en detail ce que fait une phase?

Ceci pourrait me permettre de visualiser mon problème

Merci

**tchize_** · 16/04/2009, 11h57

la méthode aveugle mais rapide à mettre en place (et longue à utiliser jusqu'au bout):

tu retire la moitié de ton formulaire et tu teste. ca va plus vite? alros la moitié retirée est partiellement responsable. ca va beaucoup plus vite? alors la moitié retirée est entièrement resposnable. ca va pas plus vite, alors la moitié restante est responsable. Une fois la zone responsable du formulaire isolée (si c'est faisable) plus qu'à regarder ce qu'elle fait.

Si t'as que des composants de base dans ton formulaire, alors il est vraisemblable que ce soient tes bean reliés sur les champs de type rendered qui sont en cause (exemple: la moitiés des composant on des rendered="#{bean.xxx}" avec xxx une propriété qui va cherher des infos dans la db: une requete db fois 150 composants, ca fait vite mal

deuxième possibilité: utiliser un profiler, lancer ton application, fait des requetes à fond pendant 15 minutes, demander au profiler les point chaud de ton applicaiton, enqueter sur la raison de ces point chaud

**Sniper37** · 16/04/2009, 14h48

premièrement enlève a4j:region, je ne suis pas sur que t'en a l'utilité;
et a4j:outputPanel, pas besoin de ajaxrendered,
comme ça tu n'enverra pas tous les composants faire toutes les phases JSF et de faire la mise à jour de tous les composants à l'intérieur du a4j:outputPanel.
l'avantage de Richfaces c'est de pouvoir envoyer que les composants à traités coté serveur et de ne pas mettre à jours tous les composants coté client mais seulement ceux qui ont changés..

**demanghonj** · 16/04/2009, 16h01

l'avantage de Richfaces c'est de pouvoir envoyer que les composants à traités coté serveur et de ne pas mettre à jours tous les composants coté client mais seulement ceux qui ont changés..

Richfaces envoi tous les composant de ta page, par contre il ne traite que ceux concerner par ton action (pour les phase process_validation et update_model).
Tu remarquera que le temps de ta phase apply_request_value ne change pas si tu soumet ton formulaire au complet (submit traditionnel) par rapport à un appel Ajax. Ceci est du que dans tous les cas la totalité des données sont envoyé donc interprété dans apply_request_value mais seul les composants dans ta region sont traités dans les phase process_validation et update_model.

j'ai regarder ce que faisait le cycle apply_request_value. J'ai juste regarder un getter utiliser pour l'affichage de ma page sur un rendered. Et il est appelé lors de la phase apply_request_value.

Que fait exactement cette phase?

**Sniper37** · 16/04/2009, 16h35

Envoyé par demanghonj

Richfaces envoi tous les composant de ta page, par contre il ne traite que ceux concerner par ton action (pour les phase process_validation et update_model).

+ apply value.

elle valorise le composant par sa nouvelle valeur..une méthode processDecodes() de UICompoasnt est appelé.

Ce n'est pas normal d'avoir des problèmes de performance avec ta page, il n'y a pas beaucoup de composants.
mais fait attention à l'utilisation de a4j:region. tu as essayé sans ?

**demanghonj** · 16/04/2009, 16h55

En tous cas chez moi la durée de apply_request_value est identique dans la cas d'un appel ajax que d'un submit complet.

Le code que j'ai mis ne contient pas beaucoup d'element mais cette page est appelé par une autre sur une boucle. en fait le rendu final est assez lourd ce qui rend ma page très lente par rapport aux autres.

Si j'enlève ma region ma phase apply_request_value reste aussi longue.

J'ai vu que la phase apply_request_value convertissait aussi les données, peut être que le problème se trouve ici. Cependant elle ne rentre dans aucun de mes convertisseurs personnalisé.

En tout ca ma phase de apply_request_value et render_response sont très longue. J'ai mis des timers sur mes composant graphique afin de voir le temps de génération. J'arrive à des temps de 200ms pour un simple tableaux.

Y a t-il un moyen d'optimiser tous ça?

Attention: ces temps ne sont valable que pour cette page qui est lourde. Pour les autres pages les temps sont normaux. (ex: 40ms pour un tableaux)

**Sniper37** · 16/04/2009, 17h08

tu peux nous montrer le code qui fait l'appel ajax?

**demanghonj** · 16/04/2009, 17h14

C'est le même que sur mon premier post. Mais je te la redonne sans le a4j:region

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:t="http://myfaces.apache.org/tomahawk"
	xmlns:s="http://myfaces.apache.org/sandbox"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:a="http://www.astek.fr/jsfComponents">
 
<ui:composition>
		<a4j:outputPanel id="panelTableauFDS" ajaxRendered="true"> 
			<t:dataTable value="#{datas.lignes}" var="row" id="tableauFDS"
				styleClass="tableau_fiche" style="width:100%" rowClasses="ligneImpaire,lignePaire">
					<t:columns value="#{datas.colonnes}" var="question"
						styleClass="conteneurInputTableau"
						width="#{question.tailleHtml}"
						headerstyleClass="#{(datas.colonnes.rowCount == question.ordre 
												and (clos or forceDisable or (not forceEnable 
														and not cm and datas.disableForUserRole)))?'lastTh':''}"
						>
						<f:facet name="header" >
								<h:outputText value="#{question.libelle}"/>
						</f:facet>
						<a:question reponse="#{datas.columnValue}"
							export="#{export}"
							inactif="#{empty  ficheController.model.formulaire
											or ficheController.model.formulaire.idForm != datas.idForm
											or ficheController.model.numLigne != row
											or (clos or forceDisable or (not forceEnable and not cm and datas.disableForUserRole))}"
							tableau="true" />
 
						<f:facet name="footer">
							<!-- Ajouter la ligne-->
							<t:div rendered="#{not question.firstColumn and (not (clos or forceDisable or 
											(not forceEnable and not cm and datas.disableForUserRole)))}">
								<a4j:commandButton	
									id="ajoutLigne"
									image="/images/common/add.gif"
									title="Ajouter une nouvelle ligne"
									styleClass="bntAjoutFds"
									actionListener="#{ficheController.ajoutLigne}" 
									rendered="#{not(clos or forceDisable or (not forceEnable and not cm and datas.disableForUserRole))}"
									style="display:block;text-align:left;"
									reRender="tableauFDS"
									ajaxSingle="true"
								>
									<a4j:actionparam name="idFormulaire" value="#{paragraphe.idForm}"
													assignTo="#{ficheController.model.idForm}"/>
								</a4j:commandButton>
							</t:div>
						</f:facet>
					</t:columns>
 
					<t:column rendered="#{not (clos or forceDisable or (not forceEnable and not cm and datas.disableForUserRole))}"
									style="text-align:center" 
									width="1px">
						<!-- Edition de la ligne -->
						<t:commandButton 
							id="editerLigne"
							image="/images/common/modif.gif"
							title="Editer"
							actionListener="#{ficheController.editerLigne}"
							rendered="#{empty  ficheController.model.formulaire
										and ficheController.model.formulaire.idForm != datas.idForm
										and ficheController.model.numLigne != row
										and not (clos or forceDisable or (not forceEnable and not cm and datas.disableForUserRole))}"
							>
							<t:updateActionListener
								property="#{ficheController.model.formulaire}"
								value="#{paragraphe}" />
							<t:updateActionListener
								property="#{ficheController.model.numLigne}" value="#{row}" />
						</t:commandButton>
 
						<!-- enreg de la ligne  -->
						<t:commandButton  
							id="modifierLigne"
							image="/images/common/save15.png"
							title="Enregistrer"
							action="#{ficheController.enregistreReponsesTableau}"
							rendered="#{ficheController.model.formulaire.idForm == datas.idForm
										and ficheController.model.numLigne == row
										and not (clos or forceDisable or (not forceEnable and not cm and datas.disableForUserRole))}">
						</t:commandButton>
					</t:column>
					<t:column rendered="#{not (clos or forceDisable or (not forceEnable and not cm and datas.disableForUserRole))}"
								headerstyleClass="lastTh"
								style="text-align:center" 
								width="1px">
						<!-- Suppression de la ligne -->
						<t:commandButton
							id="supprimerLigne"
							title="Supprimer"
							image="/images/common/button_cancel.gif"
							rendered="#{empty  ficheController.model.formulaire
										and ficheController.model.formulaire.idForm != datas.idForm
										and ficheController.model.numLigne != row
										and not (clos or forceDisable or 
										(not forceEnable and not cm and datas.disableForUserRole))}"
							actionListener="#{ficheController.SupprLigneTableau}">
							<t:updateActionListener
								property="#{ficheController.model.formulaire}"
								value="#{paragraphe}" />
							<t:updateActionListener
								property="#{ficheController.model.numLigne}" value="#{row}" />
						</t:commandButton>
						<!-- annulation des modifications de la ligne  -->
						<t:commandButton  
							image="/images/common/cancel_16x16.gif"
							title="Annuler"
							action="#{ficheController.annulerModification}"
							rendered="#{ficheController.model.formulaire.idForm == datas.idForm
										and ficheController.model.numLigne == row
										and not (clos or forceDisable or (not forceEnable and not cm and datas.disableForUserRole))}">
						</t:commandButton>
					</t:column>
			</t:dataTable>
		</a4j:outputPanel>
</ui:composition>
</html>

C'est bien celui la que tu veux?

**Sniper37** · 16/04/2009, 17h32

oui mais quelle partie fait l'appel ajax??
pour quel appel ajax tu as le problème??
le a4j:commandButton?

**romaintaz** · 16/04/2009, 17h33

Notons que le <a4j:outputPanel> à la racine est toujours ajaxifié...

**demanghonj** · 16/04/2009, 17h35

oui c'est pour celui-ci

**Sniper37** · 16/04/2009, 17h41

et si tu essaye de changer a4j:outputPanel par <rich:panel/> ou h:panelGroup.

le reRender dans le commandButton suffit..

**romaintaz** · 16/04/2009, 17h42

Envoyé par Sniper37

et si tu essaye de changer a4j:outputPanel par <rich:panel/> ou h:panelGroup.

le reRender dans le commandButton suffit..

ou tout simplement en virant le ajaxRendered="true" (ce qui, dans ce cas, reviendra effectivement à avoir un <h:panelGroup>)

**demanghonj** · 16/04/2009, 17h59

J'ai essayer vos deux solutions et l'apply_request_value ne change pas.

Absolument toutes mes valeurs sont soumise lors de mon appel ajac quand je regarde la requete HTTP. Je pense qu'il a besoin de ça pour rester à jour dans son arbre. Non?

Décider ce que l'on envoie avec a4j

JSF Java

Discussions similaires

Partager

Partager