Aprenda a utilizar o Ajax nativo do JSF 2.0

Olá Pessoal,

Hoje vou passar uns exemplos básicos da utilização do Ajax nativo presente no JSF 2.0!

Sabemos que já existem muitas bibliotecas Ajax por aí (jQuery, ExtJs, GWT, etc…) por que foram inventar uma nova e específica para o JSF 2.0?

Vantagens de uma abordagem específica de Ajax para o JSF

  • Você pode atualizar elementos JSF (h:outputText, h:inputText, h:selectOneMenu, etc…)
  • Quando as atualizações do Ajax são totalmente separadas dos componentes a implementação não fica tão simples!
  • Você não tem que escrever JavaScript!
  • As  chamadas Ajax conhecem os managed beans do JSF.
  • Não é preciso escrever servlets e analisar seus parâmetros!

Entenda a idéia básica de funcionamento:

Código exemplo:


 <h:commandButton… action="…">
 <f:ajax render="id1"/>
 </h:commandButton>
 ...
 <h:outputText…/>

Ao pressionar o botão é enviada uma requisição para executar a action e recalcular o valor do elemento com id igual a “id1” em seguida envia esse novo valor para o cliente substituindo o elemento antigo pelo novo valor!

Comandos básicos do :

render: Contém os ids dos elementos que serão atualizados na página

execute: Contém os ids dos elementos que irão para o servidor para serem processados

event: Especifica os eventos javascript para responder

onevent: Especifica uma função javascript para executar quando o evento é acionado

Bom vamos aos exemplos!


Página index.xhtml que deve ser criada:


 <?xml version='1.0' encoding='UTF-8' ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core">
 <h:head>
 <title>Experimentando Ajax do JSF 2.0</title>
 </h:head>
 <h:body>
 <center>
 <h2>Exemplo 1: Geração randomica no servidor!</h2><br/>
 <h:form id="idF1">
 <h:commandButton value="Executar!"
 action="#{geradorNumeros.randomize}">
 <f:ajax render="idF1:numField1"/>
 </h:commandButton><br/>
 <h2><h:outputText value="#{geradorNumeros.number}"
 id="numField1"/></h2>
 </h:form>
 <br/>
 <h2>Exemplo 2: Login</h2><br/>
 <h:form prependId="false">
 <h:outputText value="Usuario: "/><h:inputText value="#{login.usuario}" id="idUsr"/><br/>
 <h:outputText value="Senha:"/><h:inputSecret value="#{login.senha}" id="idPsw"/>
 <h:commandButton value="Logar" action="#{login.logar}">
 <f:ajax execute="idUsr idPsw" render="saidaLogin"/>
 </h:commandButton><br/>
 <h2><h:outputText value="#{login.mensagem}" id="saidaLogin"/></h2>
 </h:form>
 </center>
 </h:body>
 </html>

Repare que quando não especificamos o prependId como false no é necessário especificar o id do form seguido de : e o id do componente por exemplo render:”idF1:numField1”.

Classes Java para serem criadas:

GeradorNumeros.java


@ManagedBean
@SessionScoped
public class GeradorNumeros implements Serializable {

private double number = Math.random();
private double range = 1.0;

public double getRange() {
return (range);
}
public void setRange(double range) {
this.range = range;
}

public double getNumber() {
return (number);
}
public void randomize() {
number = range * Math.random();
}
}

Login.java


@ManagedBean
public class Login {
private String usuario, senha, mensagem;

public String getSenha() {
return senha;
}

public void setSenha(String senha) {
this.senha = senha;
}

public String getUsuario() {
return usuario;
}

public void setUsuario(String usuario) {
this.usuario = usuario;
}

public String getMensagem() {
return mensagem;
}

public void setMensagem(String mensagem) {
this.mensagem = mensagem;
}

//faça o login da forma que achar melhor!
public void logar(){
if(usuario != null && senha != null){
if(usuario.equals("seuLogin") && senha.equals("suaSenha"))
mensagem = "Bem Vindo ao Sistema "+usuario+" você está logado!";
else
mensagem = "Usuário ou senha Inválidos!";
}
}

}

Com estes exemplos é possível ver como é simples utilizar a nova biblioteca de Ajax do JSF 2.0!

Qualquer coisa estamos aí!

Abraços!

1 comment for “Aprenda a utilizar o Ajax nativo do JSF 2.0

  1. 20 de Outubro de 2013 at 16:42

    Olá

Deixar uma resposta