Balises JSF et style CSS

Version imprimable

Bonjour,

J'essaye depuis longtemps de ne pas mettre le style directement dans la balise mais de le mettre dans un fichier de style CSS mais ça ne marche pas.
Voila mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
 <h:head>
        <link href="/CONTENTIEUX-APP-war/faces/resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="/CONTENTIEUX-APP-war/faces/resources/css/acceuil.css" rel="stylesheet" type="text/css" />
    </h:head>
    <ui:composition template="./TemplateAcceuil.xhtml">
        <ui:define name="left">
            <h:form id="form">
                <p:growl id="messages"/>
                <p:slideMenu id="slidmenu">
                    <p:submenu label="AFFAIRES CONTENTIEUSES">
                        <p:menuitem value="Créer une affaire"/>
                        <p:menuitem value="Modifier une affaire"/>
                        <p:menuitem value="Classer une affaire"/>
                    </p:submenu>
               </p:slideMenu>
            </h:form>
        </ui:define>
    </ui:composition>
</html>

Fichier CSS

Code:

1
2
3
4
5
#slidmenu{
    width: 300px;
    margin-left: 25px;
    margin-top: 5px;
}

Quelqu'un saurait-il m'expliquer ce qui ne va pas ?

Merci d'avance pour votre aide.

Code:

1 2 <link href="#{facesContext.externalContext.requestContextPath}/css/default.css" rel="stylesheet" type="text/css" />
ou

jsf2, plus propre

http://www.mkyong.com/jsf2/how-to-in...ts-css-in-jsf/

Bonjour ,

L'id d'un composant intégré dans une formulaire JSF est préfix par l'id du formulaire suivi du caractère deux points. Essaye avec un inspecteur d'élément (comme l'inspecteur d'élément de google chrome ), et tu vas remarquer que l'id d'un composant dans une formulaire est sous la forme "id_form:id_composant".

Voila un exemple :
index.xhtml

Code:

1
2
3
4
 
<h:form id="form">                
      <h:inputText id="nom" />                
</h:form>

inspecter l'élément inputText:

Code:

1
2
3
4
5
 
<form id="form" name="form" method="post" action="/testID/faces/index.xhtml" enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="form" value="form">
    <input id="form:nom" type="text" name="form:nom"><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="8260917595372424658:-7277619820485900143" autocomplete="off">
</form>

le composant <h:inputText id="nom" /> devient <input id="form:nom"....

Pour résoudre ton problème, tu dois utiliser l’attribue styleClass. Voila le résultat :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<html>
 <h:head>
        <link href="/CONTENTIEUX-APP-war/faces/resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="/CONTENTIEUX-APP-war/faces/resources/css/acceuil.css" rel="stylesheet" type="text/css" />
    </h:head>
    <ui:composition template="./TemplateAcceuil.xhtml">
        <ui:define name="left">
            <h:form id="form">
                <p:growl id="messages"/>
                <p:slideMenu id="slidmenu" class="slidmenu">
                    <p:submenu label="AFFAIRES CONTENTIEUSES">
                        <p:menuitem value="Créer une affaire"/>
                        <p:menuitem value="Modifier une affaire"/>
                        <p:menuitem value="Classer une affaire"/>
                    </p:submenu>
               </p:slideMenu>
            </h:form>
        </ui:define>
    </ui:composition>
</html>

CSS

Code:

1
2
3
4
5
6
 
.slidmenu{
    width: 300px;
    margin-left: 25px;
    margin-top: 5px;
}

Le problème rencontré actuellement est un problème d'import du fichier CSS si j'ai bien compris (à vérifier avec firebug ou autre effectivement) car le chemin ne semble pas être le bon, et non pas un problème de récupération d'ID dans l'immédiat.
Citation:
Envoyé par Riadh-A
Bonjour ,

L'id d'un composant intégré dans une formulaire JSF est préfix par l'id du formulaire suivi du caractère deux points. Essaye avec un inspecteur d'élément (comme l'inspecteur d'élément de google chrome ), et tu vas remarquer que l'id d'un composant dans une formulaire est sous la forme "id_form:id_composant".

Voila un exemple :
index.xhtml
Code:

1 2 3 4 <h:form id="form"> <h:inputText id="nom" /> </h:form>
inspecter l'élément inputText:
Code:

1 2 3 4 5 <form id="form" name="form" method="post" action="/testID/faces/index.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="form" value="form"> <input id="form:nom" type="text" name="form:nom"><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="8260917595372424658:-7277619820485900143" autocomplete="off"> </form>
le composant <h:inputText id="nom" /> devient <input id="form:nom"....

Pour résoudre ton problème, tu dois utiliser l’attribue styleClass. Voila le résultat :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <html> <h:head> <link href="/CONTENTIEUX-APP-war/faces/resources/css/default.css" rel="stylesheet" type="text/css" /> <link href="/CONTENTIEUX-APP-war/faces/resources/css/acceuil.css" rel="stylesheet" type="text/css" /> </h:head> <ui:composition template="./TemplateAcceuil.xhtml"> <ui:define name="left"> <h:form id="form"> <p:growl id="messages"/> <p:slideMenu id="slidmenu" class="slidmenu"> <p:submenu label="AFFAIRES CONTENTIEUSES"> <p:menuitem value="Créer une affaire"/> <p:menuitem value="Modifier une affaire"/> <p:menuitem value="Classer une affaire"/> </p:submenu> </p:slideMenu> </h:form> </ui:define> </ui:composition> </html>
CSS
Code:

1 2 3 4 5 6 .slidmenu{ width: 300px; margin-left: 25px; margin-top: 5px; }

06/09/2012, 16h38
Riadh-A

Citation:

Le problème rencontré actuellement est un problème d'import du fichier CSS si j'ai bien compris (à vérifier avec firebug ou autre effectivement) car le chemin ne semble pas être le bon, et non pas un problème de récupération d'ID dans l'immédiat.

même s'il y a un problème d'import du fichier le problème de l'id existe. Essaye avec un petit exemple pour que tu sois convaincu
06/09/2012, 16h57
simplicity4k
Citation:

Envoyé par Riadh-A

même s'il y a un problème d'import du fichier le problème de l'id existe. Essaye avec un petit exemple pour que tu sois convaincu

C'était juste une remarque innocente et non pas un méchanceté gratuite :)

Mais bon la solution pour m'en convaincre aurait été de me sortir :
Code:

1 2 3 4 5 6 #form\:slidmenu { width: 300px; margin-left: 25px; margin-top: 5px; }
dans le CSS ...

ou alors encore <h:form id="form" prependId="false"></h:form> d'avoir un id "clean" dans le html généré ...
06/09/2012, 17h02
azassma
Merci pour vos réponses.
En fait le problème ne se trouve pas dans le chemin du fichier css parce que les styles que je mets pour les balises simples de HTML s'applique. Et pour l'attribut class, ça me génére une erreur sur le navigateur
Code:

1 2 Setter not found for property class
06/09/2012, 17h08
simplicity4k

styleClass comme attribut

Code:

<h:outputText styleClass="maClasse" value="toto" />
07/09/2012, 09h40
N4rc0

Il se peut que les modifications Css apportées ne soient pas visible pour une autre raison. C'est que les styles Css appliqués par Primefaces sur leurs composants écrasent les demandes faites manuellement.
Je confirme que l'inspecteur d'élément devient indispensable si l'on veut personnaliser son interface.