Necesita ayuda para mostrar una imagen de icono en un botón de comando

Solo una necesidad básica pero no puede hacer que funcione. Me gustaría tener un botón de primas para mostrar mi imagen, sin texto.Necesita ayuda para mostrar una imagen de icono en un botón de comando

Pero lo que obtengo es un botón que contiene solo un carácter ^ y NO muestra la imagen, que solo tiene un tamaño de 16x16.

Por lo tanto, este es el botón PrimeFaces:

<p:commandButton image="ui-icon-csv" title="CSV Document" ajax="false"> 
    <p:dataExporter type="csv" target="gridRPBDetails" 
     fileName="#{tInputBean.exportFilename}" /> 
</p:commandButton>

Este es el archivo css:

.ui-icon-csv { 
    background-image: url(images/csv_small.png); 
}

Y este es el código HTML generado para el botón :

<button type="submit" onclick=";" 
    name="gridRPBDetails:j_idt82" id="gridRPBDetails:j_idt82" 
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" 
    role="button" aria-disabled="false"> 
     <span class="ui-button-icon-primary ui-icon ui-icon-csv"></span><span class="ui-button-text">CSV Document</span> 
</button>

Y para demostrar la imagen accesible, lo intento este URL, y de hecho lo muestra la imagen:

http://albert:8080/mywebapp/faces/javax.faces.resource/images/csv_small.png

Im usando Tomcat 7, y estos son mis dependencias:

<dependency> 
    <groupId>org.primefaces</groupId> 
    <artifactId>primefaces</artifactId> 
    <version>2.2.1</version> 
</dependency> 
<dependency> 
    <groupId>com.sun.faces</groupId> 
    <artifactId>jsf-api</artifactId> 
    <version>2.0.4-b09</version> 
    <scope>compile</scope> 
</dependency> 
<dependency> 
    <groupId>com.sun.faces</groupId> 
    <artifactId>jsf-impl</artifactId> 
    <version>2.0.4-b09</version> 
    <scope>compile</scope> 
</dependency>

Todas las ideas Qué salió mal ?

¡Gracias!

Fuente

2011-05-11 bertie

¿Estás seguro de que tu CSS encuentra la imagen (ruta relativa correcta)? Intenta consultarlo con las herramientas de desarrollo de Chrome/Firefox para detectar cualquier error 404 si solicitas la página que contiene el botón. –

@Matt Handy: Hola, gracias por su respuesta. Sí, como se indica en la publicación original, puedo ver la imagen usando esa URL. Y también olvidé mencionar que logré ver la imagen también usando Firebug. Pero he encontrado una solución después de algunos ajustes alrededor de la CSS. Por favor, consulte la respuesta a continuación si le interesa. Gracias ! – bertie

Después de investigar usando firebug, descubrí que el culpable es de las cosas de CSS que definí.

Así que estos son los cambios que hice para que esto funcione.

El botón JSF:

<p:commandButton image="ui-icon-xls" title="Excel Document" ajax="false"> 
    <p:dataExporter type="xls" target="gridRPBDetails" 
     fileName="#{tInputBean.exportFilename}" /> 
</p:commandButton>

El CSS:

.ui-state-default .ui-icon-xls { 
    background-image: url(images/excel_small.png); 
}

Y aquí está el código HTML generado:

<button type="submit" title="Excel Document" onclick=";" 
    name="gridRPBDetails:j_idt81" id="gridRPBDetails:j_idt81" 
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" 
    role="button" aria-disabled="false"> 
    <span class="ui-button-icon-primary ui-icon ui-icon-xls"></span> 
    <span class="ui-button-text">ui-button</span> 
</button>

¡Gracias!

Fuente

2011-05-12 10:31:10 bertie

Primefaces proporcionan la graphicImage como se muestra en su showcase-labs (broken link):

<p:commandLink ajax="false"> 
    <p:graphicImage value="/images/excel.png" /> 
    <p:dataExporter type="xls" target="tbl" fileName="cars" /> 
</p:commandLink>

puede ser útil de alguna manera a alguien.

_{* For PrimeFaces 5.2, follow to this showcase-labs link. Tenga en cuenta que, en ese caso, el código anterior no funcionaría.}

Fuente

2012-02-24 16:33:34 falsarella

@Zbyszek ¿Qué tal esta respuesta? – Andy

escritura ui-widget antes de que el nombre de la clase icono

.ui-widget .ui-icon-xls { 
    background-image: url(images/excel_small.png); 
}

la .ui-state-default no va a hacer que sea visible en otros componentes como <p:menuitem/> y <p:menuButton/>

Fuente

2012-03-12 12:24:12

Ya no juego con este proyecto, y no pude probarlo. Pero creo que esta es la respuesta más segura. Gracias por compartir. – bertie

no funciona :(para mí – Zbyszek

¡Gran solución! Pero las clases de Primefaces cambian mucho, es por eso que puede que no funcione para algunos y podría interrumpir las actualizaciones de la versión ... A quienes puede ayudar: inspeccionar el html generado y/o vea la documentación de estilo de las primeras caras correspondiente de la versión que está utilizando, ¡entonces puede hacer que funcione con css! – falsarella

Cuando se utiliza commandButton, es importante que el tamaño del archivo PNG sea 16 x 16, porque una imagen más grande podría no mostrarse correctamente o no mostrarse en absoluto.

Fuente

2013-05-05 05:07:19 user2351270

Necesita ayuda para mostrar una imagen de icono en un botón de comando

Respuesta

Cuestiones relacionadas