Desenvolvimento Web com Java Server
Faces
Bruno Balint de Andrade

http://www.arquiteturadesistemas.com.br

1
AGENDA

Apresentação
Histórico Desenvolvimento Web com Java

O que é JSF?
Porque usar JSF?

Conceitos JSF
Exercícios com J...
JSF
Apresentação

Bruno Balint de Andrade - Consultor de Sistemas

7 anos desenvolvendo com Java
Certificações Java : OCJA...
JSF
Ambiente de Desenvolvimento

Eclipse Kepler com plugin Jboss Tools

Apache Tomcat 6 e 7
JDK 6.0

http://www.arquitetur...
JSF
Desenvolvimento Web

Aplicações web tornam-se mais e mais importantes no nosso mercado
Maior complexidade para desenvo...
lJSF
Desenvolvimento Web (Timeline Java)

http://www.arquiteturadesistemas.com.br

6
lJSF
Desenvolvimento Web (Arquitetura Centrada em Páginas)

http://www.arquiteturadesistemas.com.br

7
lJSF
Desenvolvimento Web (Arquitetura Centrada em Páginas)

http://www.arquiteturadesistemas.com.br

8
lJSF
Desenvolvimento Web (Model 2 - MVC)

http://www.arquiteturadesistemas.com.br

9
JSF
Surgiram diversos frameworks MVC baseado no Model 2
Struts 1 e 2
Spring MVC
Tapestry
E muitos outros...
•

E ainda con...
JSF
Surgiram diversos frameworks MVC baseado no Model 2(Problemas)

Ainda assim continuavamos com alguns problemas
•

A pl...
JSF

E a solução foi?

JAVA SERVER FACES

http://www.arquiteturadesistemas.com.br

12
JSF

Mas o que é JAVA SERVER
FACES?

http://www.arquiteturadesistemas.com.br

13
JSF
JavaServer Faces é:
… uma especificação
JSR 127 (JSF 1.0 e JSF 1.1) – 2004
JSR 252 (JSF 1.2) – 2006 (JAVA EE 5)
JSR 31...
JSF
JavaServer Faces é:

… um framework MVC
Um conjunto de APIs para:

Representar

componentes

UI

e

gerenciar

os

est...
JSF
JavaServer Faces é:

… um framework baseado em componentes de interface com
o usuário
Construído sob o conceito de com...
JSF
JavaServer Faces é:

… um framework baseado em componentes de interface com
o usuário
Existem diversas bibliotecas de ...
JSF
JavaServer Faces é:

… um framework dirigido a eventos
Possui um modelo para manipulação de eventos

Componentes geram...
JSF
JavaServer Faces é:

… um padrão de mercado
JAVA EE 5,6,7

Suporte a big players:
Sun,Apache,Oracle,IBM,BEA,JBoss,Borl...
JSF

Porque usar JavaServer
Faces?

http://www.arquiteturadesistemas.com.br

20
JSF
Porque usar JavaServer Faces?

É um padrão de mercado
Presente nas especificações JAVA EE 5,6,7

Fácil de usar, e prod...
Richfaces

http://www.arquiteturadesistemas.com.br

22
Richfaces

http://www.arquiteturadesistemas.com.br

23
Richfaces

http://www.arquiteturadesistemas.com.br

24
JSF
Porque usar JavaServer Faces?

Suporte cross-browser
Segurança

