Arquivo Discussoes de Programacao e Tecnologia Olá galera… Estou precisando de um ajuda!
Estou com dificuldade em usar o primefaces com o JSF, preciso fazer na tela de login quando o usuário clicar no botão “Logar” que o sistema apareça a imagem enquanto localiza o usuário no banco.
No prime faces possui esse showcase:
Mas não consigo aplicar no meu xhtml referente ao login, segue o codigo abaixo:
Help??
`tenta isso:
< p:ajaxStatus onstart=“PF(‘ajaxLoading’).show();” oncomplete=“PF(‘ajaxLoading’).hide();”/>
< p:dialog modal=“true” widgetVar=“ajaxLoading” closable=“false” showHeader=“false” resizable=“false”>
< h:graphicImage library=“imagens” name=“icones/ajaxloader.gif” />
< /p:dialog>
no name vc coloca o caminho para seu gif e a pasta imagens deve estar dentro de resources para ser encontrada pelo library
`
Sem querer ser chato, más não é mais fácil você criar um evento javascript que manipule o css em cima da imagem carregando.jpeg para display:“block”, e quando tiver carregado o login do usuário, você altere para display:“none”?
Luciano, mas eu coloco isso dentro do h:form do botão? Como ele reconhece o botão para ele carregar a imagem?
Sou novato ainda, estou aprendendo… se poder me da um exemplo de como fazer… Agradecia…
Pra você que é novato e por estar usando JSF, imagino que não saiba JSP e muito menos servlets. Certo? E já que você também tem que dar conta do lado do cliente(imagem de carregamento para login no browser). Eu aconselho aprender primeiro javascript, servlets e jsp. Servlets e JSP nessa ordem. Se você souber essas três coisas, é difícil querer voltar a trabalhar com JSF.
Minha opinião própria: Eu acho muito melhor trabalhar com jQuery ou AngularJS, em cima do html, do que com o primefaces.
Veja um exemplo do que você quer fazer. Apenas copie e cole primeiro em uma pagina index.html na sua área de trabalho, e depois abri ela direto no Google Chrome ou no Mozila Firefox.
<!DOCTYPE html>
<html>
<head>
<title>Tela de Login</title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" ></script>
</head>
<body>
<div class="login" >
<table>
<tr>
<td>Email: </td>
<td><input type="text" id="email" /></td>
<td class="inf" >jonata</td>
</tr>
<tr>
<td>Senha: </td>
<td><input type="password" id="senha" /></td>
<td class="inf" >limao</td>
</tr>
<tr><td><button id="logar" >Logar</button><td></tr>
</table>
<div id="imagem" >
<img src="http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_gray_350.gif" id="carregando" />
</div>
</div>
<div id="respostaservidor" ></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("#logar").click(function(){
$("#respostaservidor").css({"display":"none"});
var email=$("#email").val();
var senha=$("#senha").val();
$("#imagem").css({"display":"block"});
setTimeout(function(){
validar(email, senha);
}, 2000);
});
$("#logar").click(function(){
setTimeout(function(){
$("#respostaservidor").fadeOut(1000);
}, 4000);
});
function validar(email, senha){
$("#imagem").css({"display":"none"});
var respostaservidor="";
var bolean=false;
if(email.localeCompare("jonata")){
$("#respostaservidor").css({"background":"#f00"});
respostaservidor="O email não foi encontrado.";
bolean=false;
} else if(senha.localeCompare("limao")){
$("#respostaservidor").css({"background":"#f00"});
respostaservidor="A senha esta incorreta.";
bolean=false;
} else {
$("#respostaservidor").css({"background":"#0f0"});
respostaservidor="Parabéns! Você logou com sucesso.";
bolean=true;
}
$("#respostaservidor")[0].innerHTML=respostaservidor;
$("#respostaservidor").css({"display":"block"});
return bolean;
}
});
</script>
<style type="text/css">
.login {
width: 700px;
margin: 0 auto;
background: #09d;
font-size: 150%;
}
table {
padding: 10px 20px;
}
.login input {
font-size: 100%;
width: 300px;
}
.login button{
font-size: 100%;
}
.inf{
color: #ff0;
}
#carregando {
width: 100px;
height: 100px;
}
#imagem {
display: none;
text-align: center;
}
#respostaservidor {
background: #f00;
width: 680px;
font-size: 180%;
margin: 0 auto;
padding: 10px;
color: #fff;
display: none;
}
</style>
Bom, isso é apenas um exemplo demostração no cliente. Quando você for pesquisar email e senha no servidor/banco de dados. Você devera usar Ajax. Enquanto espera uma resposta, você mostra a imagem carregando.gif. Quando o servidor enviar uma resposta no Ajax(javascript), então você oculta ela com o simples, bom e velho css 
.
Algumas coisas são apenas minha opinião pessoal.
neste caso vc terá de usar a tag do primefaces em todos os forms e acrescentar isso: <p:commandButton onstart="PF('ajaxLoading').show()" oncomplete="PF('ajaxLoading').hide()"/>
Ta ok! Obrigado. Deu certo!
Ok, obrigado.