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

O modelo tradicional para aplicações web (esquerda) comparado ao modelo Ajax (direita). (www.apostilando.com, 2007)
Figura 1: O modelo tradicional para aplicações web (esquerda) comparado ao modelo Ajax (direita). (www.apostilando.com, 2007)

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:

À esquerda a página para efetuar a busca de um livro, e a direita a página de cadastro
Figura 2: À esquerda a página para efetuar a busca de um livro, e a direita a página de cadastro.

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.