Cross-site scripting, session hijacking
OWASP(Open Web...
JSF
Porque usar JavaServer Faces?

http://www.arquiteturadesistemas.com.br

26
JSF

Criando Projeto Web

http://www.arquiteturadesistemas.com.br

27
JSF

http://www.arquiteturadesistemas.com.br

28
JSF

http://www.arquiteturadesistemas.com.br

29
JSF

http://www.arquiteturadesistemas.com.br

30
JSF

http://www.arquiteturadesistemas.com.br

31
JSF
Adicionando as bibliotecas do JSF

Selecione o projeto e pressione alt+enter para acessar as propriedades do
projeto

...
JSF
Adicionando as bibliotecas do JSF

1
2

http://www.arquiteturadesistemas.com.br

33
JSF
Adicionando as bibliotecas do JSF

http://www.arquiteturadesistemas.com.br

34
JSF
Adicionando as bibliotecas do JSF

http://www.arquiteturadesistemas.com.br

35
JSF
Adicionando as bibliotecas do JSF

http://www.arquiteturadesistemas.com.br

36
JSF
Adicionando as bibliotecas do JSF

http://www.arquiteturadesistemas.com.br

37
JSF
Adicionando as bibliotecas do JSF

http://www.arquiteturadesistemas.com.br

38
JSF
Adicionando as bibliotecas do JSF

http://www.arquiteturadesistemas.com.br

39
JSF
Adicionando as bibliotecas do JSF

http://www.arquiteturadesistemas.com.br

40
JSF
Adicionando as bibliotecas do JSF

http://www.arquiteturadesistemas.com.br

41
JSF
Adicionando as bibliotecas do JSF

http://www.arquiteturadesistemas.com.br

42
JSF
Adicionando as bibliotecas do JSF

http://www.arquiteturadesistemas.com.br

43
JSF
Adicionando as bibliotecas do JSF

http://www.arquiteturadesistemas.com.br

44
JSF
Adicionando as bibliotecas do JSF

http://www.arquiteturadesistemas.com.br

45
JSF
Adicionar o FacesServlet no web.xml

<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.w...
JSF
Adicionar o arquivo no faces-config.xml dentro de WEB-INF

http://www.arquiteturadesistemas.com.br

47
JSF
Adicionar o arquivo no faces-config.xml dentro de WEB-INF

http://www.arquiteturadesistemas.com.br

48
JSF
Criar o arquivo index.jsp dentro de WebContent

http://www.arquiteturadesistemas.com.br

49
JSF
Criar o arquivo index.jsp dentro de WebContent

http://www.arquiteturadesistemas.com.br

50
JSF
Index.jsp : Adicionar taglibs do JSF

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http:...
JSF
Criar o arquivo index.jsp dentro de WebContent

http://www.arquiteturadesistemas.com.br

52
JSF
Adicionar o servidor tomcat no Eclipse

http://www.arquiteturadesistemas.com.br

53
JSF
Adicionar o servidor tomcat no Eclipse

http://www.arquiteturadesistemas.com.br

54
JSF
Adicionar o servidor tomcat no Eclipse

http://www.arquiteturadesistemas.com.br

55
JSF
Adicionar o servidor tomcat no Eclipse

http://www.arquiteturadesistemas.com.br

56
JSF
Acessar http://localhost:8080/helloworld/index.faces

http://www.arquiteturadesistemas.com.br

57
JSF
Conceitos chave do JSF
Componentes
Renderers
Managed-beans
Converters
Validators
Navegação
Ciclo de Vida(Request LifeC...
JSF
Componentes

Separa a lógica de negócio da apresentação
Cada view é composta por uma hierarquia de componentes

http:/...
JSF
Componentes
• Componentes podem ser adicionados na view programaticamente ou
via template (JSP por default, ou Facelet...
JSF
Renderers
Responsável por exibir o componente no cliente
São agrupados em render kits
Efetua o encode (gera o HTML do ...
JSF

Exercício: Desenhe um formulário conforme a imagem abaixo.
Dica: para deixar componentes na mesma linha utilize os co...
JSF
Managed Beans
Controllers, “Linkam” a view ao modelo
Funciona como representação da view
São acessadas via Expression ...
JSF
Managed Beans
Como representaríamos esse formulário do exercício anterior
através de uma classe Java?

http://www.arqu...
JSF
Managed Beans

No JSF 1.2 , é necessário registrarmos um Managed Bean para que o
framework saiba que ele existe
Um Man...
JSF
Managed Beans

A configuração de um Managed Bean se resume basicamente ao
código abaixo:

http://www.arquiteturadesist...
JSF
Managed Beans
Um

Managed

Bean

vive

de

acordo

conversação.

Application, Session,
Request, None

http://www.arqui...
JSF
Managed Beans
Mas como “linkar” nosso MB aos componentes do nosso formulário?

http://www.arquiteturadesistemas.com.br...
JSF
Managed Beans

http://www.arquiteturadesistemas.com.br

69

lwww.primeinformatica.com.br
JSF
Managed Beans
Lembra da Expression Language(EL) ?

http://www.arquiteturadesistemas.com.br

70
JSF
Managed Beans

Detalhando uma EL

http://www.arquiteturadesistemas.com.br

71
JSF
Exercício
Utilizando o formulário do exercício anterior, verificar no Managed
Bean

se

os

dados

foram

preenchidos
...
JSF
Exercício
Criar um formulário de cadastro de endereço, com os seguintes
campos: Rua, Complemento, Cidade ,Bairro e CEP...
JSF
Analisando o padrão MVC

http://www.arquiteturadesistemas.com.br

74
JSF
Analisando o padrão MVC

Os atributos
deveriam ser
declarados em uma
classe de modelo

http://www.arquiteturadesistema...
JSF
Analisando o padrão MVC

Endereço.java

http://www.arquiteturadesistemas.com.br

EndereçoBean.java

76
JSF
Acesso via EL:

#{endereçoBean.endereco.rua}

enderecoBean.getEndereco().getRua()

http://www.arquiteturadesistemas.co...
JSF

JSF Expression Language

http://www.arquiteturadesistemas.com.br

78
JSF
JSF EL
Semelhante ao JSTL porém usa-se #{} no lugar de ${}
Pode-se executar métodos no modelo através de expressões
Nã...
JSF
Alguns Exemplos

http://www.arquiteturadesistemas.com.br

80
JSF
Sintaxe:

http://www.arquiteturadesistemas.com.br

81
JSF
Sintaxe:

http://www.arquiteturadesistemas.com.br

82
JSF
Escopos e variáveis:

http://www.arquiteturadesistemas.com.br

83
JSF
Escopos e variáveis:

http://www.arquiteturadesistemas.com.br

84
JSF

http://www.arquiteturadesistemas.com.br

85
JSF
Exercícios:
• Adicionar um atributo List (ArrayList) e inserir 5 elementos. Acessar o elemento
da última posição na li...
JSF
Exercícios:
• Criar uma classes de modelo chamada Usuario com os atributos
(nome,sobrenome e idade), o construtor do b...
JSF
JSF EL(Bindings)
Em JSF nós temos 3 tipos de bindings:
Value Binding
Method Binding
Component Binding

http://www.arqu...
JSF
JSF EL(Bindings)
Value Binding
Ligamos a propriedade de um bean como valor do componente

http://www.arquiteturadesist...
JSF
JSF EL(Bindings)
Method binding
Ligamos o método como uma “ação” do componente

http://www.arquiteturadesistemas.com.b...
JSF
JSF EL(Bindings)
Component Binding
Ligamos a propriedade de um bean como representação do
componente na view

http://w...
JSF
Exercício
Criar uma página com dois componentes, um input (HtmlInputText) e
um botão (HtmlCommandButton)(“OK”). Se o v...
JSF

Controle de Navegação

http://www.arquiteturadesistemas.com.br

93
JSF
Navegação
Navegação de uma página para outra
Simples e poderoso
Pode ser disparado através de um evento
Resultado (out...
JSF
Navegação

http://www.arquiteturadesistemas.com.br

95
JSF

É possível também navegar entre as páginas sem a necessidade de um
Managed Bean, de maneira estática:

http://www.arq...
JSF
Na navegação do JSF, é possível utilizar wildcard(*) para páginas de
origem(from-view-id) :

http://www.arquiteturades...
JSF
Exercício

Voltando ao formulário de login: Efetue uma lógica de autenticação
no método loginBean.logar() : Caso o log...
JSF

Modelo de componentes

http://www.arquiteturadesistemas.com.br

99
JSF
Modelo de Componentes

Mensagens
Converters
Validators

Eventos e Listeners
Componentes Básicos

http://www.arquitetur...
JSF
Mensagens

São as mensagens de informação ou erro exibidas ao usuário da
aplicação. Qualquer parte da aplicação ( Mana...
JSF
Mensagens

Mensagens da aplicação

http://www.arquiteturadesistemas.com.br

102
JSF
Mensagens

Mensagens dos inputs:

http://www.arquiteturadesistemas.com.br

103
JSF
Exercícios

Voltando ao formulário de login: Adicione mensagens de erro aos
inputs de login, e torne-os obrigatórios.
...
JSF
Converters

Tem por finalidade converter e/ou formatar objetos do tipo Java para
String e vice-versa
O JSF já nos forn...
JSF
Converters

http://www.arquiteturadesistemas.com.br

106
JSF
Exercício

Faça alguns testes com os converters padrões do JSF, utilize o artigo
que

está

no

diretório

do

treinam...
JSF
Implementando seu próprio converter

Devemos implementar a interface javax.faces.convert.Converter
Registar nosso conv...
JSF
Implementando seu próprio converter: Exemplo

http://www.arquiteturadesistemas.com.br

109

lwww.primeinformatica.com....
JSF
Implementando seu próprio converter: Exemplo : facesconfig.xml – Mapeando o Converter

Aplicando o Converter em um com...
JSF
Implementando seu próprio converter: Exibindo o resultado no
Bean

http://www.arquiteturadesistemas.com.br

111
JSF
Exercício

Implementar um converter que formate um CPF entrado pelo
usuário, ou seja, formatar um CPF como “6465577203...
JSF
Desafio
Implementar um converter para o caso a seguir:

Entrada

Saída:
http://www.arquiteturadesistemas.com.br

113
JSF
Validators

Tem a responsabilidade de garantir que o valor entrado pelo
usuário seja válido

Você pode validar tantos ...
JSF
Validator padrão para length

http://www.arquiteturadesistemas.com.br

115
JSF
Validators

Devemos implementar a interface javax.faces.validator.Validator

Registrar o nosso validador no faces-conf...
JSF
Exemplo :Validator

Criação de um validador que impede o envio de caracteres especiais para um
atributo.

http://www.a...
JSF
Exemplo :Validator

Criação de um validador que impede o envio de caracteres especiais para um
atributo. faces-config....
JSF
Exemplo :Validator

Criação de um validador que impede o envio de caracteres especiais para um
atributo. Utilizar a ta...
JSF
Exercícios:

Implementar um validador que não permita que uma data entrada pelo usuário seja
maior que a data atual

I...
JSF
Desafio:

Implementar um validador que validade se o CPF digitado está correto

http://www.arquiteturadesistemas.com.b...
JSF
Eventos e Listeners

O JSF usa o modelo JavaBeans event/listener (também utilizado no Swing).
Componentes geram evento...
JSF
Eventos e Listeners – Exemplo Value Change Listener

http://www.arquiteturadesistemas.com.br

123
JSF
Eventos e Listeners – Exemplo Action Listener

http://www.arquiteturadesistemas.com.br

124
JSF
Exercício
• Criar um componente do tipo <h:inputText> para armazenar um nome e um
botão do tipo <h:commandButton>. Cas...
JSF
Plus: Detalhando os escopos do JSF 1.2
• Request Scope: todos os objetos armazenados no escopo
request, sobrevivem ape...
JSF
Plus: Detalhando os escopos do JSF 1.2
• Session Scope: todos os objetos e atributos vinculados ao
ManagedBean, sobrev...
JSF
Plus: Detalhando os escopos do JSF 1.2
• Application Scope: tudo armazenado neste escopo permanece
enquanto a aplicaçã...
JSF
DAO(Data Access Object) + JSF

http://www.arquiteturadesistemas.com.br

129
JSF
Referências sobre PhaseListener

http://hslife.com.br/2010/12/18/controle-de-acesso-com-phaselistener/

http://www.arq...
JSF
Referências sobre Facelets
• http://www.slideshare.net/drspockbr/justjava2008-facelets-presentation
• http://jsftutori...
JSF
Obrigado
LinkedIn
• http://br.linkedin.com/in/brunobalintdeandrade

Site:
• http://arquiteturadesistemas.com.br
Pagina...
Upcoming SlideShare
Loading in …5
×

Apresentação jsf 1_2

559 views
474 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
559
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Apresentação jsf 1_2

  1. 1. Desenvolvimento Web com Java Server Faces Bruno Balint de Andrade http://www.arquiteturadesistemas.com.br 1
  2. 2. AGENDA Apresentação Histórico Desenvolvimento Web com Java O que é JSF? Porque usar JSF? Conceitos JSF Exercícios com JSF 1.2 (RichFaces,MyFaces) Novos Recursos do JSF 2 Exercícios com JSF2 (PrimeFaces) http://www.arquiteturadesistemas.com.br 2
  3. 3. JSF Apresentação Bruno Balint de Andrade - Consultor de Sistemas 7 anos desenvolvendo com Java Certificações Java : OCJA , SCJP, OCWCD http://www.arquiteturadesistemas.com.br 3
  4. 4. JSF Ambiente de Desenvolvimento Eclipse Kepler com plugin Jboss Tools Apache Tomcat 6 e 7 JDK 6.0 http://www.arquiteturadesistemas.com.br 4
  5. 5. JSF Desenvolvimento Web Aplicações web tornam-se mais e mais importantes no nosso mercado Maior complexidade para desenvolver • • • • • • Javascript CSS Ajax Validação Efeitos, usabilidade Etc Exigência mais elevada do cliente durantes os anos • • Interfaces ricas (fácil de usar) Prazos cada vez mais curtos http://www.arquiteturadesistemas.com.br 5
  6. 6. lJSF Desenvolvimento Web (Timeline Java) http://www.arquiteturadesistemas.com.br 6
  7. 7. lJSF Desenvolvimento Web (Arquitetura Centrada em Páginas) http://www.arquiteturadesistemas.com.br 7
  8. 8. lJSF Desenvolvimento Web (Arquitetura Centrada em Páginas) http://www.arquiteturadesistemas.com.br 8
  9. 9. lJSF Desenvolvimento Web (Model 2 - MVC) http://www.arquiteturadesistemas.com.br 9
  10. 10. JSF Surgiram diversos frameworks MVC baseado no Model 2 Struts 1 e 2 Spring MVC Tapestry E muitos outros... • E ainda continuam surgindo mais http://www.arquiteturadesistemas.com.br 10
  11. 11. JSF Surgiram diversos frameworks MVC baseado no Model 2(Problemas) Ainda assim continuavamos com alguns problemas • A plataforma Java não nos fornecia recursos para desenvolver aplicações web com produtividade • • • Tinhamos dificuldade para integrar diversos frameworks Falta de um padrão para um framework Web na platafoma Java Ausência de uma API padrão para um framework Web http://www.arquiteturadesistemas.com.br 11
  12. 12. JSF E a solução foi? JAVA SERVER FACES http://www.arquiteturadesistemas.com.br 12
  13. 13. JSF Mas o que é JAVA SERVER FACES? http://www.arquiteturadesistemas.com.br 13
  14. 14. JSF JavaServer Faces é: … uma especificação JSR 127 (JSF 1.0 e JSF 1.1) – 2004 JSR 252 (JSF 1.2) – 2006 (JAVA EE 5) JSR 314 (JSF 2.0 e 2.1) – 2008 (JAVA EE 6 e JAVAEE 7) … um framework MVC … um framework baseado em componentes de interface com o usuário … um framework dirigido a eventos … padrão de mercado … RAD (Rapid Application Development) http://www.arquiteturadesistemas.com.br 14
  15. 15. JSF JavaServer Faces é: … um framework MVC Um conjunto de APIs para: Representar componentes UI e gerenciar os estados destes componentes Manipular eventos e validação de entrada do usuário Dar suporte a internacionalização e acessibilidade Um conjunto de tags JSP para representar componentes JSF em uma página JSP http://www.arquiteturadesistemas.com.br 15
  16. 16. JSF JavaServer Faces é: … um framework baseado em componentes de interface com o usuário Construído sob o conceito de componentes Os componentes são a base para construção da interface com o usuário Existem componentes padrões equivalentes a quase todas as tags HTML e diversos componentes auxiliares http://www.arquiteturadesistemas.com.br 16
  17. 17. JSF JavaServer Faces é: … um framework baseado em componentes de interface com o usuário Existem diversas bibliotecas de componentes disponíveis comerciais e open sources Os componentes são expressos através de tags numa página JSP e posteriormente transformados em HTML http://www.arquiteturadesistemas.com.br 17
  18. 18. JSF JavaServer Faces é: … um framework dirigido a eventos Possui um modelo para manipulação de eventos Componentes geram determinados eventos Efetua uma chamada à um método (ação no servidor) O estado da aplicação web muda devido a um evento disparado pelo usuário Um evento pode ser um click de um botão, focar sobre um input ou mesmo alterar o valor de uma combo-box http://www.arquiteturadesistemas.com.br 18
  19. 19. JSF JavaServer Faces é: … um padrão de mercado JAVA EE 5,6,7 Suporte a big players: Sun,Apache,Oracle,IBM,BEA,JBoss,Borland etc IDEs (Netbeans,Eclipse, Jdeveloper,etc) Implementações (Sun,Apache,IBM,Oracle, …) Conjunto de Componentes (RichFaces,PrimeFaces,Apache MyFaces,...) http://www.arquiteturadesistemas.com.br 19
  20. 20. JSF Porque usar JavaServer Faces? http://www.arquiteturadesistemas.com.br 20
  21. 21. JSF Porque usar JavaServer Faces? É um padrão de mercado Presente nas especificações JAVA EE 5,6,7 Fácil de usar, e produtivo também Abstração para desenvolvimento de aplicações Web Modelo de programação dirigido a eventos (oposto ao modelo HTTP request/response) Baixa de curva de aprendizagem Componentes já prontos http://www.arquiteturadesistemas.com.br 21
  22. 22. Richfaces http://www.arquiteturadesistemas.com.br 22
  23. 23. Richfaces http://www.arquiteturadesistemas.com.br 23
  24. 24. Richfaces http://www.arquiteturadesistemas.com.br 24
  25. 25. JSF Porque usar JavaServer Faces? Suporte cross-browser Segurança Cross-site scripting, session hijacking OWASP(Open Web Application Security Project) Grande atividade da comunidade em fóruns, listas de discussão, blogs, portais, revistas etc. Integração com diversos frameworks Templating Facelets, Sitemesh JSF Templating, Tiles http://www.arquiteturadesistemas.com.br 25
  26. 26. JSF Porque usar JavaServer Faces? http://www.arquiteturadesistemas.com.br 26
  27. 27. JSF Criando Projeto Web http://www.arquiteturadesistemas.com.br 27
  28. 28. JSF http://www.arquiteturadesistemas.com.br 28
  29. 29. JSF http://www.arquiteturadesistemas.com.br 29
  30. 30. JSF http://www.arquiteturadesistemas.com.br 30
  31. 31. JSF http://www.arquiteturadesistemas.com.br 31
  32. 32. JSF Adicionando as bibliotecas do JSF Selecione o projeto e pressione alt+enter para acessar as propriedades do projeto http://www.arquiteturadesistemas.com.br 32
  33. 33. JSF Adicionando as bibliotecas do JSF 1 2 http://www.arquiteturadesistemas.com.br 33
  34. 34. JSF Adicionando as bibliotecas do JSF http://www.arquiteturadesistemas.com.br 34
  35. 35. JSF Adicionando as bibliotecas do JSF http://www.arquiteturadesistemas.com.br 35
  36. 36. JSF Adicionando as bibliotecas do JSF http://www.arquiteturadesistemas.com.br 36
  37. 37. JSF Adicionando as bibliotecas do JSF http://www.arquiteturadesistemas.com.br 37
  38. 38. JSF Adicionando as bibliotecas do JSF http://www.arquiteturadesistemas.com.br 38
  39. 39. JSF Adicionando as bibliotecas do JSF http://www.arquiteturadesistemas.com.br 39
  40. 40. JSF Adicionando as bibliotecas do JSF http://www.arquiteturadesistemas.com.br 40
  41. 41. JSF Adicionando as bibliotecas do JSF http://www.arquiteturadesistemas.com.br 41
  42. 42. JSF Adicionando as bibliotecas do JSF http://www.arquiteturadesistemas.com.br 42
  43. 43. JSF Adicionando as bibliotecas do JSF http://www.arquiteturadesistemas.com.br 43
  44. 44. JSF Adicionando as bibliotecas do JSF http://www.arquiteturadesistemas.com.br 44
  45. 45. JSF Adicionando as bibliotecas do JSF http://www.arquiteturadesistemas.com.br 45
  46. 46. JSF Adicionar o FacesServlet no web.xml <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> http://www.arquiteturadesistemas.com.br 46 lwww.primeinformatica.com.br
  47. 47. JSF Adicionar o arquivo no faces-config.xml dentro de WEB-INF http://www.arquiteturadesistemas.com.br 47
  48. 48. JSF Adicionar o arquivo no faces-config.xml dentro de WEB-INF http://www.arquiteturadesistemas.com.br 48
  49. 49. JSF Criar o arquivo index.jsp dentro de WebContent http://www.arquiteturadesistemas.com.br 49
  50. 50. JSF Criar o arquivo index.jsp dentro de WebContent http://www.arquiteturadesistemas.com.br 50
  51. 51. JSF Index.jsp : Adicionar taglibs do JSF <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> Index.jsp : Adicionar trecho de código abaixo no corpo do arquivo <body> <f:view> <h:outputText value="HelloWorld"/> </f:view> </body> http://www.arquiteturadesistemas.com.br 51
  52. 52. JSF Criar o arquivo index.jsp dentro de WebContent http://www.arquiteturadesistemas.com.br 52
  53. 53. JSF Adicionar o servidor tomcat no Eclipse http://www.arquiteturadesistemas.com.br 53
  54. 54. JSF Adicionar o servidor tomcat no Eclipse http://www.arquiteturadesistemas.com.br 54
  55. 55. JSF Adicionar o servidor tomcat no Eclipse http://www.arquiteturadesistemas.com.br 55
  56. 56. JSF Adicionar o servidor tomcat no Eclipse http://www.arquiteturadesistemas.com.br 56
  57. 57. JSF Acessar http://localhost:8080/helloworld/index.faces http://www.arquiteturadesistemas.com.br 57
  58. 58. JSF Conceitos chave do JSF Componentes Renderers Managed-beans Converters Validators Navegação Ciclo de Vida(Request LifeCycle) http://www.arquiteturadesistemas.com.br 58
  59. 59. JSF Componentes Separa a lógica de negócio da apresentação Cada view é composta por uma hierarquia de componentes http://www.arquiteturadesistemas.com.br 59
  60. 60. JSF Componentes • Componentes podem ser adicionados na view programaticamente ou via template (JSP por default, ou Facelets para melhor desempenho e fácil desenvolvimento) • Componentes são expressos em tags em uma página JSP e em sua maioria são de interface com o usuário • Os componentes padrões são divididos em dois grupos Faces Core <f:view>, <f:loadBundle>, <f:param> HTML wrappers <h:dataTable>, <h:selectOneMenu> http://www.arquiteturadesistemas.com.br 60
  61. 61. JSF Renderers Responsável por exibir o componente no cliente São agrupados em render kits Efetua o encode (gera o HTML do componente) Efetua o decode (seta o componente com os dados da URL query string e do formulário ) Resumindo <h:inputText id=“login” size=“16” /> <input type=“text” id=“myForm:login” name=“myForm:login” size=“16” /> http://www.arquiteturadesistemas.com.br 61
  62. 62. JSF Exercício: Desenhe um formulário conforme a imagem abaixo. Dica: para deixar componentes na mesma linha utilize os componentes h:panelGrid com o atributo columns http://www.arquiteturadesistemas.com.br 62
  63. 63. JSF Managed Beans Controllers, “Linkam” a view ao modelo Funciona como representação da view São acessadas via Expression Language (EL) na jsp http://www.arquiteturadesistemas.com.br 63
  64. 64. JSF Managed Beans Como representaríamos esse formulário do exercício anterior através de uma classe Java? http://www.arquiteturadesistemas.com.br 64
  65. 65. JSF Managed Beans No JSF 1.2 , é necessário registrarmos um Managed Bean para que o framework saiba que ele existe Um Managed Bean é registrado (configurado) no arquivo de configurações do JSF, faces-config.xml. http://www.arquiteturadesistemas.com.br 65
  66. 66. JSF Managed Beans A configuração de um Managed Bean se resume basicamente ao código abaixo: http://www.arquiteturadesistemas.com.br 66
  67. 67. JSF Managed Beans Um Managed Bean vive de acordo conversação. Application, Session, Request, None http://www.arquiteturadesistemas.com.br 67 com seu escopo de
  68. 68. JSF Managed Beans Mas como “linkar” nosso MB aos componentes do nosso formulário? http://www.arquiteturadesistemas.com.br 68
  69. 69. JSF Managed Beans http://www.arquiteturadesistemas.com.br 69 lwww.primeinformatica.com.br
  70. 70. JSF Managed Beans Lembra da Expression Language(EL) ? http://www.arquiteturadesistemas.com.br 70
  71. 71. JSF Managed Beans Detalhando uma EL http://www.arquiteturadesistemas.com.br 71
  72. 72. JSF Exercício Utilizando o formulário do exercício anterior, verificar no Managed Bean se os dados foram preenchidos corretamente. Utilizar System.out.println(<nome_atributo>) no método logar() http://www.arquiteturadesistemas.com.br 72
  73. 73. JSF Exercício Criar um formulário de cadastro de endereço, com os seguintes campos: Rua, Complemento, Cidade ,Bairro e CEP. Utilizar o componente h:inputTextarea para representar o campo “Complemento” Criar o Managed Bean e dentro dele criar todos os campos a serem referenciados nos componentes Submeter o formulário e imprimir os valores no Console http://www.arquiteturadesistemas.com.br 73
  74. 74. JSF Analisando o padrão MVC http://www.arquiteturadesistemas.com.br 74
  75. 75. JSF Analisando o padrão MVC Os atributos deveriam ser declarados em uma classe de modelo http://www.arquiteturadesistemas.com.br 75
  76. 76. JSF Analisando o padrão MVC Endereço.java http://www.arquiteturadesistemas.com.br EndereçoBean.java 76
  77. 77. JSF Acesso via EL: #{endereçoBean.endereco.rua} enderecoBean.getEndereco().getRua() http://www.arquiteturadesistemas.com.br 77
  78. 78. JSF JSF Expression Language http://www.arquiteturadesistemas.com.br 78
  79. 79. JSF JSF EL Semelhante ao JSTL porém usa-se #{} no lugar de ${} Pode-se executar métodos no modelo através de expressões Não é processada imediatamente como JSP EL A partir da JSF 1.2 utiliza-se Unified Expression Language (JSP 2.1) que resolve problemas de incompatibilidade entre a JSF-EL e JSP-EL http://www.arquiteturadesistemas.com.br 79
  80. 80. JSF Alguns Exemplos http://www.arquiteturadesistemas.com.br 80
  81. 81. JSF Sintaxe: http://www.arquiteturadesistemas.com.br 81
  82. 82. JSF Sintaxe: http://www.arquiteturadesistemas.com.br 82
  83. 83. JSF Escopos e variáveis: http://www.arquiteturadesistemas.com.br 83
  84. 84. JSF Escopos e variáveis: http://www.arquiteturadesistemas.com.br 84
  85. 85. JSF http://www.arquiteturadesistemas.com.br 85
  86. 86. JSF Exercícios: • Adicionar um atributo List (ArrayList) e inserir 5 elementos. Acessar o elemento da última posição na lista • Adicionar um atributo Map(HashMap) e inserir 5 elementos. Acessar o elemento dado uma chave. http://www.arquiteturadesistemas.com.br 86
  87. 87. JSF Exercícios: • Criar uma classes de modelo chamada Usuario com os atributos (nome,sobrenome e idade), o construtor do bean deverá iniciar seus atributos. Criar um Managed Bean chamado UsuarioBean que deverá ter um atributo do tipo Usuario. Esse atributo deve ser inicializado no Construtor. Ex: usuario = new Usuario(“bruno”,”andrade”,18) • Criar dois componentes do tipo <h:outputText /> na página com os valores. 1. É maior de 18 anos 2. É menor de 18 anos O primeiro deve ser exibido apenas se o usuario.idade >=18 O segundo deve ser exibido apenas se o usuario.idade <18 Dica: colocar uma condição no atributo rendered do componente visual. Ex : #{usuarioBean.idade > 18} http://www.arquiteturadesistemas.com.br 87
  88. 88. JSF JSF EL(Bindings) Em JSF nós temos 3 tipos de bindings: Value Binding Method Binding Component Binding http://www.arquiteturadesistemas.com.br 88
  89. 89. JSF JSF EL(Bindings) Value Binding Ligamos a propriedade de um bean como valor do componente http://www.arquiteturadesistemas.com.br 89
  90. 90. JSF JSF EL(Bindings) Method binding Ligamos o método como uma “ação” do componente http://www.arquiteturadesistemas.com.br 90
  91. 91. JSF JSF EL(Bindings) Component Binding Ligamos a propriedade de um bean como representação do componente na view http://www.arquiteturadesistemas.com.br 91
  92. 92. JSF Exercício Criar uma página com dois componentes, um input (HtmlInputText) e um botão (HtmlCommandButton)(“OK”). Se o valor do input for maior que 1000, o nome do botão deve mudar para “tente novamente” Altere o exercício anterior para desabilitar o botão caso o valor entrado pelo usuário seja igual a 171 http://www.arquiteturadesistemas.com.br 92
  93. 93. JSF Controle de Navegação http://www.arquiteturadesistemas.com.br 93
  94. 94. JSF Navegação Navegação de uma página para outra Simples e poderoso Pode ser disparado através de um evento Resultado (outcome) de uma Action As regras de navegação são registradas no faces-config.xml http://www.arquiteturadesistemas.com.br 94
  95. 95. JSF Navegação http://www.arquiteturadesistemas.com.br 95
  96. 96. JSF É possível também navegar entre as páginas sem a necessidade de um Managed Bean, de maneira estática: http://www.arquiteturadesistemas.com.br 96
  97. 97. JSF Na navegação do JSF, é possível utilizar wildcard(*) para páginas de origem(from-view-id) : http://www.arquiteturadesistemas.com.br 97
  98. 98. JSF Exercício Voltando ao formulário de login: Efetue uma lógica de autenticação no método loginBean.logar() : Caso o login seja igual a senha entrada pelo usuário, então você deve encaminha-lo para um página de sucesso, caso contrário, limpe os campos e o usuário deve tentar logar novamente na aplicação. http://www.arquiteturadesistemas.com.br 98
  99. 99. JSF Modelo de componentes http://www.arquiteturadesistemas.com.br 99
  100. 100. JSF Modelo de Componentes Mensagens Converters Validators Eventos e Listeners Componentes Básicos http://www.arquiteturadesistemas.com.br 100
  101. 101. JSF Mensagens São as mensagens de informação ou erro exibidas ao usuário da aplicação. Qualquer parte da aplicação ( Managed Beans, Converters, Validators etc) poderá gerar mensagens quando necessário Basicamente existem dois tipos de mensagens de erro Aplicação (lógica de negócios, banco de dados, conexão etc) Inputs (conversão, validação de campos , etc) http://www.arquiteturadesistemas.com.br 101
  102. 102. JSF Mensagens Mensagens da aplicação http://www.arquiteturadesistemas.com.br 102
  103. 103. JSF Mensagens Mensagens dos inputs: http://www.arquiteturadesistemas.com.br 103
  104. 104. JSF Exercícios Voltando ao formulário de login: Adicione mensagens de erro aos inputs de login, e torne-os obrigatórios. Ainda no formulário de login, no método loginBean.logar() : Caso o login seja diferente da senha entrada pelo usuário, exiba uma mensagem de erro da aplicação. http://www.arquiteturadesistemas.com.br 104
  105. 105. JSF Converters Tem por finalidade converter e/ou formatar objetos do tipo Java para String e vice-versa O JSF já nos fornece converters padrões para date / time , inteiros, números e moeda. O JSF nos permite implementar nosso próprio converter http://www.arquiteturadesistemas.com.br 105
  106. 106. JSF Converters http://www.arquiteturadesistemas.com.br 106
  107. 107. JSF Exercício Faça alguns testes com os converters padrões do JSF, utilize o artigo que está no diretório do treinamento( converters.docx ). http://www.arquiteturadesistemas.com.br 107 treinamento_jsf/artigos/
  108. 108. JSF Implementando seu próprio converter Devemos implementar a interface javax.faces.convert.Converter Registar nosso converter no faces-config.xml Informar ao componente JSF qual converter utilizar http://www.arquiteturadesistemas.com.br 108
  109. 109. JSF Implementando seu próprio converter: Exemplo http://www.arquiteturadesistemas.com.br 109 lwww.primeinformatica.com.br
  110. 110. JSF Implementando seu próprio converter: Exemplo : facesconfig.xml – Mapeando o Converter Aplicando o Converter em um componente: http://www.arquiteturadesistemas.com.br 110
  111. 111. JSF Implementando seu próprio converter: Exibindo o resultado no Bean http://www.arquiteturadesistemas.com.br 111
  112. 112. JSF Exercício Implementar um converter que formate um CPF entrado pelo usuário, ou seja, formatar um CPF como “646557720321” entrado pelo usuário para “646.577.203-21” por exemplo. Dica: Utilizar a classe NumberFormat http://www.arquiteturadesistemas.com.br 112
  113. 113. JSF Desafio Implementar um converter para o caso a seguir: Entrada Saída: http://www.arquiteturadesistemas.com.br 113
  114. 114. JSF Validators Tem a responsabilidade de garantir que o valor entrado pelo usuário seja válido Você pode validar tantos objetos como Strings O JSF já nos fornece validadores padrões como required, length e ranges O JSF nos permite implementar nosso próprio validador. http://www.arquiteturadesistemas.com.br 114
  115. 115. JSF Validator padrão para length http://www.arquiteturadesistemas.com.br 115
  116. 116. JSF Validators Devemos implementar a interface javax.faces.validator.Validator Registrar o nosso validador no faces-config.xml. Informar ao componente qual validador utilizar http://www.arquiteturadesistemas.com.br 116
  117. 117. JSF Exemplo :Validator Criação de um validador que impede o envio de caracteres especiais para um atributo. http://www.arquiteturadesistemas.com.br 117 lwww.primeinformatica.com.br
  118. 118. JSF Exemplo :Validator Criação de um validador que impede o envio de caracteres especiais para um atributo. faces-config.xml http://www.arquiteturadesistemas.com.br 118
  119. 119. JSF Exemplo :Validator Criação de um validador que impede o envio de caracteres especiais para um atributo. Utilizar a tag <f:validator> para vincular o validador a um componente. http://www.arquiteturadesistemas.com.br 119
  120. 120. JSF Exercícios: Implementar um validador que não permita que uma data entrada pelo usuário seja maior que a data atual Implementar um validador que valide se o usuário entrou com um email válido http://www.arquiteturadesistemas.com.br 120
  121. 121. JSF Desafio: Implementar um validador que validade se o CPF digitado está correto http://www.arquiteturadesistemas.com.br 121
  122. 122. JSF Eventos e Listeners O JSF usa o modelo JavaBeans event/listener (também utilizado no Swing). Componentes geram eventos, e listeners podem ser registrados para manipular esses eventos Os listeners mais comuns do JSF são: Value-change listener Action Listener http://www.arquiteturadesistemas.com.br 122
  123. 123. JSF Eventos e Listeners – Exemplo Value Change Listener http://www.arquiteturadesistemas.com.br 123
  124. 124. JSF Eventos e Listeners – Exemplo Action Listener http://www.arquiteturadesistemas.com.br 124
  125. 125. JSF Exercício • Criar um componente do tipo <h:inputText> para armazenar um nome e um botão do tipo <h:commandButton>. Caso o usuário digite um nome com mais de 8 caracteres , o botão deve ser habilitado, caso contrário o mesmo deve ser desabilitado. Utilize o evento valueChangeListener para fazer essas verificações http://www.arquiteturadesistemas.com.br 125
  126. 126. JSF Plus: Detalhando os escopos do JSF 1.2 • Request Scope: todos os objetos armazenados no escopo request, sobrevivem apenas a uma submissão ao ciclo de vida do JSF. Exemplo: A cada requisição é criada uma nova instância do bean http://www.arquiteturadesistemas.com.br 126
  127. 127. JSF Plus: Detalhando os escopos do JSF 1.2 • Session Scope: todos os objetos e atributos vinculados ao ManagedBean, sobreviverão durante toda a sessão do usuário. A sessão é definida pelo vinculo do navegador do usuário com o servidor. Desta forma, se o usuário abrir dois navegadores, ele estará criando duas sessões com o servidor.Exemplo: A cada sessão é criada uma nova instância do bean http://www.arquiteturadesistemas.com.br 127
  128. 128. JSF Plus: Detalhando os escopos do JSF 1.2 • Application Scope: tudo armazenado neste escopo permanece enquanto a aplicação estiver executando e é compartilhado entre todos os usuários. É recomendado sempre que for necessário guardar informações que podem ser utilizada por diversas partes da aplicação como parâmetros e também implementar funcionalidades para prover comunicação entre usuários. Exemplo: É criado apenas uma instância do bean na Aplicação http://www.arquiteturadesistemas.com.br 128
  129. 129. JSF DAO(Data Access Object) + JSF http://www.arquiteturadesistemas.com.br 129
  130. 130. JSF Referências sobre PhaseListener http://hslife.com.br/2010/12/18/controle-de-acesso-com-phaselistener/ http://www.arquiteturadesistemas.com.br 130
  131. 131. JSF Referências sobre Facelets • http://www.slideshare.net/drspockbr/justjava2008-facelets-presentation • http://jsftutorials.net/jsf1.2-and-Facelets.html • http://pt.slideshare.net/cejug/anatomia-do-jsf-javaserver-faces http://www.arquiteturadesistemas.com.br 131
  132. 132. JSF Obrigado LinkedIn • http://br.linkedin.com/in/brunobalintdeandrade Site: • http://arquiteturadesistemas.com.br Pagina Facebook: • https://www.facebook.com/ArquiteturaDeSistemas.com.br Email : • bruno.balint@arquiteturadesistemas.com.br http://www.arquiteturadesistemas.com.br 132

×