TECNOLOGIA EM ANLISE E DESENVOLVIMENTO DE SISTEMAS LTP IV PROF.

HLDER SEIXAS LIMA

Apostila Java Web

Sumrio
1 Introduo........................................................................................................................................3 2 Estrutura bsica de uma aplicao 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 Introduo ao PrimeFaces.............................................................................................................21 9 Desenvolvendo um CRUD com PrimeFaces................................................................................31 10 Concluso......................................................................................................................................51

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

Ilustrao 1: Criar novo projeto Web 4

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

Ilustrao 2: Criar novo projeto Web - Nome e localizao 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:<endereo do servidor>:<porta do servidor>/OlaMundoWeb'.

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:

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

Ilustrao 5: index.jsp 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 6: Tela Ol Mundo 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'.

Ilustrao 7: Arquivo de distribuio

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

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 Informaes 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 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:

Ilustrao 8: Servlets 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:

Ilustrao 9: Criando Servlet 10

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

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

Ilustrao 11: Criando Servlet

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.

Ilustrao 12: Classe OlaMundoServlet 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:

Ilustrao 13: Mtodo processRequest 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 tratase 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

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:

Ilustrao 14: Pgina HTML gerada pelo Servlet 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:

Ilustrao 15: Exemplo maior de idade

13

Ilustrao 16: Exemplo menor de idade

Referncias Informaes retiradas de: Apostila FJ-21 da Caelum www.caelum.com.br/apostilas

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 <% e %> . 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: <% out.println(nome); %> 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

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): <%= nome %><br> 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:

Ilustrao 17: Criando arquivo JSP 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

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

Ilustrao 18: Arquivo 'maioridade.jsp'

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:

Ilustrao 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%. 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: <%! String concatenarNome(String nome, String sobrenome){ return nome + sobrenome; } %> Verifique o prottipo abaixo para este exerccio:

Ilustrao 20: Prottipo do 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 Informaes 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 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.

Ilustrao 21: Arquitetura MVC 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

Stripes; Jboss Seam; Spring MVC; Wicket.

Referncias Informaes retiradas de: Apostila FJ-21 da Caelum www.caelum.com.br/apostilas

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

Ilustrao 22: Fluxo do JSF O ciclo de vida de uma requisio JSF ilustrado na figura 23:

Ilustrao 23: Ciclo de vida do JSF 20

Referncias Informaes retiradas de: 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 http://www.primefaces.org/documentation.html pode ser encontrada em:

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

Ilustrao 24: Adicionando Framework 21

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

Ilustrao 25: Adicinando framework JSF 4. Na aba 'Componentes' selecione o 'PrimeFaces' e clique em 'Ok'.

Ilustrao 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 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';

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

Ilustrao 28: Definindo nome do arquivo JSF 23

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

Ilustrao 29: Arquivo maioridadeJSF.xhtml 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 '<h:head>' e '<h:body>'; 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';

Ilustrao 30: Arquivo web.xml 24

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:

Ilustrao 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 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 32: Pgina HTML gerada pelo PrimeFaces 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';

Ilustrao 33: Criando classe Controller

26

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

Ilustrao 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 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 35: Classe MaioridadeController

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 '<c:if >' um utilitrio para customizar o contedo 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 no.

Ilustrao 36: Modificando o arquivo maioridadeJSF.xhmtl

19. Execute o projeto e teste;

Ilustrao 37: Testando implementao 29

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.

Ilustrao 38: Modificando o arquivo maioridadeJSF.xhtml 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.

Ilustrao 39: Testando a validao dos campos 30

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.

Ilustrao 40: Testando validao de converso de valores 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

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:

Ilustrao 41: Tela inicial do sistema

32 Ilustrao 42: Tela de cadastro de clientes

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

Ilustrao 44: Criando projeto Web

33

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

Ilustrao 45: 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:

Ilustrao 46: Estrutura de diretrios 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:

