Exemplo de JSF2 com AJAX

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.

Leia mais »

Login de Usuários com EJB3 e JSF (Parte 2)

Olá Pessoal,

Esta é a segunda e última da parte do desenvolvimento de um Sistema de Login de Usuários, usando EJB3 para fazer a validação dos Usuários no nosso Banco de Dados, e JSF para a camada de apresentação do nosso Projeto.

Na primeira parte deixamos pronto, toda camada de EJB, agora nesta parte iremos criar o ManagedBean do Login e o Servlet Filter do Login.

Ao final do post, o projeto será disponibilizado para download, para quem quiser baixar e testar.

1. Passo: Crie um ManagedBean, óbviamente dentro do projeto web, escolha o nome de LoginMB, defina um pacote com o nome managedbean, deixa seu escopo como session, feito isto, altera o código seu código, deixando igual ao da figura abaixo:

No código acima, criamos dois método, um para fazer o login e o outro para fazer o logout.

2. Passo: Agora vamos criar o Servlet Filter, informe o nome de LoginFilter, defina um pacote, pode ser chamado de filter, deixa o mapeamento das URLs como *.jsf, depois de criado o Filter, altera o código do método doFilter, para o que está mostrado na figura abaixo:

3. Passo: Deixe o arquivo faces-config.xml, como mostrado na imagem abaixo, caso não exista este arquivo, basta criá-lo.

4. Passo: O arquivo web.xml, deverá ficar parecido com a da figura abaixo:

5. Passo: Agora iremos criar nossas páginas .jsp, são cinco páginas, a primeira será o index.jsp, que apenas fará o encaminhamento para página de login.

6. Passo: Criamos agora a página para fazer o login, a página login.jsp, deverá ficar parecida com a figura abaixo.

7. Passo: Criamos agora a página home.jsp, esta página só deverá ser acessado para quem estiver logado, é uma página bem simples, conforme a figura abaixo.

8. Passo: Criamos agora a página logout.jsp, esta página se aberta quando o usuário sair do sistema, é uma página bem simples, conforme a figura abaixo.

9. Passo: Criamos agora a página falha.jsp, esta página será exibida quando um usuário inválido tentar entrar no sistema, é uma página bem simples, conforme a figura abaixo.

10. Passo: Primeiramente, iremos tentar entrar no sistema, com um usuário que não existe.

11. Passo: Quando não for encontrado o usuário, a página falha.jsp será exibida.

12. Passo: Tentamos agora com um usuário que esteja cadastrado.

13. Passo: A página home será exibida, mostrando o nome do usuário que está logado.

14. Passo: Quando o usuário, sair do sistema, a página logout será exibida.

Terminamos, o nosso projeto de Login, usando EJB3, Servlet Filter e JSF.

Para quem quiser baixar o projeto, clique aqui.

Qualquer dúvida, crítica ou sugestão, fico a disposição.

Leia mais »

Login de Usuários com EJB3 e JSF (Parte I)

Olá Pessoal,

Neste post irei mostrar um exemplo simples de como fazer autentificação de usuários, usando EJB3, para a regra de negócio, e o Framework JSF para a camada de apresentação, poderia ser um Servlet ou JSP para view. A aplicação foi desenvolvida no Netbeans 6.8, servidor GlassFish v3 e o Banco de Dados MySQL.

Por estarmos usando o JSF, poderiamos fazer o controle de autentificação usando um próprio recurso do JSF chamado de PhaseListener, que fica de uma forma mais integrado. Porém neste exemplo, será feito utilizando o bom e velho Filter.

Este post será dividido em duas partes, sendo que a primeira, iremos criar o BD e a tabela Usuario, também será criado o projeto no Netbeans, deixando toda a camada de EJB pronta. Para a segunda parte, será criado o Servlet Filtro e a camada do JSF.

Ao final do post, o projeto será disponibilizado para download, para quem quiser baixar e testar.

1. Passo: A primeira coisa que devemos fazer é criar um Banco de Dados no Mysql, para isto basta usar seu programa de Gerenciamento de Banco de Dados e digitar o seguinte comando:

CREATE DATABASE JAVA;

Para criar a tabela de Usuário, use o seguinte comando:




CREATE TABLE USUARIO (

nome VARCHAR(20) PRIMARY KEY,
senha VARCHAR(20)
);

Criado nosso BD e a Tabela, já deixaremos um Usuário cadastro, para mais tarde podermos testar, simplesmente, digite o código abaixo:

INSERT INTO USUARIO values ('jabes', 'jabes');

2.Passo: Iremos criar um projeto JEE no Netbeans, para isto escolha Enterprise Application, o nome do projeto será Login, escolha o servidor GlassFish, criando um módulo EJB e um WAR.

A estrutura do projeto ficará parecida com a imagem abaixo:

