20 votes

JSF/Facelets : Le fichier CSS n'est pas reconnu par la balise <h:outputStylesheet>.

Je travaille sur un projet utilisant JSF/Facelets. Je veux faire quelques changements CSS sur ma vue XHTML, mais rien ne se passe quand je déploie mon application web dans mon serveur Tomcat. J'ai essayé de nombreuses astuces mais j'ai obtenu le même résultat.

Bref, voici mon "styles.css" :

body { width: 750px; }

#header 
{
width:              100%;
font-size:          36px;
font-weight:        bold;
line-height:        48px;
background-color:   navy;
color:              white;
}

#footer
{
width:              100%;
font-weight:        bold;
background-color:   navy;
color:              white;
}

Et voici le modèle principal "Template.html" comprenant "Header.html" et "Footer.html", où j'ai placé mon "styles.css" en utilisant la balise :

<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<h:outputStylesheet name="css/styles.css" />
    <!-- i've also tried this one, using the "library" attribute -->
    <!--
     <h:outputStylesheet library="css" name="styles.css" />
    -->
</head>
<h:body>
<h:panelGroup id="page" layout="block">

    <h:panelGroup id="header" layout="block">
        <ui:insert name="header">
            <ui:include src="Header.html" />
        </ui:insert>
    </h:panelGroup>

    <h:panelGroup id="container" layout="block">
        <h:panelGroup id="content" layout="block">
            <ui:insert name="content">CONTENT</ui:insert>
        </h:panelGroup>
    </h:panelGroup>

    <h:panelGroup id="footer" layout="block">
        <ui:insert name="footer">
            <ui:include src="Footer.html" />
        </ui:insert>
    </h:panelGroup>

</h:panelGroup>

</h:body>
</html>

Et enfin voici mon "Main.xhtml" qui inclut le modèle "Template.html" :

 <?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">
 <ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich" template="Template.html">
<h:body>
    <ui:define name="content">
        <h:form>
            <h:inputText title="inputText"></h:inputText>
            <h:commandButton value="OK"></h:commandButton>
        </h:form>
    </ui:define>
</h:body>
 </ui:composition>

Merci d'avance :)

56voto

BalusC Points 498232

El <h:outputStylesheet> (et <h:outputScript> ) nécessite un <h:head> mais vous avez là un <head> . Corrigez-la en conséquence.

<h:head>
    <h:outputStylesheet name="css/styles.css" />
</h:head>

En outre, vous devez vous assurer que le css/styles.css a été placé dans le fichier /resources sous-dossier du contenu web public.

WebContent
 |-- resources
 |    `-- css
 |         `-- styles.css
 :

Quant à votre tentative d'utiliser le library soyez prudent avec cet attribut, en utilisant library="css" n'est pas tout à fait correct dans ce contexte. Voir aussi : À quoi sert la bibliothèque de ressources JSF et comment l'utiliser ?

-4voto

Aman birjpuriya Points 127

Ajouter ressources sous le dossier Contenu Web

et dans les ressources, créez un dossier css

puis accéder aux fichiers comme ceci

h:outputStylesheet library="css" name="myNewStylesFile.css" target="head" sous h:head que vous n'avez pas ajouté

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X