[Totalmente Resolvido] JSF e listener em imagem

E ae galera, blz!!!

Gostaria de saber como fazer com que uma imagem aumente de tamanho ao passar o mouse por cima da mesma e ao mesmo tempo adicionar uma action que será acionada quando o usuário clicar nela, action esta declarada no arquivo .java referente ao mesmo .jsp.
Estou utilizando netbeans 6 para desenvolver.
Atualmente estou conseguindo inserir a imagem e fazer com que ela se comporte como um botao, utilizando o componente webuijsf:imageHyperlink, realizando a chamada da action normalmente, porém nao consigo fazê-la aumentar de tamanho (como se fosse um zoom)…
Se alguem tiver alguma idéia para me ajudar a resolver o problema, agradeço;

Da uma olhada em miniajax.com
Acho que tem um exemplo do que você está buscando.

Uma combinação de A4J e rich:jquery da pra fazer isso

.pic-normal { width: 120px; border: 2px solid #ACBECE; } .wrap1 { width:190px; height: 130px; float: left; }
<br/>

<a4j:outputPanel id="gallery">
    <h:graphicImage value="/images/imagem.jpg" />
   <h:graphicImage value="/images/imagem2.jpg" />
</a4j:outputPanel>  

<br style="clear:both" />


<rich:jQuery selector="#gallery img" query="addClass('pic-normal')"/>
<rich:jQuery selector="#gallery img" query="wrap('&lt;div class=\'wrap1\'&gt;&lt;/div&gt;')" />
<rich:jQuery selector="#gallery img" query="mouseover(function(){enlargePic(this)})"/>
<rich:jQuery selector="#gallery img" query="mouseout(function(){normalPic(this)})"/>

<rich:jQuery name="enlargePic" timing="onJScall" query="stop().animate({width:'180px'})" />
<rich:jQuery name="normalPic" timing="onJScall" query="stop().animate({width:'120px'})" />

Acho que isso serve.
:thumbup:

Dê uma olhada nisso.
talvez possa te dar uma luz.

http://livedemo.exadel.com/richfaces-demo/richfaces/jQuery.jsf?c=jQuery

abraços,

Olá pessoal, primeiramente gostaria de agradecer muito a colaboração de todos vcs pela força que estão me dando.
Com relação aos exemplos que me passaram, não sabia que tinha tanto recurso bacana que poderia aplicar, porém continuo com uma dificuldade de associar um listener que está no meu bean à imagem (que tem a função de um botão). O listener está pronto, porém so consigo chama-lo se utilizar um component ImageHyperlink, porem se utilizar esse componente, nao consigo fazer a imagem ter zoom no mouseover.
Testei algumas das técnicas que me passaram e consegui fazer a imagem ter zoom, porém nao consegui associar ao listener que esta no meu código java… :frowning:
Desculpem pelas perguntas, mas é que estou começando no desenvolvimento web, estou lendo bastante, porém quanto mais me aprofundo em determinado assunto, mais vejo que existe muito a aprender;
Se puderem quebrar esse galho pra mim, mesmo nao sendo a resposta imediata, mas onde busco recursos para tentar resolver esse problema agradeço de novo (referente a parte de integraçao do zoom com o listener)
Abraço galera!!!

Explicando melhor…
Basicamente (que para mim não é tão básico) o que preciso é fazer com que um evento onclick de uma imagem existente em uma página jsp execute uma action existente no meu managed beam.
Se eu substituir a imagem por um commandbutton rola normal, porem com uma imagem ta dificultando bastante.
Se alguem tive alguma idéia eu agradeço muito…
Abraço a todos :slight_smile:

E ae galera, consegui implementar os exemplos utilizando JQuery na minha página, ou seja consigo inserir as images e aplicar zoom nas mesmas. :slight_smile:
Porém nao consegui associar o click na imagem ao action localizado no meu managed bean :cry:
O componente que estou utilizando para armazenar a imagem é um <h:graphicImage>, pois acredito que seja o único que possa incluir no jQuery…
Aguém tem alguma idéia de como posso fazer para associar um listener (localizado no bean) ao click na imagem???
Valew e fico no aguardo!!!

Cara, como h:graphicImage não possui action ou actionlistener, eu tentaria fazer de duas maneiras:

a primeira é esconder um botao na página com o action que vc quer chamar, e setar para onclick da figura chamar o click do botao.

a segunda é estudar um framework AJAX paralelo como DWR (Direct Web Remoting) e implementar a chamada do action direta através do onclick da figura.

E ae , implementei da seguinte forma, conforme explicação do pessoal, porém é gerado um erro na página no momento que clico na imagem…
Segue código para análise:

  <webuijsf:button binding="#{Logon.entrarBotao}" id="entrarBotao" text="Entrar"/>
  <webuijsf:button binding="#{Logon.biometriaBotao}" id="biometriaBotao" text="Biometria"/>
                                
  <a4j:outputPanel id="gallery">
          <h:graphicImage value="/img/entrar_zoom.png" onclick="document.getElementById('entrarBotao').click();"/>
  </a4j:outputPanel>
  <rich:jQuery query="addClass('pic-normal')" selector="#gallery img"/>
  <rich:jQuery query="wrap('&lt;div class=\'wrap1\'&gt;&lt;/div&gt;')" selector="#gallery img"/>
  <rich:jQuery query="mouseover(function(){enlargePic(this)})" selector="#gallery img"/>
  <rich:jQuery query="mouseout(function(){normalPic(this)})" selector="#gallery img"/>
  <rich:jQuery name="enlargePic" query="stop().animate({width:'100px'})" timing="onJScall"/>
  <rich:jQuery name="normalPic" query="stop().animate({width:'50px'})" timing="onJScall"/>   

Agradeço qualquer tipo de ajuda!!!
Abraço

Olá de novo…

A dúvida que nao quer calar é a seguinte:
A forma que estou usando para chamar o click do botão no evento onclick da imagem está certa?

<h:graphicImage value="/img/entrar_zoom.png" onclick="document.getElementById('entrarBotao').click();"/>

Sendo que quando clico na imagem é gerado um erro de objeto null no evento.

No aguardo…

Abraço

To de novo ai pessoal;

Alterei o seguinte atributo na esperamça de fazer funcionar, porém me frustrei novamente :cry:
Adicionei o ‘form1:’ antes do id do meu botão…

onclick="document.getElementById('form1:entrarBotao').click();"

O clique na imagem gera novamente um erro no javascript e não executa o evento associado ao botão :cry:

Alguem tem alguma idéia do que estou fazendo de errado???
Mais uma vez obrigado pela colaboração de todos…

ve no html gerado qual id ele está gerando para o botão

Cara,

vc está chamando o evento click certo. Quem sabe o nome do form que o botao está dentro não seja form1, então você precisa identificar bem certo qual é o id do botao que você quer chamar. O fireBug é um ótimo inspector pra esse tipo de coisa. É um plugin do Firefox muito fácil de usar…

Mais uma coisinha. Quando vc chama um clique do botão por Javascript desse jeito, chamando uma função JSF, veja que na verdade você não está utilizando JSF de forma correta. Com isso alguns bugs podem vir à tona.

Descobri na minha aplicação, quando utilizei dessa estratégia, um bug com relação a isso. Eu tive que baixar uma biblioteca Javascript chamada DOJO, substituir a parte “return false” da string de click do botao para " ". e executei a funcao chamando a funcao da biblioteca javascript “eval”.

Então agora o que vc precisa é identificar qual erro realmente está acontecendo. Se você utiliza o firebug, dá pra debugar o javascript e saber se não está conseguindo pegar o botão, ou não está conseguindo executar.

Abraço,
Scott

E ae galera, muito obrigado pela ajuda!!!
A parte de identificação do id do botão foi fundamental para resolução do problema, juntamente com a dica de uso do firebug :lol:
Descobri que o erro que estava comentendo era o seguinte:

<webuijsf:button binding="#{Logon.entrarBotao}" id="entrarBotao" text="Entrar"/>  
<webuijsf:button binding="#{Logon.biometriaBotao}" id="biometriaBotao" text="Biometria"/>  
                          
<a4j:outputPanel id="gallery">  
        <h:graphicImage value="/img/entrar_zoom.png" onclick="document.getElementById('entrarBotao').click();"/>  
</a4j:outputPanel>  
<rich:jQuery query="addClass('pic-normal')" selector="#gallery img"/>  
<rich:jQuery query="wrap('<div class=\'wrap1\'></div>')" selector="#gallery img"/>  
<rich:jQuery query="mouseover(function(){enlargePic(this)})" selector="#gallery img"/>  
<rich:jQuery query="mouseout(function(){normalPic(this)})" selector="#gallery img"/>  
<rich:jQuery name="enlargePic" query="stop().animate({width:'100px'})" timing="onJScall"/>  
<rich:jQuery name="normalPic" query="stop().animate({width:'50px'})" timing="onJScall"/>   


Na linha onde chamo o onclick da imagem estava referenciando o id do botao 'entrarBotao' da forma correta, porem este componente estava dentro de um componente dynamicpane, entao a forma correta de declaraçao do mesmo metodo seria: 
<h:graphicImage value="/img/entrar_zoom.png" onclick="document.getElementById('form1:dynamicPanel:entrarBotao').click()

Com isso resolvi este problema :D, porém surgiu outro, que acredito ser mais simples de resolver:
Como faço para esconder o botão que coloquei na tela para gerar o metodo bindado na minha classe, sem perder a funcionalidade do mesmo, já que o usuário não precisará enxerga-lo pois clicara na imagem que tera zoom no clique para gerar a ação???

Olá Scott, valew pela ajuda... Com relação a colocação que fez sobre o uso do dojo, baixei o mesmo e incorporei na aplicação, porem fiz a chamada do metodo com disse da forma descrita acima e não gerou erros... nao coloquei false(como sou um pouco leigo com relação a utilização não sei que influencia teria,rs) e nao não fiz a chamada da funçao eval que vc comentou... Vc acha que isso poderá acarretar algum erro futuro, mesmo nao tendo acontecido nada agora??? Mas uma vez valeu pela ajuda!!!

Mais uma vez muito obrigado a todos pela ajuda, e fico no aguardo da solução para resolver esse outro problema para matar a charada de vez!!!! 
Abraçaum galera :D 



Pra esconder o botao é só setar o style dele para “display:none;”

Valew galera, com esta ultima ajuda para esconder o botao, consegui resolver todos os itens pendentes aqui, (pelo menos por hora, rsrsrs)!!!
Mais uma vez muito obrigado a todos pela colaboração!!!
Abraçaum!!! :smiley:

[quote=barcellosrod]Valew galera, com esta ultima ajuda para esconder o botao, consegui resolver todos os itens pendentes aqui, (pelo menos por hora, rsrsrs)!!!
Mais uma vez muito obrigado a todos pela colaboração!!!
Abraçaum!!! :smiley: [/quote]

Olá barcellosrod, td bem?

Amigo, estou com um problema semelhante ao seu, só que ao clicar na imagem, o meu commandLink não é executado.

Dá uma olhada no código:

[code] <h:form id=“accessfast”>


Acesso Rapido




  • <a4j:outputPanel id=“gallery”>
    <h:graphicImage id=“image1” url="/pages/imagens/icon-48-user-add.png" onclick=“document.getElementById(‘accessfast:addPF’).click();”/>
    </a4j:outputPanel>
    <br style="clear:both" />
    
    
    <rich:jQuery selector="#gallery img" query="addClass('pic-normal')"/>
    <rich:jQuery selector="#gallery img" query="wrap('&lt;div class=\'wrap1\'&gt;&lt;/div&gt;')" />
    <rich:jQuery selector="#gallery img" query="mouseover(function(){enlargePic(this)})"/>
    <rich:jQuery selector="#gallery img" query="mouseout(function(){normalPic(this)})"/>
    
    <rich:jQuery name="enlargePic" timing="onJScall" query="stop().animate({width:'120px'})" />
    <rich:jQuery name="normalPic" timing="onJScall" query="stop().animate({width:'80px'})" />
    
    
    
          </li>
          <li id="acessoRapido">
            <h:commandLink value="Adcionar Pessoa Física" action="#{ddmenu.cadastraFuncionario}" id="addPF"/>
          </li>
        </ul>
    

    [/code]

    Estou usando jsf, facelets, rich, xhtml.

    Eae, o que voce acha que pode ser??

    Agradeço a ajuda.

Consegui resolver desta forma:

&lt;a4j:outputPanel id="gallery"&gt; &lt;h:commandLink value="" action="#{ddmenu.cadastraFuncionario}" id="addPF2"&gt; &lt;h:graphicImage id="image12" url="/pages/imagens/icon-48-user-add.png" /&gt; &lt;/h:commandLink&gt; &lt;/a4j:outputPanel&gt;

Não sei se é a forma correta, mas funcionou.

Vlw.