O documento apresenta JavaServer Faces (JSF), uma especificação Java para construção de interfaces de usuário baseadas em componentes. Descreve os principais componentes do JSF, incluindo Facelets, JavaBeans, tags e metadados. Também discute o padrão MVC e fornece exemplos práticos de projetos JSF simples e com o framework PrimeFaces.

1. JavaServer FacesJavaServer Faces
Prof. Alex Dias Camargo
alexcamargo@ifsul.edu.br
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
SUL-RIO-GRANDENSE
CÂMPUS BAGÉ
PROGRAMAÇÃO PARA WEB II

2. 2
I. Plano de aula
Na aula anterior foi visto:
 Mapeamento Objeto-Relacional (ORM)
 Java Persistence API (JPA)
PWII - JavaServer Faces

3. 3
I. Plano de aula
Nesta aula será apresentado:
 Padrão de arquitetura de software MVC
 Definições e aplicação de JSF
PWII - JavaServer Faces

4. 4
1. Introdução
JavaServer Faces (JSF) é uma especificação Java para a
construção de UI (interface de usuário) baseada em componentes.
Utiliza arquivos XML como modelos de visão ou Facelets views.
 Permite que o desenvolvedor crie UIs através de um conjunto
de componentes pré-definidos.
 Associa os eventos do lado cliente com os manipuladores dos
eventos do lado do servidor. Utiliza Ajax em alguns de seus
componentes.
 JSF não é um framework! Struts e Spring, por exemplo, são
frameworks JSF.
 Diferente de outras abordagens, possui um processamento de
requisição dividido em seis fases.
PWII - JavaServer Faces

5. 5
1. Introdução
PWII - JavaServer Faces
Figura. Diagrama de fluxo do ciclo de vida do JSF

6. 6
2. JSF e MVC
O JSF traz consigo o MVC a fim de separar a responsabilidade de
cada elemento a ser desenvolvido para o sistema web.
 O MVC é um padrão de arquitetura de software em 3 camadas
(Model, View, Controller).
 Model: responsável pela leitura e escrita de dados, também de
suas validações. Camada de lógica da aplicação.
 View: faz a exibição dos dados, sendo ela por meio de um
HTML ou XML. Camada de apresentação ou visualização.
 Controller: responsável por receber todas as requisições do
usuário. Camada de controle.
PWII - JavaServer Faces

7. 7
2. JSF e MVC
PWII - JavaServer Faces
Figura. Arquitetura: Modelo, Visão e Controle

8. 8
2. JSF e MVC
PWII - JavaServer Faces
Nota. Diálogo de camadas

9. 9
2. JSF e MVC
PWII - JavaServer Faces
Nota. Arquitetura: Modelo, Visão e Controle no JSF

10. 10
2. JSF e MVC
PWII - JavaServer Faces
Figura. Arquitetura: Modelo, Visão e Controle no JSF

11. 11
3. Componentes
Principais componentes que formam o JSF:
 Facelets (páginas XHTML): representam a interface do
sistema e são transformados em HTML.
PWII - JavaServer Faces

12. 12
3. Componentes
PWII - JavaServer Faces
Figura. Componentes: Facelets

13. 13
3. Componentes
Principais componentes que formam o JSF:
 Facelets (páginas XHTML): representam a interface do
sistema e são transformados em HTML.
 Classes Java (JavaBeans): são representações OO das
entidades manipuladasnos Facelets.
PWII - JavaServer Faces

14. 14
3. Componentes
PWII - JavaServer Faces
Figura. Componentes: JavaBeans

15. 15
3. Componentes
Principais componentes que formam o JSF:
 Facelets (páginas XHTML): representam a interface do
sistema e são transformados em HTML.
 Classes Java (JavaBeans): são representações OO das
entidades manipuladasnos Facelets.
 Tags: permitem a escrita de Facelets de forma declarativa.
PWII - JavaServer Faces

16. 16
3. Componentes
PWII - JavaServer Faces
Figura. Componentes: Tags

