Botões com icones Primefaces 3.4

Front-end
#1

Bom dia,

É possível eu adicionar uma imagem em um botão(p:commandButton) ?
As minhas imagens estão localizadas em:

WebContent
------------------>resources
-------------------------------------->images

Desde já agradeço.

#2

o commandButton tem um atributo image e um icon, vê qual fica melhor pra você.

#3

No showcase deles tem certinho explicando como faz:

http://www.primefaces.org/showcase/ui/commandButton.jsf

[code]<p:commandButton value=“With Icon” actionListener="#{pprBean.savePerson}" id=“withIcon”
update=“panel,display” icon=“ui-icon-disk” /> //label + icone

<p:commandButton actionListener="#{pprBean.savePerson}" update="panel,display" id="iconOnly"  
        icon="ui-icon-disk" title="Icon Only"/> //somente icone [/code]
#4

estou com o manual de referencia, através dele vi que o atributo “image” está depreciado.
agora não ficou claro para mim, como usar os recursos da aplicação.

#5

Pelo que eu entendi o image foi substituido pelo icon

#6

isso mesmo.

Agora como referenciar um resource?

#7

Puts cara…agora que eu entendi o teu problema. Vc quer colocar uma imagem sua, indepentente do primefaces, no botão do tema deles, certo? Eu não sei se tem como fazer isso. No máximo, o que você poderia fazer seria:

<p:commandLink>  
    <h:graphicImage value="imagem.jpg" />  
</p:commandLink>

Testa e veja se é o que você quer.

#8

Cara,

O post é antigo, mas como vi que estava sem resposta resolvi deixar minha ajuda para outros que talvez encontrem esse post.

1º - É bom ter um arquivo css para definições dos ícones. No meu caso, costumo coloca-lo em:
[Páginas Web] -> [Resources] -> [css] -> icones.css

  Defina da seguinte forma os vários ícones que tiver para usar no seu sistema:
  [code]

.imagemVisualizar16 {
background-image: url(…/icones/fatcow/16x16/document_inspector.png) !important;
width: 16px;height: 16px;
float:left;
margin-right: 8px;
}

.imagemEditar16 {
/*Aqui a pasta icones esta localizada em [Páginas Web] -> [icones] */
background-image: url(…/icones/fatcow/16x16/page_edit.png) !important;
width: 16px;height: 16px;
float:left;
margin-right: 8px;
}
[/code]

2º - Na sua página JSF insira:

<h:head>
     <!-- Aqui a library 'css' significa que a pasta acessada sera [Páginas Web] -> [resources] -> [css] -->
     <h:outputStylesheet library="css" name="icones.css" />
</h:head>

3º - No seu botão:

<p:commandButton value="Buscar" icon="imagemVisualizar16"/>

Espero ter ajudado.

#9

[quote=rafaelvascon]Cara,

O post é antigo, mas como vi que estava sem resposta resolvi deixar minha ajuda para outros que talvez encontrem esse post.

Espero ter ajudado.[/quote]

Vlw. Ajudou sim. :wink:

#10