jsf - examples - primefaces themes

Viendo el botón de comando solo con imagen

Question

Estoy intentando mostrar un botón con la imagen solo en mi página, pero todo lo que veo es el botón con ^. A continuación se muestra el código de mi botón:

<p:commandButton onclick="lineSearch.show();" image="backgroung-image:url(/images/title_logo.jpg)"/>
<p:dialog header="Modal Dialog" widgetVar="lineSearch" modal="true" onCloseUpdate="lineIdField" showEffect="scale" hideEffect="explode">
<ui:include src="lineSearch.xhtml"/>
</p:dialog>

La imagen existe en la carpeta de imágenes. El botón se representa como sigue en la página:

<button id="j_idt23:j_idt27" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" type="submit" onclick="lineSearch.show();;PrimeFaces.ab({formId:''j_idt23'',source:''j_idt23:j_idt27'',process:''@all''});return false;" name="j_idt23:j_idt27" role="button" aria-disabled="false">
<span class="ui-button-icon-primary ui-icon backgroung-image:url(/images/title_logo.jpg)"></span>
<span class="ui-button-text">ui-button</span>
</button>
<script type="text/javascript">
widget_j_idt23_j_idt27 = new PrimeFaces.widget.CommandButton(''j_idt23:j_idt27'', {text:false,icons:{primary:''backgroung-image:url(/images/title_logo.jpg)''}});
</script>

¡¡¡Gracias!!!

Answer 1

Aún más fácil:

<p:commandButton icon="ui-icon-XXXXX">

Diferentes iconos que puede elegir: https://api.jqueryui.com/theming/icons/ y http://www.primefaces.org/showcase/ui/misc/fa.xhtml

Answer 2

El atributo de image debe referir un nombre de clase CSS, no una propiedad CSS simple. Entonces, esto debería hacer:

<p:commandButton image="someCssClassName" /> 

Con lo siguiente en tu CSS:

.someCssClassName {
background-image: url(images/title_logo.jpg)
}

Tenga en cuenta que arreglé el error tipográfico principal en el nombre de la propiedad y también eliminé la barra diagonal inicial de la URL de la imagen; de lo contrario, se resolvería en relación con la raíz del dominio del sitio; lo anterior espera que title_logo.jpg esté dentro de una carpeta /image que a su vez está en la carpeta donde reside el archivo CSS.

Sin embargo, este es menos torpe, creo:

<p:commandLink action="#{bean.submit}">
<h:graphicImage name="images/title_logo.jpg" />
</p:commandLink>

Answer 3

Pon esto en tu estilo css:

 .dolar-icon {
background-image: url("#{facesContext.externalContext.request.contextPath}/resources/imagenes/dolar.png") !important;}

Ahora puede usar el ícono "dolar-icon" que definió en su css.

<p:commandButton action="#{as.fe}" icon="dolar-icon"/>

Answer 4

Sugiero usar "P: coomandLink" y "P: graphicImage" al mismo tiempo. He creado una carpeta en webapps y puse mi archivo jpg en esta carpeta. Este código funciona bien para mí. buena suerte.

<p:commandLink action="#{MyClass.myMethod}">
<p:graphicImage value="images/Max-Burger.jpg" />
</p:commandLink>