Utilizando AJAX com Java Server Faces (JSF)

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

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.