3. Passo: Agora vamos criar a Entidade (Classe) Usuário, que será nosso modelo, para não digitarmos a Classe na unha, iremos importar a mesma do Banco. Clique com o botão direito do mouse sobre o módulo EJB, e escolha Entity Classes from DataBase, conforme a figura abaixo:

4. Passo: Escolha um Data Source que use o MySQL e o nosso Banco de Dados que foi criado, caso não exista um, basta criar um novo DS, depois de escolhido o DS, adicionar a tabela Usuario, clique em Next, conforme mostra a imagem abaixo:

5. Passo: Informe o nome do pacote, no exemplo deixei como loginservice, depois clique em Next.

6. Passo: Na configuração do mapeamento da Entidade, configurar de acordo com a figura abaixo, depois, clique em Finish:

7. Passo: Será criado a Classe Usuario, com todas Annotations, conforme a imagem abaixo:

8. Passo: Agora iremos criar um Session Bean, do tipo Stateless, com o nome de LoginService, implementando uma Interface Local, ambos, no pacote loginservice, crie um método chamado verificarUsuario que retorna um boolean e que tem como parâmetro um Objeto do tipo Usuario na Interface LoginServiceLocal, na Classe LoginService, altera seu código, deixando-o, igual ao da figura abaixo:

Aqui, terminamos nossa primeira parte da Aplicação, deixando a camada de EJB pronta, e na próxima e última parte, iremos terminar, com a criação do Servlet Filter e do ManagedBean.

Leia mais »

Exemplo de EJB, criando um Session Bean Stateless no Netbeans 6.8 e Glassfish V3.

Olá Pessoal,

Neste post, iremos criar uma simples aplicação EJB3, para quem não sabe, EJB3 é uma plataforma para a construção de aplicações corporativas portável, que permite o desenvolvimento de componentes reutilizáveis, há 3 tipos de componentes EJB, (Session Beans que pode ser Stateless ou Statefull, Message Driven e Entidades) para este exemplo iremos fazer um exemplo de Bean de Sessão sem estado,.

Session Bean Stateless pode ser usado para implementar a lógica corporativa em uma aplicação, ele pode ser acessado por milhares de clientes, pois não armazenam estado.

Para este exemplo, iremos usar 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: Começaremos com a construção do projeto.

2. Passo: Escolha o tipo do projeto, conforme a imagem abaixo.

3. Passo: Informe o nome do projeto e onde o mesmo será salvo.

4. Passo: Na tela seguinte, escolha o servidor Glassfish v3, conforme a imagem abaixo, por fim, clique em Finalizar.

5. Passo: Clique com o botão direito do mouse, sobre o módulo EJB -> Novo -> Bean Sessão, conforme a imagem abaixo.

6. Passo: Na tela seguinte, informe o nome do EJB, seu pacote, o tipo de sessão e escolha a Interface Local, conforme a imagem abaixo.

7. Passo: Com a Classe CalcularIPI aberta, clique com o botão direito do mouse -> Insere código, conforme a imagem abaixo.

8. Passo: Agora escolha -> Adicionar método de negócio, conforme a imagem abaixo.

9. Passo: Agora, informe o nome do método, o tipo de retorno e os parâmetros, conforme a imagem abaixo, por fim, clique em OK.

10. Passo: Foi criado uma Interface Local.

11. Passo: Altera o conteúdo da Classe CalcularIPI, conforme a imagem abaixo.

12. Passo: Para testamos nosso Session Bean, iremos criar um Servlet, para isto, clique com o botão direito no módulo web, conforme a imagem abaixo.

13. Passo: Na tela seguinte, informe o nome e o pacote do Servlet e depois clique em Finalizar, conforme a imagem abaixo.

14. Passo: Com o Servlet aberto, clique com o botão direito do mouse sobre o código, conforme a imagem abaixo.

15. Passo: Escolha -> Chamar Enterprise Bean, conforme a imagem abaixo.

16. Passo: Escolha o EJB CalcularIPI, conforme a imagem abaixo.

17. Passo: Com o Servlet aberto, altera o código, conforme a imagem abaixo.

18. Passo: Clique com o botão direito sobre o módulo EJB -> Implantar.

19. Passo: Clique com o botão direito sobre o módulo Web -> Implantar.

20. Passo: Clique com o botão direito sobre o módulo Web -> Executar.

21. Passo: Agora para testar o exemplo, informe o nome do Servlet, na barra de endereço de seu navegador, conforme a imagem abaixo.

Terminamos, o nosso exemplo de Bean de Sessão sem estado, que foi um criado um simples método, que calcula o valor do produto + o valor do IPI, retornando o valor total do produto.

Para quem quiser baixar o projeto, clique aqui.

Qualquer dúvida, crítica ou sugestão, fico a disposição.

Leia mais »