Lancer une action sur le changement d'état d'une case à cocher

Version imprimable

02/12/2010, 15h15
CinePhil

Lancer une action sur le changement d'état d'une case à cocher
Bonjour,

J'affiche une liste de stages dans un tableau dont chaque ligne comporte une case à cocher pour sélectionner le stage.
J'aimerais lancer une action de vérification lorsque l'utilisateur coche une case. J'ai essayé d'utiliser la propriété onChange proposée par JBossTools sur le contrôle mais j'obtiens une belle erreur.

Mon contrôle :
Code:

1 2 3 <h:selectBooleanCheckbox id="choisir" value="#{listeStages.selection[dataItem.ssnId]}" onchange="#{listeStages.verifNbChoix}"/>
L'erreur :

Citation:

javax.faces.FacesException: javax.el.PropertyNotFoundException: /listeStages.xhtml @31,60 onchange="#{listeStages.verifNbChoix}": Property 'verifNbChoix' not found on type org.domain.stamas.session.ListeStages_$$_javassist_seam_4

J'ai aussi essayé avec onchange="#{listeStages.verifNbChoix()}" mais sans succès.

Je vois dans la FAQ que cette propriété ne semble pas faire partie de ce contrôle.

Comment puis-je faire ?

L'attribute onchange exécute une fonction Javascript (donc côté client) à la modification de la valeur.

Si tu souhaites exécuter une action côté serveur, donc en Java, il te faudra passer par de l'Ajax. Un exemple avec Richfaces :
Code:

1 2 3 4 <h:selectBooleanCheckbox id="choisir" value="#{listeStages.selection[dataItem.ssnId]}"> ... <a4j:support event="onchange" actionListener="#{listeStages.verifNbChoix}"/> </h:selectBooleanCheckbox>
Ton bean listeStages devant alors proposer la méthode suivante :

Code:

public void verifNbChoix(ActionEvent evt) { ... }

02/12/2010, 16h36
romaintaz

Citation:

Envoyé par CinePhil

Je vois dans la FAQ que cette propriété ne semble pas faire partie de ce contrôle.

Au fait, la FAQ n'est pas (et ne se veut pas) exhaustive sur ce point.

Je te conseille de regarder la Javadoc-TLD des balises de base de JSF (pour la version 1.2), ici :

http://download.oracle.com/javaee/5/...ocs/index.html

Je n'ai pas d'erreur mais ou bien il manque un truc, ou bien c'est ma fonction qui ne fonctionne pas !

Le but est de vérifier que l'utilisateur ne coche pas plusieurs lignes.
C'est vrai que pour cette appli, j'aurais pu utiliser des boutons radio à la place des cases à cocher mais on veut rendre générique cette partie d'inscription à un stage qui pourrait, dans une autre appli, être une inscription à autre chose avec plusieurs choix possibles.

Les deux fonctions utilisées :

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
    /**
     * Récupère les identifiants des lignes sélectionnées
     * @return Integer : Le nombre de sélections dans le tableau
     */
    public Integer lignesSelectionnees()
    {
        dataList = new ArrayList<ThStageStg>();
 
        for (ThStageStg dataItem : this.getResultList()) 
        {
            // Récupère la sélection
            if (selection.get(dataItem.getSsnId()).booleanValue())
            {
                dataList.add(dataItem);
                selection.remove(dataItem.getSsnId());
            }
        }
        return dataList.size();
    }
 
    /**
     * verifNbChoix
     * Vérifie que le nombre de sélections maxi dans la liste n'est pas atteint et agit en conséquence
     */
    public String verifNbChoix(ActionEvent evt)
    {
        // Récupère la sélection
        if (lignesSelectionnees() > 1) // TODO 1 à remplacer par paramètre application
        {
            facesMessages.add("Vous ne pouvez sélectionner plus d'un stage !");
            return "KO";
        }
        return "OK";
 
    }

La case à cocher :

Code:

1
2
3
4
5
                           <h:selectBooleanCheckbox id="choisir" 
                               value="#{listeStages.selection[dataItem.ssnId]}">
                               <a:support event="onchange" 
                                   actionListener="#{listeStages.verifNbChoix}"/>
                           </h:selectBooleanCheckbox>

La navigation :

Code:

1
2
3
4
5
    <navigation from-action="#{listeStages.verifNbChoix}">
        <rule if-outcome="KO">
            <redirect/>
        </rule>
    </navigation>

Quand je coche une deuxième case, il ne renvoie pas le faceMessage. :cry:

02/12/2010, 17h37
StefGac

Ne penses tu pas induire en erreur ou dérouter tes utilisateurs avec une liste qui comporte des cases à cocher et qui se comporte comme des boutons radio ?
C'est comme si tu avais un champ de saisie dans lequel tu t'attends à mettre du texte et que le programme te laisse faire pour te dire ensuite que c'est pas permis ?

