[PrimeFaces] Comment utiliser le meme panelgrid pour l'ajout et la modification d'un produit

**Socrat** · 09/06/2016, 17h27

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 :

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

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

**OButterlin** · 10/06/2016, 11h49

Le truc le plus simple est de gérer une page avec des champs en saisie et les protéger conditionnellement

Code :

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

1
2
3
4
5
6
7
8
9
<p:row>
    <p:column>
        <h:outputText value="Mon champ 1" styleClass="label"/>
    </p:column>
    <p:column>
        <p:inputText value="#{monManagedBean.champ1}" disabled="#{monManagedBean.pageReadonly}" ... />
    </p:column>
</p:row>

Ensuite, on peut jouer sur un css pour supprimer les bordures si besoin...

**Socrat** · 11/06/2016, 15h11

Merci OButterlin,

Si tu peut me montrer comment faire par un exemple.

Merci encore

**Socrat** · 15/06/2016, 13h00

Salut tout le monde,

Mon problème n'est pas encore réglé

c'est quelqu'un peut me donner un bout de fil...

**jeffray03** · 15/06/2016, 14h46

salut,
si pour un nouveau produit,
tu faisais simplement :

Code :

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

prod = new produit();

la les champs seront vide a l´affichage.

Eric

**OButterlin** · 16/06/2016, 11h03

Je n'avais pas compris ton problème, ce n'est pas d'avoir le même "écran" en affichage ou en modification, dans les 2 cas, tu as la boite de dialogue en saisie.
Pourquoi faire 2 boites de dialogue, 1 seule suffit. Au niveau de ton contrôleur (ManagedBean), il est facile de prévoir un boolean pour différencier le mode création du mode modification (ou alors tu te bases sur l'existence de la clé primaire dans le cas d'un auto-incrément)...
Bref, aucune raison de faire 2 dialogues... et avec la JSTL, tu peux facilement adapter tes actions (ou même via l'attribut rendered).
Ce qu'il ne faut pas oublier de faire avant d'afficher la boite de dialogue, c'est de la mettre à jour (update="...") sur le bouton d'ouverture.
Pour le bouton "Création", tu auras <p:commandButton value="Création" actionListener="#{managedBean.createNew()}" update="dialog"/>
Avec la méthode createNew() qui feras un prod = new Produit(); comme te le suggérait jeffray03.

[PrimeFaces] Comment utiliser le meme panelgrid pour l'ajout et la modification d'un produit

JSF Java

Discussions similaires

Partager

Partager