La croix ne s'affiche pas dans mon p:selectManyCheckBox mais la valeur est bien selectionnée

**GDS_Strou** · 21/11/2014, 09h55

Bonjour,

J'ai un petit problème avec un composant primefaces, le selectManyCheckBox.

Je m'explique, le composant est bien implémenté sur ma page et fonctionne parfaitement.

Cependant, lorsque je sélectionne une case à cocher, la croix n'apparait pas dans la case choisie.
Il y a juste le tour de la case à cocher qui change de couleur et devient blanc mais aucune croix dans la case...
Nom : selectManyCheckBox.png
Affichages : 276
Taille : 44,5 Ko

Nom : selectManyCheckBox.png
Affichages : 276
Taille : 44,5 Ko

Quelqu'un sait il de quoi cela peut venir ?

Merci d'avance

**OButterlin** · 21/11/2014, 10h49

A tout hasard, tu ne serais pas sur Linux et Firefox ?

Peux-tu montrer le code de ta page ?

**GDS_Strou** · 21/11/2014, 13h39

Je suis sous windows 7 et j'ai testé sur IE et ça fait exactement pareil.
Voici le code de la page :

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
 
<?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://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:p="http://primefaces.org/ui"
       xmlns:pe="http://primefaces.org/ui/extensions">
 
<ui:composition template="../../WEB-INF/templates/standard.xhtml">
 
       <ui:define name="content">
             <p:graphicImage library="images" name="home.png" width="1%"/> > Administration > Compte
             <br/>
             <b style="font-size: 30px">Modifier/supprimer un compte</b>
             <br/><br/>
 
             <h:form id="formModifierCompte" >
                    <p:growl id="message"  sticky="false" />
 
                    <p:fieldset legend="Informations compte">
                           <h:panelGrid  columns="2" style="width: 100%">   
 
                                  <h:panelGrid columns="3" style="width: 100%" >                              
                                        <p:graphicImage id="imageGrade" value="#{modifierCompteBean.champsObligatoireGrade}.png" title="Champ obligatoire" width="60%"/>
                                        <p:outputLabel for="grade" value="Grade :" />
                                        <p:selectOneMenu id="grade"       value="#{modifierCompteBean.compteSelectionnee._grade}" converter="#{genericConverter}" >
                                               <f:selectItems value="#{modifierCompteBean.listeGrades}" var="unGrade" itemValue="#{unGrade}" itemLabel="#{unGrade._libelle}" />
                                               <p:ajax update=":formModifierCompte:imageGrade" listener="#{modifierCompteBean.champsObligatoires()}" event="change"></p:ajax>
                                        </p:selectOneMenu>
 
                                        <p:graphicImage id="imagePrenom" value="#{modifierCompteBean.champsObligatoirePrenom}.png" title="Champ obligatoire" width="60%"/>
                                        <h:outputLabel for="prenom" value="Prénom :" />
                                        <p:inputMask id="prenom"       value="#{modifierCompteBean.compteSelectionnee._prenom}" maxlength="50" >
                                               <p:ajax update=":formModifierCompte:identifiant :formModifierCompte:imagePrenom" listener="#{modifierCompteBean.champsObligatoires()}" event="change"></p:ajax>
                                        </p:inputMask>
 
                                        <p:graphicImage id="imageNom" value="#{modifierCompteBean.champsObligatoireNom}.png" title="Champ obligatoire" width="60%"/>
                                        <h:outputLabel for="nom"   value="Nom :" />
                                        <p:inputText id="nom" value="#{modifierCompteBean.compteSelectionnee._nom}" maxlength="50">
                                               <p:ajax update=":formModifierCompte:identifiant :formModifierCompte:imageNom" listener="#{modifierCompteBean.champsObligatoires()}" event="change"></p:ajax>
                                        </p:inputText>                                  
                                  </h:panelGrid>                               
 
 
                                  <h:panelGrid id="col2" columns="3" style="width: 100%" >
                                        <h:outputText  value=""/>
                                        <h:outputLabel for="identifiant"  value="Identifiant :" />
                                        <p:inputText id="identifiant" value="#{modifierCompteBean.genererIdentifiant()}" disabled="true" size="40" />                                              
 
                                        <p:graphicImage id="imageUnite" value="#{modifierCompteBean.champsObligatoireUnite}.png" title="Champ obligatoire" width="60%"/>
                                        <p:outputLabel for="unite" value="Unité :" />
                                        <p:selectOneMenu id="unite"       value="#{modifierCompteBean.compteSelectionnee._escadrons}" converter="#{genericConverter}">
                                               <f:selectItems value="#{modifierCompteBean.listeEscadrons}"       var="uneUnite" itemLabel="#{uneUnite._libelle}"       itemValue="#{uneUnite}" />
                                               <p:ajax update=":formModifierCompte:imageUnite" listener="#{modifierCompteBean.champsObligatoires()}" event="change"></p:ajax>
                                        </p:selectOneMenu>                                     
 
                                  </h:panelGrid>
                           </h:panelGrid>
                    </p:fieldset>
 
                    <br/>             
 
                    <p:fieldset legend="Profil(s) alloué(s)">
 
                           <p:graphicImage id="imageProfils" value="#{modifierCompteBean.champsObligatoireProfils}.png" title="Sélectionner au minimum un profil" width="2%"/>
                           <p:selectManyCheckbox id="profils" value="#{modifierCompteBean.compteSelectionnee._tab_profils}"  layout="grid" columns="1" converter="#{genericConverter}">
                                  <f:selectItems value="#{modifierCompteBean.listeProfils}" var="profil" itemLabel="#{profil._libelle}" itemValue="#{profil}"/>
                                  <p:ajax update=":formModifierCompte:imageProfils" listener="#{modifierCompteBean.champsObligatoires()}" event="change"></p:ajax>
                           </p:selectManyCheckbox>
                    </p:fieldset>
 
                    <br/>
 
                    <center>
 
                           <h:panelGroup>
 
                           <p:commandButton value="Modifier compte"
                                            action="#{modifierCompteBean.modifierCompte()}"
                                            ajax="true"
                                            update="message :formModifierCompte"/>                                        
 
 
                           <p:commandButton value="Réactiver compte"
                                            action="#{modifierCompteBean.reactiverCompte()}"
                                            ajax="true"
                                            update="message :formModifierCompte">      
                           </p:commandButton>                  
 
 
                           <p:commandButton value="Supprimer compte"
                                            action="#{modifierCompteBean.desactiverCompte()}"
                                            ajax="true"
                                            update="message :formModifierCompte"/> 
 
 
                           <p:commandButton value="Annuler"
                                            action="rechercherCompte?faces-redirect=true;"
                                            immediate="true" />      
                </h:panelGroup>
                    </center>
 
             </h:form>
 
       </ui:define>
 
