2009-11-29 17 views
11

¿Qué es la sintaxis para agregar un archivo CSS externo a jsf?CSS externo para JSF

Intenté en ambos sentidos. No me ayudó.

1.

<head> 
<style type="text/css"> 
    @import url("/styles/decoration.css"); 
</style> 
</head> 

2.

<head> 
    <link rel="stylesheet" type="text/css" href="/styles/decoration.css" /> 
</head> 

Respuesta

11

Supongo que BalusC puede tener tu respuesta.

Sin embargo, me gustaría añadir algunos puntos adicionales:

Supongamos que está ejecutando la de los subdirectorios de la aplicación web. Como mi experiencia, es posible que desee probar esto: <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>

El enlace '${facesContext.externalContext.requestContextPath}/' le ayudará a volver inmediatamente a la raíz del contexto.

EDITAR: Se ha eliminado a partir de /'href="/${facesContext.ex...'. Si la aplicación se ejecuta en el contexto raíz, la url de CSS comienza con // y los navegadores no pudieron encontrar el CSS, ya que se interpreta como http://css/style.css.

+1

sí, eso funcionó para mí, sin la primera barra – sergionni

7

nunca he utilizado la primera, pero la segunda es sintácticamente válida y debe trabajar técnicamente. Si no funciona, entonces la URL relativa en el atributo href es simplemente incorrecta.

En las URL relativas, la barra diagonal / apunta a la raíz del dominio. Por lo tanto, si la página JSF se solicita, por ejemplo, en http://example.com/context/page.jsf, la URL CSS apuntará definitivamente al http://example.com/styles/decoration.css. Para conocer la URL relativa válida, necesita conocer la URL absoluta tanto de la página JSF como del archivo CSS y extraer la una de la otra.

Let supongo que el archivo CSS se encuentra realmente en http://example.com/context/styles/decoration.css, entonces usted necesita para eliminar la barra inicial de modo que es relativo a la contexto actual (el de la page.jsp):

<link rel="stylesheet" type="text/css" href="styles/decoration.css" /> 
+0

extraña, esto no ayuda, tratará también el método propuesto a continuación y anote los resultados pronto – sergionni

+0

Dile a la URL absoluta tanto de la página JSF y el archivo CSS, entonces podemos ayudar a hacer los cálculos. – BalusC

+0

JSF: c: \ sample \ src \ Main \ webapp \ store.xhtml css: c: \ sample \ src \ Main \ webapp \ styles \ decoration.css – sergionni

3

Creo que el problema de Sergionni es doble.

Primero, es cierto que el llamado pariente raíz es, como dijo BalusC, de hecho un dominio relativo, entonces, en el ejemplo es relativo a http://example.com/ y no a http://example.com/context/.

lo que debe especificar

<link rel="stylesheet" type="text/css" href="${request.contextPath}/styles/decoration.css" /> 

Por cierto BalusC, felicitaciones, esta es la primera vez que veo esto explicaba correctamente! Luché mucho para descubrir esto.

Pero, si desea simplificar y sugerir:

<link rel="stylesheet" type="text/css" href="styles/decoration.css" /> 

suponiendo que el directorio de estilo es una sibbling de la página actual, entonces puede tener el segundo problema:

Usted está entonces en el método relativo de URL y, si usted ingresó en esta página mediante un reenvío y no una redirección, su navegador puede ser engañado y no puede seguir la ruta relativa.

Para resolver este segundo problema, debe añadir lo siguiente:

<head> 
    <base href="http://${request.serverName}:${request.serverPort}${request.contextPath}${request.servletPath}" /> 

El elemento de base debe preceder a cualquier enlace.

Con el comando base, le dice a su navegador dónde está realmente.

Espero que ayude.

Y por cierto otra cosa extraña en este maravilloso mundo JSF:

para enlazar desde una página a su plantilla facelet, la raíz de enlace relativa es, esta vez, incluyendo el contexto así:

<ui:composition template="/layouts/layout.xhtml"> 

estos links realmente a http://example.com/context/layouts/layout.xhtml

y no a http://example.com/layouts/layout.xhtml como por <a> o <link>.

Jean-Marie Galliot

+1

Simplemente '' es suficiente. Y con respecto a "algo bizzare", ese es el comportamiento documentado de Facelets. Siempre son relativos a la raíz de contexto, no a la raíz del dominio. – BalusC

+0

¿Qué es raíz de contexto, qué es raíz de dominio? –

1

Prueba el siguiente código para importar el css en su page.It JSF va a funcionar con seguridad.

<style media="screen" type="text/css"> 

    @import "#{facesContext.externalContext.request.contextPath}/css/Ebreez.css" 

</style> 
4

El método actualizado JSF 2.0 es un poco más ordenado. En lugar de:

<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/compass.css"/> 

ahora tienes que hacer esto:

<h:outputStylesheet library="css" name="compass.css"/> 

y el recurso de hoja de estilo debe ser colocado en resources\css. Cuando los recursos son al mismo nivel que el WEB-INF.

+0

Teniendo en cuenta el uso correcto del atributo de biblioteca como se explica [aquí] (http://stackoverflow.com/q/11988415/840977) – Louise

Cuestiones relacionadas