JSF2.1 et JavaScript

**franckotseu** · 07/06/2014, 00h18

Bonjour,
je souhaite afficher une page composée des deux parties suivantes:
Un formulaire de saisie / modification d'un objet en haut et
Une liste des objets à modifier en bas.
Pour l'instant l'objet n'est qu'une chaine de caractère (c2) avec son id(c1)

Je pensais passer les objets à modifier de la liste vers le formulaire en javascript.
Et cela fonctionne ... une demie seconde.

En effet la page semble se recharger alors que c'est du code client.

je ne sais pas comment faire ni même si c'est possible. Pouvez vous m'éclairer?

voici mon code :

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
 
 
<?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:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
 
    <script language="JavaScript">
 
        function modifier(id,txt){
            document.getElementById('f:chaine').value=txt;
            document.getElementById('f:modif').value='m';
        }
 
    </script>
 
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:link value="index page" outcome="index"/><br/>
 
        <h1>Accueil</h1>
        <h:form id="f">  
            <h:outputLabel value="Entrez une chaine" for="chaine"/>  
            <h:inputText id="chaine" value="#{accueilController.selected.c2}" validatorMessage="la chaine doit posséder entre 2 et 5 caracteres">
                <f:validateLength minimum="2" maximum="5" /> 
            </h:inputText>
            <h:inputHidden  id="modif" value="c"/>
            <h:commandButton value="Valider" action="#{accueilController.insereChaine}"/>  
        </h:form>
        <br/>
        <f:view>
            <h:form>
                <h1><h:outputText value="Liste des T1"/></h1>
                <h:dataTable value="#{accueilController.listeDeT1}" var="item">
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="C1"/>
                        </f:facet>
                        <h:outputText value="#{item.c1}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="C2"/>
                        </f:facet>
                        <h:outputText value="#{item.c2}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="opérations"/>
                        </f:facet>
                        <h:link  onclick="modifier(#{item.c1},'#{item.c2}');" >modifier</h:link>
                    </h:column>
                </h:dataTable>
            </h:form>
        </f:view>
 
    </h:body>
</html>

D'avance merci, Franck

**franckotseu** · 07/06/2014, 15h40

Ben en fait je crois avoir trouvé la solution sans avoir bien compris le probleme.
le problème c'est que JSF semble faire un "restore view" juste après avoir cliqué sur le lien (je ne sais pas pourquoi)
De toute façon, il y a une histoire de viewState : JSF conserve les données initiales de la page avant d'appliquer les les modifications de l'utilisateur. Donc ca ne peut pas fonctionner en mode client.(enfin je crois)
Ma soluce est de passer par le serveur pour ne plus avoir ce souci. L'ennui est qu'on avait déjà toutes les informations sur la page et du coup j'ai l'impression de perdre du temps en repassant par le serveur mais bon c'est comme ça...

Voici du code qui correspond à mon besoin initial et qui semble fonctionner
Vous pouvez critiquer à votre guise...

accueil.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
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
 
 
<?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:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
 
 
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:link value="index page" outcome="index"/><br/>
 
        <h1>Accueil</h1>
        <h:form id="f">  
            <h:inputHidden id="c1" value="#{accueilController.selected.c1}" />
            <h:outputLabel value="Entrez une chaine" for="c2"/> 
            <h:inputText id="c2" value="#{accueilController.selected.c2}" validatorMessage="la chaine doit posséder entre 2 et 10 caracteres">
                <f:validateLength minimum="2" maximum="10" /> 
            </h:inputText>
            <h:inputHidden  id="modif" value="#{accueilController.modification}"/>
            <h:commandButton id="insereOuModif" value="Valider" action="#{accueilController.insereOuModifChaine(accueilController.selected.c1)}"/>  
        </h:form>
        <br/>
        <f:view>
            <h:form>
                <h1><h:outputText value="Liste des T1"/></h1>
                <h:dataTable value="#{accueilController.listeDeT1}" var="item">
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="C1"/>
                        </f:facet>
                        <h:outputText value="#{item.c1}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="C2"/>
                        </f:facet>
                        <h:outputText value="#{item.c2}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="btn"/>
                        </f:facet>
                        <h:commandButton action="#{accueilController.editAction(item.c1)}" value="modif"/>
                    </h:column>
                </h:dataTable>
            </h:form>
        </f:view>
 
    </h:body>