</ui:composition>
 
</html>

**tchize_** · 21/11/2014, 17h02

primefaces utilise jquery icon pour afficher ce genre d'icone.

Mon premier réflexe ce serait d'ouvrir la page avec firefox, de lancer firebug (F12) et de regarder avec firebug la case "cochée". As tous les coup elle référence une background image qui n'existe pas. Reste après à investiguer pourquoi elle n'existe pas mais, vu que tu a l'air d'avoir un thème custom, surement des ressources manquantes dans ce thème.

Voici ce que cela donne avec le thème par défaut dans le showcase:

Code html :

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

1
2
3
4
5
6
<div class="ui-chkbox ui-widget">
<div class="ui-helper-hidden-accessible">
<div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active">
<span class="ui-chkbox-icon ui-icon ui-c ui-icon-check"></span>
</div>
</div>

Code css :

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

1
2
3
4
 
.ui-state-active .ui-icon {
    background-image: url("/showcase/javax.faces.resource/images/ui-icons_38667f_256x240.png.xhtml?ln=primefaces-aristo");
}

**GDS_Strou** · 24/11/2014, 14h02

voici le code de mon html et de mon css :

HTML

Code :

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

1
2
3
4
5
 
<div class="ui-chkbox ui-widget">
<div class="ui-helper-hidden-accessible">
</div><div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active">
<span class="ui-chkbox-icon ui-c ui-icon ui-icon-check"></span>

CSS

Code :

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

1
2
3
4
5
6
7
8
 
.ui-state-active .ui-icon{
        background-image:url("#{
               resource['primefaces-mint-choc:images/ui-icons_e3ddc9_256x240.png']
        }
 
       ");
}

**tchize_** · 24/11/2014, 14h11

c'est le css que tu obtiens dans le browser? Si oui, ca veux dire que ta ressource css a mal été transformée par JSF, probablement parce qu'elle est écrite sur plusieurs lignes. Essaie de changer ton css en dans les sources de ton theme

Code :

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

1
2
3
.ui-state-active .ui-icon{
        background-image:url("#{resource['primefaces-mint-choc:images/ui-icons_e3ddc9_256x240.png']}");
}

**GDS_Strou** · 24/11/2014, 14h27

oui c'est bien le CSS du navigateur.
Je suis en train de chercher où sont les sources du theme et je fais la modif dès que j'ai trouvé.

**GDS_Strou** · 24/11/2014, 14h52

dans le web.xml, je retrouve bien le thème choisi que j'ai importé via le jar all-theme-1.0.8.jar

Code :

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

1
2
3
4
   <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>mint-choc</param-value>
  </context-param>

Cependant, impossible de retrouver les ressources de ce thème dans mon eclipse ni dans mon workspace

