Balises JSF et style CSS

**azassma** · 06/09/2012, 01h22

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 :

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

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

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.

**simplicity4k** · 06/09/2012, 16h54

Code :

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

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/

**Riadh-A** · 06/09/2012, 17h18

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 :

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

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

inspecter l'élément inputText:

Code :

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

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 :

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

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

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

**simplicity4k** · 06/09/2012, 17h31

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.

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 :

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

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

inspecter l'élément inputText:

Code :

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

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 :

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

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

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

**Riadh-A** · 06/09/2012, 17h38

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

**simplicity4k** · 06/09/2012, 17h57

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 :

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

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é ...

**azassma** · 06/09/2012, 18h02

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 :

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

1
2
 
Setter not found for property class

**simplicity4k** · 06/09/2012, 18h08

styleClass comme attribut

Code :

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

<h:outputText styleClass="maClasse" value="toto" />

**N4rc0** · 07/09/2012, 10h40

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.

Balises JSF et style CSS

JSF Java

Discussions similaires

Partager

Partager