Utilizando AJAX com Java Server Faces (JSF)
Veja neste artigo o funcionamento e benefícios do framework JavaServer Faces (JSF) com AJAX. Será tratada a ideia desta tecnologia, e também exemplos de código.
Vamos utilizar Ajax com JSF?
Inicialmente, as páginas WEBs eram desenvolvidas de maneira estática, ou seja, para uma atualização refletir ao cliente, toda a página tinha que ser carregada. Com isso, para atualizar algum pequeno conteúdo, obrigatoriamente o cliente precisava realizar uma requisição, de maneira completa, a aplicação WEB. Esse problema consiste quando se precisa atualizar repetidamente a aplicação, podendo afetar o desempenho da mesma. O Ajax veio para solucionar este tipo de problema.
Ajax é um conjunto de tecnologias para desenvolvimento WEB que permite que possam ser desenvolvidas páginas dinâmicas, que respondam a algumas situações de maneira assíncrona, sem que toda a aplicação seja atualizada. Com Ajax, as aplicações webs podem recuperar informações do servidor de maneira altamente responsiva com o cliente.
Na plataforma JAVA EE 6, o JavaServer Faces fornece acesso embutido ao Ajax, sendo preciso apenas os jars: jsf-api.jar, jsf-impl.jar, encontrados no site.
>Visão geral do Ajax
Ajax é baseado em JavaScript e XML, tecnologias utilizadas para desenvolvimentos de aplicações WEBs dinâmicas e assíncronas.
O funcionamento da tecnologia Ajax se baseia no seguinte processo, é enviada uma solicitação assíncrona para o servidor, e este envia de volta uma resposta no modelo DOM para atualizar a página, a Figura 1 retrata a diferença da comunicação interna de aplicações WEBs utilizando Ajax com as aplicações comuns. Uma observação importante é que a comunicação cliente e servidor não se limitam apenas ao modelo DOM, ela também pode utilizar o formato JSON.
Como visto anteriormente, aplicações web baseadas em Ajax podem acessar as informações do servidor, sem interferir com a renderização da página atual do cliente. Abaixo, algumas vantagens da utilização de Ajax:
- Validação de formulário em tempo real, sem a necessidade de submeter ao servidor para fazer a validação.
- Funcionalidades avançadas para páginas Web.
- Atualização parcial da página, sem a necessidade de recarregar a página inteira.
Utilizando Ajax com JSF
A funcionalidade Ajax pode ser adicionada em uma aplicação JSF por meio da importação de suas bibliotecas, conforme a Listagem 1. Toda aplicação que fizer o seu uso estará representada pela tag <f:Ajax>, conforme a Listagem 2.
Listagem 1: Exemplo de importação das funcionalidades Ajax
<h:form id="form1">
<h:outputScript name="jsf.js" library="javax.faces" target="head">
</br>
Listagem 2: Exemplo da utilização das funcionalidades Ajax com JSF
<h:inputText id="texto" value="#{textBean.texto}">
<f:ajax>
</h:inputText>
Na Listagem 2, nem um recurso Ajax foi aplicado, é apenas um exemplo de como aplicar suas funcionalidades junto com JSF, na tag <f:Ajax> quando nenhum evento é aplicado, por padrão é selecionado o evento ValueChange. O desenvolvedor pode colocar o atributo que desejar para a entrada de dados <h:inputText>. A Tabela 1, informa todos os atributos disponíveis para serem aplicados na tag <f:Ajax>.
| Nome | Tipo | Descrição |
| disable | javax.el.ValueExpression (resulta em boolean) | Quando atribuído true a funcionalidade Ajax não é processada. Por padrão esse atributo é false. |
| event | javax.el.ValueExpression (resulta em string) | É atribuido o evento desejado para o objeto. Por padrão é valueChange. |
| execute | javax.el.ValueExpression (resulta em object) | Este atributo representa qual componente deve ser executado, sendo informado seu nome. Por padrão seu valor é @this. |
| immediate | javax.el.ValueExpression (resulta em boolean) | Um valor booleano que indica se as entradas devem ser processadas logo no início do ciclo de vida. |
| listener | javax.el.MethodExpressin | Método a ser invocado no servidor quando a ação AjaxBehaviorEvent for acionada no cliente |
| onevent | javax.el.ValueExpression (resulta em string) | O nome da função JavaScript que trata os eventos |
| onerror | javax.el.ValueExpression (resulta em string) | O nome da função JavaScript que avalia os erros |
| render | javax.el.ValueExpression (resulta em object) | Identifica qual campo deve receber o valor de algum evento executado. |
Tabela 1: Exemplo de atributos para a tag f:Ajax
Alguns dos atributos apontados na Tabela 1 serão utilizados no exemplo que será criado para demonstrar a utilidade da tecnologia Ajax. O exemplo consiste em uma classe Livro com três atributos: titulo, autor e ano, conforme a Listagem 3.
Listagem 3: Classe Livro
import javax.pesrsistence.Entity;
@Entity
public class Livro{
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
private Integer codigo;
private String titulo;
private String autor;
private Integer ano;
public Livro(){...}
public Integer getCodigo(){...}
public void setCodigo(Integer codigo){...}
public String getTitulo(){...}
public void setTitulo(String titulo){...}
public String getAutor(){...}
public void setAutor(String autor){...}
public Integer getAno(){...}
public void setAno(Integer ano){...}
}
Serão criadas duas páginas, uma para cadastros dos livros, e outra para efetuar busca pelo seu código, a Listagem 4 ilustra a classe livroHandler utilizada para realizar validação de retorno, e também chamar os métodos selectlivro e insert na classe DaoLivro, conforme a Listagem 5. Para cadastrar um livro, foi criada uma página com campos <h:inputText> com seus respectivos atributos: titulo, autor e ano. Se inserido com sucesso retornará uma mensagem na tela “Livro cadastrado com sucesso”, se houver algum erro de validação será informada na tela sua descrição.
Listagem 4: Classe LivroHandler
public void inserir(AjaxBehaviorEvent event){
livro = dao.insert(livro);
if(livro.getCodigo() != null){
FacesContext
.getCurrentInstance
.addMessage(
null,
new FacesMessage(
"Livro cadastrado com sucesso!"));
}
livro = new Livro();
}
public void selectLivro(AjaxBehaviorEvent event){
livro = dao.selectlivro(livro);
if(livro == null){
FacesContext
.getCurrentInstance
.addMessage(
null,
new FacesMessage(
"Nenhum livro com esse codigo"
));
}
}
Listagem 5: Classe DaoLivro
public static EntityManagerFactory criarEMF(){
if(emf == null){
emf = Persistence.createEntityManagerFactory("jpa01");
}
return emf;
}
public Livro insert(Livro livro){
System.out.println("entrou");
em = criarEMF().createEntityManager();
em.getTransaction().begin();
em.persist(livro);
em.getTransaction().commit();
em.close();
return livro;
}
public Livro selectlivro(Livro livro){
em = criarEMF().createEntityManager();
Livro l = em.find(Livro.class, livro.getCodigo());
em.close();
return l;
}
A busca de um determinado livro será feita pelo seu código, o usuário informa seu Id e retorna na tela seus atributos no <h:outputText>. Se não houver nenhum livro com aquele Id, será mostrada uma mensagem para o usuário informando que aquele livro não existe.
Para o cadastro de um livro, foram utilizadas as seguintes funcionalidades Ajax no <h:commandButton> cadastrar livro:
- listener="#{DAO.insert}" para chamar o método no servidor quando a ação AjaxBehaviorEvent for invocada(Listagem 4 descreve o método insert a ser invocado).
- execute="@all" para que seja executado todos os campos <h:inputText> do form;
- render="@all" será preciso limpar os campos e informar uma mensagem ao usuário quando o livro for cadastrado, por isso a renderização tem que ser para todos os objetos.
- E por ultimo o atributo event=”click”, quando o botão for clicado todo o processo será invocado.
A Listagem 6 é o exemplo de código da tela de cadastro de livros:
Listagem 6: Código da tela Cadastrar Livro
<h:body>
<h2><h:outputText value="Cadastro de Livro"/></h2>
<h:form id="cadMovimForm">
<h:outputScript name="jsf.js" library="javax.faces" target="head"/>
<br/>
<h:outputText value="Titulo"/>
<h:inputText id="titulo" value="#{LivroHandler.Livro.titulo}" required="true"
requiredMessage="Campo título obrigatório">
<f:validateLength maximum="40"/>
</h:inputText>
<br/>
<h:outputText value="Autor"/>
<h:inputText id="valor" value="#{LivroHandler.Livro.autor}" required="true"
requiredMessage="Campo autor obrigatório"/>
<br/>
<h:outputText value="Ano"/>
<h:inputText id="data" value="#{LivroHandler.Livro.ano}" required="true"
requiredMessage="Campo ano obrigatório"/>
<h:commandButton id="criarLivro" value="Cadastrar">
<f:ajax listener="#{LivroHandler.inserir}" execute="@all" render="@all" event="click"/>
</h:commandButton>
<h:messages id="msg"/>
<br/>
<br/>
<h:link outcome="pesquisar.xhtml" value="pesquisar"></h:link>
</h:form>
</h:body>
Para efetuar a busca de um livro foi usado os mesmos atributos no commandButton que o exemplo anterior, a diferença entre eles está no listener que invoca outro método (chama o método selectlivro, conforme Listagem 6), e no execute="form1:codigo",executando somente o campo <h:inputText> com o id="codigo", pois ele detém o código do livro a ser buscado. A Listagem 7 é o exemplo de código usado na tela de pesquisa.
Listagem 7: Código da Tela Buscar Livro
<h:body>
<h:form id="form1">
<h:outputScript name="jsf.js" library="javax.faces" target="head"/>
Código do livro
<h:inputText id="codigo" value="@{LivroHandler.livro.codigo}" maxlength="10"
required="true" requiredMessage="Informe o código do livro"/>
<br/>
<h:commandButton id="submit1" value="Clique">
<f:ajax listener="#{LivroHandler.selectLivro}" execute="form1:codigo" render="@all" event="click"/>
</h:commandButton>
<br/>
Título:
<b>
<h:outputText id="titulo" value="#{LivroHandler.livro.titulo}"/>
</b>
Autor:
<b>
<h:outputText id="autor" value="#{LivroHandler.livro.autor}"/>
</b>
Ano
<b>
<h:outputText id="ano" value="#{LivroHandler.livro.ano}"/>
</b>
<br/>
<h:messages/>
<br/>
<br/>
<h:link outcome="cadastro.xhtml" value="voltar"></h:link>
</h:form>
</h:body>
O exemplo da aplicação deste artigo pode ser visto na Figura 2:
Entendendo a utlização do Ajax
Como pode ser visto, utilizar Ajax é de enorme vantagem em aplicações WEB, o usuário não precisa atualizar toda a página para efetuar alguma modificação, apenas é alterado o que foi executado. Pensando em uma aplicação WEB que precisa efetuar atualização repetidamente, utilizar Ajax melhora muito o desempenho da mesma, pois é modificado o que é preciso, e permanece sem alteração o que não foi utilizado.
Links Úteis
- Java 7:
Site com informações sobre o lançamento do Java 7 - JavaFX:
Site para fazer download de aplicações JavaFX - JFXtras:
Site do projeto JFXtras
Saiba mais sobre Java ;)
- O Que é JPA?:
Dominar a persistência de dados é uma necessidade indispensável aos programadores. Sem esse conhecimento nossas aplicações não terão a capacidade de armazenar e recuperar os dados por ela manipulados. - Preparando o ambiente para programar em Java:
Neste curso você aprenderá a preparar seu ambiente para programar em Java. Veremos aqui o que é necessário instalar e como proceder para desenvolver aplicações com essa linguagem. - Criando meu primeiro projeto no Java:
Neste curso você aprenderá a criar o seu primeiro programa com Java, e não, ele não será um simples “Hello, World!”. :) Para isso, vamos começar ensinando como instalar o Java e preparar o ambiente de desenvolvimento.
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo