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.
Confira outros conteúdos:
Black November
Desconto exclusivo para as primeiras 200 matrículas!
Pagamento anual
12x no cartão
De: R$ 69,00
Por: R$ 59,00
Total: R$ 708,00
Garanta o desconto
- Formação FullStack Completa
- Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
- +10.000 exercícios gamificados
- +50 projetos reais
- Comunidade com + 200 mil alunos
- Estude pelo Aplicativo (Android e iOS)
- Suporte online
- 12 meses de acesso
Pagamento recorrente
Cobrado mensalmente no cartão
De: R$ 79,00
Por: R$ 64,00 /mês
Total: R$ 768,00
Garanta o desconto
- Formação FullStack Completa
- Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
- +10.000 exercícios gamificados
- +50 projetos reais
- Comunidade com + 200 mil alunos
- Estude pelo Aplicativo (Android e iOS)
- Suporte online
- Fidelidade de 12 meses
- Não compromete o limite do seu cartão
<Perguntas frequentes>
Nossos casos de sucesso
Eu sabia pouquíssimas coisas de programação antes de começar a estudar com vocês, fui me especializando em várias áreas e ferramentas que tinham na plataforma, e com essa bagagem consegui um estágio logo no início do meu primeiro período na faculdade.
Estudo aqui na Dev desde o meio do ano passado!
Nesse período a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha
empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta é continuar estudando e praticando para ser um
Full-Stack Dev!
Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma é bem intuitiva e muuuuito didática a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!
Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda não tinha visto. A didática é do jeito que qualquer pessoa consegue aprender. Sério, to apaixonado, adorando demais.
Adquiri o curso de vocês e logo percebi que são os melhores do Brasil. É um passo a passo incrível. Só não aprende quem não quer. Foi o melhor investimento da minha vida!
Foi um dos melhores investimentos que já fiz na vida e tenho aprendido bastante com a plataforma. Vocês estão fazendo parte da minha jornada nesse mundo da programação, irei assinar meu contrato como programador graças a plataforma.
Wanderson Oliveira
Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exercícios práticos que não tem como não aprender, estão de parabéns!
Obrigado DevMedia, nunca presenciei uma plataforma de ensino tão presente na vida acadêmica de seus alunos, parabéns!
Eduardo Dorneles
Aprendi React na plataforma da DevMedia há cerca de 1 ano e meio... Hoje estou há 1 ano empregado trabalhando 100% com React!
Adauto Junior
Já fiz alguns cursos na área e nenhum é tão bom quanto o de vocês. Estou aprendendo muito, muito obrigado por existirem. Estão de parabéns... Espero um dia conseguir um emprego na área.
Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.