[Primefaces] <ui:input> doublé

Version imprimable

13/01/2014, 08h27
Cafeinoman

4 pièce(s) jointe(s)

[Primefaces] <ui:input> doublé

Bonjour à tous,

j'ai un petit problème de rendu sur une page de template. Lorsqu'elle est généré, deux composants (une datatable et un outputpanel) sont doublés, doublant ainsi la page prévue.

Je vous joins les captures des outline eclipse des pages concernés, ainsi que celle du rendu html. id="j_idt20" id="j_idt64" correspondent aux datatables et id="j_idt55" et id="j_idt99" aux outputpanels. Si je remplace les id auto-générés par des id persos, le serveur me retourne une erreur 500 disant que les id sont déjà présentent et que la page ne peut être générée.

Quelqu'un a une idée? Merci d'avance.

PS : j'ai aussi un problème de page css non reconnue, si quelqu'un voit comment faire au passage...
13/01/2014, 10h06
jeffray03

et quand tu actualise la page, qu´est ce qui ce passe?

Eric
13/01/2014, 11h03
Cafeinoman

Idem, rien ne bouge. J'ai rempli le tableau de données de test, et j'ai remarqué que le header ("sticky ") du second tableau ne bouge pas, et ce retrouve donc au milieu des lignes du premier...
13/01/2014, 13h38
jeffray03

peux-tu nous montrer ton code de template, et des fichiers qui y vont avec?
Meric

Le template :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
 
<h:head>
	<title>Gestion</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<h:outputStylesheet library="css" name="main.css" />
	<link rel="shortcut icon"
		href=""
		type="image/x-icon" />
	<link rel="icon"
		href=""
		type="image/x-icon" />
</h:head>
<body>
	<f:view>
 
		<ui:insert name="menu">
			<ui:include src="/ComonMenu.xhtml" />
		</ui:insert>
		<ui:insert name="data" />
		<ui:insert name="command" />
 
	</f:view>
</body>
</html>

le menu :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
 
<ui:composition template="/main.xhtml">
	<ui:define name="menu">
		<img
			src=""
			alt="" height="120" width="240" />
		<h:form>
			<p:menubar>
				<p:menuitem value="Gestion des contacts" outcome="gestionContacts" />
				<p:menuitem value="Documents stockés" outcome="documents" />
				<p:menuitem value="Administration" outcome="admin" />
                <p:menuitem value="Deconnexion" outcome="deconnection" />
			</p:menubar>
		</h:form>
	</ui:define>
</ui:composition>
</html>

le corps :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
 
<ui:composition template="/main.xhtml">
	<ui:define name="data">
		<h:form name="Table contacts">
			<p:dataTable var="contact" value="#{ContactTableBean.contacts}"
				rowKey="#{contact.id}" paginator="true" rows="10"
				paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
				rowsPerPageTemplate="5,10,15,20,50"
				selection="#{ContactTableBean.selectedContacts}"
				selectionMode="multiple" sortMode="multiple"
				filteredValue="#{ContactTableBean.filteredContacts}"
				emptyMessage="Aucun contact correspondant à vos critères"
				stickyHeader="true" editable="true">
				<f:facet name="header">
                Liste des Contacts  
            <p:outputPanel>
						<h:outputText value="Recherche globale :" />
						<p:inputText id="globalFilter" onkeyup="ContactTableBean.filter()" />
					</p:outputPanel>
				</f:facet>
				<p:column rendered="false">
			         #{contact.id}
			</p:column>
				<p:column filterBy="nom" filterMatchMode="contains" sortBy="nom"
					headerText="Nom">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{contact.nom}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{contact.nom}" label="nom" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column filterBy="prenom" filterMatchMode="contains"
					sortBy="prenom" headerText="Prenom">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{contact.prenom}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{contact.prenom}" label="prenom" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column filterBy="orga.nom" filterMatchMode="exact"
					sortBy="orga.nom" headerText="Organisation">
					<p:cellEditor>
						<f:facet name="output">
							<p:commandButton value="#{contact.orga.nom}"
								icon="ui-icon-extlink"
								actionListener="#{ContactTableBean.displayOrga()}" />
						</f:facet>
						<f:facet name="input">
							<p:commandButton value="#{contact.orga.nom}" type="button"
								onclick="ContactTableBean.modOrga()" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column filterBy="fonction" filterMatchMode="contains"
					sortBy="fonction" headerText="Fonction">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{contact.prenom}" />
						</f:facet>
						<f:facet name="input">
							<p:selectOneMenu value="#{contact.fonction}" editable="true">
								<f:selectItem itemLabel="nouvelle"
									itemValue="#{ContactTableBean.nouvelleFonction()}" />
								<f:selectItems value="#{ContactTableBean.listeFonctions}"
									var="fonction" itemLabel="#{fonction}" itemValue="#{fonction}" />
							</p:selectOneMenu>
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column filterBy="telephone" filterMatchMode="contains"
					sortBy="telephone" headerText="Telephone">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{contact.telephone}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{contact.telephone}" label="telephone" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column filterBy="courriel" filterMatchMode="contains"
					sortBy="courriel" headerText="Courriel">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{contact.courriel}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{contact.courriel}" label="courriel" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column>
					<p:rowEditor />
				</p:column>
			</p:dataTable>
		</h:form>
	</ui:define>
	<ui:define name="command">
		<h:form name="Commandes contacts">
			<p:outputPanel>
				<p:commandButton value="Nouveau Contact"
					actionListener="#{ContactTableBean.nouveauContact()}" />
				<p:commandButton value="Supprimer Contact(s)"
					actionListener="#{ContactTableBean.supprimerContact()}" />
				<p:commandButton value="Lier documents"
					actionListener="#{ContactTableBean.lierDocument()}" />
				<p:commandButton value="Créer lettre"
					actionListener="#{ContactTableBean.creerLettre()}" />
				<p:commandButton value="Envoyer courriel"
					actionListener="#{ContactTableBean.envoyerCourriel()}" />
				<p:commandButton value="Exporter"
					actionListener="#{ContactTableBean.exporter()}" />
			</p:outputPanel>
		</h:form>
	</ui:define>
