Apostila Java Web

1
Sumário
1 Introdução........................................................................................................................................3
2 Estrutura básica de uma aplicação Java Web..................................................................................4
3 Fundamentos do Java EE.................................................................................................................7
4 Tecnologia Java Servlets..................................................................................................................9
5 JavaServer Pages (JSP)..................................................................................................................14
6 Model View Controller (MVC).....................................................................................................18
7 JavaServer Faces 2.0 (JSF)............................................................................................................19
8 Introdução ao PrimeFaces.............................................................................................................21
9 Desenvolvendo um CRUD com PrimeFaces................................................................................31
10 Conclusão......................................................................................................................................51

2
1 Introdução

O que é um aplicativo Web Java?

Um aplicativo Web Java gera páginas Web interativas, que contêm vários tipos de linguagem de
marcação (HTML, XML, etc.) e conteúdo dinâmico. Normalmente é composto por componentes
Web, como JavaServer Pages (JSP), servlets e JavaBeans para modificar e armazenar dados
temporariamente, interagir com bancos de dados e serviços Web e processar o conteúdo como
resposta às requisições do cliente.
Como a maioria das tarefas envolvidas no desenvolvimento de aplicativos da Web, pode ser
repetitiva ou exigir um excedente de código padrão, os frameworks Web podem ser aplicados para
aliviar a sobrecarga associada às atividades comuns. Muitos frameworks, como JavaServer Faces,
fornecem, por exemplo, bibliotecas para páginas de modelo e gerenciamento de sessão, e
geralmente fomentam a reutilização do código.

O que é Java EE?

O Java EE (Enterprise Edition) é uma plataforma amplamente usada que contém um conjunto de
tecnologias coordenadas que reduz significativamente o custo e a complexidade do
desenvolvimento, implantação e gerenciamento de aplicativos de várias camadas centrados no
servidor. O Java EE é construído sobre a plataforma Java SE e oferece um conjunto de APIs
(interfaces de programação de aplicativos) para desenvolvimento e execução de aplicativos
portáteis, robustos, escaláveis, confiáveis e seguros no lado do servidor.
Alguns dos componentes fundamentais do Java EE são:
• O Enterprise JavaBeans (EJB): uma arquitetura gerenciada de componente do lado do
servidor utilizada para encapsular a lógica corporativa de um aplicativo. A tecnologia EJB
permite o desenvolvimento rápido e simplificado de aplicativos distribuídos, transacionais,
seguros e portáteis baseados na tecnologia Java.
• O Java Persistence API (JPA): uma estrutura que permite aos desenvolvedores gerenciar os
dados utilizando o mapeamento objeto-relacional (ORM) em aplicativos construídos na
plataforma Java.

Desenvolvimento em JavaScript e Ajax

JavaScript é uma linguagem de script orientada a objetos utilizada principalmente em interfaces no
lado do cliente para aplicativos da Web. Ajax (Asynchronous JavaScript and XML) é uma técnica
Web 2.0 que permite que sejam feitas alterações nas páginas Web sem que seja necessário atualizar
a página. O kit de ferramentas JavaScript pode ser aproveitado para implementar funcionalidades e
componentes habilitados para o Ajax em páginas Web.

Atenção
Apesar de tanta popularidade no ambiente Web, o desenvolvimento com Java não é trivial: é
necessário conhecer com certa profundidade as APIs de servlets e de JSP, mesmo que você venha
utilizar frameworks como Struts, VRaptor ou JSF. Conceitos de HTTP, session e cookies também
são mandatórios para poder enxergar gargalos e problemas que sua aplicação enfrentará.

3
Referências
Informações retiradas de:
Treinamento NetBeans
http://netbeans.org/kb/trails/java-ee_pt_BR.html?
utm_source=netbeans&utm_campaign=welcomepage
Apostila FJ-21 da Caelum
www.caelum.com.br/apostilas

2 Estrutura básica de uma aplicação Java Web

O objetivo deste capítulo é compreender a estrutura básica e obrigatória de um aplicativo Java Web.
Para tal, vamos utilizar a IDE NetBeans para nos auxiliar nesta tarefa. Siga os passos abaixo para
criar um projeto Java Web no NetBeans:
1. Acesse o menu 'Arquivos->Novo Projeto';
2. Em Escolher Projeto selecione 'Categorias = JavaWeb' e em 'Projeto = Aplicação Web',
como na imagem 1. Então clique em 'Próximo'.

Ilustração 1: Criar novo projeto Web

4
 3. Em 'Nome e Localização' defina o 'Nome do Projeto = OlaMundoWeb' e os demais campos
deixe como padrão.

Ilustração 2: Criar novo projeto Web - Nome e localização

4. Em 'Servidor e Definições' mantenha o preenchimento padrão e clique em 'Finalizar', como

na figura 3. Observe que o servidor que irá executar a aplicação Web é o Tomcat e a versão
do JavaEE é a 6. Também é importante observar que o caminho de contexto é
'/OlaMundoWeb' que implica que para acessar a aplicação deverá informar 'http:<endereço
do servidor>:<porta do servidor>/OlaMundoWeb'.

Ilustração 3: Criar novo projeto Web - Servidor

5
 5. Após estes passos o projeto 'OlaMundoWeb' foi criado. Observe a estrutura de diretórios
criada acessando a aba 'Arquivos'. Toda aplicação Java Web precisa ter uma pasta para os
arquivos Web (html, jsp, css e etc) e outra para os arquivos de classes Java. Neste cenário a
pasta 'web' armazena os Web e a pasta src/java será a pasta que terá os arquivos Java. Veja
na figura 4:

Ilustração 4: Estrutura diretórios projeto Java

Web

6. Observe que o único arquivo Web criado automaticamente pelo NetBeans foi o 'index.jsp' (a
tecnologia JSP será estudada mais à frente), trata-se de uma página HTML comum que será
a inicial porque está definida com o nome index.

Ilustração 5: index.jsp

7. Agora execute o projeto. Espera-se que exiba a tela da figura 6 que é acessada através da
URL: 'http://localhost:8084/OlaMundoWeb'

