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

21 respostas
A

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:

21 Respostas

R

ja tentou:

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

??

A

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:

R

seu SetProperty ta fazendo o que nesse caso ?

R

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

A

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:

R

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 ?
A

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…

A
  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>
R

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!

R

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

A

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

R

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>
R

E ae ? rolou ?

A

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

R

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>

R

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.

A

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:
R

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

R

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!

A

beleza valeu pela ajuda, me esclareceu um pouco e vou continuar tentando, qlqr coisa eu posto aki o resultado… se eu não conseguir anoite eu crio uma simulação igual e posto aqui o projeto… e eu uso eclipse tbm!

R

Massa| :slight_smile:

Criado 28 de fevereiro de 2013
Ultima resposta 28 de fev. de 2013
Respostas 21
Participantes 2