</ui:composition>
</html>

Je sais qu'il y a des truc étranges dans la datatable au niveau des attributs de balise, mais elle est toujours en cours de construction. Toutes les méthodes et champs du backing bean sont présents mais non implémentés.

13/01/2014, 22h48
Cafeinoman

Je viens de remarquer un truc proprement incompréhensible. En passant la page rendue à Firebug, le code généré montre que les balises présente dans le head (title, stylesheet, etc) sont également présentes dans le boy, ce qui ne me semble pas très normal...

Bonjour,

Avez-vous une raison particulière pour ajouter
Code:

1 2 3 <ui:insert name="data" /> <ui:insert name="command" />
à votre fichier template.xhtml? Si c'est le cas: pourquoi ne le faites vous pas comme pour le menu?
Code:

1 2 3 4 <ui:insert name="menu"> <ui:include src="/ComonMenu.xhtml" /> </ui:insert>
Si vous n'avez pas forcément besoin de "data" et "command" à cet endroit, vous pouvez définir tout simplement un
Code:

1 2 3 4 5 6 <p:layoutUnit position="center" style="votreStyle"> <ui:include src="/ComonMenu.xhtml"/> <br/> <ui:insert name="center"/> </p:layoutUnit>
Sur une page qui utilise ce template vous mettez
Code:

1 2 3 4 5 6 7 8 <ui:composition template="/main.xhtml"> <ui:define name="center"> <p:dataTable> .... </p:dataTable> </ui:define> </ui:composition>
et sur une autre page ça pourrait être
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <ui:composition template="/main.xhtml"> <ui:define name="center"> <p:tabView> <p:tab> .... </p:tab> <p:tab> .... </p:tab> </p:tabView> </ui:define> </ui:composition>

14/01/2014, 08h16
Cafeinoman

J'ai essayé, à tout hasard, de ne mettre qu'un seul input, mais la page inséré se répète quand même.

C'est vrai que je pourrais mettre les deux jeux de composants command et data dans un seul input, mais séparer les deux donne un découpage logique utile à mon petit cerveau. :ccool:

salut cela vient du fait que tu inclus la template main.xhtml dans le fichier du menu, cela fait un double insert de ta template.
tu devrais faire un truc comme ceci:
ton fichier menu doit ressembler a ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
 
	<ui:define name="menu">
		<img
			src=""
			alt="" height="120" width="240" />
		<h:form>
			<p:menubar>
				<p:menuitem value="Gestion des contacts" outcome="gestionContacts" />
				<p:menuitem value="Documents stockés" outcome="documents" />
				<p:menuitem value="Administration" outcome="admin" />
                <p:menuitem value="Deconnexion" outcome="deconnection" />
			</p:menubar>
		</h:form>
	</ui:define>
</ui:composition>

et l´autre fichier du corps :

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
 