6
 Ilustração 6: Tela Olá Mundo

8. Faça o seguinte teste: acesse a aba 'Projetos' e clique com o botão direito do mouse no nome
do projeto, selecione a opção 'Limpar e Construir'. Vá na aba 'Arquivos' e veja que foi criado
o arquivo 'OlaMundoWeb.war' na pasta 'dist'. Afinal de contas o que é este arquivo '.war'?
Este é o arquivo de distribuição de aplicativos Java EE, quando você for implantar a
aplicação que você desenvolveu basta colocar na pasta especificada pelo servidor Java Web.
Aqui estamos testando no Tomcat, mas, este arquivo irá funcionar em qualquer servidor Java
Web. A extensão 'war' é um acrônimo para 'Web application Archive'.

Ilustração 7: Arquivo de distribuição

3 Fundamentos do Java EE

Após sentir o gosto de ver uma aplicação Java Web funcionando é hora de fixar alguns conceitos
fundamentais desta tecnologia.

Como o Java EE pode te ajudar

As aplicações Web de hoje em dia já possuem regras de negócio bastante complicadas. Codificar
essas muitas regras já representam um grande trabalho. Além dessas regras, conhecidas como
requisitos funcionais de uma aplicação, existem outros requisitos que precisam ser atingidos através
da nossa infraestrutura: persistência em banco de dados, transação, acesso remoto, web services,
gerenciamento de threads, gerenciamento de conexões HTTP, cache de objetos, gerenciamento da
sessão web, balanceamento de carga, entre outros. São chamados de requisitos não-funcionais.

7
Se formos também os responsáveis por escrever código que trate desses outros requisitos, teríamos
muito mais trabalho a fazer. Tendo isso em vista, a Sun criou uma série de especificações que,
quando implementadas, podem ser usadas por desenvolvedores para tirar proveito e reutilizar toda
essa infraestrutura já pronta.
O Java EE (Java Enterprise Edition) consiste de uma série de especificações bem detalhadas, dando
uma receita de como deve ser implementado um software que faz cada um desses serviços de
infraestrutura.

Algumas APIS especificadas no Java EE

• JavaServer Pages (JSP), Java Servlets, Java Server Faces (JSF) (trabalhar para a Web)
• Enterprise Javabeans Components (EJB) e Java Persistence API (JPA). (objetos distribuídos,
clusters, acesso remoto a objetos etc)
• Java API for XML Web Services (JAX-WS), Java API for XML Binding (JAX-B) (trabalhar
com arquivos xml e webservices)
• Java Autenthication and Authorization Service (JAAS) (API padrão do Java para segurança)
• Java Transaction API (JTA) (controle de transação no contêiner)
• Java Message Service (JMS) (troca de mensagens assíncronas)
• Java Naming and Directory Interface (JNDI) (espaço de nomes e objetos)
• Java Management Extensions (JMX) (administração da sua aplicação e estatísticas sobre a
mesma)

Servidor de Aplicação Java EE

É o nome dado a um servidor que implementa as especificações do Java EE. Existem diversos
servidores de aplicação famosos compatíveis com a especificação Java EE. O JBoss é um dos
líderes do mercado e tem a vantagem de ser gratuito e open source. Alguns softwares implementam
apenas uma parte dessas especificações do Java EE, como o Apache Tomcat, que só implementa
JSP e Servlets (como dissemos, duas das principais especificações), portanto não é totalmente
correto chamá-lo de servidor de aplicação. A partir do Java EE 6, existe o termo “application server
web profile”, para poder se referencia a servidores que não oferecem tudo, mas um grupo menor de
especificações, consideradas essenciais para o desenvolvimento web.

Alguns servidores de aplicação conhecidos no mercado:

• RedHat, JBoss Application Server, gratuito;
• Sun (Oracle), GlassFish, gratuito;
• Apache, Apache Geronimo, gratuito;
• Oracle/BEA, WebLogic Application Server;
• IBM, IBM Websphere Application Server;
• Sun (Oracle), Sun Java System Application Server (baseado no GlassFish);
• SAP, SAP Application Serve.

8
Servlet Container
O Java EE possui várias especificações, entre elas, algumas específicas para lidar com o
desenvolvimento de uma aplicação Web:
• JSP
• Servlets
• JSTL
• JSF
Um Servlet Container é um servidor que suporta essas funcionalidades, mas não necessariamente o
Java EE completo. É indicado a quem não precisa de tudo do Java EE e está interessado apenas na
parte web (boa parte das aplicações de médio porte se encaixa nessa categoria).
Há alguns Servlet Containers famosos no mercado. O mais famoso é o Apache Tomcat, mas há
outros como o Jetty.

Referências
Informações retiradas de:
Apostila FJ-21 da Caelum
www.caelum.com.br/apostilas

4 Tecnologia Java Servlets

Quando a Web surgiu, seu objetivo era a troca de conteúdos através, principalmente, de páginas
HTML estáticas. Eram arquivos escritos no formato HTML e disponibilizados em servidores para
serem acessados nos navegadores. Imagens, animações e outros conteúdos também eram
disponibilizados.
Mas logo se viu que a Web tinha um enorme potencial de comunicação e interação além da exibição
de simples conteúdos. Para atingir esse novo objetivo, porém, páginas estáticas não seriam
suficientes. Era preciso servir páginas HTML geradas dinamicamente baseadas nas requisições dos
usuários.
Na plataforma Java, a primeira e principal tecnologia capaz de gerar páginas dinâmicas são as
Servlets, que surgiram no ano de 1997. Atualmente o Servlets estão na versão 3 e permite o uso de
anotações para definir as configurações.

Como funciona as Servlets

Na tecnologia Servlets se usa a própria linguagem Java para criar páginas web dinâmicas, criando
uma classe que terá capacidade de gerar conteúdo HTML. O nome “servlet” vem da ideia de um

9
pequeno servidor (servidorzinho, em inglês) cujo objetivo é receber chamadas HTTP, processá-las e
devolver uma resposta ao cliente.
Uma primeira ideia da servlet seria que cada uma delas é responsável por uma página, sendo que ela
lê dados da requisição do cliente e responde com outros dados (uma página HTML, uma imagem
GIF etc). Como no Java tentamos sempre que possível trabalhar orientado a objetos, nada mais
natural que uma servlet seja representada como um objeto a partir de uma classe Java.
Cada servlet é, portanto, um objeto Java que recebe tais requisições (request) e produz algo
(response), como uma página HTML dinamicamente gerada.
O diagrama abaixo mostra três clientes acessando o mesmo servidor através do protocolo HTTP:

Ilustração 8: Servlets

Criando o primeiro Servlets

Vamos considerar o projeto 'OlaMundoWeb' feito no capítulo 2. Siga os passos a seguir para criar o
Servlets que tem o objetivo de exibir uma mensagem na tela de um navegador da Internet.
1. Clique com o botão direito do mouse em 'Pacotes de Códigos-Fonte' e selecione 'Novo-
>Outros';
2. Em 'Escolher Tipo de Arquivo' defina 'Categorias = Web' e 'Tipos de Arquivos = Servlet' e
então clique no botão 'Próximo', como na figura 9:

Ilustração 9: Criando Servlet

10
 3. Em 'Nome e Localização' defina os campos conforme a figura 10:

Ilustração 10: Criando Servlet

4. Em 'Configurar Implantação do Servlet' mantenha os valores padrões do formulário e então

clique em finalizar, como na figura 11:

Ilustração 11: Criando Servlet

11
 5. Perceba que o NetBeans criou aclasse 'OlaMundoServlet' e já definiu alguns métodos.
Vamos entender agora o que esta classe implementa.
6. Na imagem 12 vemos a declaração da classe 'OlaMundoServlet' e percebemos que ela herda
de 'HttpServlet'. É importante compreender que par uma classe ser um Servlet ela precisa
herdar de 'HttpServlet'. Na linha 19 a anotação 'WebServlet' define o nome do Servlet e o
padrão de URL para acioná-lo.

Ilustração 12: Classe OlaMundoServlet

7. Na classe 'HttpServlet' é definido os métodos 'doGet' e 'doPost' que são acionados de acordo
com a requisição HTTP (method get e post). No exemplo os dois métodos fazem a mesma
coisa, apenas chamam o método 'processRequest'.
8. Acrescente uma linha no método 'processRequest' para que fique como na imagem 13:

Ilustração 13: Método processRequest

Compreendendo o código do método 'processRequest'

Na linha 32 é definida a assinatura do método, nele são definidos os parâmetros 'request' e
'response' dos tipos 'HttpServletRequest' e 'HttpServletResponse' respectivamente. O primeiro trata-
se da requisição HTTP de onde podemos extrair os parâmetros, por exemplo, e o segundo trata-se
de um objeto que irá processar a resposta HTTP.
Na linha 35 é defino padrão 'UTF-8' para codificação da resposta.

12
 Na linha 35 é obtido o objeto 'out' do tipo 'PrintWriter' através do método 'getWriter' do
'response', com isso, tudo que for impresso fará parte da reposta.
Nas linhas 38 até 46 é definido o conteúdo de uma página HTML.

9. Execute o projeto. Não exibiu a página definida no servlet? Isso é porque você ainda não
acessou a URL correta. Para acessar acrescente na URL 'OlaMundoServlet', como na
imagem 14:

Ilustração 14: Página HTML gerada pelo Servlet

10. Se apareceu a tela acima, parabéns, o seu primeiro Servlet foi criado com sucesso.

Exercício
Implemente um novo servlet que exiba na tela o nome de uma pessoa e se ela é maior ou menor de
idade. O objetivo é que o nome e a idade sejam passados por parâmetro para o servlet e ele irá gerar
uma página HTML exibindo as informações desejadas. Os parâmetros podem ser passados via 'get'
ou 'post', como você preferir.
Dica: para recuperar o parâmetro no Servlet utilize o método 'getParameter' definido na classe
'HttpServletRequest'. Por exemplo, para recuperar o parâmetro chamado 'idade' utilize o método da
seguinte forma: 'getParameter(“idade”)'.
Veja os protótipos abaixo, que foram chamados via get, pois, foram passados através da URL da
página:

Ilustração 15: Exemplo maior de idade

13
 Ilustração 16: Exemplo menor de idade

Referências
Informações retiradas de:
Apostila FJ-21 da Caelum
www.caelum.com.br/apostilas

5 JavaServer Pages (JSP)

Até agora, vimos que podemos escrever conteúdo dinâmico através de Servlets. No entanto, se toda
hora criarmos Servlets para fazermos esse trabalho, teremos muitos problemas na manutenção das
nossas páginas e também na legibilidade do nosso código, pois sempre aparece código Java
misturado com código HTML. Imagine todo um sistema criado com Servlets fazendo a geração do
HTML.
Para não termos que criar todos os nossos conteúdos dinâmicos dentro de classes, misturando
fortemente HTML com código Java, precisamos usar uma tecnologia que podemos usar o HTML de
forma direta, e que também vá possibilitar a utilização do Java. Algo similar ao ASP e PHP. Essa
tecnologia é o JavaServer Pages (JSP) .
Se na tecnologia Servlets você gerava páginas HTML através de codigo Java, no JSP você escreve
código no meio de uma página HTML. Isto é possível através do recurso chamado Scriplet que é o
código Java escrito entre <% e %> . Esse nome é composto da palavra script (pedaço de código em
linguagem de script) com o sufixo let, que indica algo pequeno.
Podemos avançar mais um pouco e utilizar uma das variáveis já implicitas no JSP: todo arquivo JSP
já possui uma variável chamada out (do tipo JspWriter) que permite imprimir para o response
através do método println:

<% out.println(nome); %>

A variável out é um objeto implícito na nossa página JSP e existem outras de acordo com a
especificação. Repare também que sua funcionalidade é semelhante ao out que utilizávamos nas
Servlets mas sem precisarmos declará-lo antes.

14
Existem ainda outras possibilidades para imprimir o conteúdo da nossa variável: podemos utilizar
um atalho (muito parecido, ou igual, a outras linguagens de script para a Web):

<%= nome %><br>

Verificador de Maioridade em JSP

Para praticar vamos implementar o exercício que verifica se uma pessoa é maior de idade. Só que
agora será implementado via página JSP. Siga os passos, considere o projeto 'OlaMundoWeb':

1. Acesse a aba 'Projetos' e clique com o botão direito em 'Páginas Web' e selecione 'Novo-
>Outos';
2. Em 'Escolher Tipo de Arquivo' defina 'Categorias = Web' e 'Tipos de Arquivos = JSP' e então
clique em 'Próximo';
3. Em 'Nome e Localização' defina o 'Nome do Arquivo = maioridade', mantenha os demais
campos com o preenchimento padrão e então clique em 'Finalizar', como na figura seguir:

Ilustração 17: Criando arquivo JSP

4. Defina o código para o arquivo 'maioridade.jsp' como na figura 18.

Entendendo o arquivo maioridade.jsp

Este é um arquivo HTML, logo, percebe-se várias tags HTML.
Nas linhas 16 até a linha 31 foi definido um scriptlet que produz um conteúdo dinâmico para
informar se uma pessoa é maior de idade ou não.
Nas linhas 18 e 19 se obtém os parâmetros nome e idade através do objeto implícito

15
'request'.
Nas linhas a seguir são impressos na tela as informações necessárias.

Ilustração 18: Arquivo 'maioridade.jsp'

5. Execute o projeto e acesse a URL 'http://localhost:8084/OlaMundoWeb/maioridade.jsp?

nome=Josefina&idade=44' e então verifique se resultou na imagem abaixo:

Ilustração 19: Tela gerada pelo arquivo JSP

6. Teste com outras idades e veja os resultados.

16
 7. Se deu tudo como esperado sua primeira JSP está 100%.

Exercício
Implemente uma página JSP que receba 5 números inteiros como parâmetro e exiba na tela qual o
maior número.
Dica: caso você deseje criar um método a parte para encontrar o maior número é necessário
implementá-lo em um scriptlet diferenciado que deve ser circundado com '<%! %>'. Por exemplo:

<%!
String concatenarNome(String nome, String sobrenome){
return nome + sobrenome;
}
%>

Verifique o protótipo abaixo para este exercício:

Ilustração 20: Protótipo do exercício

Aprofundado mais em JSP

O objetivo das nossas aulas é apenas ter uma noção básica do funcionamento da tecnologia JSP,
porém, caso deseje conhecer mais sobre o desenvolvimento de páignas JSP complexas é necessário
realizar um estudo aprofundado sobre Expression Language, Taglibs e JSTL.

Referências
Informações retiradas de:
Apostila FJ-21 da Caelum
www.caelum.com.br/apostilas

17
6 Model View Controller (MVC)

Servlet ou JSP?
Colocar todo HTML dentro de uma Servlet realmente não nos parece a melhor ideia. O que
acontece quando precisamos mudar o design da página? O designer não vai saber Java para editar a
Servlet, recompilá-la e colocá-la no servidor.
Imagine usar apenas JSP. Ficaríamos com muito scriptlet, que é muito difícil de dar manutenção.
Uma ideia mais interessante é usar o que é bom de cada um dos dois.
O JSP foi feito apenas para apresentar o resultado, e ele não deveria fazer acessos ao banco de
dados e nem fazer a instanciação de objetos. Isso deveria estar em código Java, na Servlet.
O ideal então é que a Servlet faça o trabalho árduo, a tal da lógica de negócio. E o JSP apenas
apresente visualmente os resultados gerados pela Servlet. A Servlet ficaria então com a lógica de
negócios (ou regras de negócio) e o JSP tem a lógica de apresentação.

Ilustração 21: Arquitetura MVC

O padrão arquitetural Model View Controller (MVC) foi criado com o objetivo de separar os
códigos de tela dos códigos que representam as regras de negócio do sistema em ambiente Web.
Dando nomes a cada uma das partes da arquitetura MVC dizemos que quem é responsável por
apresentar os resultados na página web é chamado de Apresentação (View).
A servlet (e auxiliares) que faz os despachos para quem deve executar determinada tarefa é
chamada de Controladora (Controller).
As classes que representam suas entidades e as que te ajudam a armazenar e buscar os dados são
chamadas de Modelo (Model).
Esses três formam um padrão arquitetural chamado de MVC, ou Model View Controller. Ele pode
sofrer variações de diversas maneiras. O que o MVC garante é a separação de tarefas, facilitando
assim a reescrita de alguma parte, e a manutenção do código.
Para auxiliar a implementação do padrão MVC vários frameworks Java MVC foram desenvolvidos:
• JSF (especificação padrão do Java EE);
• Struts;
• Vraptor;

18
 • Stripes;
• Jboss Seam;
• Spring MVC;
• Wicket.

Referências
Informações retiradas de:
Apostila FJ-21 da Caelum
www.caelum.com.br/apostilas

7 JavaServer Faces 2.0 (JSF)

Entre os vários frameworks MVC Java, o JavaServer Faces (JSF) é o de maior destaque
simplesmente por fazer parte da especificação do Java EE.
O JSF consiste em uma API para representação de componentes e gerência do seu estado,
manipulação de eventos, validação no lado do servidor, e conversão de dados; definição de
navegação de páginas e suporte a internacionalização. Para isso, ele é baseado no uso de bibliotecas
de tags que produzem um ambiente web rico.
O JSF é apenas uma especificação, assim como a máquina virtual Java. Ou seja, nós encontramos
no mercado diversas implementações do JSF. Abaixo as implementações mais famosas:
• MyFaces
• ICEfaces
• RichFaces
• Oracle ADF
• PrimeFaces
• OpenFaces

A imagem 22 ilustra o funcionamento básico do JSF. O cliente faz um requisição HTTP ao Web
Container que irá processar as regras de negócio em código Java e produzir uma resposta em
HTML.

19
Ilustração 22: Fluxo do JSF

O ciclo de vida de uma requisição JSF é ilustrado na figura 23:

Ilustração 23: Ciclo de vida do JSF

20
Referências
Informações retiradas de:
The Java EE Tutorial
http://docs.oracle.com/javaee/6/tutorial/doc/

8 Introdução ao PrimeFaces

A implementação JSF que será adotada nesta apostila será a PrimeFaces por apresentar um rico
conjunto de componentes, Ajax nativo e por ter uma curva de aprendizado mais suave que outras
implementações JSF.

A documentação do PrimeFaces pode ser encontrada em:

http://www.primefaces.org/documentation.html

No site a seguir é possível visualizar vários componentes do PrimeFaces e sua implementação,

acesse: http://www.primefaces.org/showcase-labs/ui/home.jsf

Integrando o JSF numa aplicação Web

O NetBeans já vem com suporte ao JSF e PrimeFaces 3.2, portanto, para integrá-los ao nosso
projeto atual, 'OlaMundoWeb',será muito simples.
Vamos considerar uma prática dirigida que faça a mesma verificação de maioridade que foi feito
com Servlet e JSP, só que agora com o JSF. Siga os passos:
1. Acesse a aba 'Projetos', clique com o botão direito no nome do projeto e então selecione
'Propriedades';
2. Em 'Categorias' selecione 'Frameworks' e então clique no botão 'Adicionar';

Ilustração 24: Adicionando Framework

21
 3. Na tela que se abre selecione JavaServer Faces e clieque em ok;

Ilustração 25: Adicinando framework JSF

4. Na aba 'Componentes' selecione o 'PrimeFaces' e clique em 'Ok'.

Ilustração 26: Definindo framework PrimeFaces

22
 5. Perceba que foram criados os '/web/index.xhml', '/web/welcomePrimeFaces.xhml' e
'/web/WEB-INF/web.xml'. Os dois primeiros são exemplos do JSF e PrimeFaces, eles não
serão úteis para nós, se deseja pode apagar. Já o '/web/WEB-INF/web.xml' arquivo é de
extrema importância e será explicado mais a frente.
6. Vamos criar nosso formulário para entrada de dados, então, clique com o botão direito do
mouse em 'Páginas Web' e selecione 'Novo->Outros';
7. Em 'Escolher Tipo de Arquivo' selecione 'Categorias = JavaServer Faces' e 'Tipos de
Arquivos = Página JSF', então clique em 'Próximo';

Ilustração 27: Criando páigina JSF

8. Em 'Nome e Localização' defina o 'Nome do Arquivo = maioridadeJSF', mantenha os
demais campos com preenchimento padrão e clique em 'Finalizar';

Ilustração 28: Definindo nome do arquivo JSF

23
 9. Perceba que foi criado o arquivo 'maioridadeJSF.xhtml' na pasta 'web'.

Ilustração 29: Arquivo maioridadeJSF.xhtml

Entendendo o arquivo
• Trata-se de um arquivo no formato XHTML, pois, o JSF exige que as páginas
estejam neste formato. Para conhecer mais sobre o padrão XHTML acesse:
http://www.w3schools.com/html/html_xhtml.asp;
• Na linha 4 é definido a taglib básica do JSF. O uso desta taglib é percebida em
'<h:head>' e '<h:body>';
• Os arquivos XHTML do JSF segue a estrutura normal de uma página HTML, porém,
o conteúdo dinâmico será implementado com taglibs do JSF.
10. Antes de modificarmos o arquivo 'maioridadeJSF.xhml' precisamos informar que esta será a
página inicial do nosso sistema, para isso, faça as modificações abaixo no arquivo 'web.xml';

Ilustração 30: Arquivo web.xml

24
 Entendendo o arquivo 'web.xml'
• Este é o arquivo de configuração de uma aplicação Java Web;
• Nas linhas 3 – 6 é definido um parâmetro do sistema que indica que o projeto está no
estágio de desenvolvimento;
• Nas linhas 7 – 15 é definido o servlet do JSF e que o acesso às páginas do JSF será
feito através do padrão de URL '/faces/*';
• Nas linhas 16 – 20 é configurado o tempo de sessão, neste caso está definido 30
minutos;
• A linha 22 é onde você precisa modificar, ela indica qual é página inicial do sistema.
11. Vamos implementar um formulário que solicita que o usuário informe o nome e idade para
verificar se a pessoa possui maioridade. Faça as modificações da acordo com a imagem
abaixo:

Ilustração 31: Modificando o arquivo maioridadeJSF.xhtml

Entendendo o arquivo
• Na linha 5 foi adicionado a taglib para os componentes do 'PrimeFaces'
representados pelo prefixo 'p';
• Na linha 10 foi definido um 'form' que deve abranger toda a área que onde há
requisição;
• Na linha 11 é definido um painel que será renderizado como uma 'div'. Perceba que
no atributo 'header' se define um cabeçalho para o painel;
• Nas linhas 12 e 14 são definidos os campos de entrada de texto;
• Na linha 16 é definido um botão.
12. Execute o projeto e veja o resultado. Até agora temos um formulário que ainda não faz nada.

25
 Ilustração 32: Página HTML gerada pelo PrimeFaces

13. Vamos dar vida ao nosso formulário, para isso, precisamos definir o 'Controller' da nossa
tela. Observação, o JSF nomeia o objetos que representam o 'Controller' como
'ManagedBeand'.
14. Acesse a aba 'Projetos', clique com o botão direito do mouse no pacote 'olamundoweb' e
selecione 'Novo->Outro';
15. Em 'Escolher Tipo de Arquivo' selecione 'Categorias = JavaServer Faces' e 'Tipo de
Arquivos = Bean Gerenciado JSF' e clique em 'Próximo';

Ilustração 33: Criando classe Controller

26
16. Em 'Nome e Localização' defina o 'Nome da Classe = MaioridadeController', 'Escopo =
session', mantenha os demais campos com o preenchimento padrão e clique em 'Finalizar'.

Ilustração 34: Criando classe Controller

17. O arquivo 'MaioridadeController.java' foi criado, modifique para que fique como na figura
35.
Entendendo a classe MaioridadeController
• Na linha 14 a anotação '@ManagedBean' define que a classe em questão é um
'Controller' do JSF;
• Na linha 15 a anottação '@SessionScoped' define que os objetos deste 'Controller'
serão mantidos no escopo de sessão;
• Nas linhas 19 e 20 são definidos os atributos que irão mapear os valores dos campos
do formulários;
• Nas linhas 22 e 23 são definidos atributos que irão auxiliar na exibição do resultado
da verificação;
• Na linha 30 é definido, no construtor da classe, que inicialmente não é para ser
exibido o resultado;
• Nas linhas 36 – 44 é disparado o evento que contém a lógica de negócio.

27
 Ilustração 35: Classe MaioridadeController

18. O arquivo 'maioridadeJSF.xhtml' também precisa ser modificado para dar vida a tela. Faça
as modificações conforme a figura 36.
Entendendo as modificações no arquivo
• Nas linhas 13 e 15 são definidos os atributos 'value' para os campos nome e idade.
Agora o valor dos campos estão amarrados com os atributos do 'Controller';
• Nas linhas 17 e 18 foi definido a ação que será executada quando o usuário clicar no
botão, através do atributo 'actionListener' que está vinculado ao método 'verificar' do
'Controller'. O atributo 'update' define qual parte da tela que será atualizada após o
clique no botão, neste caso o painel 'pnlResultado';
• Nas linhas 20 – 26 contém o painel que irá exibir o resultado da verificação da idade;
• A taglib '<c:if >' é um utilitário para customizar o conteúdo que será exibido na tela;

28
 • Nas linhas 23 e 24 se vê o atributo 'rendered' que está presente em todos os
componentes visuais do JSF, trata-se apenas de um teste booleano para verificar se o
componente deve ser renderizado ou não.

Ilustração 36: Modificando o arquivo maioridadeJSF.xhmtl

19. Execute o projeto e teste;

Ilustração 37: Testando implementação

29
 20. Muito bom, muito legal e funcional. Mas, os campos nome e idade deveriam ser
obrigatórios. Como fazer isso através do JSF? Faça as modificações destacadas em
vermelho no arquivo 'maioridadeJSF.xhtml', conforme a imagem 38.

Ilustração 38: Modificando o arquivo maioridadeJSF.xhtml

Entendendo as modificações no arquivo

• Na linha 13 é definido um componente de mensagem que terá seu conteúdo
atualizado automaticamente;
• Nas linhas 15 e 18 são definidos que os campos nome e idade são requeridos.
21. Teste e veja os resultados.

Ilustração 39: Testando a validação dos campos

30
 22. Outra validação que você pode testar é quanto a idade aceitar somente inteiros.
Automaticamente o JSF faz a conversão da String do campo do formulário para o tipo do
atributo que está vinculado. Tente colocar uma String para idade e veja que já existe uma
validação padrão.

Ilustração 40: Testando validação de conversão de valores

23. Chegamos ao fim desta primeira prática do JSF. O que achou? Difícil! Sim, mas é muito
poderoso para o desenvolvimento de sistemas Web. Acostume, só estamos começando.

9 Desenvolvendo um CRUD com PrimeFaces

Este capítulo tem o objetivo de ser um guia dirigido para a construção de uma aplicação complexa
com o JSF PrimeFaces além de praticar a integração de uma aplicação Java EE com o banco de
dados via JPA. Nestas prática dirigida será considerado a boa prática da separação das camadas de
negócio e persistência, além de colocar em prática o padrão arquitetural MVC.
Deseja-se um sistema que faça o cadastro de clientes de uma empresa. Os dados do cliente que se
deseja persistir são nome, cpf, sexo, data de nascimento, cidade, salário, telefone e email. Apenas os
campos salário, telefone e e-mail não são obrigatórios. Deve-se considerar que não se cadastra
clientes menores de idade.
Vale ressaltar que a empresa em questão possui lojas apenas nas cidades: Januária-MG, Montes

31
Claros-MG, Volta Redonda-RJ, Rio de Janeiro-RJ, São Caetano-SP e Campinas-SP; os clientes
estão vinculados somente a estas cidades.
Veja os protótipos a seguir para se orientar na construção do sistema:

Ilustração 41: Tela inicial do sistema

32
Ilustração 42: Tela de cadastro de clientes
Ilustração 43: Tela de clientes cadastrados

Siga os passos:
1 Crie um novo Projeto 'JavaWeb' com suporte ao framework JSF PrimeFaces. Neste guia será
considerado um projeto com nome 'CadastroCliente'. Na tela 'Servidor e Definições' marque
a opção 'Ativar injeção de contextos e dependências';

Ilustração 44: Criando projeto Web

33
2 Após criar o projeto, os arquivos 'index.xhtml' e 'welcomePrimfaces.xhtml' podem ser
apagados;
3 Crie um banco de dados. Neste guia será considerando o banco de dados Derby. A conexão
ficou 'jdbc:derby://localhost:1527/CADASTRO_CLIENTE' com usuário 'root' e senha 'root';
4 Adicione o driver JDBC na pasta '/web/WEB-INF/lib';

Ilustração 45: Driver JDBC na pasta

web/WEB-INF/lib

5 Crie uma unidade de persistência para o banco de dados criado;

6 Crie os seguintes pacotes para separar os códigos das camadas do sistema:

Ilustração 46: Estrutura de diretórios

7 Faça uma análise do domínio da aplicação, ou seja, as classes que representam as entidades
do sistema. Quais classes você identificou? No meu caso identifiquei somente a classe
Cliente ilustrada a seguir:

Ilustração 47:
Diagrama de classe do
projeto

34
8 Implemente a classe de entidade 'Cliente';

Ilustração 48: Classe de entidade Cliente

9 [CRIANDO TEMPLATE] Vamos criar um template padrão para todas a telas do sistema,
para isso, existe o conceito de Facelets no JSF. Desejamos um template em que tenha um
cabeçalho, painel lateral esquerdo e um painel para os conteúdos na área central. Siga os
passos:
9.1 Na aba 'Projetos' clique com o botão direito do mouse no nome do projeto, e
selecione 'Novo->Outros';
9.2 Em 'Escolher Tipo de Arquivo' selecione 'Categorias = JavaServer Faces' e 'Tipos
de Arquivos = Modelo de Facelets', e então clique em 'Próximo';
9.3 Em 'Nome e Localização' defina 'Nome do Arquivo = template' e o 'Estilo de
Layout' correspondente, conforme imagem 49:

35
Ilustração 49: Criando template de telas
9.4 Foi criado o arquivo 'template.xhtml'. Faça as modificações conforme imagem
50.
Entendendo o arquivo 'template.xhtml'
• Este arquivo será o modelo para todas as outras tela do sistema;
• Nas linhas 8 – 13 é definido o cabeçalho da página. Veja que foram criados arquivos
CSS padrões que você pode modificar.
• Nas linhas 16 – 18 é definido o espaço reservado para a parte superior da tela.
Observe que a tag '<ui:insert name=”top”>' define um módulo que pode ser utilizado
pelas telas que implementarem o template.
• Nas linhas 22 – 27 é definido a barra lateral esquerda do template. A tag
'<p:commandLink >' define um Link que redireciona para outras páginas.
• Nas linhas 29 – 31 é definido o espaço reservado para o conteúdo das páginas.

36
Ilustração 50: Template das telas do projeto

10 [CRIANDO TELA INICIAL] Agora que temos o template criado vamos criar
nossa primeira página que implementa o temaplate. O objetivo é criar a tela inicial do
sistema, a tela index. Para isso siga os passos:
10.1 Acesse a aba 'Projetos' e clique com o botão direito do mouse no nome do
projeto e selecione 'Novo->Outros';
10.2 Em 'Escolher Tipo de Arquivo' selecione 'Categorias = JavaServer Faces' e 'Tipos
de Arquivos = Cliente de Modelos de Facelets', e então clique em 'Próximo';

37
Ilustração 51: Criando tela que utiliza o template

10.3 Em 'Nome e Localização' defina 'Nome do Arquico = index', em 'Modelo'

escolha o arquivo 'template.xhmtl' e então clique em 'Finalizar';

Ilustração 52: Criando index.xhtml

38
 10.4 Modifique o arquivo 'index.xhtml' conforme a imagem abaixo:

Ilustração 53: Arquivo index.xhtml

Entendendo o arquivo 'index.xhtml'

• Este arquivo será a página inicial do sistema, ele aproveita o modelo do arquivo
'template.xhtml' e só é definido o conteúdo específico;
• Na linha 9 é definido que este arquivo tem como referência o 'template.xhmtl';
• Na linha 10 é definido o conteúdo que irá ocupar a área 'content', ou seja, a área que
fica o conteúdo da página.
10.5 Execute e veja o resultado:

Ilustração 54: Tela inicial do projeto

39
 11 [TELA CADASTRO CLIENTES] Esta será a tela que terá a entrada dos dados do cliente.
Para isso crie uma nova tela como visto na criação da tela 'index.xhtml', crie com o nome
'cadastroCliente.xhtml';
11.1 Crie também a classe Java que será o 'Controller' desta tela, crie com o nome
'CadastroClienteController.java' no pacote 'br.edu.ifnmg.cadastrocliente.controle';
12 [Campo Nome] Este guia será feito em pequenos passos. O ideal é que a cada
campo criado o projeto seja executado e que se verifique e compreenda o resultado da
modificação. Portanto, faça as modificações a seguir:
12.1 Modifique a classe 'Controller' conforme imagem 55.

Ilustração 55: Classe CadastroClienteController

40
 Entendendo a classe CadastroClienteController
• Este é o 'Controller' para a tela 'cadastroCliente.xhtml';
• Na linha 25 é declarado um objeto da classe 'Cliente' que irá se vincular com os
campos da tela;
• Nas linhas 31 – 34 é definido o método que irá carregar a tela e conduzir a tela de
cadastro de clientes. A 'String' retornada se refere página que deve ser carregada;
• Nas linhas 39 – 43 é definido o método 'salvar' que será invocado com o clique no
botão 'Salvar'. Esta ainda é uma implementação somente para teste, para se verificar
se a aplicação está funcionando;
• Nas linhas 48 – 57 é definido um método para validar se o campo foi preenchido sem
espaços em branco.
12.2 Modifique o aquivo 'cadastroCliente.xhtml' como na figura 56:

Ilustração 56: Arquivo cadastroCliente.xhtml

41
 Entendendo o arquivo 'cadastroCliente.xhtml'
• Na linha 15 – 18 é definido o campo 'Nome' do tipo '<p:inputText >' foi definido
como 'required' e com a validação de espaço em branco 'validator'.
• Nas linhas 23 e 24 são definidos os botões para ação de salvar e limpar a tela.
12.3 Modificações no arquivo 'template.xhtml'. Vamos precisar modificar como o
menu chama a tela de cadastro de clientes, para isso, faça as modificações destacadas na
imagem 57.

Ilustração 57: Modificando o arquivo template.xhtml

Entendendo a modificação
• Modifique apenas o 'commandLink' que aciona a tela de cadastro de clientes. É
importante definir a mudança de tela como 'ajax=false' para evitar problemas de
navegação futura. Neste caso o método 'iniciarTela' do 'Controller' será acionado.
12.4 Execute o projeto e faça testes:

Ilustração 59: Teste com sucesso Ilustração 58: Teste com campo não preenchido

42
 Ilustração 60: Teste de campo preenchido com sucesso

13 [Campo CPF] O campo CPF é especial, pois, precisa de máscara. Mas, o JSF
facilita nossa vida, veja como é simples definir a máscara. Acrescente o trecho de código
abaixo campo 'Nome' no arquivo 'cadastroCliente.xhtml':

Ilustração 61: Código do campo CPF

Entendendo a mudança:
• A tag 'inputMask' é semelhante ao 'inputText' a diferença fundamental é que é
definido a máscara no atributo 'mask'.
13.1 Execute o projeto e veja se a máscara funciona corretamente.
14 [Campo Sexo] Neste campo será utilizado o componente do tipo 'Radio Button'.
Adicione o trecho de código abaixo do campo CPF.

Ilustração 62: Código campo Sexo

14.1 Até agora nossa tela de cadastro de cliente tem o seguinte visual. Teste e veja:

43
Ilustração 63: Tela parcial de cadastro de cliente

15 [Campo Data de Nascimento] Neste campo será exibido um calendário para que o
usuário selecione a data ou então a digite, para isto utilize o componente '<p:calendar >'
como no trecho de código que deve ser colocado após o campo 'Sexo':

Ilustração 64: Código campo Data de Nascimento

16 [Campo Cidade] Neste campo será exibido uma combo com as cidades. Acrescente
o código abaixo do campo 'Data de Nascimento':

44
Ilustração 65: Código campo Cidade

17 [Campo Salário] Neste campo o valor será tratado pelo padrão '#,###.00'.
Acrescente o trecho de código abaixo do campo 'Data Nascimento':

Ilustração 66: Código campo Salário

18 [Campo Telefone] Neste campo é utilizado uma máscara para o telefone, adicione o
trecho de código abaixo do campo 'Saláro'.

Ilustração 67: Código campo Telefone

19 [Campo Email] Este campo será um 'inputText' normal, ele será validade na camada
de negócio. Adicione o trecho de código após o campo 'Telefone':

45
Ilustração 68: Código campo Email
20 Após seguir todos estes passos temos a tela vista na figura 69.

Ilustração 69: Tela de cadastro de cliente validando todos os campos

obrigatórios

46
 21 [Camada de Persistência] Vamos agora implementar os códigos necessários para
persistir os dados do cliente no banco de dados.
21.1 Crie a classe 'GerenciadoEntidade' que será um utilitário para obter a conexão
com o banco de dados:

Ilustração 70: Classe GerenciadorEntidade

21.2 Crie a classe 'ClienteDAO' que será a responsável por persistir os dados da classe
'Cliente'.

Ilustração 71: Classe ClienteDAO

22 [Camada de Negócio] Esta é camada responsável por garantir a consistência das

regras de negócio do seu sistema. Neste cenário as seguintes regras de negócio serão
validadas para salvar um cliente:
• O CPF do cliente deve ser válido;
• Não pode cadastrar clientes com CPF iguais;
• O sexo somente pode ser 'F' para feminino e 'M' para masculino;
• O cliente deve ser maior de idade;
• O salário, se informado, não pode ser negativo;
22.1 Para validar o CPF vamos utilizar uma biblioteca chamada 'Stella' que serve para
fazer algumas validações de CPF, CNPJ e outros. Ela pode ser baixada em:
https://github.com/downloads/caelum/caelum-stella/caelum-stella-core-2.0-beta1.jar.
Baixe a biblioteca e adicione na pasta /web/WEB-INF/lib e também adicione ao
classpath do projeto. Para mais informações acesse a wiki do projeto:

47
 https://github.com/caelum/caelum-stella/wiki/Validadores-core.
22.2 Modifique a classe 'ClienteDAO', adicione o método 'buscar' na classe, conforme
imagem abaixo:

Ilustração 72: Método Buscar em ClienteDAO

22.3 Crie a classe 'ClienteBO' e crie o método 'salvar' que tem o propósito de salvar
um cliente observando as regras de negócio:

Ilustração 73: Classe ClienteBO

48
 22.4 Modifique o método 'Salvar' do 'Controller':

Ilustração 74: Modificações no método salvar do Controller

22.5 Teste e veja os resultados:

Ilustração 75: Tela de cadastro de cliente já em estado funcional

49
 23 Muito legal, mas, seria interessante o usuário ter um retorno enquanto se processa a
requisição Ajax. Para isso vamos adicionar uma tela de 'Carregando'.
23.1 Adicione o arquivo 'loadgin.gif' na pasta '/web/resources/imagem'. O arquivo
pode ser baixado em: http://logd.tw.rpi.edu/files/loading.gif
23.2 Adicione o trecho de código no arqivo 'template.xhtml' logo no início da tag
'<h:body >':

Ilustração 76: Modificação no arquivo template.xhtml para adicionar imagem de carregando

Entendendo a modificação
• A tag '<p:ajaxStatus >' define qual ação será executada quando se inicia e finaliza
uma requisição ajax.
23.3 A tag '<p:dilog >' define uma tela no estilo 'modal' que impede que o usuário
modifique a tela principal e exibe o arquivo '.gif'.
23.4 Teste e veja os resultados.
24 [Tela de Clientes Cadastrados] Após criar a tela de cadastro de clientes, você já tem
condições de evoluir sozinho. Construa você mesmo a tela de visualização de clientes
cadastrados, conforme a imagem 77. Para implementar uma tabela utilize o componente
'<p:datatable >', para conhecer exemplos de tabela acesse:
'http://www.primefaces.org/showcase-labs/ui/datatableHome.jsf'.

Ilustração 77: Tela de clientes cadastrados

50
10 Conclusão

Nesta apostila você aprendeu os conceitos básicos de uma aplicação Java Web (Servlets
e JSP), foi apresentado ao desenvolvimento seguindo o padrão arquitetural MVC e a
utilização do framework JSF baseado na implementação PrimeFaces com AJAX
integrado. Também colocou em prática o desenvolvimento de uma aplicação Web com
acesso ao banco de dados via framework JPA.

Foi possível compreender que o desenvolvimento Web é mais complexo que uma
aplicação desktop convencional, por acrescentar uma série de fatores que o programador
deve ter conhecimento.

Pratique e conheça mais as possibilidades do desenvolvimento de aplicações ricas em

Java utilizando frameworks como o JSF.

51