Primefaces - botão que abre dialog e fecha e atualiza com parametro

o assunto não da pra explica mto bem mais vou tentar explicar aqui…
estou usando a versão do primefaces 3.4.2
eu tenho um formulario
dentro desse formulario eu tenho uma dataTable e também um dialog
dentro da datatable eu tenho uma coluna assim:

<p:column>
                    <f:facet name="header">
                        Foto
                    </f:facet>
                    <p:commandButton onmouseover="dialog.show()" onmouseout="dialog.hide()" icon="ui-icon ui-icon-search">
                        <f:setPropertyActionListener target="#{fotoProdutoMB.fotoProduto}" value="#{produto}" />
                    </p:commandButton>
                </p:column>

dialog é o nome do meu dialog (obvio) rsrs…

quando eu passo o mouse em cima do botão o dialog abre e quando eu saio com o mouse de cima do botão a dialog fecha… até ai ok, agora só preciso de um detalhe… eu precisava atualizar a imagem do dialog de acordo com cada item da tabela (row).

ou seja eu preciso setar o parametro, executar aquela linha f:setproperty… e atualizar meu dialog… essa parte eu não estou conseguindo fazer…

obs.: não quero que seja necessário clicar no botão pra isso acontecer…

tentei usar <f:ajax> e <p:ajax> e <f:event> mais até agora sem sucesso :frowning:

ja tentou:

<p:ajax event=“mouseout”… />

??

já… ai eu coloquei dentro da tag <p:ajax event=“mouseout”> meu setPropertyActionListener né? isso eu tentei,tentei fora tbm, tentei 1 monte d coisa :frowning:

seu SetProperty ta fazendo o que nesse caso ?

Posta aqui como voce tinha feito com p:ajax, extamente igual, so pra clarear o que voce tava fazendo, por favor.

ele pega a linha selecionada e joga em uma propriedade do meu managedbean pra depois eu exibir no dialog…

eu tenho uma dataTable com uma lista de produto e cada produto é chamado de “produto”
<f:setPropertyActionListener target="#{fotoProdutoMB.fotoProduto}" value="#{produto}" />

então nessa linha ai eu pego o “produto” da linha selecionada, onde o cara vai passar o mouse em cima do botão, e vai jogar no meu managedbean no atributo “fotoProduto”

ai meu dialog vai abrir e exibir a foto

<p:dialog showHeader=“false” widgetVar=“dialog” id=“dialogImg” closable=“false” draggable=“false” resizable=“false” >
<p:graphicImage value="#{fotoProdutoMB.fotoProduto.arquivo}" width=“300” />
</p:dialog>

o problema é que ele só executa o setProperty… quando o botão é clicado… :frowning:

Entao responda minha ultima pergunta e tb esta:

  1. Entao so funciona corretamente quando voce clica no botao ? e o que voce queria é que ele executasse so passando o mouse no botao ?

vou dar um exemplo de +ou- como é:

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

aqui eu tenho que clicar para ele aparecer o dialog, e ele sempre aparece o dialog com as informações da linha selecionada

a diferença é que eu estou querendo fazer um que apenas passando o mouse em cima ele já exibe o dialog com as informações que no caso é apenas uma foto…

  1. Entao so funciona corretamente quando voce clica no botao ? e o que voce queria é que ele executasse so passando o mouse no botao ? exato!

vou postar o código todo…

<h:form>
 <p:dataTable paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                        rowsPerPageTemplate="10,30,50,100,300,1000" paginator="true" id="listaDeProduto" widgetVar="listaProduto" value="#{fotoProdutoMB.fotoProdutos}" var="produto">
                
                <p:column>
                    <f:facet name="header">
                        Foto
                    </f:facet>
                    <p:commandButton onmouseover="dialog.show()" onmouseout="dialog.hide()" icon="ui-icon ui-icon-search">
                        <p:ajax event="mouseover" update="dialogImg" >
                            <f:setPropertyActionListener target="#{fotoProdutoMB.fotoProduto}" value="#{produto}" />
                        </p:ajax>
                        <f:setPropertyActionListener target="#{fotoProdutoMB.fotoProduto}" value="#{produto}" />
                    </p:commandButton>
                </p:column>
            </p:dataTable>
            <p:dialog showHeader="false" widgetVar="dialog" id="dialogImg" closable="false" draggable="false" resizable="false" >
                <p:graphicImage value="#{fotoProdutoMB.fotoProduto.arquivo}" width="300" />
            </p:dialog>
</h:form>

Ta vamos aos testes, primeiro, tire seu Dialog de dentro do Datatable e o ponha fora do datatable, mas dentro do <h:form>.

no update do ajax coloque assim:

<p:ajax event="mouseover" update=":form:dialogImg" >  
                            <f:setPropertyActionListener target="#{fotoProdutoMB.fotoProduto}" value="#{produto}" />  
</p:ajax>  
 <f:setPropertyActionListener target="#{fotoProdutoMB.fotoProduto}" value="#{produto}" />  <--! RETIRE ISSO -->

Tenta ae!

opa, desculpe, acabei de ver que ta fora do datatable, desconsidere isso entao =D

bom o dialog ta fora do datatable, eu nunca tinha colocado dentro, na vdd nem sei se funciona

esse <f:setPropertyActionListener eu pude perceber que dentro do <p:ajax nao funciona… pois agora eu dou F5 na página e a imagem do dialog continua o mesmo, vou tentar fazer o contrario, colocar o <p:ajax dentro do <f:setpro…

fiz os testes q vc falou e por enquanto sem sucesso mais me exclareceu um pouco e vou tentar coisa nova

Beleza, tb tive uma ideia aqui, segue:

Acrescentei o oncomplete, que isso faz, ele abre o dialog apos ter sido executado o property e apos a atualizacao do DOM.

<p:ajax event="mouseover" update=":form:dialogImg" oncomplete="dialogImg.show()">    
                <f:setPropertyActionListener target="#{fotoProdutoMB.fotoProduto}" value="#{produto}" />  
</p:ajax> 

E ae ? rolou ?

então eu to testando aki e percebi que o setPropertyActionListener não funciona dentro do <p:ajax :frowning:
ele nao atualiza o DOM

Entao tira o p:ajax e faz tudo no commandButton mesmo, so muda o lugar dos atributos que te falei e cria um metodo javascript pra executar a sua chamada. E acrescenta a abertura do dialog no oncomplete.

Agora tipo, acho estranho o SetProperty nao ser setado, tem algum metodo no seu bean que sete esse produto ? porque com p:ajax ainda da pra executar com o atributo listener=“bean.metodo”

<p:commandButton onmouseover="metodoJavaScript()" oncomplete="dialogImg.show()" onmouseout="dialog.hide()" icon="ui-icon ui-icon-search"> <f:setPropertyActionListener target="#{fotoProdutoMB.fotoProduto}" value="#{produto}" /> </p:commandButton>

Uma pergunta, esse seu projeto é confidencial ? se nao for, voce usa eclipse ? Porque se voce quiser, so mandar a pasta do projeto zipado que importo pro meu eclipse e tento te ajudar na pratica mesmo, porque nunca precisei fazer isso, os sistemas que eu mexo sao mais para negocios publicos, nao precisam de tanto design.

então o unico problema está sendo que o mouseover não chama o f:setProperty…
estou procurando na documentação e no google agora que sei qual é o erro mais ainda não achei nada…

o pior é que é confidencial, e o projeto em si é grande pra zipar e mandar :frowning:

  • é bem simples, você pode criar um managed bean, nesse managed bean tem uma lista de produto por exemplo e nesse produto tem uma url de uma imagem… ai a camada de visão eu postei tudo ali em cima já… =)
    nao tem segredo nenhum, o problema mesmo é aquele que falei ak no começo dessa mensagem, o mouseover nao chama o setProperty :frowning:

tem sim, tenho que procurar imagens, e a preguiça tb, ta aqui do meu lado, hehehehe

Sem bronca mano, se eu tiver com cabeça fria mais tarde eu crio um projeto no meu note pra tentar fazer algo parecido. Flw!