Saltar al contenido

¿Cómo agrego imágenes de fondo en una aplicación JSF usando richfaces y CSS?

Solución:

Yo solo tuve el mismo problema con JSF 2.0. Tuve que usar un CSS y la solución con la ruta relativa tampoco funcionó para mí (como publicó Choghere).

En mi libro leí eso cuando usa Facelets como VDL (Ver lenguaje de declaración) es posible usar expresiones incluso en una página HTML simple. Entonces tuve la idea de poner un EL directamente en mi CSS. Nota: No tuve que cambiar el nombre del archivo ni nada.

Aquí esta lo que hice. pero primero mi estructura de archivos:

  • /resources/common/overlay.xhtml -> este incluye el siguiente CSS (es un componente compuesto)
  • /resources/common/overlay.css
  • /resources/images/logo.png

Ahora aquí viene el CSS:

.someclass { 
    background-image:url("#{resource['images:logo.png']}"); 
}

en este caso recurso es un objeto implícito de JSF 2, imagenes es el Biblioteca donde JSF debería buscar (jsf espera todas las bibliotecas / archivos en los recursos, al menos el ResourceHandler predeterminado) y luego el nombre del recurso.

Para estructuras más profundas sería:

#{resource['images/folder:logo.png']}

Espero que ayude 😉

Suponiendo que el elemento en cuestión está obteniendo un class="rich-ddmenu-label" aplicado a él, es probable que el problema sea la ruta a la imagen de fondo.

La ruta es relativa a la ubicación del CSS. Si está en un archivo externo, debería ser relativo a eso, por ejemplo:

/css/styles.css
/images/the_image.gif

el CSS debería ser:

background-image: url("../images/the_image.gif");

Si el CSS está integrado en la página HTML, será relativo a la ruta actual. Entonces, si la página se encuentra en http://server/path/to/page, buscará la imagen en http://server/path/to/page/images/the_image.gif, cuando probablemente quisiste decir http://server/images/the_image.gif.

Si eso no responde, publique el HTML generado.

¿Está siguiendo el ejemplo del sitio de demostración de Richfaces? es decir. usar una faceta y colocar la imagen y el texto dentro de un elemento adjunto (por ejemplo, un intervalo o div)

<rich:dropDownMenu>
    <f:facet name="label"> 
        <h:panelGroup>
            <h:graphicImage value="/images/icons/copy.gif" styleClass="pic"/>
            <h:outputText value="File"/>
        </h:panelGroup>
    </f:facet>
    <rich:menuItem submitMode="ajax" value="New"
        action="#{ddmenu.doNew}" icon="/images/icons/create_doc.gif">
    </rich:menuItem>
    ...
</rich:dropDownMenu>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *