apostila java web primefaces

Apostila Java Web

1

Sumrio1 Introduo........................................................................................................................................32 Estrutura bsica de uma aplicao Java Web..................................................................................43 Fundamentos do Java EE.................................................................................................................74 Tecnologia Java Servlets..................................................................................................................95 JavaServer Pages (JSP)..................................................................................................................146 Model View Controller (MVC).....................................................................................................187 JavaServer Faces 2.0 (JSF)............................................................................................................198 Introduo ao PrimeFaces.............................................................................................................219 Desenvolvendo um CRUD com PrimeFaces................................................................................3110 Concluso......................................................................................................................................51

2

1 Introduo

O que um aplicativo Web Java?

Um aplicativo Web Java gera pginas Web interativas, que contm vrios tipos de linguagem de marcao (HTML, XML, etc.) e contedo dinmico. Normalmente composto por componentes Web, como JavaServer Pages (JSP), servlets e JavaBeans para modificar e armazenar dados temporariamente, interagir com bancos de dados e servios Web e processar o contedo como resposta s requisies do cliente.

Como a maioria das tarefas envolvidas no desenvolvimento de aplicativos da Web, pode ser repetitiva ou exigir um excedente de cdigo padro, os frameworks Web podem ser aplicados para aliviar a sobrecarga associada s atividades comuns. Muitos frameworks, como JavaServer Faces, fornecem, por exemplo, bibliotecas para pginas de modelo e gerenciamento de sesso, e geralmente fomentam a reutilizao do cdigo.

O que Java EE?

O Java EE (Enterprise Edition) uma plataforma amplamente usada que contm um conjunto de tecnologias coordenadas que reduz significativamente o custo e a complexidade do desenvolvimento, implantao e gerenciamento de aplicativos de vrias camadas centrados no servidor. O Java EE construdo sobre a plataforma Java SE e oferece um conjunto de APIs (interfaces de programao de aplicativos) para desenvolvimento e execuo de aplicativos portteis, robustos, escalveis, confiveis e seguros no lado do servidor.

Alguns dos componentes fundamentais do Java EE so:

O Enterprise JavaBeans (EJB): uma arquitetura gerenciada de componente do lado do servidor utilizada para encapsular a lgica corporativa de um aplicativo. A tecnologia EJB permite o desenvolvimento rpido e simplificado de aplicativos distribudos, transacionais, seguros e portteis 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 construdos 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 tcnica Web 2.0 que permite que sejam feitas alteraes nas pginas Web sem que seja necessrio atualizar a pgina. O kit de ferramentas JavaScript pode ser aproveitado para implementar funcionalidades e componentes habilitados para o Ajax em pginas Web.

Ateno

Apesar de tanta popularidade no ambiente Web, o desenvolvimento com Java no trivial: necessrio 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 tambm so mandatrios para poder enxergar gargalos e problemas que sua aplicao enfrentar.

3

Referncias

Informaes 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 bsica de uma aplicao Java Web

O objetivo deste captulo compreender a estrutura bsica e obrigatria 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 = Aplicao Web', como na imagem 1. Ento clique em 'Prximo'.

4

Ilustrao 1: Criar novo projeto Web

3. Em 'Nome e Localizao' defina o 'Nome do Projeto = OlaMundoWeb' e os demais campos deixe como padro.

4. Em 'Servidor e Definies' mantenha o preenchimento padro e clique em 'Finalizar', como na figura 3. Observe que o servidor que ir executar a aplicao Web o Tomcat e a verso do JavaEE a 6. Tambm importante observar que o caminho de contexto '/OlaMundoWeb' que implica que para acessar a aplicao dever informar 'http::/OlaMundoWeb'.

5

Ilustrao 2: Criar novo projeto Web - Nome e localizao

Ilustrao 3: Criar novo projeto Web - Servidor

5. Aps estes passos o projeto 'OlaMundoWeb' foi criado. Observe a estrutura de diretrios criada acessando a aba 'Arquivos'. Toda aplicao Java Web precisa ter uma pasta para os arquivos Web (html, jsp, css e etc) e outra para os arquivos de classes Java. Neste cenrio a pasta 'web' armazena os Web e a pasta src/java ser a pasta que ter os arquivos Java. Veja na figura 4:

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 pgina HTML comum que ser a inicial porque est definida com o nome index.

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

6

Ilustrao 4: Estrutura diretrios projeto Java Web

Ilustrao 5: index.jsp

8. Faa o seguinte teste: acesse a aba 'Projetos' e clique com o boto direito do mouse no nome do projeto, selecione a opo '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 distribuio de aplicativos Java EE, quando voc for implantar a aplicao 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 extenso 'war' um acrnimo para 'Web application Archive'.

3 Fundamentos do Java EE

Aps sentir o gosto de ver uma aplicao Java Web funcionando hora de fixar alguns conceitos fundamentais desta tecnologia.

Como o Java EE pode te ajudar

As aplicaes Web de hoje em dia j possuem regras de negcio bastante complicadas. Codificar essas muitas regras j representam um grande trabalho. Alm dessas regras, conhecidas como requisitos funcionais de uma aplicao, existem outros requisitos que precisam ser atingidos atravs da nossa infraestrutura: persistncia em banco de dados, transao, acesso remoto, web services, gerenciamento de threads, gerenciamento de conexes HTTP, cache de objetos, gerenciamento da sesso web, balanceamento de carga, entre outros. So chamados de requisitos no-funcionais.

7

Ilustrao 6: Tela Ol Mundo

Ilustrao 7: Arquivo de distribuio

Se formos tambm os responsveis por escrever cdigo que trate desses outros requisitos, teramos muito mais trabalho a fazer. Tendo isso em vista, a Sun criou uma srie de especificaes 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 srie de especificaes bem detalhadas, dando uma receita de como deve ser implementado um software que faz cada um desses servios 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 distribudos, 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 padro do Java para segurana)

Java Transaction API (JTA) (controle de transao no continer)

Java Message Service (JMS) (troca de mensagens assncronas)

Java Naming and Directory Interface (JNDI) (espao de nomes e objetos)

Java Management Extensions (JMX) (administrao da sua aplicao e estatsticas sobre a mesma)

Servidor de Aplicao Java EE

o nome dado a um servidor que implementa as especificaes do Java EE. Existem diversos servidores de aplicao famosos compatveis com a especificao Java EE. O JBoss um dos lderes do mercado e tem a vantagem de ser gratuito e open source. Alguns softwares implementam apenas uma parte dessas especificaes do Java EE, como o Apache Tomcat, que s implementa JSP e Servlets (como dissemos, duas das principais especificaes), portanto no totalmente correto cham-lo de servidor de aplicao. A partir do Java EE 6, existe o termo application server web profile, para poder se referencia a servidores que no oferecem tudo, mas um grupo menor de especificaes, consideradas essenciais para o desenvolvimento web.

Alguns servidores de aplicao 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 vrias especificaes, entre elas, algumas especficas para lidar com o desenvolvimento de uma aplicao Web:

JSP

Servlets

JSTL

JSF

Um Servlet Container um servidor que suporta essas funcionalidades, mas no necessariamente o Java EE completo. indicado a quem no precisa de tudo do Java EE e est interessado apenas na parte web (boa parte das aplicaes de mdio porte se encaixa nessa categoria).

H alguns Servlet Containers famosos no mercado. O mais famoso o Apache Tomcat, mas h outros como o Jetty.

Referncias




4 Tecnologia Java Servlets

Quando a Web surgiu, seu objetivo era a troca de contedos atravs, principalmente, de pginas HTML estticas. Eram arquivos escritos no formato HTML e disponibilizados em servidores para serem acessados nos navegadores. Imagens, animaes e outros contedos tambm eram disponibilizados.

Mas logo se viu que a Web tinha um enorme potencial de comunicao e interao alm da exibio de simples contedos. Para atingir esse novo objetivo, porm, pginas estticas no seriam suficientes. Era preciso servir pginas HTML geradas dinamicamente baseadas nas requisies dos usurios.

Na plataforma Java, a primeira e principal tecnologia capaz de gerar pginas dinmicas so as Servlets, que surgiram no ano de 1997. Atualmente o Servlets esto na verso 3 e permite o uso de anotaes para definir as configuraes.

Como funciona as Servlets

Na tecnologia Servlets se usa a prpria linguagem Java para criar pginas web dinmicas, criando uma classe que ter capacidade de gerar contedo HTML. O nome servlet vem da ideia de um

9

pequeno servidor (servidorzinho, em ingls) cujo objetivo receber chamadas HTTP, process-las e devolver uma resposta ao cliente.

Uma primeira ideia da servlet seria que cada uma delas responsvel por uma pgina, sendo que ela l dados da requisio do cliente e responde com outros dados (uma pgina HTML, uma imagem GIF etc). Como no Java tentamos sempre que possvel 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 requisies (request) e produz algo (response), como uma pgina HTML dinamicamente gerada.

O diagrama abaixo mostra trs clientes acessando o mesmo servidor atravs do protocolo HTTP:

Criando o primeiro Servlets

Vamos considerar o projeto 'OlaMundoWeb' feito no captulo 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 boto direito do mouse em 'Pacotes de Cdigos-Fonte' e selecione 'Novo->Outros';

2. Em 'Escolher Tipo de Arquivo' defina 'Categorias = Web' e 'Tipos de Arquivos = Servlet' e ento clique no boto 'Prximo', como na figura 9:

10

Ilustrao 8: Servlets

Ilustrao 9: Criando Servlet

3. Em 'Nome e Localizao' defina os campos conforme a figura 10:

4. Em 'Configurar Implantao do Servlet' mantenha os valores padres do formulrio e ento clique em finalizar, como na figura 11:

11



5. Perceba que o NetBeans criou aclasse 'OlaMundoServlet' e j definiu alguns mtodos. Vamos entender agora o que esta classe implementa.

6. Na imagem 12 vemos a declarao 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 anotao 'WebServlet' define o nome do Servlet e o padro de URL para acion-lo.

7. Na classe 'HttpServlet' definido os mtodos 'doGet' e 'doPost' que so acionados de acordo com a requisio HTTP (method get e post). No exemplo os dois mtodos fazem a mesma coisa, apenas chamam o mtodo 'processRequest'.

8. Acrescente uma linha no mtodo 'processRequest' para que fique como na imagem 13:

Compreendendo o cdigo do mtodo 'processRequest'

Na linha 32 definida a assinatura do mtodo, nele so definidos os parmetros 'request' e 'response' dos tipos 'HttpServletRequest' e 'HttpServletResponse' respectivamente. O primeiro trata-se da requisio HTTP de onde podemos extrair os parmetros, por exemplo, e o segundo trata-se de um objeto que ir processar a resposta HTTP.

Na linha 35 defino padro 'UTF-8' para codificao da resposta.

12

Ilustrao 12: Classe OlaMundoServlet

Ilustrao 13: Mtodo processRequest

Na linha 35 obtido o objeto 'out' do tipo 'PrintWriter' atravs do mtodo 'getWriter' do 'response', com isso, tudo que for impresso far parte da reposta.

Nas linhas 38 at 46 definido o contedo de uma pgina HTML.

9. Execute o projeto. No exibiu a pgina definida no servlet? Isso porque voc ainda no acessou a URL correta. Para acessar acrescente na URL 'OlaMundoServlet', como na imagem 14:

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

Exerccio

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 parmetro para o servlet e ele ir gerar uma pgina HTML exibindo as informaes desejadas. Os parmetros podem ser passados via 'get' ou 'post', como voc preferir.

Dica: para recuperar o parmetro no Servlet utilize o mtodo 'getParameter' definido na classe 'HttpServletRequest'. Por exemplo, para recuperar o parmetro chamado 'idade' utilize o mtodo da seguinte forma: 'getParameter(idade)'.

Veja os prottipos abaixo, que foram chamados via get, pois, foram passados atravs da URL da pgina:

13

Ilustrao 14: Pgina HTML gerada pelo Servlet

Ilustrao 15: Exemplo maior de idade

Referncias




5 JavaServer Pages (JSP)

At agora, vimos que podemos escrever contedo dinmico atravs de Servlets. No entanto, se toda hora criarmos Servlets para fazermos esse trabalho, teremos muitos problemas na manuteno das nossas pginas e tambm na legibilidade do nosso cdigo, pois sempre aparece cdigo Java misturado com cdigo HTML. Imagine todo um sistema criado com Servlets fazendo a gerao do HTML.

Para no termos que criar todos os nossos contedos dinmicos dentro de classes, misturando fortemente HTML com cdigo Java, precisamos usar uma tecnologia que podemos usar o HTML de forma direta, e que tambm v possibilitar a utilizao do Java. Algo similar ao ASP e PHP. Essa tecnologia o JavaServer Pages (JSP) .

Se na tecnologia Servlets voc gerava pginas HTML atravs de codigo Java, no JSP voc escreve cdigo no meio de uma pgina HTML. Isto possvel atravs do recurso chamado Scriplet que o cdigo Java escrito entre . Esse nome composto da palavra script (pedao de cdigo em linguagem de script) com o sufixo let, que indica algo pequeno.

Podemos avanar mais um pouco e utilizar uma das variveis j implicitas no JSP: todo arquivo JSP j possui uma varivel chamada out (do tipo JspWriter) que permite imprimir para o response atravs do mtodo println:

A varivel out um objeto implcito na nossa pgina JSP e existem outras de acordo com a especificao. Repare tambm que sua funcionalidade semelhante ao out que utilizvamos nas Servlets mas sem precisarmos declar-lo antes.

14

Ilustrao 16: Exemplo menor de idade

Existem ainda outras possibilidades para imprimir o contedo da nossa varivel: podemos utilizar um atalho (muito parecido, ou igual, a outras linguagens de script para a Web):

Verificador de Maioridade em JSP

Para praticar vamos implementar o exerccio que verifica se uma pessoa maior de idade. S que agora ser implementado via pgina JSP. Siga os passos, considere o projeto 'OlaMundoWeb':

1. Acesse a aba 'Projetos' e clique com o boto direito em 'Pginas Web' e selecione 'Novo->Outos';

2. Em 'Escolher Tipo de Arquivo' defina 'Categorias = Web' e 'Tipos de Arquivos = JSP' e ento clique em 'Prximo';

3. Em 'Nome e Localizao' defina o 'Nome do Arquivo = maioridade', mantenha os demais campos com o preenchimento padro e ento clique em 'Finalizar', como na figura seguir:

4. Defina o cdigo para o arquivo 'maioridade.jsp' como na figura 18.

Entendendo o arquivo maioridade.jsp

Este um arquivo HTML, logo, percebe-se vrias tags HTML.

Nas linhas 16 at a linha 31 foi definido um scriptlet que produz um contedo dinmico para informar se uma pessoa maior de idade ou no.

Nas linhas 18 e 19 se obtm os parmetros nome e idade atravs do objeto implcito

15

Ilustrao 17: Criando arquivo JSP

'request'.

Nas linhas a seguir so impressos na tela as informaes necessrias.

5. Execute o projeto e acesse a URL 'http://localhost:8084/OlaMundoWeb/maioridade.jsp?nome=Josefina&idade=44' e ento verifique se resultou na imagem abaixo:

6. Teste com outras idades e veja os resultados.

16

Ilustrao 18: Arquivo 'maioridade.jsp'

Ilustrao 19: Tela gerada pelo arquivo JSP

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

Exerccio

Implemente uma pgina JSP que receba 5 nmeros inteiros como parmetro e exiba na tela qual o maior nmero.

Dica: caso voc deseje criar um mtodo a parte para encontrar o maior nmero necessrio implement-lo em um scriptlet diferenciado que deve ser circundado com ''. Por exemplo:

Verifique o prottipo abaixo para este exerccio:

Aprofundado mais em JSP

O objetivo das nossas aulas apenas ter uma noo bsica do funcionamento da tecnologia JSP, porm, caso deseje conhecer mais sobre o desenvolvimento de pignas JSP complexas necessrio realizar um estudo aprofundado sobre Expression Language, Taglibs e JSTL.

Referncias




17

Ilustrao 20: Prottipo do exerccio

6 Model View Controller (MVC)

Servlet ou JSP?

Colocar todo HTML dentro de uma Servlet realmente no nos parece a melhor ideia. O que acontece quando precisamos mudar o design da pgina? O designer no vai saber Java para editar a Servlet, recompil-la e coloc-la no servidor.

Imagine usar apenas JSP. Ficaramos com muito scriptlet, que muito difcil de dar manuteno.

Uma ideia mais interessante usar o que bom de cada um dos dois.

O JSP foi feito apenas para apresentar o resultado, e ele no deveria fazer acessos ao banco de dados e nem fazer a instanciao de objetos. Isso deveria estar em cdigo Java, na Servlet.

O ideal ento que a Servlet faa o trabalho rduo, a tal da lgica de negcio. E o JSP apenas apresente visualmente os resultados gerados pela Servlet. A Servlet ficaria ento com a lgica de negcios (ou regras de negcio) e o JSP tem a lgica de apresentao.

O padro arquitetural Model View Controller (MVC) foi criado com o objetivo de separar os cdigos de tela dos cdigos que representam as regras de negcio do sistema em ambiente Web.

Dando nomes a cada uma das partes da arquitetura MVC dizemos que quem responsvel por apresentar os resultados na pgina web chamado de Apresentao (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 so chamadas de Modelo (Model).

Esses trs formam um padro arquitetural chamado de MVC, ou Model View Controller. Ele pode sofrer variaes de diversas maneiras. O que o MVC garante a separao de tarefas, facilitando assim a reescrita de alguma parte, e a manuteno do cdigo.

Para auxiliar a implementao do padro MVC vrios frameworks Java MVC foram desenvolvidos:

JSF (especificao padro do Java EE);

Struts;

Vraptor;

18

Ilustrao 21: Arquitetura MVC

Stripes;

Jboss Seam;

Spring MVC;

Wicket.

Referncias




7 JavaServer Faces 2.0 (JSF)

Entre os vrios frameworks MVC Java, o JavaServer Faces (JSF) o de maior destaque simplesmente por fazer parte da especificao do Java EE.

O JSF consiste em uma API para representao de componentes e gerncia do seu estado, manipulao de eventos, validao no lado do servidor, e converso de dados; definio de navegao de pginas e suporte a internacionalizao. Para isso, ele baseado no uso de bibliotecas de tags que produzem um ambiente web rico.

O JSF apenas uma especificao, assim como a mquina virtual Java. Ou seja, ns encontramos no mercado diversas implementaes do JSF. Abaixo as implementaes mais famosas:

MyFaces

ICEfaces

RichFaces

Oracle ADF

PrimeFaces

OpenFaces

A imagem 22 ilustra o funcionamento bsico do JSF. O cliente faz um requisio HTTP ao Web Container que ir processar as regras de negcio em cdigo Java e produzir uma resposta em HTML.

19

O ciclo de vida de uma requisio JSF ilustrado na figura 23:

20

Ilustrao 22: Fluxo do JSF

Ilustrao 23: Ciclo de vida do JSF

Referncias


The Java EE Tutorial

http://docs.oracle.com/javaee/6/tutorial/doc/

8 Introduo ao PrimeFaces

A implementao 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 implementaes JSF.

A documentao do PrimeFaces pode ser encontrada em: http://www.primefaces.org/documentation.html

No site a seguir possvel visualizar vrios componentes do PrimeFaces e sua implementao, acesse: http://www.primefaces.org/showcase-labs/ui/home.jsf

Integrando o JSF numa aplicao 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 prtica dirigida que faa a mesma verificao 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 boto direito no nome do projeto e ento selecione 'Propriedades';

2. Em 'Categorias' selecione 'Frameworks' e ento clique no boto 'Adicionar';

21

Ilustrao 24: Adicionando Framework

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

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

22

Ilustrao 25: Adicinando framework JSF

Ilustrao 26: Definindo framework PrimeFaces

5. Perceba que foram criados os '/web/index.xhml', '/web/welcomePrimeFaces.xhml' e '/web/WEB-INF/web.xml'. Os dois primeiros so exemplos do JSF e PrimeFaces, eles no sero teis para ns, se deseja pode apagar. J o '/web/WEB-INF/web.xml' arquivo de extrema importncia e ser explicado mais a frente.

6. Vamos criar nosso formulrio para entrada de dados, ento, clique com o boto direito do mouse em 'Pginas Web' e selecione 'Novo->Outros';

7. Em 'Escolher Tipo de Arquivo' selecione 'Categorias = JavaServer Faces' e 'Tipos de Arquivos = Pgina JSF', ento clique em 'Prximo';

8. Em 'Nome e Localizao' defina o 'Nome do Arquivo = maioridadeJSF', mantenha os demais campos com preenchimento padro e clique em 'Finalizar';

23

Ilustrao 27: Criando pigina JSF

Ilustrao 28: Definindo nome do arquivo JSF

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

Entendendo o arquivo

Trata-se de um arquivo no formato XHTML, pois, o JSF exige que as pginas estejam neste formato. Para conhecer mais sobre o padro XHTML acesse: http://www.w3schools.com/html/html_xhtml.asp;

Na linha 4 definido a taglib bsica do JSF. O uso desta taglib percebida em '' e '';

Os arquivos XHTML do JSF segue a estrutura normal de uma pgina HTML, porm, o contedo dinmico ser implementado com taglibs do JSF.

10. Antes de modificarmos o arquivo 'maioridadeJSF.xhml' precisamos informar que esta ser a pgina inicial do nosso sistema, para isso, faa as modificaes abaixo no arquivo 'web.xml';

24

Ilustrao 30: Arquivo web.xml

Ilustrao 29: Arquivo maioridadeJSF.xhtml

Entendendo o arquivo 'web.xml'

Este o arquivo de configurao de uma aplicao Java Web;

Nas linhas 3 6 definido um parmetro do sistema que indica que o projeto est no estgio de desenvolvimento;

Nas linhas 7 15 definido o servlet do JSF e que o acesso s pginas do JSF ser feito atravs do padro de URL '/faces/*';

Nas linhas 16 20 configurado o tempo de sesso, neste caso est definido 30 minutos;

A linha 22 onde voc precisa modificar, ela indica qual pgina inicial do sistema.

11. Vamos implementar um formulrio que solicita que o usurio informe o nome e idade para verificar se a pessoa possui maioridade. Faa as modificaes da acordo com a imagem abaixo:

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 requisio;

Na linha 11 definido um painel que ser renderizado como uma 'div'. Perceba que no atributo 'header' se define um cabealho para o painel;

Nas linhas 12 e 14 so definidos os campos de entrada de texto;

Na linha 16 definido um boto.

12. Execute o projeto e veja o resultado. At agora temos um formulrio que ainda no faz nada.

25

Ilustrao 31: Modificando o arquivo maioridadeJSF.xhtml

13. Vamos dar vida ao nosso formulrio, para isso, precisamos definir o 'Controller' da nossa tela. Observao, o JSF nomeia o objetos que representam o 'Controller' como 'ManagedBeand'.

14. Acesse a aba 'Projetos', clique com o boto 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 'Prximo';

26

Ilustrao 32: Pgina HTML gerada pelo PrimeFaces

Ilustrao 33: Criando classe Controller

16. Em 'Nome e Localizao' defina o 'Nome da Classe = MaioridadeController', 'Escopo = session', mantenha os demais campos com o preenchimento padro e clique em 'Finalizar'.

17. O arquivo 'MaioridadeController.java' foi criado, modifique para que fique como na figura 35.

Entendendo a classe MaioridadeController Na linha 14 a anotao '@ManagedBean' define que a classe em questo um

'Controller' do JSF;

Na linha 15 a anottao '@SessionScoped' define que os objetos deste 'Controller' sero mantidos no escopo de sesso;

Nas linhas 19 e 20 so definidos os atributos que iro mapear os valores dos campos do formulrios;

Nas linhas 22 e 23 so definidos atributos que iro auxiliar na exibio do resultado da verificao;

Na linha 30 definido, no construtor da classe, que inicialmente no para ser exibido o resultado;

Nas linhas 36 44 disparado o evento que contm a lgica de negcio.

27

Ilustrao 34: Criando classe Controller

18. O arquivo 'maioridadeJSF.xhtml' tambm precisa ser modificado para dar vida a tela. Faa as modificaes conforme a figura 36.

Entendendo as modificaes no arquivo Nas linhas 13 e 15 so definidos os atributos 'value' para os campos nome e idade.

Agora o valor dos campos esto amarrados com os atributos do 'Controller';

Nas linhas 17 e 18 foi definido a ao que ser executada quando o usurio clicar no boto, atravs do atributo 'actionListener' que est vinculado ao mtodo 'verificar' do 'Controller'. O atributo 'update' define qual parte da tela que ser atualizada aps o clique no boto, neste caso o painel 'pnlResultado';

Nas linhas 20 26 contm o painel que ir exibir o resultado da verificao da idade;

A taglib '' um utilitrio para customizar o contedo que ser exibido na tela;

28

Ilustrao 35: Classe MaioridadeController

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 no.

19. Execute o projeto e teste;

29

Ilustrao 36: Modificando o arquivo maioridadeJSF.xhmtl

Ilustrao 37: Testando implementao

20. Muito bom, muito legal e funcional. Mas, os campos nome e idade deveriam ser obrigatrios. Como fazer isso atravs do JSF? Faa as modificaes destacadas em vermelho no arquivo 'maioridadeJSF.xhtml', conforme a imagem 38.

Entendendo as modificaes no arquivo

Na linha 13 definido um componente de mensagem que ter seu contedo atualizado automaticamente;

Nas linhas 15 e 18 so definidos que os campos nome e idade so requeridos.

21. Teste e veja os resultados.

30

Ilustrao 38: Modificando o arquivo maioridadeJSF.xhtml

Ilustrao 39: Testando a validao dos campos

22. Outra validao que voc pode testar quanto a idade aceitar somente inteiros. Automaticamente o JSF faz a converso da String do campo do formulrio para o tipo do atributo que est vinculado. Tente colocar uma String para idade e veja que j existe uma validao padro.

23. Chegamos ao fim desta primeira prtica do JSF. O que achou? Difcil! Sim, mas muito poderoso para o desenvolvimento de sistemas Web. Acostume, s estamos comeando.

9 Desenvolvendo um CRUD com PrimeFaces

Este captulo tem o objetivo de ser um guia dirigido para a construo de uma aplicao complexa com o JSF PrimeFaces alm de praticar a integrao de uma aplicao Java EE com o banco de dados via JPA. Nestas prtica dirigida ser considerado a boa prtica da separao das camadas de negcio e persistncia, alm de colocar em prtica o padro arquitetural MVC.

Deseja-se um sistema que faa o cadastro de clientes de uma empresa. Os dados do cliente que se deseja persistir so nome, cpf, sexo, data de nascimento, cidade, salrio, telefone e email. Apenas os campos salrio, telefone e e-mail no so obrigatrios. Deve-se considerar que no se cadastra clientes menores de idade.

Vale ressaltar que a empresa em questo possui lojas apenas nas cidades: Januria-MG, Montes

31

Ilustrao 40: Testando validao de converso de valores

Claros-MG, Volta Redonda-RJ, Rio de Janeiro-RJ, So Caetano-SP e Campinas-SP; os clientes esto vinculados somente a estas cidades.

Veja os prottipos a seguir para se orientar na construo do sistema:

32

Ilustrao 41: Tela inicial do sistema

Ilustrao 42: Tela de cadastro de clientes

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 Definies' marque a opo 'Ativar injeo de contextos e dependncias';

33

Ilustrao 43: Tela de clientes cadastrados

Ilustrao 44: Criando projeto Web

2 Aps 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 conexo ficou 'jdbc:derby://localhost:1527/CADASTRO_CLIENTE' com usurio 'root' e senha 'root';

4 Adicione o driver JDBC na pasta '/web/WEB-INF/lib';

5 Crie uma unidade de persistncia para o banco de dados criado;

6 Crie os seguintes pacotes para separar os cdigos das camadas do sistema:

7 Faa uma anlise do domnio da aplicao, 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:

34

Ilustrao 45: Driver JDBC na pasta web/WEB-INF/lib

Ilustrao 46: Estrutura de diretrios

Ilustrao 47: Diagrama de classe do projeto

8 Implemente a classe de entidade 'Cliente';

9 [CRIANDO TEMPLATE] Vamos criar um template padro para todas a telas do sistema, para isso, existe o conceito de Facelets no JSF. Desejamos um template em que tenha um cabealho, painel lateral esquerdo e um painel para os contedos na rea central. Siga os passos:

9.1 Na aba 'Projetos' clique com o boto 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 ento clique em 'Prximo';

9.3 Em 'Nome e Localizao' defina 'Nome do Arquivo = template' e o 'Estilo de Layout' correspondente, conforme imagem 49:

35

Ilustrao 48: Classe de entidade Cliente

9.4 Foi criado o arquivo 'template.xhtml'. Faa as modificaes 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 cabealho da pgina. Veja que foram criados arquivos CSS padres que voc pode modificar.

Nas linhas 16 18 definido o espao reservado para a parte superior da tela. Observe que a tag '' define um mdulo que pode ser utilizado pelas telas que implementarem o template.

Nas linhas 22 27 definido a barra lateral esquerda do template. A tag '' define um Link que redireciona para outras pginas.

Nas linhas 29 31 definido o espao reservado para o contedo das pginas.

36

Ilustrao 49: Criando template de telas

10 [CRIANDO TELA INICIAL] Agora que temos o template criado vamos criar nossa primeira pgina 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 boto 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 ento clique em 'Prximo';

37

Ilustrao 50: Template das telas do projeto

10.3 Em 'Nome e Localizao' defina 'Nome do Arquico = index', em 'Modelo' escolha o arquivo 'template.xhmtl' e ento clique em 'Finalizar';

38

Ilustrao 51: Criando tela que utiliza o template

Ilustrao 52: Criando index.xhtml

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

Entendendo o arquivo 'index.xhtml'

Este arquivo ser a pgina inicial do sistema, ele aproveita o modelo do arquivo 'template.xhtml' e s definido o contedo especfico;

Na linha 9 definido que este arquivo tem como referncia o 'template.xhmtl';

Na linha 10 definido o contedo que ir ocupar a rea 'content', ou seja, a rea que fica o contedo da pgina.

10.5 Execute e veja o resultado:

39

Ilustrao 53: Arquivo index.xhtml

Ilustrao 54: Tela inicial do projeto

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 criao da tela 'index.xhtml', crie com o nome 'cadastroCliente.xhtml';

11.1 Crie tambm 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 modificao. Portanto, faa as modificaes a seguir:

12.1 Modifique a classe 'Controller' conforme imagem 55.

40

Ilustrao 55: Classe CadastroClienteController

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 mtodo que ir carregar a tela e conduzir a tela de cadastro de clientes. A 'String' retornada se refere pgina que deve ser carregada;

Nas linhas 39 43 definido o mtodo 'salvar' que ser invocado com o clique no boto 'Salvar'. Esta ainda uma implementao somente para teste, para se verificar se a aplicao est funcionando;

Nas linhas 48 57 definido um mtodo para validar se o campo foi preenchido sem espaos em branco.

12.2 Modifique o aquivo 'cadastroCliente.xhtml' como na figura 56:

41

Ilustrao 56: Arquivo cadastroCliente.xhtml

Entendendo o arquivo 'cadastroCliente.xhtml'

Na linha 15 18 definido o campo 'Nome' do tipo '' foi definido como 'required' e com a validao de espao em branco 'validator'.

Nas linhas 23 e 24 so definidos os botes para ao de salvar e limpar a tela.

12.3 Modificaes no arquivo 'template.xhtml'. Vamos precisar modificar como o menu chama a tela de cadastro de clientes, para isso, faa as modificaes destacadas na imagem 57.

Entendendo a modificao

Modifique apenas o 'commandLink' que aciona a tela de cadastro de clientes. importante definir a mudana de tela como 'ajax=false' para evitar problemas de navegao futura. Neste caso o mtodo 'iniciarTela' do 'Controller' ser acionado.

12.4 Execute o projeto e faa testes:

42

Ilustrao 57: Modificando o arquivo template.xhtml

Ilustrao 59: Teste com sucesso Ilustrao 58: Teste com campo no preenchido

13 [Campo CPF] O campo CPF especial, pois, precisa de mscara. Mas, o JSF facilita nossa vida, veja como simples definir a mscara. Acrescente o trecho de cdigo abaixo campo 'Nome' no arquivo 'cadastroCliente.xhtml':

Entendendo a mudana:

A tag 'inputMask' semelhante ao 'inputText' a diferena fundamental que definido a mscara no atributo 'mask'.

13.1 Execute o projeto e veja se a mscara funciona corretamente.

14 [Campo Sexo] Neste campo ser utilizado o componente do tipo 'Radio Button'. Adicione o trecho de cdigo abaixo do campo CPF.

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

43

Ilustrao 60: Teste de campo preenchido com sucesso

Ilustrao 61: Cdigo do campo CPF

Ilustrao 62: Cdigo campo Sexo

15 [Campo Data de Nascimento] Neste campo ser exibido um calendrio para que o usurio selecione a data ou ento a digite, para isto utilize o componente '' como no trecho de cdigo que deve ser colocado aps o campo 'Sexo':

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

44

Ilustrao 63: Tela parcial de cadastro de cliente

Ilustrao 64: Cdigo campo Data de Nascimento

17 [Campo Salrio] Neste campo o valor ser tratado pelo padro '#,###.00'. Acrescente o trecho de cdigo abaixo do campo 'Data Nascimento':

18 [Campo Telefone] Neste campo utilizado uma mscara para o telefone, adicione o trecho de cdigo abaixo do campo 'Salro'.

19 [Campo Email] Este campo ser um 'inputText' normal, ele ser validade na camada de negcio. Adicione o trecho de cdigo aps o campo 'Telefone':

45

Ilustrao 65: Cdigo campo Cidade

Ilustrao 66: Cdigo campo Salrio

Ilustrao 67: Cdigo campo Telefone

20 Aps seguir todos estes passos temos a tela vista na figura 69.

46

Ilustrao 68: Cdigo campo Email

Ilustrao 69: Tela de cadastro de cliente validando todos os campos obrigatrios

21 [Camada de Persistncia] Vamos agora implementar os cdigos necessrios para persistir os dados do cliente no banco de dados.

21.1 Crie a classe 'GerenciadoEntidade' que ser um utilitrio para obter a conexo com o banco de dados:

21.2 Crie a classe 'ClienteDAO' que ser a responsvel por persistir os dados da classe 'Cliente'.

22 [Camada de Negcio] Esta camada responsvel por garantir a consistncia das regras de negcio do seu sistema. Neste cenrio as seguintes regras de negcio sero validadas para salvar um cliente:

O CPF do cliente deve ser vlido;

No 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 salrio, se informado, no pode ser negativo;

22.1 Para validar o CPF vamos utilizar uma biblioteca chamada 'Stella' que serve para fazer algumas validaes 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 tambm adicione ao classpath do projeto. Para mais informaes acesse a wiki do projeto:

47

Ilustrao 70: Classe GerenciadorEntidade

Ilustrao 71: Classe ClienteDAO

https://github.com/caelum/caelum-stella/wiki/Validadores-core.

22.2 Modifique a classe 'ClienteDAO', adicione o mtodo 'buscar' na classe, conforme imagem abaixo:

22.3 Crie a classe 'ClienteBO' e crie o mtodo 'salvar' que tem o propsito de salvar um cliente observando as regras de negcio:

48

Ilustrao 72: Mtodo Buscar em ClienteDAO

Ilustrao 73: Classe ClienteBO

22.4 Modifique o mtodo 'Salvar' do 'Controller':

22.5 Teste e veja os resultados:

49

Ilustrao 74: Modificaes no mtodo salvar do Controller

Ilustrao 75: Tela de cadastro de cliente j em estado funcional

23 Muito legal, mas, seria interessante o usurio ter um retorno enquanto se processa a requisio 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 cdigo no arqivo 'template.xhtml' logo no incio da tag '':

Entendendo a modificao

A tag '' define qual ao ser executada quando se inicia e finaliza uma requisio ajax.

23.3 A tag '' define uma tela no estilo 'modal' que impede que o usurio modifique a tela principal e exibe o arquivo '.gif'.

23.4 Teste e veja os resultados.

24 [Tela de Clientes Cadastrados] Aps criar a tela de cadastro de clientes, voc j tem condies de evoluir sozinho. Construa voc mesmo a tela de visualizao de clientes cadastrados, conforme a imagem 77. Para implementar uma tabela utilize o componente '', para conhecer exemplos de tabela acesse: 'http://www.primefaces.org/showcase-labs/ui/datatableHome.jsf'.

50

Ilustrao 76: Modificao no arquivo template.xhtml para adicionar imagem de carregando

Ilustrao 77: Tela de clientes cadastrados

10 Concluso

Nesta apostila voc aprendeu os conceitos bsicos de uma aplicao Java Web (Servlets e JSP), foi apresentado ao desenvolvimento seguindo o padro arquitetural MVC e a utilizao do framework JSF baseado na implementao PrimeFaces com AJAX integrado. Tambm colocou em prtica o desenvolvimento de uma aplicao Web com acesso ao banco de dados via framework JPA.

Foi possvel compreender que o desenvolvimento Web mais complexo que uma aplicao desktop convencional, por acrescentar uma srie de fatores que o programador deve ter conhecimento.

Pratique e conhea mais as possibilidades do desenvolvimento de aplicaes ricas em Java utilizando frameworks como o JSF.

51

1 Introduo2 Estrutura bsica de uma aplicao Java Web3 Fundamentos do Java EE4 Tecnologia Java Servlets5 JavaServer Pages (JSP)6 Model View Controller (MVC)7 JavaServer Faces 2.0 (JSF)8 Introduo ao PrimeFaces9 Desenvolvendo um CRUD com PrimeFaces10 Concluso

apostila java web primefaces

Documents