<ui:composition  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
 
	<ui:define name="data">
		<h:form name="Table contacts">
			<p:dataTable var="contact" value="#{ContactTableBean.contacts}"
				rowKey="#{contact.id}" paginator="true" rows="10"
				paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
				rowsPerPageTemplate="5,10,15,20,50"
				selection="#{ContactTableBean.selectedContacts}"
				selectionMode="multiple" sortMode="multiple"
				filteredValue="#{ContactTableBean.filteredContacts}"
				emptyMessage="Aucun contact correspondant à vos critères"
				stickyHeader="true" editable="true">
				<f:facet name="header">
                Liste des Contacts  
            <p:outputPanel>
						<h:outputText value="Recherche globale :" />
						<p:inputText id="globalFilter" onkeyup="ContactTableBean.filter()" />
					</p:outputPanel>
				</f:facet>
				<p:column rendered="false">
			         #{contact.id}
			</p:column>
				<p:column filterBy="nom" filterMatchMode="contains" sortBy="nom"
					headerText="Nom">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{contact.nom}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{contact.nom}" label="nom" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column filterBy="prenom" filterMatchMode="contains"
					sortBy="prenom" headerText="Prenom">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{contact.prenom}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{contact.prenom}" label="prenom" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column filterBy="orga.nom" filterMatchMode="exact"
					sortBy="orga.nom" headerText="Organisation">
					<p:cellEditor>
						<f:facet name="output">
							<p:commandButton value="#{contact.orga.nom}"
								icon="ui-icon-extlink"
								actionListener="#{ContactTableBean.displayOrga()}" />
						</f:facet>
						<f:facet name="input">
							<p:commandButton value="#{contact.orga.nom}" type="button"
								onclick="ContactTableBean.modOrga()" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column filterBy="fonction" filterMatchMode="contains"
					sortBy="fonction" headerText="Fonction">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{contact.prenom}" />
						</f:facet>
						<f:facet name="input">
							<p:selectOneMenu value="#{contact.fonction}" editable="true">
								<f:selectItem itemLabel="nouvelle"
									itemValue="#{ContactTableBean.nouvelleFonction()}" />
								<f:selectItems value="#{ContactTableBean.listeFonctions}"
									var="fonction" itemLabel="#{fonction}" itemValue="#{fonction}" />
							</p:selectOneMenu>
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column filterBy="telephone" filterMatchMode="contains"
					sortBy="telephone" headerText="Telephone">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{contact.telephone}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{contact.telephone}" label="telephone" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column filterBy="courriel" filterMatchMode="contains"
					sortBy="courriel" headerText="Courriel">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{contact.courriel}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{contact.courriel}" label="courriel" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column>
					<p:rowEditor />
				</p:column>
			</p:dataTable>
		</h:form>
	</ui:define>
	<ui:define name="command">
		<h:form name="Commandes contacts">
			<p:outputPanel>
				<p:commandButton value="Nouveau Contact"
					actionListener="#{ContactTableBean.nouveauContact()}" />
				<p:commandButton value="Supprimer Contact(s)"
					actionListener="#{ContactTableBean.supprimerContact()}" />
				<p:commandButton value="Lier documents"
					actionListener="#{ContactTableBean.lierDocument()}" />
				<p:commandButton value="Créer lettre"
					actionListener="#{ContactTableBean.creerLettre()}" />
				<p:commandButton value="Envoyer courriel"
					actionListener="#{ContactTableBean.envoyerCourriel()}" />
				<p:commandButton value="Exporter"
					actionListener="#{ContactTableBean.exporter()}" />
			</p:outputPanel>
		</h:form>
	</ui:define>
</ui:composition>

Il faudra toujours eviter de mettre ton fichier de template principal dans le fichier d´inclusion.

Eric

C'était presque ça ! En fait, il fallait bien enlever les références au template dans ComonMenu, ainsi que la balise <ui:define>, et virer dans main les balise <ui:insert> qui encadrées <ui:include> : cela provoqué effectivement une double inclusion qui foutait le b***** ! Par contre il ne fallait pas toucher à la page gestionContacts, qui elle besoin de référencer le template puisqu'elle vient dans une balise <ui:insert>. Enlever le template entrainait une page blanche... Je vous reposte le code (abrégé) des pages fonctionnelles.

main.xhtml :

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
 
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
 
<h:head>
	<title>Gestion</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<h:outputStylesheet library="css" name="main.css" />
	<link rel="shortcut icon"
		href=""
		type="image/x-icon" />
	<link rel="icon"
		href=""
		type="image/x-icon" />
</h:head>
<body>
	<f:view>
 
		<ui:include src="ComonMenu.xhtml" />
		<ui:insert name="data" />
		<ui:insert name="command" />
 
	</f:view>
</body>
</html>

CommonMenu.xhtml :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
 
<ui:composition>
		<img
			src=""
			alt="" height="120" width="240" />
		<h:form>
			<p:menubar>
				<p:menuitem value="Gestion des contacts" outcome="gestionContacts" />
				<p:menuitem value="Documents stockés" outcome="documents" />
				<p:menuitem value="Administration" outcome="admin" />
                <p:menuitem value="Deconnexion" outcome="deconnection" />
			</p:menubar>
		</h:form>
</ui:composition>
</html>

gestionContacts.xhtml (abrégé) :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
 
<ui:composition template="main.xhtml">
	<ui:define name="data">
		<h:form name="Table contacts">
			<p:dataTable>
			</p:dataTable>
		</h:form>
	</ui:define>
	<ui:define name="command">
		<h:form name="Commandes contacts">
			<p:outputPanel>
				<p:commandButton value="Nouveau Contact"
					actionListener="#{ContactTableBean.nouveauContact()}" />
				<p:commandButton value="Supprimer Contact(s)"
					actionListener="#{ContactTableBean.supprimerContact()}" />
				<p:commandButton value="Lier documents"
					actionListener="#{ContactTableBean.lierDocument()}" />
				<p:commandButton value="Créer lettre"
					actionListener="#{ContactTableBean.creerLettre()}" />
				<p:commandButton value="Envoyer courriel"
					actionListener="#{ContactTableBean.envoyerCourriel()}" />
				<p:commandButton value="Exporter"
					actionListener="#{ContactTableBean.exporter()}" />
			</p:outputPanel>
		</h:form>
	</ui:define>
</ui:composition>
</html>

Merci de votre aide !