2012-09-05 53 views
16

Estoy trabajando en un proyecto utilizando JSF/Facelets. Quiero hacer algunos cambios CSS en mi View XHTML, pero no sucede nada cuando despliego mi aplicación web en mi servidor Tomcat. He intentado muchos trucos, pero tengo el mismo resultado.JSF/Facelets: el archivo CSS no se reconoce con la etiqueta <h: outputStylesheet>

De todos modos, aquí está mi "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; 
} 

Y esta es la plantilla principal "template.html" incluyendo "header.html" y "footer.html", donde pongo mi " styles.css" usando la etiqueta:

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

Anf finalmente aquí está mi "Main.xhtml" que incluyen la plantilla "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> 

Gracias de antemano :)

+1

¿puede verificar en su navegador que su css tiene b een cargado – Abhi

+1

¿cómo puedo verificar eso? – ayoubuntu

+1

Haga clic con el botón derecho en la página del navegador y * Ver fuente * y/o presione F12 en Chrome/IE9/Firebug y marque la sección "Red". – BalusC

Respuesta

44

El <h:outputStylesheet> (y <h:outputScript>) requiere un <h:head>, pero has existe un <head>. Arreglarlo en consecuencia.

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

Además, es necesario asegurarse de que el archivo css/styles.css se ha colocado en el /resources subcarpeta de la webcontent pública.

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

En cuanto a su intento de utilizar el atributo library, tener cuidado con esto, utilizando library="css" no es del todo correcto en este contexto. Consulte también: What is the JSF resource library for and how should it be used?

+0

Sí, he comprobado esto antes, y puse mi styles.css en la misma ruta que usted dijo: WebContent/resources/css/styles.css – ayoubuntu

+0

¿También leyó la primera parte de mi respuesta? – BalusC

+0

En el árbol, ¿no debería ser 'WebContent/resources/css/styles.css' en lugar de' WebContent/resources/css/style.css'? – user454322

-3

Añadir recursos carpeta bajo la WebContent

y dentro de los recursos crear la carpeta css

continuación, acceder a los archivos como esta sección

h:outputStylesheet library="css" name="myNewStylesFile.css" target="head" bajo h:head que usted no lo hizo agregar

+3

Avalé porque considero esto como correo no deseado, es lo mismo que BalusC respuesta con palabras eliminadas, respondidas 3 años después. –

Cuestiones relacionadas