17. 17
3. Componentes
Principais componentes que formam o JSF:
 Facelets (páginas XHTML): representam a interface do
sistema e são transformados em HTML.
 Classes Java (JavaBeans): são representações OO das
entidades manipuladasnos Facelets.
 Tags: permitem a escrita de Facelets de forma declarativa.
 Metadados: Configuram a aplicação e podem ser tanto
anotações quanto descrições XML.
PWII - JavaServer Faces

18. 18
3. Componentes
PWII - JavaServer Faces
Figura. Componentes: Metadados

19. 19
3. Componentes
Principais componentes que formam o JSF:
 Facelets (páginas XHTML): representam a interface do
sistema e são transformados em HTML.
 Classes Java (JavaBeans): são representações OO das
entidades manipuladasnos Facelets.
 Tags: permitem a escrita de Facelets de forma declarativa.
 Metadados: Configuram a aplicação e podem ser tanto
anotações quanto descrições XML.
 Principais arquivos de um projeto: Descritor
(WEB-INF/web.xml) e Facelet (index.xhtml).
PWII - JavaServer Faces

20. 20
3. Componentes
PWII - JavaServer Faces
Figura. Componentes: Principais arquivos (Descritor)

21. 21
3. Componentes
PWII - JavaServer Faces
Figura. Componentes: Principais arquivos (Facelet)

22. 22
4. Exemplo prático
Criando um projeto: Hello from Facelets. Acompanhar o exemplo
abaixo:
PWII - JavaServer Faces Figura. Criação de um projeto básico com JSF

23. 23
4. Exemplo prático
Primeira aplicação em JSF 2.0. Acompanhar o exemplo
disponibilizado no link abaixo:
 https://thiagom.wordpress.com/2011/01/26/199/
PWII - JavaServer Faces
Figura. Resultado esperado: primeira aplicação em JSF

24. 24
5. Exercícios
1. Crie um projeto de uma calculadora utilizando o JSF e o
NetBeans. O programa desenvolvido deve permitir a realização de,
no mínimo, as 4 operações básicas da matemática: adição,
subtração, multiplicação e divisão. Um exemplo de view é exibido
na figura abaixo.
PWII - JavaServer Faces
Figura. Resultado esperado: calculadora em JSF

25. 25
6. Framework PrimeFaces
PrimeFaces é uma biblioteca de componentes de interface gráfica
para as aplicações web baseadas em JSF.
 Apresenta mais de 100 componentes, validações client side e
temas prontos. Todos os componentes são open source.
 Opção de layout responsivo. Uso em celulares e tablets.
 PrimeFaces namespace: xmlns:p="http://primefaces.org/ui"
 Quem usa: FOX, Mercedes, Ebay, Nike, DETRAN/RS.
 Frameworks similares: RichFaces e IceFaces.
PWII - JavaServer Faces

26. 26
6. Framework PrimeFaces
PWII - JavaServer Faces
Figura. PrimeFaces: Website oficial
Fonte: https://www.primefaces.org/showcase/index.xhtml

27. 27
7. Exemplo prático
Primeira aplicação em JSF 2.0 com PrimeFaces 2.2.
Acompanhar o exemplo disponibilizado no link abaixo:
 https://thiagom.wordpress.com/2011/02/12/primefaces-2-2-co
m-jsf-2-0/
PWII - JavaServer Faces
Figura. Resultado esperado: primeira aplicação em JSF com PrimeFaces

28. 28
Referências
GEARY, D. M. Core JavaServer Faces. 3ª Edição São Paulo: Alta
Books, 2012.
LUCKOW, D. H.; MELO, A. A. Programação Java para Web:
aprenda a desenvolver uma aplicação financeira pessoal
com as ferramentas mais modernas da plataforma Java. 2ª
Edição. São Paulo: Novatec, 2015.
SIERRA, K. Use a cabeça! JSP & Servlets. 2ª Edição, São Paulo:
Alta Books, 2008.
PWII - JavaServer Faces