Ilustrao 47: Diagrama de classe do projeto

34

8 Implemente a classe de entidade 'Cliente';

Ilustrao 48: 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 9.2 9.3 Na aba 'Projetos' clique com o boto direito do mouse no nome do projeto, e selecione 'Novo->Outros'; Em 'Escolher Tipo de Arquivo' selecione 'Categorias = JavaServer Faces' e 'Tipos de Arquivos = Modelo de Facelets', e ento clique em 'Prximo'; Em 'Nome e Localizao' defina 'Nome do Arquivo = template' e o 'Estilo de Layout' correspondente, conforme imagem 49:

35

Ilustrao 49: Criando template de telas 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 '<ui:insert name=top>' 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 '<p:commandLink >' define um Link que redireciona para outras pginas. Nas linhas 29 31 definido o espao reservado para o contedo das pginas.

36

Ilustrao 50: Template das telas do projeto 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 51: Criando tela que utiliza o template 10.3 Em 'Nome e Localizao' defina 'Nome do Arquico = index', em 'Modelo' escolha o arquivo 'template.xhmtl' e ento clique em 'Finalizar';

Ilustrao 52: Criando index.xhtml

38

10.4

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

Ilustrao 53: Arquivo index.xhtml Entendendo o arquivo 'index.xhtml' 10.5 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. Execute e veja o resultado:

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

Ilustrao 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 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. Modifique o aquivo 'cadastroCliente.xhtml' como na figura 56:

12.2

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

Ilustrao 57: Modificando o arquivo template.xhtml 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. Execute o projeto e faa testes:

12.4

Ilustrao 59: Teste com sucesso

Ilustrao 58: Teste com campo no preenchido

42

Ilustrao 60: Teste de campo preenchido com sucesso

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':

Ilustrao 61: Cdigo do campo CPF Entendendo a mudana: 13.1 14 A tag 'inputMask' semelhante ao 'inputText' a diferena fundamental que definido a mscara no atributo 'mask'. Execute o projeto e veja se a mscara funciona corretamente.

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

Ilustrao 62: Cdigo campo Sexo 14.1 At agora nossa tela de cadastro de cliente tem o seguinte visual. Teste e veja:

43

Ilustrao 63: Tela parcial de cadastro de cliente 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 '<p:calendar >' como no trecho de cdigo que deve ser colocado aps o campo 'Sexo':

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

44

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

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

Ilustrao 67: Cdigo campo Telefone 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 68: Cdigo campo Email 20 Aps seguir todos estes passos temos a tela vista na figura 69.

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

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:

Ilustrao 70: Classe GerenciadorEntidade 21.2 Crie a classe 'ClienteDAO' que ser a responsvel por persistir os dados da classe 'Cliente'.

Ilustrao 71: Classe ClienteDAO 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

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

Ilustrao 72: Mtodo Buscar em ClienteDAO 22.3 Crie a classe 'ClienteBO' e crie o mtodo 'salvar' que tem o propsito de salvar um cliente observando as regras de negcio:

Ilustrao 73: Classe ClienteBO 48

22.4

Modifique o mtodo 'Salvar' do 'Controller':

Ilustrao 74: Modificaes no mtodo salvar do Controller 22.5 Teste e veja os resultados:

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

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 '<h:body >':

Ilustrao 76: Modificao no arquivo template.xhtml para adicionar imagem de carregando Entendendo a modificao A tag '<p:ajaxStatus >' define qual ao ser executada quando se inicia e finaliza uma requisio ajax.

23.3 A tag '<p:dilog >' define uma tela no estilo 'modal' que impede que o usurio modifique a tela principal e exibe o arquivo '.gif'. 23.4 24 Teste e veja os resultados. [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 '<p:datatable >', para conhecer exemplos de tabela acesse: 'http://www.primefaces.org/showcase-labs/ui/datatableHome.jsf'.

Ilustrao 77: Tela de clientes cadastrados 50

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