00:11
Jabes Felipe
Olá Pessoal,
O framework JavaServer Faces em sua penúltima versão (1.2) nos permite obter várias vantagens para o desenvolvimento de aplicações, como por exemplo a produtividade, entretanto o JSF padrão é um pouco limitado, e para obter uma gama maiores de componentes, suporte a AJAX, e etc... É recomendado utilizar um framework que implementa o JSF, como por exemplo: IceFaces, RichFaces, entre outros.
O AJAX é um conjunto de tecnologia que é bastante utilizada no desenvolvimento web, permitindo que utilizem-se de solicitações assíncronas de informações. O JSF 2 já possui o suporte a AJAX, e neste post veremos um exemplo simples, de como implementar o AJAX em nossas aplicações.
O objetivo é apenas mostrar o funcionamento do AJAX, po isso, em nossa aplicação teremos um campo texto, que será usado para informar o nome de uma pessoa, quando é digitado o nome, usaremos o evento keyup, para mostrar a quantidade de caracteres que está sendo digitado, também temos um botão de ação, que quando invocado será usado para exibir o nome digitado e a quantidade de caracteres que esse nome possui, por fim, quando o campo texto ganhar o foco, todos as informações contidas na tela serão limpadas.
O exemplo foi desenvolvido utilizando a IDE Netbeans 6.8 e o servidor Glassfish.
Ao final do post, o projeto será disponibilizado para download, para quem quiser baixar e testar.
1. Passo: Veja como é a estrutura do projeto:
2. Passo: Iremos criar a Classe PessoaMB, no pacote managedbean, esta Classe possui 2 atributos nome e mensagem, com seus respectivos métodos get e set, mais 3 métodos teremos, um que é chamado no evento blur para limpar os valores dos atributos da Classe, os outros métodos é para mostrar a quatidade de caracteres que estão sendo digitados, esse método será invocado do evento keyup, e método para mostrar o nome digitado, que é invocado no evento click do botão.
3. Passo: O próximo passo é criar a página, a grande novidade nessa página é o uso da tag f:ajax, no uso dela através do campo texto, temos 3 atributos, o event que é usado para escolher qual evento javascript será utilizado, o atributo render é usado para mostrar novamente o renderizamento da resposta, o valor desse atributo é o id do output que será usado para mostrar a mensagem, observe que podemos renderizar mais de componente ao mesmo, bastando separar-lôs entre espaço, e o atributo listener faz a ligação com um método comum que está na classe PessoaMB, o uso da tag f:ajax no botão está com um atributo execute que é utilizado para informar o que será enviado para o servidor na requisição AJAX.
4. Passo: Agora é executar e testar o exemplo.
Bom pessoal, este foi um exemplo simples de AJAX usando o JSF2, esse exemplo poderia ser feito só em javascript, mas a intenção do post foi mostrar como é implementado o AJAX no JavaServer Faces.
Para quem quiser baixar o exemplo, clique aqui.
Qualquer dúvida, crítica ou sugestão, fico à disposição.
