[Primefaces] <ui:input> doublé

**Cafeinoman** · 13/01/2014, 08h27

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

**jeffray03** · 13/01/2014, 10h06

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

Eric

**Cafeinoman** · 13/01/2014, 11h03

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

**jeffray03** · 13/01/2014, 13h38

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

**Cafeinoman** · 13/01/2014, 15h11

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

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

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

**Cafeinoman** · 13/01/2014, 22h48

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

**Mishulyna** · 14/01/2014, 00h20

Bonjour,

Avez-vous une raison particulière pour ajouter

Code :

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

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 :

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

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 :

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

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 :

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

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 :

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

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>

**Cafeinoman** · 14/01/2014, 08h16

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.

**jeffray03** · 14/01/2014, 09h45

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 :

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

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

**Cafeinoman** · 14/01/2014, 11h03

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 :

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

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

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

[Primefaces] <ui:input> doublé

JSF Java

Discussions similaires

Partager

Partager