style - Cómo hacer referencia al recurso de imagen JSF como URL de imagen de fondo de CSS

style jsf

Question

A menudo, cambio las imágenes de mis botones usando el atributo de imagen, pero alguien me dijo que es una buena práctica hacerlo usando .css Lo intenté pero no puedo, ¿qué estoy haciendo mal? Esto es lo que hice:

1-Los recursos de mi proyecto se almacenan así:

2-Así es como creé el style.css para acceder a la imagen

.c2 {
background: url(/resources/images/smiley.jpg);
}

3-Así es como accedo al CSS desde el cuerpo de mi página (estoy seguro de que es correcto porque otras clases en el mismo documento funcionan en otras etiquetas en esta página)

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

4-Esta es la forma de crear un CommandButton de muestra que usa la clase css apropiada

<h:commandButton styleClass="c2"/>

Creo que el problema está en .css, probé algunas combinaciones pero ninguna funcionó:

background-image: url(/resources/images/smiley.jpg);
background: url(resources/images/smiley.jpg);
background: url(smiley.jpg);
background: url(../smiley.jpg);

¿Dónde está el error?

actualización logré que funcione con el siguiente código:

.c2 {
background: url("#{resource[''images:smiley.jpg'']}");
}

Observe la diferencia cuando uso css (derecha) y cuando uso el atributo de imagen (izquierda)

¿Cómo podría resolver esto para que se muestre la imagen de espera?

Answer 1

Al importar hojas de estilo CSS por <h:outputStyleSheet> , <h:outputStyleSheet> importa y procesa la FacesServlet mediante /javax.faces.resource/* . Mire el elemento <link> generado que apunta a la hoja de estilo en cuestión y lo comprenderá.

En su lugar, debe cambiar todas las dependencias de url() para usar #{resource[''library:location'']} . JSF lo auto-sustituirá con la ruta correcta. Dada la estructura de su carpeta, debe reemplazar

.c2 {
background: url("/resources/images/smiley.jpg");
}

por

.c2 {
background: url("#{resource[''images/smiley.jpg'']}");
}

Suponiendo que su nombre de contexto de la aplicación web es el playground y que su FacesServlet está mapeado en *.xhtml , entonces lo anterior debe terminar en el archivo CSS devuelto de la siguiente manera

.c2 {
background: url("/playground/javax.faces.resource/images/smiley.jpg.xhtml");
}

Se debe tener en cuenta que la implementación JSF solo se determinará durante la primera solicitud en el archivo CSS si contiene expresiones EL. Si no lo hace, la eficiencia ya no intenta evaluar EL el contenido del archivo CSS. Por lo tanto, si agrega una expresión EL a un archivo CSS por primera vez, entonces deberá reiniciar toda la aplicación para que JSF vuelva a verificar el archivo CSS.

En caso de que desee hacer referencia a un recurso de una biblioteca de componentes como PrimeFaces, prefija el nombre de la biblioteca, separado con : Por ejemplo, cuando estás utilizando el tema "Inicio" de PrimeFaces, que está identificado por primefaces-start

.c2 {
background: url("#{resource[''primefaces-start:images/ui-bg_gloss-wave_50_6eac2c_500x100.png'']}");
}

Esto se generará como

.c2 {
background: url("/playground/javax.faces.resource/images/ui-bg_gloss-wave_50_6eac2c_500x100.png.xhtml?ln=primefaces-start");
}

Ver también:

• ¿Cómo hacer referencia al recurso CSS / JS / image en la plantilla Facelets?
• Cambiar el prefijo JSF al mapeo de sufijo me obliga a volver a aplicar el mapeo en imágenes de fondo CSS

Sin relación con el problema concreto, la forma en que usa la library no es del todo correcta. Está destinado a ser el identificador / subcarpeta común de todos los recursos CSS / JS / image relacionados. La idea clave es poder cambiar todo el look''n''feel simplemente cambiando la library (lo que EL puede hacer). Parece sin embargo confiar en la biblioteca predeterminada . En ese caso, podría omitir la library de su <h:outputStylesheet> y #{resource} .

<h:outputStylesheet name="css/style.css" />

Ver también:

• ¿Para qué sirve la biblioteca de recursos JSF y cómo se debe usar?

Answer 2

Ya que tuve problemas con esto un poco y mientras que BalusC ya ha respondido la pregunta, pero podría ser capaz de comentar por qué esto está sucediendo. Tengo 5 proyectos EAR que consisten en un paquete de proyectos WAR y EJB. Luego tengo un proyecto de WAR autónomo desplegado por sí mismo. El siguiente código funcionó perfecto con todos los EAR:

<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Super FIPS Calculator PRO</title>
<style>
.Bimage{background-image:url(#{request.contextPath}/img/phonetoolsBackground.png);}
</style>
</h:head>
<h:body styleClass="Bimage">
.
.
.

Donde la carpeta "img" estaba dentro de la carpeta WEB-INF pero para el proyecto EAR, no funcionaría e incluso no cargaría la imagen en el navegador escribiendo manualmente la URL. Verifiqué que el html resultante era 100% exacto. Entonces, toda la charla sobre "recursos" me hizo pensar que tal vez era una "seguridad". problema de algún tipo que no parece tener sentido entre las implementaciones WAR y EAR así que creé una carpeta de "recursos" en la raíz de la aplicación web, por ejemplo, en Eclipse su padre sería WebContent, y luego agregué una subcarpeta a los recursos llamados "img" , coloqué mi imagen allí.

El código ahora se ve así:

<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Super FIPS Calculator PRO</title>
<style>
.Bimage{background-image:url(#{request.contextPath}/resources/img/phonetoolsBackground.png);}
</style>
</h:head>
<h:body styleClass="Bimage">
.
.
.

Y ahora la imagen se muestra. Una vez más, sin intentar secuestrar la respuesta completa de Balusc, solo quería mencionarlo en caso de que alguien se encontrara con un problema similar. ¡Si alguien quiere que abra una Q y una IA por separado!

Ahh sí, esto fue en JBoss EAP 7, Servlet API 3.1, Facelets 2.2, Rich Faces 4.5.17 Java 1.8.

Edit @ Basil-Bourque answer Para qué se utiliza WEB-INF en una aplicación web Java EE parece bastante relevante

Pero sigue siendo un poco confuso en cuanto a cómo puede una WAR dentro de un EAR acceder a esa ubicación, pero no a una WAR independiente.