**tchize_** · 24/11/2014, 15h13

essaie déjà avec le all-theme 1.0.10, c'est peut être réglé? Sinon prends un autre theme?

**GDS_Strou** · 24/11/2014, 15h46

J'ai installé la version 1.0.10 et j'ai toujours le problème.
J'ai fini par trouver les ressources de mon theme.

Le fichier CSS est entièrement écrit sur une seule ligne. Et il est non odifiable je n'arrive pas à l'éditer.
Mais je ne pense pas que le problème viennent de lui du coup car tous les CSS des autres thème sont fait exactement pareil

**GDS_Strou** · 24/11/2014, 16h11

J'ai installé la version 1.0.10 et j'ai toujours le problème.

J'ai supprimé all-theme et j'ai juste installé mint-choc-1.0.2 et mon manyCheckBoxMenu refonctionne correctement.

J'ai comparer le CSS du all-theme et du mint-choc, ils sont identiquent en tout point...

Donc ça refonctionne mais je ne pourrai pas expliquer le pourquoi du comment...

Merci pour ton aide

**GDS_Strou** · 25/11/2014, 12h59

Faux espoir, ce matin en relançant l'application, les croix ne réapparaissent pas

**GDS_Strou** · 16/12/2014, 12h41

Bonjour,

Je viens de trouver le pourquoi mais je ne sais pas comment résoudre le soucis.

En lançant firebug et en cliquant sur ma case cocher, j'ai ce message d'erreur :

Code :

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

1
2
background-image: url("#{resource[\'primefaces-mint-choc:images/ui-icons_9bcc60_256x40.png\']}")

En parcourant le dossier "Referenced Libraries" de mon projet, j'ai la même arborescence mais avec un s à resources...

Je ne peux pas renommer le dossier resource de mon jar, ni le theme.css du jar...

Quelqu'un a t-il une solution ? Merci d'avance

**tchize_** · 16/12/2014, 13h54

Normalement, JSF est censé remplacé les références:

Code :

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

1
2
 
background-image: url("#{resource[\'primefaces-mint-choc:images/ui-icons_9bcc60_256x40.png\']}")

par quelque chose du genre:

Code :

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

background-image: url("/faces/javax.faces.resources/images/ui-icons_9bcc60_256x40.png?ln=primefaces-mint-choc")

Qui permettra à JSF d'intercepter l'appel et de trouver la bonne ressource. Visiblement, ce n'est pas le cas, ce qui me laisse supposer que cette référence se trouve dans un fichier qui n'a pas été délivré par jsf. Où se trouve cette ligne?

**GDS_Strou** · 16/12/2014, 14h14

cette ligne se trouve dans le fichier theme.css du jar
--> .ui-state-default .ui-icon{background-image:url("#{resource['primefaces-mint-choc:images/ui-icons_9bcc60_256x240.png']}");}

Il n'y a pas de S à resource alors que dans l'arbo de mon projet il y en a un (voir PJ)

Nom : arbo.png
Affichages : 283
Taille : 130,9 Ko

Nom : arbo.png
Affichages : 283
Taille : 130,9 Ko

Je joins en plus l'erreur dans firebug. Lorsque je passe la souris sur les background-image de la case à cocher active (selectionner un jour), j'ai le message : "failed to load the given URL"

Nom : firebug.png
Affichages : 260
Taille : 220,7 Ko

Nom : firebug.png
Affichages : 260
Taille : 220,7 Ko

**OButterlin** · 16/12/2014, 14h33

Le répertoire "resources" à la racine du projet web est spécial, il représente les différentes ressources du projet.
Le "resource" dans le css est un mot-clé permettant d'accéder à une de ces ressources.
Dans ton cas, le chemin me paraît correcte

**GDS_Strou** · 16/12/2014, 14h38

alors je ne vois pas du tout d'où vient se problème

J'ai joins l'erreur firebug dans mon message précédent, si cela peut vous aiguiller ?

**OButterlin** · 16/12/2014, 15h19

Il y a quelque chose qui me semble anormal dans l'url de l'image, je n'ai pas la même chose, c'est peut-être dû à une différence de version.
Quelle version de Primefaces utilises-tu ?

**GDS_Strou** · 16/12/2014, 15h57

j'utilise primefaces 5.0.et primefaces-extensions-2.0.0

Et l'URL vient du JAR de all-themes-1.0.8.jar

**OButterlin** · 16/12/2014, 16h13

J'ai fait un test avec ton theme et l'URL n'est pas la même, il se pourrait que le jar "all" ne soit pas bon.
Peux-tu télécharger le jar directement ici et me dire ce que ça fait (en remplaçant le all.jar) ?

La croix ne s'affiche pas dans mon p:selectManyCheckBox mais la valeur est bien selectionnée

JSF Java

Discussions similaires

Partager

Partager