web-dev-qa-db-fra.com

JSF / Facelets: le fichier CSS n'est pas reconnu à l'aide de la balise <h: outputStylesheet>

Je travaille sur un projet utilisant JSF/Facelets. Je souhaite effectuer des modifications CSS sur mon View XHTML, mais rien ne se produit lorsque je déploie mon application Web sur mon serveur Tomcat. J'ai essayé de nombreuses astuces mais j'ai le même résultat.

Quoi qu'il en soit, 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 ceci est le modèle principal "Template.html" incluant "Header.html" et "Footer.html", où je mets 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>

Voici enfin mon "Main.xhtml" qui inclut le template "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 :)

htmlcssjsffacelets
18
ayoubuntu

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

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

De plus, vous devez vous assurer que le css/styles.css le fichier a été placé dans le /resources sous-dossier du contenu Web public.

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

Quant à votre tentative d'utiliser l'attribut library, soyez prudent avec cela, en utilisant library="css" n'est pas tout à fait correct dans ce contexte. Voir aussi: A quoi sert la bibliothèque de ressources JSF et comment doit-elle être utilisée?

51
BalusC