</html>

AgentController.java : ma couche controller

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
 
package com.fg.test01.controller;
 
import com.fg.test01.entity.T1;
import com.fg.test01.service.supervision.AgentService;
import java.io.Serializable;
import java.util.List;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.enterprise.context.RequestScoped;
import javax.inject.Inject;
import javax.inject.Named;
 
/**
 *
 * @author admin
 */
@Named
@RequestScoped 
public class AccueilController implements Serializable {
    private static final long serialVersionUID = 1L;
 
    private T1 chaine;
    private char modification='c';
    private List<T1> listeDeT1;
    private @Inject AgentService agsvc;
 
    public AccueilController(){
        Logger.getLogger(AccueilController.class.getName()).log(Level.INFO, "AccueilController.AccueilController()");
    }
 
    public char getModification() {
        Logger.getLogger(AccueilController.class.getName()).log(Level.INFO, "AccueilController.getModification()={0}",modification);
        return modification;
    }
 
    public void setModification(char modification) {
        Logger.getLogger(AccueilController.class.getName()).log(Level.INFO, "AccueilController.setModification({0})",modification);
        this.modification = modification;
    }
 
    public T1 getChaine() {
        Logger.getLogger(AgentService.class.getName()).log(Level.INFO, "AccueilController.getChaine()");
        return chaine;
    }
 
    public void setChaine(T1 chaine) {
        Logger.getLogger(AccueilController.class.getName()).log(Level.INFO, "AccueilController.setChaine()");
        this.chaine = chaine;
    }
 
    public String insereOuModifChaine(Integer sId) {
        Logger.getLogger(AccueilController.class.getName()).log(Level.INFO, "AccueilController.insereOuModifChaine({0})", sId.toString());
        Logger.getLogger(AccueilController.class.getName()).log(Level.INFO, "AccueilController.insereOuModifChaine - chaine.c2={0}", chaine.getC2());
        if (chaine.getC1()==null){
            Logger.getLogger(AccueilController.class.getName()).log(Level.INFO, "AccueilController.insereOuModifChaine - chaine.c1=null");
        }
        else{
            Logger.getLogger(AccueilController.class.getName()).log(Level.INFO, "AccueilController.insereOuModifChaine - chaine.c1={0}", chaine.getC1().toString());
        }
 
        if (modification=='m'){
            agsvc.modifChaine(chaine);
        }
        else{
            agsvc.insereChaine(chaine);
        }
        //pret pour en saisir un nouveau
        modification='c';
        chaine = new T1();
        return "accueil";
    }
    /**
     * @return Returns the selected T1 object
     * 
     */
    public T1 getSelected() {
 
        if (chaine == null) {
            Logger.getLogger(AccueilController.class.getName()).log(Level.INFO, "AccueilController.getSelected() selected = new T1()");
            chaine = new T1();
        }
        else{
            if (chaine.getC1()==null){
                Logger.getLogger(AccueilController.class.getName()).log(Level.INFO, "AccueilController.getSelected() selected = {0}","null" + " et " + chaine.getC2() );
            }
            else{
                Logger.getLogger(AccueilController.class.getName()).log(Level.INFO, "AccueilController.getSelected() selected = {0}",chaine.getC1().toString() + ' ' + chaine.getC2() );
            }
        }
        return chaine;
    }
 
    public List<T1> getListeDeT1(){
        return agsvc.listeDeT1();
    }
 
    /**
     * 
     * 
     * 
     * @param sId
     * @return page acueil
     */
    public String editAction(Integer sId){
        Logger.getLogger(AccueilController.class.getName()).log(Level.INFO, "AccueilController.editAction({0})",sId.toString());
        chaine=agsvc.getChaine(sId);
        Logger.getLogger(AccueilController.class.getName()).log(Level.INFO, "AccueilController.editAction - chaine={0}", chaine.getC1().toString() + ' ' + chaine.getC2());
        modification='m';
        return "accueil";
    }
}

Voila je ne sais pas si c'est bien comme ça mais cela semble fonctionner...
Des commentaires?
A+ Franck

JSF2.1 et JavaScript

JSF Java

Discussions similaires

Partager

Partager