[PrimeFaces] Comment utiliser le meme panelgrid pour l'ajout et la modification d'un produit
Salut,
J'utilise primefaces dans mon application.
La structure de la page jsp : listeProduit.xhtml est :
[bouton nouveau]
[dataTable avec les boutons : modifier et supprimer en colonne]
en cliquant sur le bouton nouveau, on affiche la grille de saisie comme suit :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<p:column headerText="Code" sortBy="#{prod.cdart}" filterBy="#{prod.cdart}" filterMatchMode="contains" width="6%" filterStyle="width : 100%;">
<h:outputText value="#{prod.cdart}"/>
</p:column>
<p:column headerText="Désignation" >
<h:outputText value="#{prod.design1}"/>
</p:column>
<p:column headerText="Référence" >
<h:outputText value="#{prod.ref}"/>
</p:column>
<p:column headerText="Stock initial" >
<h:outputText value="#{prod.stki1}">
<f:convertNumber type="currency"/>
</h:outputText>
</p:column> |
Le meme code de grille est retapé pour la modification d'un produit (duplication de code).
Ma question est :
Comment utiliser la meme grille dans les deux cas : Ajout et Update ?
Si vous n'avez pas compris ma question, le code suivant parle de lui meme (remarquer la grille de formulaire se repete : gras en rouge):
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
<?xml version='1.0' encoding='UTF-8' ?>
<!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:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<body>
<ui:composition template="./../../template/Template.xhtml">
<ui:define name="content">
<h2> Nouveau produit</h2>
<h:form>
<p:commandButton value="Nouveau" actionListener="#{productBean.PreparNewProduit()}" oncomplete="PF('dialogNewProduit').show();"
update="formNewProduit"/>
</h:form>
<!-- Liste des articles -->
<h:form id="formListeProduits">
<p:dataTable id="tableProduits" paginator="true" paginatorPosition="top"
var="prod" value="#{productBean.listeProduits}" emptyMessage="pas de données à afficher...">
<p:column headerText="Code" >
<h:outputText value="#{prod.cdart}"/>
</p:column>
<p:column headerText="Désignation" >
<h:outputText value="#{prod.design1}"/>
</p:column>
<p:column headerText="Référence" >
<h:outputText value="#{prod.ref}"/>
</p:column>
<p:column headerText="Stock initial">
<h:outputText value="#{prod.stki1}">
<f:convertNumber type="currency"/>
</h:outputText>
</p:column>
<p:column headerText="Modifier" style="text-align: center;">
<p:commandButton value="Modifier" oncomplete="PF('dialogUpdateProduit').show();"
update="formUpdateProduit">
<f:setPropertyActionListener target="#{productBean.produit}" value="#{prod}"/>
</p:commandButton>
</p:column>
<p:column headerText="Supprimer" style="text-align: center;">
<p:commandButton value="Supprimer" oncomplete="PF('dialogDeleteProduit').show();"
update="formDeleteProduit">
<f:setPropertyActionListener target="#{productBean.produit}" value="#{prod}"/>
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
<!-- Fin Liste des articles -->
<!-- Nouvelle Fiche produit -->
<h:form id="formNewProduit" style="width: 400;">
<p:dialog id="dlgNewProduit" widgetVar="dialogNewProduit" resizable="false" showEffect="explode"
hideEffect="explode" modal="true">
<p:panelGrid columns="4" style="margin: 0 auto;">
<p:outputLabel value="Code"/>
<p:inputText value="#{productBean.produit.cdart}"/>
<p:outputLabel value="Désignation"/>
<p:inputText value="#{productBean.produit.design1}"/>
<p:outputLabel value="Référence"/>
<p:inputText value="#{productBean.produit.ref}"/>
<p:outputLabel value="Stock initial"/>
<p:inputText value="#{productBean.produit.stki1}"/>
</p:panelGrid>
<p:commandButton value="Enregistrer" actionListener="#{productBean.NewProduit()}"
update=":formListeProduits:tableProduits" oncomplete="PF('dialogNewProduit').hide();"/>
<p:commandButton value="Annuler" onclick="PF('dialogNewProduit').hide();"/>
</p:dialog>
</h:form>
<!-- Nouvelle Fiche produit -->
<!-- Modifier Fiche produit -->
<h:form id="formUpdateProduit">
<p:dialog id="dlgUpdateProduit" widgetVar="dialogUpdateProduit" resizable="false" showEffect="explode"
hideEffect="explode" modal="true">
<p:panelGrid columns="2" style="margin: 0 auto;width: 100%" >
<p:outputLabel value="Code" style="display: block; width: 2px;"/>
<p:inputText value="#{productBean.produit.cdart}" style="width: 30%;"/>
<p:outputLabel value="Désignation"/>
<p:inputText value="#{productBean.produit.design1}" />
<p:outputLabel value="Référence"/>
<p:inputText value="#{productBean.produit.ref}"/>
<p:outputLabel value="Stock initial"/>
<p:inputText value="#{productBean.produit.stki1}"/>
</p:panelGrid>
<p:commandButton value="Enregistrer" actionListener="#{productBean.UpdateProduit()}"
update=":formListeProduits:tableProduits" oncomplete="PF('dialogUpdateProduit').hide();"/>
<p:commandButton value="Annuler" onclick="PF('dialogUpdateProduit').hide();"/>
</p:dialog>
</h:form>
<!--Fin Modifier Fiche produit -->
<!-- Supprimer produit -->
<h:form id="formDeleteProduit">
<p:dialog id="dlgDeleteProduit" widgetVar="dialogDeleteProduit" resizable="false" showEffect="explode"
hideEffect="explode" modal="true" header="Suppression...">
<!-- <p:panel> -->
<h:outputText value="Voules-vous supprimer l'produit #{productBean.produit.cdart} - #{productBean.produit.design1}"/>
<!--<p:separator/>-->
<p:breadCrumb/>
<p:commandButton value="Oui" actionListener="#{productBean.DeleteProduit()}"
update=":formListeProduits:tableProduits" oncomplete="PF('dialogDeleteProduit').hide();"/>
<p:commandButton value="Non" onclick="PF('dialogDeleteProduit').hide();"/>
<!-- </p:panel>-->
</p:dialog>
</h:form>
<!--Fin Supprimer produit -->
</ui:define>
</ui:composition>
</body>
</html> |