Pour tes cases à cocher, si tu veux faire un composant générique, tu pourrais faire les deux types de liste que j'insérerai par un ui:include selon le cas. C'est une solution, il y en a sûrement d'autre plus élégantes.
02/12/2010, 20h11
CinePhil

Citation:

Envoyé par StefGac

Ne penses tu pas induire en erreur ou dérouter tes utilisateurs avec une liste qui comporte des cases à cocher et qui se comporte comme des boutons radio ?

Oui je suis assez d'accord. C'est mon chef qui insiste pour la généricité de l'inscription.

Citation:

Pour tes cases à cocher, si tu veux faire un composant générique, tu pourrais faire les deux types de liste que j'insérerai par un ui:include selon le cas. C'est une solution, il y en a sûrement d'autre plus élégantes.

Pas bête ! Je vais y réfléchir !

Merci pour ton aide.

Tout d'abord, je suis tout à fait d'accord avec StefGac. Une checkbox signifie un choix multiple, un radio bouton signifie un choix unique. Détourner ces composants de ces conventions va dérouter l'utilisateur.

Maintenant, concernant ton code, plusieurs remarques :

#1 La signature de ta méthode

Quand on utilise l'attribut action dans le XHTML, on fait référence à une méthode retournant un String et n'ayant pas de paramètre. Quelque chose du genre public String doSomething() { ... }. Cette méthode retourne une chaine de caractères correspondant à la règle de navigation à utiliser pour rediriger l'utilisateur vers la bonne page. C'est donc la façon de faire à privilégier quand on souhaite faire de la navigation.

Quand on utilise un actionListener dans le XHTML, on fait référence à une méthode ne retournant rien, et qui prend un ActionEvent comme paramètre, comme par exemple public void doSomething(ActionEvent evt) { ... }. Bien que ce ne soit pas impossible, cette méthode est plutôt à privilégier quand on ne veut pas faire de navigation, autrement dit réaliser une action tout en restant dans la vue actuelle.

Dans ton code, tu mélanges les deux. Ta méthode verifNbChoix ne devrait pas retourner de String (cf. point #2). Je pense que tout simplement JSF ne s'attend pas à recevoir un String, et donc ne va pas chercher à exécuter une quelconque règle de navigation.

#2 Pas de navigation

Considérant ton cas précis, il n'est pas du tout utile de gérer la navigation. En effet, quand verifNbChoix est appelée, tu as 2 cas possibles :

L'utilisateur a 0 ou 1 case cochée. Il ne faut donc rien faire.
L'utilisateur vient de cocher sa 2e case. Dans ce cas, il faut ajouter un FacesMessage, puis l'afficher sur la même page. Donc pas de besoin de navigation.

En gros, voilà ce que donnerait ton code :
Code:

1 2 3 4 5 public void verifNbChoix(ActionEvent evt) { if (lignesSelectionnees() > 1) { FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Vous ne pouvez pas sélectionner plusieurs stages.")); } }
Ton cas de navigation est à supprimer.

Enfin, dans le code XHTML, nous avons besoin d'afficher ces messages d'erreur. 2 options :

1. Tu rafraichit spécifiquement un panel contenant (éventuellement) les messages d'erreur, grâce à l'attribut reRender :
Code:

1 2 3 4 5 6 <a4j:outputPanel id="messagesBox"> <h:messages/> </a4j:outputPanel> <h:selectBooleanCheckbox id="choisir" value="#{listeStages.selection[dataItem.ssnId]}"> <a:support event="onchange" actionListener="#{listeStages.verifNbChoix}" reRender="messagesBox"/> </h:selectBooleanCheckbox>
2. Tu forces le rafraichissement automatique du outputPanel, et il est donc inutile de le spécifier dans un reRender. A noter que cela signifie qu'à chaque appel ajax sur cette page, ce bloc sera rafraichit.
Code:

1 2 3 4 5 6 <a4j:outputPanel ajaxRendered="true"> <h:messages/> </a4j:outputPanel> <h:selectBooleanCheckbox id="choisir" value="#{listeStages.selection[dataItem.ssnId]}"> <a:support event="onchange" actionListener="#{listeStages.verifNbChoix}"/> </h:selectBooleanCheckbox>
Voilà, j'espère que c'est plus clair maintenant.

Autre chose : si tu continues à utiliser des checkboxes qui se comportent comme des radio boutons, tu peux aussi faire un appel en Javascript qui va vérifier le nombre de cases cochées, et éventuellement griser celles qui ne sont pas cochées (ainsi, l'utilisateur ne pourra plus en cocher une 2e).
Ainsi, tu évites un appel serveur pour ça.
Avec jQuery (la librairie est incluse dans Richfaces) ce n'est pas très compliqué.