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

Version imprimable

Voir 40 message(s) de cette discussion en une page

21/11/2014, 09h55
GDS_Strou

1 pièce(s) jointe(s)

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

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...
Pièce jointe 161928

Quelqu'un sait il de quoi cela peut venir ?

Merci d'avance
21/11/2014, 10h49
OButterlin

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

Peux-tu montrer le code de ta page ?

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

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

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:

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:

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"); }

voici le code de mon html et de mon css :

HTML

Code:

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:

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']
        }
 
       ");
}

24/11/2014, 14h11
tchize_
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:

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

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é.
24/11/2014, 14h52
GDS_Strou
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:

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 :?
24/11/2014, 15h13
tchize_

essaie déjà avec le all-theme 1.0.10, c'est peut être réglé? Sinon prends un autre theme?
24/11/2014, 15h46
GDS_Strou

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 :?
24/11/2014, 16h11
GDS_Strou

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
25/11/2014, 12h59
GDS_Strou

Faux espoir, ce matin en relançant l'application, les croix ne réapparaissent pas :(
16/12/2014, 12h41
GDS_Strou
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:

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
16/12/2014, 13h54
tchize_
Normalement, JSF est censé remplacé les références:
Code:

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

Code:

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?
16/12/2014, 14h14
GDS_Strou

2 pièce(s) jointe(s)

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)

Pièce jointe 164004

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"

Pièce jointe 164006
16/12/2014, 14h33
OButterlin

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
16/12/2014, 14h38
GDS_Strou

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 ?
16/12/2014, 15h19
OButterlin

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 ?
16/12/2014, 15h57
GDS_Strou

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

Et l'URL vient du JAR de all-themes-1.0.8.jar
16/12/2014, 16h13
OButterlin

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

Voir 40 message(s) de cette discussion en une page